Gwt-Ext 的概述 GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点，并通过代码示例来演示该技术的具体实现。本文是该系列的第一部分，将带领您快速入门 GWT-Ext，并演示如何快速搭建 GWT-Ext 的开发环境。 概述 GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT，在 ExtJs 的基础上实现了有排序功能的表格（Grid）、分页、过滤，支持有拖拽功能的树，高度可定制的组合下拉框（Combobox）、目录、对话框、表单（Form）以及功能丰富、强大且易用的 API。 GWT-Ext 拥有 GNU Lesser General Public Licence (LGPL)（请参阅 参考资料），V3.0 的许可证 。因此它是一个非常灵活，允许在开源和商业中应用的控件库。 GWT 的介绍（请参阅 参考资料）已经非常丰富，我们这个系列主要关注在 GWT-Ext 的介绍和应用上。GWT-Ext 是在 GWT 和 ExtJs 的基础上对表现层的进一步封装。我们可以理解 GWT 提供了 Ajax 的一套基础框架，而 ExtJs 提供了以 JavaScript 和 CSS 样式表为基础的非常丰富的表现层接口。那么 GWT-Ext 就是在 GWT 的基础上，将 ExtJs 的 JavaScript 接口映射或者封装为 Java 的接口。在 Java 的环境下开发和调试开发表现层，可以大大提高开发的速度。 回页首 GWT-Ext 开发环境搭建 在这个系列中，将通过示例的方式，一步步地介绍如何搭建一个 GWT-Ext 的开发环境。本章将通过图解与代码结合的方式搭建演示平台框架，并且演示如何部署这个平台到 Tomcat 容器中。 下载开发环境 我们将使用 Eclipse 和插件 Cypal Studio 来搭建控件演示平台。Cypal Stutio 是一个 GWT 成熟的开发工具。它能非常方便地帮助我们搭建 GWT 的开发以及调试环境，并且能够实现编译和打包的工作，省去了开发 GWT 过程中很多繁琐的过程。 需要下载的产品和技术请参阅 参考资源 中的“获得产品和技术”部分。 安装 Cypal Studio 插件 解压 Eclipse 到本地硬盘，同时解压 cypal.studio.for.gwt-1.0.zip 到 Eclipse 的 plugins 目录下。然后解压下载的 gwt-windows-1.5.0.zip 。最后，启动 Eclipse 。 选择 Eclipse 目录 Window >Preferences > Cypal Stutio，填写 GWT 相关的信息如 图 1 所示。 GWT Home 填写 GWT 的解压根目录。如果 Java VM 的要求较高，可以从 512M 提高到 1024M 。如图 1 所示。 图 1. Cypal Studio 配置 创建第一个 GWT-Ext 工程 选择 File > New > Dynamic Web Project, 填写必要信息。Dynamic Web Module version 选择版本 2.4，因为 Cypal Studio 是在 2.4 这个版本上开发的。Configuration 选择 Cypal Studio for GWT。工程名填写 GWTEXTDemo。输入以上信息后，点击 Finish。 图 2. 创建 GWTExt 开发工程 在新创建的工程上点击右键，选择 new-> other. 在 Cypal Studio 下找到并选择 GWT Module 节点。 图 3. 创建 GWT Module 在打开的 Panle 里填写 GWT Module 的信息，主要需要填写的是 GWT Module 所在的包名以及它的类名。 GWT Module 必须实现 com.google.gwt.core .client.EntryPoint 接口。点击 Finish 完成 Module 的创建。 图 4. 填写 GWT Module 信息 新创建的 GWT 开发工程的结构如图 5 所示。 在 public 这个目录下放置图片，JavaScript 脚本，CSS 样式表和每个 GWT module 对应的 html 文件。 DemoControlPanel.gwt.xml 是一个 GWT 工程的配置文件。所有 GWT 的配置信息需要在这里声明。这些配置信息包括 Module 的信息，CSS 样式表的相对路径，我们应用到的 JavaScript 的文件相对路径，和所有异步通信中 Servlet 的映射信息。 在 GWT 的应用规范中，显示层的 Java 代码必须放在以包名 client 结尾的目录或者子目录下，并且不能依赖其它非 client 目录下的 Java 代码。 对其它的服务器端的代码，要放到以 server 结尾的包或者子包当中。 图 5. GWT 开发工程的结构图 以上，是建立 GWT 工程的详细过程，接下来，我们开始创建 ExtJs 的开发文件。 因为 GWT-Ext 依赖于 ExtJs，因此在 GWTEXTDemo 工程的 GWTEXTDemo\src\com\ibm\developworks\demo\public 目录下创建 js 目录，js 目录下创建 ext 目录。解压下载的文件 ext-2.0.2.zip，拷贝解压的文件夹 adapter，resources 和文件 ext-all.js 到工程的 public /js/ext 目录下。上述的两个文件夹和文件包括了 ExtJs 的核心 JavaScript 脚本，CSS 样式表和基本图案。如图 6 所示。 图 6. 工程所需的 ExtJs 开发文件 刷新工程，得到图 7 ExtJs 的目录结构。 图 7. 拷贝 ExtJs 后的目录结构 在 public 目录下创建 DemoControlPanel.css 空文件。解压 gwtext-2.0.5.zip，拷贝 gwtext.jar 到工作空间 WebContent/WEB-INF/lib 目录下。 Gwtext.jar 是我们本系列介绍的核心。他包括了所以 GWT 和 ExtJs 的扩展。在后面的文章中，我们要介绍的 Panel，tree 和拖拽等功能和 API 都在这个 jar 文件中能够找到。现在，我们将 gwtext.jar 放到上述目录下，eclipse 会自动将它设置在 classpath 下。 刷新 WebContent/WEB-INF/lib 目录， 可见 gwtext.jar 已被加入工作空间。 图 8. gwtext.jar 已加入工作空间 为了让 GWTEXTDemo 工程能够引用到 GWT-Ext 和 ExtJs 的开发包，并且应用本工程的 CSS 文件，打开 DemoControlPanel.gwt.xml 文件。加入如下代码。 清单 1. GWT 配置文件 从 XML 中我们可以看到树的根节点对应于 XML 标签 , 根节点下的中间节点对应于 XML 标签 , 叶子节点则对应了 XML 标签 。 在各个 XML 标签中有属性节点，GWT-Ext 可以取得这些节点值并且赋值于各个树中的各个节点。具体的实现介绍如下。 首先，新建一个负责异步通信的 XMLTreeLoader 的实例 loader，他的构造函数如下。 public XMLTreeLoader() 其次，XMLTreeLoader 提供了很多方法来映射 XML 的不同节点。代码清单 11 提供了具体的实例来解释。 清单 11. Tree 的异步数据加载 loader.setDataUrl("data/countries.xml"); loader.setMethod(Connection.GET); loader.setRootTag("countries"); loader.setFolderIdMapping("@id"); loader.setLeafIdMapping("@id"); loader.setFolderTitleMapping("@title"); loader.setFolderTag("team"); loader.setLeafTitleMapping("@title"); loader.setLeafTag("country"); loader.setQtipMapping("@qtip"); loader.setCheckedMapping("@checked"); loader.setIconMapping("@icon"); loader.setAttributeMappings(new String[] { "@rank" }); 方法 setDataUrl 用于设置 XML 映射文件的相对位置，参数 url 是相对于 com.ibm.developmentworks.demo.public 的路径。在本例中，我们在 public 目录下创建了新的 data 目录，同时在该目录下新建 countries.xml 文件。 public void setDataUrl(java.lang.String dataUrl) 方法 setMethod 用于设置通信方法。由于 XMLTreeLoader 是建立在 HTTP 上的异步通信，因此这里有 Connection.GET 和 Connection.POST 两种通信方法。 public void setMethod(Connection.Method method) 方法 setRootTag 用于指定 XML 文件中顶级标签的名字。在本例中，顶级标签是 countries 。对应于树的根节点。 public void setRootTag(java.lang.String rootTag) 方法 setFolderTag（String tag）用于指定 XML 文件中非顶级和最底级标签的名字。在本例中，该标签是 team 。对于树中的目录节点。目录节点可以包含非根节点外的其它任何节点。 public void setFolderTag(java.lang.String folderTag) 方法 setLeafTag 用于指定 XML 文件中最底级标签的名字。在本例中，该标签的名字是 country 。对应于树中的叶子节点。叶子节点下不能再包含其它节点。 public void setLeafTag(java.lang.String leafTag) 方法 setFolderIdMapping 用于设置节点的标识 ID 。对于树的每个节点来说都有一个唯一 ID，这个 ID 在 XML 文件中出现在标签 的属性节点。如 id="team-a"，GWT-Ext 取得属性节点值的方式是在属性名前加上 @ 符号，取得属性值。如果在 xml 的标签中没有该指定属性，GWT-Ext 会生成随机唯一 ID 。 public void setFolderIdMapping(java.lang.String folderIdMapping) 方法 setLeafIdMapping（String id）用于设置叶子节点的标识 ID 。方式和 setFolderIdMapping 一样。 public void setLeafIdMapping(java.lang.String leafIdMapping) 方法 setQtipMapping（String qTip）用于设置鼠标指到对应树节点后显示的提示信息。本例中对应于各个节点的 qtip 属性。在本例中，通过 @qtip 来获得提示。 public void setQtipMapping(java.lang.String qtipMapping) 方法 setCheckedMapping 用于指定非根节点前的可选框是否被选择。他的获取值是 true 或者 false 。如果取得值是 true，则可选框被勾选，false 则没有被选择。在本例中，通过 @checked 取得 boolean 值。 public void setCheckedMapping(java.lang.String checkedMapping) 方法 setIconMapping（String icon）用于指定各个节点的图标所对应的相对路径。在本例中，各国家被分成 3 组，每一组由一种颜色的旗子代替。我们将准备好的图标文件 flag_yellow.gif，flag_blue.gif 和 flag_green.gif 拷贝到 com.ibm.developmentworks.demo.public.images 目录下。参数值 icon 是相对于 public 目录的相对路径。在本例中，通过 @icon 取得相对路径。没有该属性的节点，GWT-Ext 用默认图标显示。 public void setIconMapping(java.lang.String iconMapping) 方法 setAttributeMappings 用于存储属性对数组。对于每一个树节点，他拥有可显示的数据，也可以暂存一系列不可显示的属性。这给程序带来了极大的灵活性。在本例中，attributeMappings 数组中只有 @rank 一个属性对被存储到各个节点当中。 public void setAttributeMappings(java.lang.String[] attributeMappings) 在正确设置上述方法之后，树和 XML 的关系就建立了起来。接下来需要建立一个 AsyncTreeNode 这样一个异步根节点来实现树显示。如下所示。 AsyncTreeNode root = new AsyncTreeNode("Countries", loader); treePanel.setRootNode(root); 此外在树被建立起来后为了让树自动展开，可以调用方法如下。 treePanel.expandAll(); 这样，显示的结果如图 12 所示。 图 12. Tree 的异步数据加载 体验拖拽和通信 本文是该系列的最后一部分，将体验拖拽的效果，了解常用的两种拖拽方式和一些经验总结。在对通信的介绍中，本文还将对同步通信和异步通信进行详细介绍。 拖拽 在 GWT-EXT 中实现拖拽功能比较简单。GWT-EXT 在 com.gwtext.client.dd 包中提供了与拖拽相关的类。图 1 展示了这些类的关系。 图 1. com.gwtext.client.dd 包中与拖拽相关的类的关系图 其中，DragDrop 是一个基类，它定义了一些可以被拖拽的元素的接口和基本操作，如 startDrag, onDrag, onDragOver 和 onDragOut 等 Drag 事件。而继承自这个类的子类，功能上主要分为两类。一个是可以使得对象被拖动；一个是使得拖动对象可以被放置在 DropTarget 中。 首先，介绍一些能够帮助对象被拖动的类。 DD 类 用户可以通过调用 DD 的构造函数来使得对象能够被拖动。这种拖动使得对象会跟随鼠标的移动而移动。 DD dd = new DD(Component component);// 参数 component 是被拖动的对象 DDProxy 类 DDProxy 类继承自 DD 类。使用这个类来构造被拖动的对象时，该对象的边框会跟随鼠标的移动而移动。而等到鼠标释放时，该对象会被重新放置到鼠标停止的位置。 DD dd = new DDProxy(Component component);// 参数 component 是被拖动的对象 这里，举一个拖动 Panel 的例子。首先，定义一个 Panel, Panel draggable = new Panel(); draggable.setTitle("Draggable"); draggable.setBorder(true); 然后，将这个 Panel 作为参数来构造一个 DD 类 , DD dd = new DD(draggable); 这样，这个 Panel 就可以被拖动了。 图 2. 对象随鼠标移动的 Panel 若将 draggable 这个 Panel 作为参数来构造 DDProxy 类， DD dd = new DDProxy(draggable); 则会出现这样的效果， 图 3. 边框随鼠标移动的 Panel 被移动的是 draggable Panel 的边框。 接下来，介绍一些被拖动对象可以被放置在其他对象中的功能类。这些类主要是 DDTarget 和 DragTarget，其中 DragTarget 继承自 DDTarget 。 DDTarget 类 将元素作为参数传递到 DDTarget 中，那么这个元素就可以是一个 Drop Target 。具体在应用中，我们一般使用 DragTarget 来完成这样的操作。 首先，用户需要将元素作为一个参数传递到 DragTarget 类的构造函数中。除此之外，还要定义一个 DropTargetConfig 类来配置 Drag Drop Group 的名字。这里，需要注意的有两点： 第一， 只有 Drag 元素和 DropTarget 元素具有同样 DragDropGroup 名字的，Drag 元素才能够被拖放到正确的 DropTarget 元素中去。方法如下 : 1. 构造 DropTargetConfig 类 DropTargetConfig cfg = new DropTargetConfig(); 2. 指定 Drag Drop Group 名字 cfg.setdDdGroup(java.lang.String ddGroup);// 参数 ddGroup 指 drag drop group 的名字。 3. 调用 DropTarget 的构造函数来将拖拽元素和 DropTargetConfig 作为参数传入进去。 DropTarget tg = new DropTarget(Comopnent component ,DropTargetConfig cfg) 第二， 在 DragTarget 中，还需要实现 notifyDrop(DragSource source, EventObject e, DragData data) 方法以实现拖动后的效果。其中，source 是指可以被拖动到 DropTarget 上的元素； e 是指当前的事件； data 是指被拖动元素所包含的数据对象。 这里，我们举一个从 Tree 中拖动 TreeNode 元素到 Grid 中的例子来说明上述步骤。 图 4. 从 Tree 中拖动 TreeNode 元素到 Grid 中 首先，定义 TreePanel 和 GridPanel，并定义 Drag Drop Group 的名字。 final TreePanel treePanel = new TreePanel(); treePanel. setEnableDD(true); treePanel..setEnableDrop(true); final GridPanel gridPanel = new GridPanel(); gridPanel .setEnableDragDrop(true); tripTreePanel.setDdGroup("myDDGroup"); gridPanel.setDdGroup("myDDGroup"); 然后，初始化一个 DropTargetConfig，并指定同样的 Drag Drop Group 的名字。 DropTargetConfig cfg = new DropTargetConfig(); cfg.setdDdGroup("myDDGroup"); // 指定了同样的 DDGroup 最后，定义 DropTarget，以 gridPanel 和 cfg 为参数，并覆写 notifyDrop 函数。 DropTarget tg = new DropTarget(gridPanel,cfg) { public boolean notifyDrop(DragSource source, EventObject e, DragData data) { // …… } }; 在 notifyDrop 函数中，可以实现从当前 Tree 中删除选中节点和在 Grid 中增加记录的操作。 回页首 通信 GWT-EXT 是 GWT 在界面功能上的扩展，但在通信方面，使用的仍然是 GWT 所提供的通信框架。作为 AJAX 的应用开发包，GWT 使得实现客户端和服务器的通信变得十分简单，特别是异步通信。在本文中，我们首先介绍 GWT 中用来开发异步通信应用的流程，然后介绍一个异步通信的例子。除此之外，对于同步通信，由于 GWT 没有提供特别的支持，但有时我们仍需以同步的方式与 Server 端交互，所以，我们提供了一种变通的方法，即通过 Form 提交 Action 的方式实现此效果，并通过一个文件下载的例子来讲述。 在 GWT 框架下实现异步通信 在 GWT 中，异步通信方面的开发变得非常简单。用户只需在服务器端定义一个 Service 接口及其实现，在客户端声明这样的接口，之后的事情，例如管道管理和数据的传输、转换等复杂的事情将由 GWT 负责。具体的过程，有以下几个步骤。 1. 在客户端定义服务接口。服务，就像是客户端与服务器所签署的一份合约，客户端首先要定义这样的服务规则，也就是一个接口。具体实现时，此接口要继承自 RemoteService 并保存在客户端。 Public interface MyService extends RemoteService{ Public List myRequestToServer(int requestParameters); } 值得一提的是，GWT 中的 RPC 机制提供了通过 HTTP 协议在客户端和服务器端传送 java 对象的方法并加以封装。对于用户来说，只要使用 GWT 所能够支持的数据类型或对象作为参数和返回值就可以了。 2. 在客户端定义此服务的异步接口。为了应用 AJAX（被 GWT 所支持）所带来的异步特性，在客户端我们还需要定义一个此接口的异步接口。方法也很简单。 Public interface MyServiceAsync extends RemoteService{ Public void myRequestToServer(int requestParameters, AsyncCallback callback); } 可以看出，除了多了一个 AsyncCallback 对象作为参数，此异步接口与同步接口的方法大致相同。此外，该方法的返回值被定义成 void，原因是在 GWT 的异步通信机制中，客户端发送的异步请求信息和服务器端对此请求的回应信息（包括成功或失败）都会通过这个 AsyncCallback 对象来传递。换句话说，这个对象将客户端与服务器端绑定了起来，返回值在这里没有什么作用。除此之外，此异步接口的命名规则是在原接口名字的后面加上 Async 后缀，并放置在客户端的同一个包下面。 3. 实现这个接口。大家知道，所有的服务端接受到 Service 后都要执行一定的操作来响应客户端的请求。这里，所有的 RPC 服务都要扩展自 RemoteServiceServlet 并实现相应的 Service 接口。需要注意的是，它并不需要实现此 Service 的异步接口。 Public MyServiceImpl extends RemoteServiceServlet implements MyService{ Public List myRequestToService(int requestParameters){ … .// 实现的功能代码 } } 其中，RemoteServiceServlet 类用于处理客户端请求的反序列化和相应的序列化以及调用接口中定义的方法。 GWT 之所以采用这种基于 Servlet 的处理方式，是因为 Java Servlet 相对简单且广泛流行于 Java Community 。这样，我们所定义的服务及实现就可以轻易的重新部署到其它产品的 Servlet 容器中。 4. 在客户端触发服务。在 GWT 框架下调用 Service 总是经过相同的步骤： · 使用 GWT.create（）初始化 Service 接口 ; · 使用 ServiceDefTarget 为 Service 代理描述 Service 接入点的 URL ； · 创建一个异步回调对象，用于 RPC 完成时调用； · 发出 RPC 请求。 5. 将此服务作为一个 EntryPoint 加入到应用程序的配置文件 module.xml 中，以便客户端能够找到此服务。 callback); } 在定义好接口和实现后，接下来要做的就是定义触发此服务的方法。 示例中，一旦我们分别在两个输入框中输入整型数后，就会异步地向服务端发送请求。因此，需要为这两个输入框定义监听事件。 这里，我们定义一个内隐类并继承自 FieldListenerAdapter 类，然后覆写 onBlur 方法使得一旦输入框失去焦点时触发此事件。在 onBlur 方法中实现调用此服务的过程。 清单 2. DemoFieldListenerAdapter 类 class DemoFieldListenerAdapter extends FieldListenerAdapter{ public void onBlur(Field field) { CalculateServiceAsync service = CalculateService.Util.getInstance(); service.getAddResult(textField1.getValueAsString(), textField2.getValueAsString(), new AsyncCallback(){ // 声明一个 //AsyncCallBack 实例 // 覆写 onFailure 方法 public void onFailure(Throwable caught) { caught.printStackTrace(); System.out.println("Communication failed"); } // 覆写 onSuccess 方法。 public void onSuccess(Object result) { String addResult = (String)result; resultLabel.setText(addResult); } } ); } } 需要说明的是，Cypal Studio For GWT 插件在生成 CalculateService 时为我们将初始化 CalculateServiceAsync 实例的过程封装在一个静态内隐类中。 清单 3. 初始化 CalculateServiceAsync 实例 public static class Util { public static CalcuServiceAsync getInstance() { CalcuServiceAsync instance = (CalcuServiceAsync) GWT.create(CalcuService.class); ServiceDefTarget target = (ServiceDefTarget) instance; target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI); return instance; } } 这样，我们每次调用时只需通过 CalculateService.Util.getInstance() 方法即可获得 CalcuServiceAsync 的实例。获得 CalcuServiceAsync 实例后，即可调用服务接口。这里的参数有三个，第一个是 textField1 的输入值，第二个是 textField2 的输入值，第三个是 AsyncCallback 对象。 AsyncCallback 对象采用匿名内隐类来创建并覆写 onFailure 和 onSuccess 方法。这两个方法会在服务器端执行完服务过程后在客户端执行。如果服务器端有错误发生，则 onFailure 方法被执行；如果没有错误，则 onSuccess 方法被执行。例子中，在 onSuccess 方法里将成功返回的结果放在 ResultLabel 中显示。 在 GWT 框架下实现同步通信 在 GWT 框架中，其所提供的通信方式，包括 HttpRequest, RequestBuilder, RPC 等都是异步的，要实现同步的通信，可以利用 Form 中提交 Action 的方式。即通过 HTML 中的 Document 所得到的 FormElement 来构建指向服务器端的一个链接（URL）。然后，向 Server 端提交此 Form 。这样，客户端会一直等待服务器端对此请求的相应。代码如下 , 清单 4. Form 中提交 Action String url= ” / ” ; FormElement formElement = Document.get().createFormElement(); formElement.setAction(url); formElement.setName("ThisActionName"); formElement.setMethod("post"); Document.get().appendChild(formElement); formElement.submit(); 此 URL 是一个指向服务器端的资源路径，我们首先在 Form 中设定资源路径然后提交给服务器端。这与编写 HTML 很相似，只是这里我们用 java 代码的形式写出来。另外，此 URL 也可以指定到服务器中的 Servlet 。这样，可以完成更复杂的应用逻辑。 本例所讲的是一个在 GWT 下应用同步通信的方式完成一个文件下载的例子。 首先，要在客户端的一个触发事件中完成如上述请求服务的代码。 清单 5. 完成请求服务的代码 // 这里指向一个专门负责下载文件的 Servlet ：//DemoServiceConstants.DOWNLOAD_TASK_FILE String URL= GWT.getModuleBaseURL() + DemoServiceConstants.DOWNLOAD_TASK_FILE + "?fileLocation=" + fileLocation;; FormElement formElement = Document.get().createFormElement(); formElement.setAction(url); formElement.setName("ThisActionName"); formElement.setMethod("post"); Document.get().appendChild(formElement); formElement.submit(); 其次，要在服务器端定义一个 DownloadFile Servlet 用于响应客户端的请求以及完成从服务器上读取文件和发送文件的 InputStream 和 OutputStream 。 清单 6. DownloadFile Servlet Public class DownloadFile extends HttpServlet{ // 覆写 doGet 方法， 参数 request 是来自客户端的请求对象 // 参数 response 是服务器端的响应对象 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 取得文件路径 String location = request.getParameter("fileLocation"); // 定义读取文件的类 RandomAccessFile File file = new File(location); RandomAccessFile accessFile = new RandomAccessFile(file, "r"); // 如果想要在下载时出现一个下载对话框，可以在 Response Header 中做如下设置 response.addHeader("Content-Disposition","attachment;filename=\""+file.getName( )"\""); response.addHeader("Content-Length", String.valueOf(accessFile.length())); // 定义 OutputStream OutputStream out = response.getOutputStream(); // 从源文件流中读入并写入到输出流中 , 具体可参见代码 … … } }
Panel1 content!
"); accordionPanel.add(panelOne); Panel panelTwo = new Panel("Panel 2", "Panel2 content!
"); accordionPanel.add(panelTwo); Panel panelThree = new Panel("Panel 3", "Panel3 content!
"); accordionPanel.add(panelThree); 图 4. 手风琴下拉式布局 (5) 锚点式布局 锚点式布局是一种可以在水平和垂直方向上按照父容器的尺寸变换的布局方式。在锚点式布局中，子对象按照百分比或绝对像素数值在水平和垂直两个方向上指定它针对父容器的相对尺寸。当父容器的尺寸发生变化后，子对象会按照已经指定的相对尺寸改变自己的大小。 锚点式布局需要实现 com.gwtext.client.widgets.layout.AnchorLayout 类。 使用 com.gwtext.client.widgets.layout.AnchorLayoutData 对象来定义锚式布局所需要的数据。 AnchorLayoutData 对象的构造函数使用字符串定义需要的布局参数。参数 anchor 包括了水平和垂直方向的百分比或者绝对像素数值，以空格间隔。比如“ 100% 20% ”表示该对象相对于父容器，水平方向是 100%，垂直方向是父容器的 20% 。而“ -100 30% ”表示该对象水平放心相对于父容器少 100 像素，而垂直方向是父容器的 30% 。 public AnchorLayoutData(String anchor) 使用 add 方法将对象放入父容器中。其中参数 component 表示要添加的对象，layoutData 是 AnchorLayoutData 类的实例对象。 public void add(Component component, LayoutData layoutData) 代码清单 5 将产生如图 5 所示的锚点式布局。 清单 5. 锚点式布局 Panel wrapperPanel = new Panel(); wrapperPanel.setLayout(new AnchorLayout()); wrapperPanel.add(new Panel( "Item 1","Anchor : '100% 20%' width is 100% of the containing element and 20% of its height"), new AnchorLayoutData("100% 20%")); wrapperPanel.add(new Panel("Item 2","Anchor : '50% 25%' width is 50% of the containing element and 25% of its height"), new AnchorLayoutData("50% 25%")); wrapperPanel.add(new Panel("Item 3","Anchor : '-100 30%' width is (100% of the containing element - 100px) and height is 30% of containing element."), new AnchorLayoutData("-100 30%")); panel.add(wrapperPanel); 图 5. 锚点式布局 (6) 列布局 在列布局中，各个子 UI 组件通过设定自己在水平方向上使用的宽度来共享父组件的宽度。 列布局需要实现 com.gwtext.client.widgets.layout. ColumnLayout 类。 使用 com.gwtext.client.widgets.layout.ColumnLayoutData 类对象来定义列布局所需要的数据． public ColumnLayoutData(double columnWidth) 使用 add 方法将对象放入父容器中。其中参数 component 表示要添加的对象，layoutData 是 ColumnLayoutData 类的实例对象。 public void add(Component component, LayoutData layoutData) 代码清单 6 将产生如图 6 所示的列布局。 清单 6. 百分比列布局 Panel wrapperPanel = new Panel(); wrapperPanel.setLayout(new ColumnLayout()); wrapperPanel.add(new Panel("Column 1", "25% width"),new ColumnLayoutData(.25)); wrapperPanel.add(new Panel("Column 2", "60% width"),new ColumnLayoutData(.6)); wrapperPanel.add(new Panel("Column 3", "15% width"),new ColumnLayoutData(.15)); 图 6. 百分比列布局 列布局管理器可以使用绝对像素数值，百分比或者两者的混合来定义宽度。 代码清单 7 将产生如图 7 所示的混合列布局。 清单 7. 混合列布局 Panel wrapperPanel = new Panel(); wrapperPanel.setLayout(new ColumnLayout()); Panel p1 = new Panel("Column 1", "120px width"); p1.setWidth(120); wrapperPanel.add(p1); wrapperPanel.add(new Panel("Column 2", "80% width"), new ColumnLayoutData(.8)); wrapperPanel.add(new Panel("Column 3", "20% width"), new ColumnLayoutData(.2)); 图 7. 混合列布局 回页首 树 Tree 树是 UI 界面编程中经常使用的一种显示结构化的，具有继承关系的数据的方法。 GWT-Ext 在 JAVA 对象 API 的层面上提供对树状 UI 控件的支持，它内建了对树形控件中节点的编辑、排序、过滤，拖拽等功能的支持，同时提供了一个完善的 UI 事件监听和处理机制。综合使用树和 GWT-EXT 中的其他组件，可以构建出功能强大的表现层 UI 组件。 GWT-EXT 中对树型 UI 控件提供支持的接口和类位于 com.gwtext.client.widgets.tree 和 com.gwtext.client.widgets.tree.event 两个包中。前者包含了构建表现层的工具类，主要用于 HTML 页面的渲染。而后者则用于提供对树型控件的事件监听和处理功能。 (1) 构建树 在 GWT-EXT 中使用 com.gwtext.client.widgets.tree.TreePanel 构建包含树的面板。使用 com.gwtext.client.widgets.tree.TreeNode 构建树的各个节点。各个节点按照继承关系添加到树中的相应位置。 TreePanel 树面板对象是所有数中节点的父 UI 组件，它将作为容器来包含树中的所有节点对象。树中的每一个节点都是一个 TreeNode 类的实例对象，使用 TreeNode 类中的方法 appendChild 可以在当前节点下添加其下的子节点。其中参数 child 是 TreeNode 的实例对象。 public native void appendChild(Node child) 构建树的步骤 a. 使用构造函数 public TreePanel() 构建 TreePanel 对象 TreePanel treePanel = new TreePanel(); b. 使用 TreeNode 的构造函数 public TreeNode() 构建一个树的根节点对象 TreeNode rootTreeNode = new TreeNode(); rootTreeNode.setText("root node"); c. 使用 TreeNode 的 public void setRootNode(Node node) 方法将这个 Node 对象作为根节点加入到 Tree 中。此时即可得到一个包含了一个根节点的树状 UI 组件。 treePanel.setRootNode(rootTreeNode); d. 为了得到更多的树节点，可以使用构造函数 public TreeNode() 生成更多的节点对象，并依次使用 TreeNode 对象的 appendChild(Node child) 方法将他们添加到根节点或其他字节点中即可。 TreeNode generation1childNodeA=new TreeNode("generation 1 child a"); rootTreeNode.appendChild(generation1childNodeA); TreeNode generation2childNodeA=new TreeNode("generation 2 child a"); generation1childNodeA.appendChild(generation2childNodeA); TreeNode generation2childNodeB=new TreeNode("generation 2 child b"); generation1childNodeA.appendChild(generation2childNodeB); TreeNode generation3childNodeA=new TreeNode("generation 3 child a"); generation2childNodeB.appendChild(generation3childNodeA); TreeNode generation1childNodeB=new TreeNode("generation 1 child b"); rootTreeNode.appendChild(generation1childNodeB); e. 调用 expand 方法展开节点。 TreeNode 对象的 expand() 方法是展开 TreeNode 的子节点。 TreePanel 的 expandAll() 方法是展开所以节点。 rootTreeNode.expand(); treePanel.expandAll(); 综合以上示例代码，将产生一棵如图 8 的树： 图 8. 构建树 (2) Tree 的事件监听与处理 GWT-EXT 中提供了一套丰富，简便且易于使用的针对树控件的事件监听与处理机制和简便的 API 。这些 API 存在于包 com.gwtext.client.widgets.tree.event 中。 GWT-EXT 还定义了数个用于事件监听的接口，并且提供了实现了这些接口的类供用户使用，以下几个是编程中会经常用到的事件监听类： com.gwtext.client.widgets.tree.event.TreePanelListenerAdapter：监听所有 TreePanel 中对象的事件。 com.gwtext.client.widgets.tree.event.TreeNodeListenerAdapter：监听树中各个节点对象的事件。 com.gwtext.client.widgets.tree.event.AsyncTreeNodeListenerAdapter：监听树异步节点对象的事件。 com.gwtext.client.widgets.tree.event.TreeLoaderListenerAdapter：监听树的数据加载事件。 在事件监听类中定义了以下各种 UI 事件监听方法，当相关联的 UI 事件发生时，监听器方法中定义的程序逻辑会自动被 GWT-EXT 系统回调执行。 当在当前 Node 上添加了新的子节点时，onAppend 方法将自动被系统调用。 public void onAppend(Tree tree, TreeNode parent, TreeNode node, int index) 当删除选定节点时 onRemove 方法自动被系统调用。 public void onRemove(Tree tree, TreeNode parent, TreeNode node)： 在选定的节点上单击鼠标左键时，onClick 方法将自动被系统调用。 public void onClick(TreeNode node, EventObject e)： 在选定的父节点上点击子树图标以收缩该节点的所有子节点的子树时，onCollapseNode 方法将自动被系统调用。 public void onCollapseNode(TreeNode node)： 在选定的节点上单击鼠标右键时，onContextMenu 方法将自动被系统调用。 public void onContextMenu(TreeNode node, EventObject e)： 在选定的节点上双击鼠标左键时，onContextMenu 方法将自动被系统调用。 public void onDblClick(TreeNode node, EventObject e)： 当选定的节点状态改变时（由禁用变为可用或由可用变为禁用），onDisabledChange 方法将自动被系统调用。 public void onDisabledChange(TreeNode node, boolean disabled)： 当在选定的节点上发生鼠标拖拽事件时，onDragDrop 方法将自动被系统调用。 public void onDragDrop(TreePanel treePanel, TreeNode node, DD dd)： 当在选定的节点上鼠标拖拽事件结束时，onEndDrag 方法将自动被系统调用。 public void onEndDrag(TreePanel treePanel, TreeNode node)： 在选定的父节点上点击子树图标以展开该节点的所有子节点的子树时，onExpandNode 方法将自动被系统调用。 public void onExpandNode(TreeNode node)： 当在选定的节点上发生数据加载事件时，onLoad 方法将自动被系统调用。 public void onLoad(TreeNode node)： 当选定的节点被删除时，onNodeDrop 方法将自动被系统调用。 public void onNodeDrop(TreePanel treePanel, TreeNode target, DragData dragData, String point, DragDrop source, TreeNode dropNode)： 当选定的节点被移动到另一个位置时，onMoveNode 方法将自动被系统调用。 public void onMoveNode(Tree treePanel, TreeNode node, TreeNode oldParent, TreeNode newParent, int index)： 当在选定的节点上开始一个鼠标拖拽事件时，onStartDrag 方法将自动被系统调用。 public void onStartDrag(TreePanel treePanel, TreeNode node)： 在代码中添加监听器支持非常简单，只需实例化一个监听器类，定义需要监听的事件方法，并将该监听器类的实例添加到 TreePanel 或 TreeNode 上即可。以下代码清单 8 向一个 TreePanel 添加了一个 TreePanelListenerAdapter 监听器实例，该监听器实例将监听树控件 panel 中对象的鼠标左键单击和右键单击事件，并在事件发生时弹出 GWT-EXT 的消息对话框。 清单 8. Tree 的事件监听和处理 TreePanelListenerAdapter tpla=new TreePanelListenerAdapter () { public void onClick(TreeNode node, EventObject e) { MessageBox.alert("Bacis Tree Sample MessageBox", node.getText()+" Clicked") ; } public void onContextMenu(TreeNode node, EventObject e) { MessageBox.alert("Bacis Tree Sample MessageBox", node.getText()+" Right Clicked") ; } }; treePanel.addListener(tpla); (3) Tree 中对象的拖拽功能 GWT-EXT 中内建了对树控件的拖拽功能的支持。 下面的图 9，图 10 和图 11 是一个树控件之间的拖拽事例。左侧树中的“ Sent ”节点被拖拽到右侧树中“ ToDo ”节点上，成为“ ToDo ”节点的子节点。在 GWT-EXT 中，树中的节点可以被拖拽到任何支持拖拽功能的组件中。 图 9. Tree 中对象的拖拽功能 1 图 10. Tree 中对象的拖拽功能 2 图 11. Tree 中对象的拖拽功能 3 在 GWT-EXT 使用 TreePanel 的 setEnableDD(true) 方法启用拖拽功能支持，再使用 setDdGroup(String groupName) 方法设定对象所属的拖拽组。拖拽的目的和源必须属于同一个拖拽组。 public void setEnableDD(boolean enableDD) public void setDdGroup(java.lang.String ddGroup) 代码清单 9 生成了两个支持拖拽的树控件，并定义“ treeDD ”为它们所属的拖拽组。 清单 9. Tree 中对象的拖拽功能 TreePanel treePanel = getSampleTreePanel(); treePanel.setEnableDD(true); treePanel.setDdGroup("treeDD"); TreePanel treePanel2 = getSampleTreePanel(); treePanel2.setEnableDD(true); treePanel2.setDdGroup("treeDD"); private TreePanel getSampleTreePanel() { TreePanel treePanel = new TreePanel(); TreeNode root = new TreeNode("Mail"); root.setExpanded(true); TreeNode inbox = new TreeNode("Inbox"); root.appendChild(inbox); TreeNode drafts = new TreeNode("Drafts"); root.appendChild(drafts); ...... treePanel.setRootNode(root); return treePanel; } 方法 getSampleTreePanel() 用来生成本节示例中的可拖拽树。 (4) Tree 的异步数据加载 树控件中各个节点的数据可以通过编程的方式初始化，也可以通过 XML，Json 等方式异步加载。下面我们将通过 Tree 异步提取 XML 这个比较常用的方式来介绍 Tree 的异步数据加载功能。 在前面的例子我们看到，一棵树是由一个根节点和若干个中间节点以及叶子节点组成的。和 XML 文件比较起来，树的根节点对应于 XML 的顶级标签，树的叶子节点对应于 XML 所有底级的标签，树的中间节点对应于其它的 XML 标签。因为 XML 的结构和树的结构的对应关系，我们可以应用 GWT-Ext 提供的接口轻易的将 XML 的信息转换为一棵树，并且显示出来。 清单 10. 待转换成 Tree 的 XML 文件