GWT HTML Template ：模板布局&组件自动装配

GWT HTML Template

1.简介

gwt进行html页面开发，要做出好的页面是相对困难的。一种简单的方式是美工完成html页面，程序员在页面对需要放置的组件如按钮，输入框定义一个id,在类中导入html页面，自动id映射填充。

a.使用html文件作为模板，定义页面使用的id
b.装载html页面
c.初始化widget,通过id映射放置到html中

 

2.核心

Template.gwt.xml
HTMLTemplatePanelX : html template类，自动装配widget
ITemplateSource : html模板接口

 

3.Demo

java 代码

1. public class TestApp implements EntryPoint{   
2.        
3.     public void onModuleLoad() {   
4.        
5.         TestHtml html = new TestHtml();   
6.            
7.         RootPanel.get().add(html);   
8.     }   
9.   
10.     static class TestHtml extends HTMLTemplatePanelX{   
11.         public TestHtml(){   
12.             Template template = (Template) GWT.create(Template.class);   
13.             String html = template.getWelcome();   
14.                
15.             TextBox txt1 = new TextBox();   
16.             Button  btn1 = new Button("Click welcome");   
17.                
18.             super.widgets.put("txt1", txt1);   
19.             super.widgets.put("btn1", btn1);   
20.             super.setHtml(html);   
21.         }   
22.            
23.         interface Template extends ITemplateSource{   
24.             /**  
25.              * @gwt.templateUrl template.html  
26.              * @gwt.elementId welcome  
27.              */  
28.             String getWelcome();   //template.html和imageBundle一样，放在相同包下
29.         }   
30.     }   
31. }  

如果想实时修改html，就能获得修改，使用debug模式，实时请求服务器：

java 代码

1. interface htmlTemplate extends ITemplateSource{   
2.        
3.     /**  
4.      * @gwt.templateUrl singleplay.html  
5.      * @gwt.elementId singleplay  
6.      * @gwt.debug html/singleplay.html  
7.      */  
8.     String getSource();   //gwt.debug 后面文件为public下相对路径
9. }  

 

4.地址：http://code.google.com/p/macaufly-gwt-tool/downloads/list

 

 

Good job.

现在做GWT程序界面时更像作SWing或者Winform 。

两种方式解决布局的问题： 1.使用模板 2.将页面内容组件化，组件负责逻辑

除了业务逻辑必须用AJAX实现外，其他的部分（页面的标题，布局等）还是HTML编码结合CSS，最大程度做到对“搜索引擎”和“不完整支持JS浏览器”的友好。

谁能发一个 .war 上来看看！！！

在eclipse中应该如何使用？？？？？？？？

  思路不错。
 
   但并不是适用所有场景。不能适用复杂页面的场景。

   例如：

   有一个页面，有一个 TabPanel ，有三个 Bar ，每个Bar的内容就不能由美工去画了。
   因为 TabPanel是由 GWT 控制的。

   因此，GWT HTML Template 只能适用由简单的页面，也就是没有组件嵌套的页面。

想想，还有一种情况：

    客户选择，要作为一个公共页面，因为多个页面都有查询客户的链接。

    那么客户选择，就只能用纯GWT实现了。

  Flextable这是个表格　是吧，我在这表格里填充了许多的图片组成了一张大图（下称图１　并且能移动），现在已经把它放在了一个panel里，现在我要在填充的图片上面再加一个标记（标记是个小的图片　.gif）该如何使这个标记绑定到我图１呢？我现在用了popuopanel尝试着加了一个　可当我拖动图１的时候这个标记不随我的移动那个大图而移动　它还是在那个位置　我该怎么处理使她能随我移动图１的时候也能移动呢？

确实，html模块更应该着重布局，每个细小部分独立出来开发。