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

 

 

分享到：

设计模式笔记：好玩的Decorator模式 | gwt spring 完美整合

• 2007-12-03 19:58
• 浏览 5708
• 评论(13)
• 论坛回复 / 浏览 (13 / 9375)
• 分类:Web前端
• 查看更多

评论

13 楼 yongyuan.jiang 2008-05-21  

hehe,HTMLTemplatePanel增强功能，gwt类直接获得模板页面对象。

12 楼 yongyuan.jiang 2008-05-04  

aibozeng 写道

dellsoft 写道

感觉这种方式和wicket 有点相似，看来框架之间都是相互学习的

如果是大的布局，就不用这么麻烦了。

例如：在一个 html中，划分上、左、右三部分。每部分定义一个ID。
在 GWT的入口类，RootPanel.get("id name").add( 相关组件对象 ) 就行了。

是的，大布局上不必使用这样的方法。
主要是一些组件，当然，不用这样的方法，我们也可以通过嵌入iframe形式装载一个模块。

html template主要的作用是，一个widget就是一个html页面。那么一个moudle里面可以用很多个html.
并非一个module就是一个html.

11 楼 aibozeng 2008-04-08  

dellsoft 写道

感觉这种方式和wicket 有点相似，看来框架之间都是相互学习的

如果是大的布局，就不用这么麻烦了。

例如：在一个 html中，划分上、左、右三部分。每部分定义一个ID。
在 GWT的入口类，RootPanel.get("id name").add( 相关组件对象 ) 就行了。

10 楼 dellsoft 2008-03-28  

感觉这种方式和wicket 有点相似，看来框架之间都是相互学习的

9 楼 yongyuan.jiang 2008-03-20  

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

8 楼 纯情小火鸡 2008-03-11  

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

7 楼 aibozeng 2008-03-07  

想想，还有一种情况：

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

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

6 楼 aibozeng 2008-03-07  

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

   例如：

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

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

5 楼 xyxb 2008-03-07  

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

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

4 楼 sheva.wen 2007-12-07  

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

3 楼 yongyuan.jiang 2007-12-07  

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

2 楼 sheva.wen 2007-12-06  

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

1 楼 sheva.wen 2007-12-04  

Good job.