Eclipse Forms: 为胖客户端做的漂亮UI(翻译,第三部分)

baiguomeng

浏览: 963059 次

最近访客更多访客>>

u012363178

wangyy

canofy

深诺7号

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1544)

社区版块

存档分类

高级组件(Complex controls)
Eclipse Forms提供了4个高级组件,这样你能够构建漂亮的UI<wbr></wbr>:expandable composite,section,image hyperlink和form text.让我们依次仔细看看它们每一个.

Expandable composite
在网页中有个普遍的功能就是让你有能力把一部分网页内容用一个按钮<wbr></wbr>来伸缩它.Eclipse Forms提供了这样一个组件:ExpandableCompos<wbr></wbr>ite.

 ExpandableComposite ec = toolkit.createExpandableComposi<wbr></wbr>te(form.getBody<script type="text/javascript"><!--
D(["mb","(), /n     ExpandableComposite.TREE_NODE|/n     ExpandableComposite.CLIENT<WBR>_INDENT);/n ec.setText(&quot;Expandable Composite title&quot;);/n String ctext /u003d &quot;We will now create a somewhat long text so that &quot;+/n &quot;we can use it as content for the expandable composite. &quot;+/n &quot;Expandable composite is used to hide or show the text using the &quot; /n &quot;toggle control&quot;;/n Label client /u003d toolkit.createLabel(ec, ctext, SWT.WRAP);/n ec.setClient(client);/n td /u003d new TableWrapData();/n td.colspan /u003d 2;/n ec.setLayoutData(td);/n ec.addExpansionListener(new ExpansionAdapter() {/n  public void expansionStateChanged(Expansion<WBR>Event e) {/n   form.reflow(true);/n  }/n });</pre>/n<p>这个composite接受一些风格参数来控制它的表现行为<WBR>.TREENODE风格会用树组件中的按钮来伸展或收缩内容,TWISTIE风格则会创建一个方行的按钮.使用EXPANDED,则初始状态是伸展的.如果用COMPACT风格,组件会报告和标题宽度相合适的宽度并且呈现收缩状态.最后,CLIENT_INDENT会使内容与标题对齐(否则<WBR>,内容是按照组件的宽度).</p>/n<p>ExpandableComposite有责任处理按钮组件和标题<WBR>.能扩展和收缩的客户组件必须是expandablecompos<WBR>ite直接的child. 我们需要为组件添加伸展监听器并&quot;通知(reflow)&quot;form在状态改变时.这是因为伸展改变了expandable composite的大小,但是在parent下一次布局前对pa<WBR>rent没有任何影响(因此需要强行告诉它).大体上<WBR>,每次你使form的layout改变时,你需要&quot;reflow<WBR>&quot;这个form.&quot;Reflowing&quot;这个form会让所有组件<WBR>按照新的尺寸布局并更新滚动条./n</p>/n<div>我们的视图现在看起来象这样：</div>/n<div></div>/n<div><img height/u003d/"215/" src/u003d/"http://www.eclipse.org/articles/Article-Forms/images/expandable-closed.gif/" width/u003d/"305/" border/u003d/"0/"><br>图11：一个收缩状态的expandable composite例子</div>/n<div><br>当你点击标题的&quot;+&quot;时,composite伸展出并展示客户:</div>/n<div><img height/u003d/"216/" src/u003d/"http://www.eclipse.org/articles/Article-Forms/images/expandable-open.gif/" width/u003d/"304/" border/u003d/"0/"></div>/n<div>图12：expandable composite呈伸展状态</div>/n<p>expandable composite用到了一个内部layout,这个layout<WBR>实现了Eclipse Forms ILayoutExtension接口.因此你能够把它加到使用T<WBR>ableWrapLayout布局的parent上,就象我们上面例子中做的一样.</p>/n<p><strong><font size/u003d/"4/">段落(Section)</font></strong><br>Eclipse Forms定制的组件中最versatile之一就是Sectio<WBR>n.它继承了expandable composite并介绍了以下的概念：<br>1.分隔条(Separator)-一个能够在标题下创建的separato<WBR>r组件.<br>2.描述(Description)-在标题下的可选的描述.<br>3.标题栏(Title bar)-能在标题下的一个标题栏(注意separator和标题",1]
);

//--></script>(), 
     ExpandableComposite.TREE_NODE|
     ExpandableComposite.CLIENT<wbr></wbr>_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(Expansion<wbr></wbr>Event e) {
   form.reflow(true);
  }
 });

这个composite接受一些风格参数来控制它的表现行为<wbr></wbr>.TREENODE风格会用树组件中的按钮来伸展或收缩内容,TWISTIE风格则会创建一个方行的按钮.使用EXPANDED,则初始状态是伸展的.如果用COMPACT风格,组件会报告和标题宽度相合适的宽度并且呈现收缩状态.最后,CLIENT_INDENT会使内容与标题对齐(否则<wbr></wbr>,内容是按照组件的宽度).

ExpandableComposite有责任处理按钮组件和标题<wbr></wbr>.能扩展和收缩的客户组件必须是expandablecompos<wbr></wbr>ite直接的child. 我们需要为组件添加伸展监听器并"通知(reflow)"form在状态改变时.这是因为伸展改变了expandable composite的大小,但是在parent下一次布局前对pa<wbr></wbr>rent没有任何影响(因此需要强行告诉它).大体上<wbr></wbr>,每次你使form的layout改变时,你需要"reflow<wbr></wbr>"这个form."Reflowing"这个form会让所有组件<wbr></wbr>按照新的尺寸布局并更新滚动条.

我们的视图现在看起来象这样：

图11：一个收缩状态的expandable composite例子

当你点击标题的"+"时,composite伸展出并展示客户:

图12：expandable composite呈伸展状态

expandable composite用到了一个内部layout,这个layout<wbr></wbr>实现了Eclipse Forms ILayoutExtension接口.因此你能够把它加到使用T<wbr></wbr>ableWrapLayout布局的parent上,就象我们上面例子中做的一样.

段落(Section)
Eclipse Forms定制的组件中最versatile之一就是Sectio<wbr></wbr>n.它继承了expandable composite并介绍了以下的概念：
1.分隔条(Separator)-一个能够在标题下创建的separato<wbr></wbr>r组件.
2.描述(Description)-在标题下的可选的描述.
3.标题栏(Title bar)-能在标题下的一个标题栏(注意separator和标题 <script type="text/javascript"></script><wbr></wbr>栏不能同时使用)

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

 Section section = toolkit.createSection(form.getBody(), 
  Section.DESCRIPTION|Section<wbr></wbr>.TITLE_BAR|
  Section.TWISTIE|Section<wbr></wbr>.EXPANDED);
 td = new TableWrapData(TableWrapData.FILL);
 td.colspan = 2;
 section.setLayoutData(td);
 section.addExpansionListener(new ExpansionAdapter() {
  public void expansionStateChanged(Expansion<wbr></wbr>Event 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)
图片超链接是超链接的子类,它在链接文字上面添加了一个图片.这个平常的结合非常有意义<wbr></wbr>.这个组件可以只是一个图片(当没有设置任何文字时),或是图片加链接.图片在正常,hover,激活时的状态都能设置.

下面是一个用图片超链接的例子：

图片14：Eclipse欢迎页面中的form

Form text组件
使标签(labels),超链接,图片和TableWrapLay<wbr></wbr>out相结合,能够创建出复杂和强大的forms.但是仍然有一些事是很难做的<wbr></wbr>.考虑PDE manifest编辑器的例子：

图片15：一个混合了文本,图片和超链接的复杂Eclipse form例子

注意图片,超链接和文本是如何混合的.这里使用单独的标签和超链接组件是很困<wbr></wbr>难的.为了解决这个问题,Eclipse Forms插件提供了一个强大的文本组件,它有以下功能：
识别普通包裹的文本
识别普通文本,但是如果以http://开头的文本以超链接显示
识别象HTML语言一样的文本

在所有模式下,form text组件能识别一个字符串或输入流(input stream).

自动将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被转化为了链接.这个链接是包裹的文本中的一部分<wbr></wbr>-我们不需要创建单独的超链接组件然后试着把它夹在两个标签中间.
因为form text组件能够识别超链接,因此它接收我们前面用过的监听器.当由toolkit创建时,form text会将toolkit的超链接组设置作为新超链接的设置.

分享到：