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