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 代码

public class TestApp implements EntryPoint{

    public void onModuleLoad() {

        TestHtml html = new TestHtml();

        RootPanel.get().add(html);
    }

    static class TestHtml extends HTMLTemplatePanelX{
        public TestHtml(){
            Template template = (Template) GWT.create(Template.class);
            String html = template.getWelcome();

            TextBox txt1 = new TextBox();
            Button  btn1 = new Button("Click welcome");

            super.widgets.put("txt1", txt1);
            super.widgets.put("btn1", btn1);
            super.setHtml(html);
        }

        interface Template extends ITemplateSource{
            /**
             * @gwt.templateUrl template.html
             * @gwt.elementId welcome
             */
            String getWelcome();   //template.html和imageBundle一样，放在相同包下
        }
    }
}

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

java 代码

interface htmlTemplate extends ITemplateSource{

    /**
     * @gwt.templateUrl singleplay.html
     * @gwt.elementId singleplay
     * @gwt.debug html/singleplay.html
     */
    String getSource();   //gwt.debug 后面文件为public下相对路径
}

 

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