论坛首页 Web前端技术论坛

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

浏览 9362 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-12-03  
GWT

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

 

 

   发表时间:2007-12-04  
Good job.
0 请登录后投票
   发表时间:2007-12-06  
现在做GWT程序界面时更像作SWing或者Winform 。
0 请登录后投票
   发表时间:2007-12-07  
两种方式解决布局的问题: 1.使用模板 2.将页面内容组件化,组件负责逻辑
0 请登录后投票
   发表时间:2007-12-07  
除了业务逻辑必须用AJAX实现外,其他的部分(页面的标题,布局等)还是HTML编码结合CSS,最大程度做到对“搜索引擎”和“不完整支持JS浏览器”的友好。
0 请登录后投票
   发表时间:2008-03-07  
谁能发一个 .war 上来看看!!!

在eclipse中应该如何使用????????
0 请登录后投票
   发表时间:2008-03-07  
  思路不错。
 
   但并不是适用所有场景。不能适用复杂页面的场景。

   例如:

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

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

0 请登录后投票
   发表时间:2008-03-07  
想想,还有一种情况:

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

    那么客户选择,就只能用纯GWT实现了。
0 请登录后投票
   发表时间:2008-03-11  
  Flextable这是个表格 是吧,我在这表格里填充了许多的图片组成了一张大图(下称图1 并且能移动),现在已经把它放在了一个panel里,现在我要在填充的图片上面再加一个标记(标记是个小的图片 .gif)该如何使这个标记绑定到我图1呢?我现在用了popuopanel尝试着加了一个 可当我拖动图1的时候这个标记不随我的移动那个大图而移动 它还是在那个位置 我该怎么处理使她能随我移动图1的时候也能移动呢?
0 请登录后投票
   发表时间:2008-03-20  
确实,html模块更应该着重布局,每个细小部分独立出来开发。
0 请登录后投票
论坛首页 Web前端技术版

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