Eclipse Forms設計漂亮UI之進階組件

進階|設計 　　Eclipse Forms提供了4個進階組件，這樣你能夠構建漂亮的UI:expandable composite,section,image hyperlink和form text.讓我們依次仔細看看它們每一個。

　　Expandable composite

　　在網頁中有個普遍的功能就是讓你有能力把一部分網頁內容用一個按鈕來伸縮它，Eclipse Forms提供了這樣一個組件:ExpandableComposite。

 ExpandableComposite ec = toolkit.createExpandableComposite(form.getBody(),       ExpandableComposite.TREE_NODE|      ExpandableComposite.CLIENT_INDENT);  ec.setText("Expandable Composite title");  String ctext = "We will now create a somewhat long text so that "+  "we can use it as content for the expandable composite. "+  "Expandable composite is used to hide or show the text using the "   "toggle control";  Label client = toolkit.createLabel(ec, ctext, SWT.WRAP);  ec.setClient(client);  td = new TableWrapData();  td.colspan = 2;  ec.setLayoutData(td);  ec.addExpansionListener(new ExpansionAdapter() {   public void expansionStateChanged(ExpansionEvent e) {    form.reflow(true);   }  });

　　這個composite接受一些風格參數來控制它的表現行為.TREENODE風格會用樹組件中的按鈕來伸展或收縮內容,TWISTIE風格則會建立一個方行的按鈕.使用EXPANDED,則初始狀態是伸展的.如果用COMPACT風格,組件會報告和標題寬度相合適的寬度並且呈現收縮狀態.最後,CLIENT_INDENT會使內容與標題對齊(否則,內容是按照組件的寬度).

　　ExpandableComposite有責任處理按鈕組件和標題.能擴充和收縮的客戶組件必須是expandablecomposite直接的child. 我們需要為組件添加伸展監聽器並"通知(reflow)"form在狀態改變時.這是因為伸展改變了expandable composite的大小,但是在parent下一次布局前對parent沒有任何影響(因此需要強行告訴它).大體上,每次你使form的layout改變時,你需要"reflow"這個form."Reflowing"這個form會讓所有組件按照新的尺寸布局並更新捲軸.

　　我們的視圖現在看起來象這樣：
 

圖11：一個收縮狀態的expandable composite例子

　　當你點擊標題的"+"時,composite伸展出並展示客戶:



圖12：expandable composite呈伸展狀態

　　expandable composite用到了一個內部layout,這個layout實現了Eclipse Forms ILayoutExtension介面.因此你能夠把它加到使用TableWrapLayout布局的parent上,就象我們上面例子中做的一樣.

　　段落(Section)

　　Eclipse Forms定製的組件中最versatile之一就是Section.它繼承了expandable composite並介紹了以下的概念：

　　1.分隔條(Separator)-一個能夠在標題下建立的separator組件.

　　2.描述(Description)-在標題下的可選的描述.

　　3.標題列(Title bar)-能在標題下的一個標題列(注意separator和標題欄不能同時使用)

　　下面的代碼和expandable composite代碼例子差不多：

 Section section = toolkit.createSection(form.getBody(),    Section.DESCRIPTION|Section.TITLE_BAR|   Section.TWISTIE|Section.EXPANDED);  td = new TableWrapData(TableWrapData.FILL);  td.colspan = 2;  section.setLayoutData(td);  section.addExpansionListener(new ExpansionAdapter() {   public void expansionStateChanged(ExpansionEvent e) {    form.reflow(true);   }  });  section.setText("Section title");  section.setDescription("This is the description that goes "+       below the title");  Composite sectionClient = toolkit.createComposite(section);  sectionClient.setLayout(new GridLayout());  button = toolkit.createButton(sectionClient, "Radio 1", SWT.RADIO);  button = toolkit.createButton(sectionClient, "Radio 2", SWT.RADIO);  section.setClient(sectionClient);

　　這次我們用了TWISTIE風格,添加了描述並要求有標題列.這個視圖看起來應該象這樣：
 

圖13：一個有標題列和描述的可伸展的section

　　圖片超連結(Image hyperlink)

　　圖片超連結是超連結的子類,它在連結文字上面添加了一個圖片.這個平常的結合非常有意義.這個組件可以只是一個圖片(當沒有設定任何文字時),或是圖片加連結.圖片在正常,hover,啟用時的狀態都能設定.

　　下面是一個用圖片超連結的例子：



圖片14：Eclipse歡迎頁面中的form

　　Form text組件

　　使標籤(labels),超連結,圖片和TableWrapLayout相結合,能夠建立出複雜和強大的forms.但是仍然有一些事是很難做的.考慮PDE manifest編輯器的例子：
 



圖片15：一個混合了文本,圖片和超連結的複雜Eclipse form例子

　　注意圖片,超連結和文本是如何混合的.這裡使用單獨的標籤和超連結組件是很困難的.為瞭解決這個問題,Eclipse Forms外掛程式提供了一個強大的文本組件,它有以下功能：

　　識別普通包裹的文本

　　識別普通文本,但是如果以http://開頭的文本以超連結顯示

　　識別象HTML語言一樣的文本

　　在所有模式下,form text組件能識別一個字串或輸入資料流(input stream).

　　識別普通文本(標籤模式)

FormText formText = toolkit.createFormText(form.getBody(), true);
 td = new TableWrapData(TableWrapData.FILL);
 td.colspan = 2;
 formText.setLayoutData(td);
 String text = "Here is some plain text for the text to render.";
 formText.setText(text, false, false);

　　第二個參數設為false,意思是我們不需要解析html標記,第三個參數設為false,意思是我們不需擴充URLs.

　　自動將URLs轉化為超連結

　　現在我們會在文本中添加一個超連結,並把第3個參數設為true:

FormText formText = toolkit.createFormText(form.getBody(), true);
 td = new TableWrapData(TableWrapData.FILL);
 td.colspan = 2;
 formText .setLayoutData(td);
 String text = "Here is some plain text for the text to render; "+
   this text is at http://www.eclipse.org web site.";
 formText .setText(text, false, true);

　　如果看我們的視圖,會是這樣：
 

圖16：Form text組件將URL自動轉化為超連結

　　URL被轉化為了連結.這個連結是包裹的文本中的一部分-我們不需要建立單獨的超連結組件然後試著把它夾在兩個標籤中間.

　　因為form text組件能夠識別超連結,因此它接收我們前面用過的監聽器.當由toolkit建立時,form text會將toolkit的超連結組設定作為新超連結的設定.