`

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

    博客分类:
  • 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

 

 

分享到:
评论
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这是个表格 是吧,我在这表格里填充了许多的图片组成了一张大图(下称图1 并且能移动),现在已经把它放在了一个panel里,现在我要在填充的图片上面再加一个标记(标记是个小的图片 .gif)该如何使这个标记绑定到我图1呢?我现在用了popuopanel尝试着加了一个 可当我拖动图1的时候这个标记不随我的移动那个大图而移动 它还是在那个位置 我该怎么处理使她能随我移动图1的时候也能移动呢?
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.

相关推荐

    GWT学习文档

    - **基于组件的UI**:GWT提供了丰富的用户界面组件,如表格、按钮、面板等,可以方便地构建复杂的界面布局。 - **异步通信**:GWT支持AJAX,允许无刷新的页面更新和服务器通信。 - **本地化支持**:内置的国际化...

    gwt反射 http://code.google.com/p/google-gin/wiki/GinTutorial

    标题中的“gwt反射”指的是Google Web Toolkit (GWT) 中的反射机制。GWT 是一个用于构建富互联网应用程序(RIA)的开放源代码Java框架,它允许开发者使用Java编程语言来编写前端应用,然后通过编译器将Java代码转换...

    GWT-ext 布局示例

    在本文中,我们将深入探讨GWT-Ext框架中布局管理器的应用,这是一个基于Google Web Toolkit (GWT) 和 ExtJS 的强大控件库,用于快速开发富互联网应用程序。本系列文章的第三部分主要关注各种布局的实现和使用技巧,...

    gwt-polymer:使用聚合物的 GWT 模块

    我们正在尝试在这个项目中结合 GWT 和 Polymer: : (工作正在进行中)添加聚合物元素使用 Bower 安装新元素,例如core-toolbar元素: cd src/main/webapp/polymerbower install --save Polymer/core-toolbar使用--...

    Ext GWT 2.0: Beginner's Guide

    在布局管理方面,书中详细阐述了Ext GWT的布局系统,包括绝对布局、表格布局、流式布局和边界布局等,帮助开发者根据需求灵活地组织界面元素。此外,还涵盖了数据绑定和远程服务调用,使开发者能有效地与服务器进行...

    GWT简介.docx

    GWT允许开发者使用Java语言来编写客户端的Web应用,并自动生成优化过的JavaScript代码,以确保在各种主流浏览器上运行良好。 GWT的核心特性包括: 1. **Java编程模型**:GWT使用Java作为开发语言,使得开发者可以...

    GWT快速开发(GWT) 是一个Java软件开发框架用于开发类似于Google Maps和Gmail的AJAX应用程序。GWT的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等。你可以用Java编程语言开发你的界面,然后用GWT编译器将Java类转换成适合浏览器执行的...

    - GWT提供了一套丰富的UI组件库,如Button、TextBox、ListBox等,这些组件可以轻松地构建复杂的用户界面。 - 支持事件处理机制,如点击事件、键盘事件等。 4. **远程服务调用(RPC)**: - GWT支持通过远程过程调用...

    java源码:网页表格组件 GWT Advanced Table.zip

    Java 源码:网页表格组件 GWT Advanced Table 是一个基于 Google Web Toolkit(GWT)开发的高级表格组件。GWT 是一个用于构建富互联网应用程序(RIA)的开放源码框架,它允许开发者使用 Java 语言来编写客户端的 ...

    《GWT揭秘》试读:运行调试项目

    《GWT揭秘》试读:运行调试项目 GWT(Google Web Toolkit)是Google推出的一款用于构建高性能、跨浏览器的富互联网应用程序(Rich Internet Applications,RIA)的开发框架。它允许开发者使用Java语言来编写客户端...

    gwt-htmlspec:GWT 支持所有 HTML 元素

    gwt-htmlspec GWT 支持完整的 W3C HTML 规范。 目的 GWT SDK 包含对多种原生 HTML 元素的原生支持。 此支持允许您创建根植于除通用DivElement之外的元素的 UiBinder 定义。 然而,可用元素的多样性并非应有尽有,...

    GWT工具GWT工具GWT工具GWT工具GWT工具GWT工具

    fwefwefwGWT工具GWT工具GWT工具GWT工具GWT工具GWT工具

    GWT中文教程(入门进阶)

    **GWT(Google Web Toolkit)** 是一个由Google开发的开源JavaScript开发框架,它允许Java开发者使用Java语言来编写Web应用程序,并自动生成优化过的JavaScript代码。GWT的主要目标是简化复杂的Web开发过程,提高...

    gwt-asyncgen:自动从code.google.compgwt-asyncgen导出

    GWT AsyncGen是一个简单的Ant任务,没有依赖项,您可以轻松地将其合并到项目中,以完成为FooService GWT RemoteService接口定义生成FooServiceAsync源的烦人的自动化任务。 我们的目标是在这里实现最大程度的简化。 ...

    gwt 练习 gwt学习

    在学习GWT的过程中,练习StockWatcher可以帮助你掌握GWT的核心组件和工作原理。逐步理解并实践这些知识点,你将能够创建更复杂、功能丰富的GWT应用程序。记得在实践中不断尝试、调试和优化,以加深对GWT的理解。

    gwtext学习三部曲

    gwtext是如何与GWT整合,提供增强的组件库和布局管理器的。了解如何在项目中引入gwtext库,并创建第一个gwtext应用。此外,还会讲解gwtext的组件体系,包括按钮、表单、面板、树形视图等基本组件的使用方法。 第二...

    GWT RPC详细例子:代码加文档说明

    GWT(Google Web Toolkit)是Google推出的一款开源的JavaScript开发框架,它允许开发者使用Java语言编写Web应用程序,并自动生成优化的JavaScript代码。RPC(Remote Procedure Call)是GWT中的一个核心特性,用于...

    tessell-gwt-2015:GWT.Create 2015 演示文稿

    7. **用户界面(UI)设计**:GWT提供了一系列丰富的用户界面组件,如按钮、表格、表单等,以及布局管理器,帮助开发者快速构建现代Web界面。 8. **异步通信(RPC)**:GWT支持远程过程调用(RPC),使得客户端可以...

    网页表格组件 GWT Advanced Table

    - **HTML和CSS**:虽然GWT会自动处理一部分布局,但理解基本的HTML和CSS可以帮助你更好地定制表格样式。 - **MVP(Model-View-Presenter)模式**:GWT推荐使用MVP模式进行开发,以分离业务逻辑和视图逻辑。 在...

Global site tag (gtag.js) - Google Analytics