1. 程式人生 > >TERSUS畫畫一樣開發軟件 顯示元件介紹-容器類顯示元件

TERSUS畫畫一樣開發軟件 顯示元件介紹-容器類顯示元件

軟件開發;管理軟件開發;無代碼軟件開發

TERSUS無代碼手機電腦管理類軟件開發,其中可拖放使用的容器類顯示元件包括:內容顯示塊(Pane)元件、行顯示元件(Row)、列顯示元件(Column)、工具欄元件(Tool bar)、組合元件(Group)

內容顯示塊(Pane)元件:是一個顯示容器,可以做為一個顯示框處理,前端客戶只能看到他屬性設定的效果,除屬性中設定邊距及顏色邊框等可顯示要素外,前端顯示效果中客戶是看不到這個塊的其它內容的。主要的作用:

1、約束了放入其中的其他顯示元件的通用屬性,定義在它上面的屬性如果在其內部放置的其它顯示元件上不進一步定義則自動父層屬性繼承下來。

屬性定義可以直接選中元件在添加html.style或html.styleClass來進行定義,後者定義的是一個CSS樣式組名(具體樣式在項目的樣式文件中定義即可,參考另一篇樣式管理文章),前一個可直接放CSS樣式名和值:

技術分享圖片

2、可以做為主顯示界面中上下左右大框架設計,比如下面設計中可以在一個頁面中放四個顯示塊,四個的大小已拖放過以便於理解,第一個可以做為頭部,放名稱和LOGO圖標,第二個可以是左側菜單內容區,第三個是具體內容區域,第四個是底部顯示比如網頁的版權信息等:

技術分享圖片

行顯示元件(Row):和顯示塊的作用及使用基本一樣,唯一區別是其中放置的顯示元件都將排在一行中顯示在客戶端,除非屬性中設定邊距及顏色邊框等可顯示要素,前端也看不到一個沒屬性的行元件,其主要作用:

1、約束了放入其中的其他顯示元件的通用屬性,同顯示塊作用1;

2、放在列元件中,可以設計一些網格狀顯示的布局(網格狀的顯示也可以采用復雜表格來設計),放在一個列元件中的若幹行中的對應的第一、二、...等元件,自動對齊,按最寬的那個來分配每列的寬度:

技術分享圖片

列顯示元件(Column):主要是為設計網格狀顯示布局而做的,作用主要是與行配合進行設計,同行元件作用2,對列的網格線等進行大小樣式顏色處理可通過列的屬性的設定來完成。設計方法同顯示塊作用1中說明。示列如上圖。

工具欄元件(Tool bar):用於在其中放置多個按鈕或按鈕組元件,好處是可以統一設定一些內部元件的屬性及將多個按鈕歸至一處,比如在一個行元件中,左右都可以放置多個按鈕時,如果右側有3個按鈕,可以將它們放進一個工具欄元件中,對工具欄進行一個“float:right;”的樣式定義,這樣放工具樣款中3個按鈕就顯示在一行的右側了:

技術分享圖片

組合元件(Group):是一個歸類用的容器,好處:

1、將一些顯示元件放在一個組中,開發時查看方便有條理;

2、復用時直接選中組就可以將組中的元件全部復用。

其中以上好處,最大的優勢就是將數據庫表或常用的一些通用功能塊放在一起時用它來建組,以方便查找使用。

技術分享圖片

註意:組元件以上好處其實其他元件也同樣具備,同一個列或行中的元件放在列或行中也可以清楚理解,且復制一個列或行元件,也就將其中所有的內容都復制使用了。所以在實際開發中,不建議使用組元件。

TERSUS畫畫一樣開發軟件 顯示元件介紹-容器類顯示元件