论坛首页 Web前端技术论坛

看看GWT 2.0 新的界面设计 ( 通过配置 xml 进行设计.) UiBinder

浏览 8481 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-12-16   最后修改:2009-12-16
GWT

技术上面的版本更新 1.7 到 2.0 究竟变了什么. 才发现.

 

多了一个UI的界面设计 通过配置 xml 进行界面 设计.

 

在 showcase里面的代码还是用老的办法去写代码..

 

在mail 的demo里面就不是了..而是通过xml进行.

 

在mail 类里面 属性.

 

 写道
@UiField TopPanel topPanel;
@UiField MailList mailList;
@UiField MailDetail mailDetail;
@UiField Shortcuts shortcuts;

 定义几个是UI的属性..

 

在当前目录下面就对应着这些xml

 


命名是以 ui.xml结尾的.

 

内容是gwt的组件.

 

 写道
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:mail='urn:import:com.google.gwt.sample.mail.client'>

<g:DockLayoutPanel unit='EM'>
<g:north size='5'>
<mail:TopPanel ui:field='topPanel' />
</g:north>

<g:center>
<g:SplitLayoutPanel>
<g:west size='192'>
<mail:Shortcuts ui:field='shortcuts' />
</g:west>

<g:north size='200'>
<mail:MailList ui:field='mailList' />
</g:north>

<g:center>
<mail:MailDetail ui:field='mailDetail' />
</g:center>
</g:SplitLayoutPanel>
</g:center>
</g:DockLayoutPanel>

</ui:UiBinder>

 
这样进行定义的.以后这个可以开发可视画的工具了.

 

而且代码也没有以前那么负责了..可以说是相当的精简.

 

因为全都放到xml里面去了..

 

有点像 flex .但是比flex 更加灵活了.

 

里面有很多gwt的组件.

 


想想就是很高兴..用代码来写有些UI 确实比较麻烦.

 

很方便呢.

 

高兴的睡不着了..

 

http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

 

官方的文档提供UIbinder的文档.

 

学习中.

  • 大小: 11.4 KB
  • 大小: 22.7 KB
   发表时间:2009-12-16  
我也觉得这是2.0给开发者带来的最大糖果

另外UIBINDER还有不少方便的地方,比如直接写事件绑定、与ClientBundler结合等等
0 请登录后投票
   发表时间:2009-12-16  
希望gwt多在美化上下功夫
0 请登录后投票
   发表时间:2009-12-17  
确实是福音啊,但是楼主的头像总是。。。
0 请登录后投票
   发表时间:2009-12-18  
忍不住要学下了
0 请登录后投票
   发表时间:2009-12-18  
Gxt 还用不上这些新特性..

uibinder里面可以直接内嵌html代码,这个是在是太方便了....
0 请登录后投票
   发表时间:2009-12-18  
非常不错,都快被复杂的UI界面折腾死了
0 请登录后投票
   发表时间:2009-12-20  

的确值得学习一下了,如果真要学,有本好书要推荐给你,如果不想学,那就算了,嘿嘿。

0 请登录后投票
   发表时间:2009-12-20  
用过ZK,发现ZK有诸多晦涩的地方,看来还是学一下 GWT 吧,最怕做复杂的 UI 界面了
如果谁有好书,就推荐吧,谢谢
0 请登录后投票
   发表时间:2010-07-28  
现在用GWT做UI遇到了一些问题,不知道用UiBinder是否可以解决。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics