GWT复杂小部件与布局面板详解

### GWT复杂小部件与布局面板详解 #### 1. 复杂小部件概述 随着浏览器开始支持JavaScript和动态HTML，网页中出现了没有等效HTML标签的用户界面小部件。这些小部件通过组合HTML标签并使用JavaScript处理用户事件来模拟更复杂的小部件。使用GWT，我们也可以构建这类自定义小部件，并且该工具包本身就自带了一些。 #### 2. 树（Tree）小部件 树小部件用于显示可展开和折叠的数据层次结构视图，其行为类似于桌面应用程序中用于浏览文件或显示层次数据的树小部件。GWT使用HTML元素和动态JavaScript实现树视图，并通过接口进行抽象以支持树操作。 ##### 2.1 实例化树小部件 ```java Tree treeList = new Tree(); mainPanel.add( treeList ); ``` ##### 2.2 添加数据到树小部件 可以直接添加字符串值到树中： ```java treeList.addItem("first item"); treeList.addItem("second item"); treeList.addItem("third item"); ``` 也可以添加其他小部件： ```java treeList.addItem( new Image("icon_user.gif") ); treeList.addItem( new HTML("<b>hello</b>") ); treeList.addItem( new CheckBox("check me") ); ``` 若要创建多级树，可以使用`TreeItem`类： ```java for( Iterator it = databases.iterator(); it.hasNext();){ Database database = (Database)it.next(); TreeItem databaseTreeItem = new TreeItem( database.getName() ); treeList.addItem(databaseTreeItem); for( Iterator it2 = database.getTable().iterator(); it2.hasNext();){ Table table = (Table)it2.next(); databaseTreeItem.addItem( table.getName() ); } } ``` ##### 2.3 图标处理 在GWT 1.3及更早版本中，树小部件使用加号和减号图标，开发者需要确保这些图标与应用程序一起部署。在GWT 1.4中，树小部件使用`ImageBundle`功能，可将多个图像捆绑成一个图像。可以通过实现`TreeImages`接口来覆盖默认图像： ```java public interface TreeImages extends ImageBundle { AbstractImagePrototype treeOpen(); AbstractImagePrototype treeClosed(); AbstractImagePrototype treeLeaf(); } interface CustomTreeImages extends TreeImages { /** * @gwt.resource down.gif */ AbstractImagePrototype treeOpen(); /** * @gwt.resource right.gif */ AbstractImagePrototype treeClosed(); } CustomTreeImages images = (TreeImages)GWT.create(CustomTreeImages.class); Tree tree = new Tree(images); ``` ##### 2.4 自定义样式 可以使用CSS名称自定义树小部件的外观。例如，设置选中项的背景颜色为浅蓝色： ```css .gwt-TreeItem-selected{ background-color:#def; } ``` ##### 2.5 事件处理 树小部件实现了`SourcesTreeEvents`接口，允许添加`TreeListener`实例来监听事件： ```java public interface TreeListener extends EventListener { void onTreeItemSelected(TreeItem item); void onTreeItemStateChanged(TreeItem item); } treeList.addTreeListener(this); ``` #### 3. 菜单栏（MenuBar）小部件 菜单栏小部件由多个HTML元素和JavaScript事件处理程序构成，类似于桌面应用程序顶部的菜单栏。与树小部件不同，菜单栏水平显示数据层次结构，并且一次只显示一个分支，仅在鼠标聚焦时显示。 ##### 3.1 构建菜单栏 ```java Command cmd = new Command() { public void execute() { //code to handle the command goes here } }; MenuBar filemenu = new MenuBar(true); filemenu.addItem("New", cmd); filemenu.addItem("Open", cmd); filemenu.addItem("Save", cmd); filemenu.addItem("Close", cmd); MenuBar helpmenu = new MenuBar(true); helpmenu.addItem("About", cmd); MenuBar menu = new MenuBar(); menubar.addItem("File", filemenu); menubar.addItem("Help", helpmenu); ``` ##### 3.2 自定义样式 可以使用CSS样式增强菜单栏的外观： ```css .gwt-MenuBar { background-color:#F3F5F6; border:outset 1px; } .gwt-MenuBar .gwt-MenuItem { font-size: 9pt; cursor:hand; cursor:pointer; padding:2px 5px 2px 5px; margin:0px; } .gwt-MenuBar .gwt-MenuItem-selected { background-color:#316AC5; color:white; } ``` #### 4. 简单布局面板 前面介绍的小部件是用户界面树的叶子节点，而布局小部件（面板）用于管理应用程序的布局。 ##### 4.1 流式面板（FlowPanel） 流式面板模仿HTML布局，子小部件水