GWT复杂组件与布局面板使用指南

### GWT复杂组件与布局面板使用指南 #### 1. 复杂组件概述 随着浏览器开始支持JavaScript和动态HTML，网页中出现了一些没有对应HTML标签的用户界面组件。这些组件通过组合HTML标签并使用JavaScript处理用户事件来模拟更复杂的组件。GWT也可以构建这类自定义组件，并且工具包中自带了一些。 #### 2. Tree组件 Tree组件用于显示可展开和折叠的分层数据视图，其行为类似于桌面应用中用于浏览文件或显示分层数据的树形组件。GWT使用HTML元素和动态JavaScript实现树形视图，并通过接口进行抽象以支持树操作。 ##### 2.1 实例化Tree组件 ```java Tree treeList = new Tree(); mainPanel.add( treeList ); ``` ##### 2.2 添加数据到Tree组件 可以直接添加字符串值： ```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及更早版本**：需要复制三个图像文件：`tree_white.gif`、`tree_open.gif`、`tree_closed.gif`。 - **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名称自定义Tree组件的外观，例如设置选中项的背景颜色： ```css .gwt-TreeItem-selected{ background-color:#def; } ``` ##### 2.5 事件处理 Tree组件实现了SourcesTreeEvents接口，可添加TreeListener实例监听事件： ```java public interface TreeListener extends EventListener { void onTreeItemSelected(TreeItem item); void onTreeItemStateChanged(TreeItem item); } treeList.addTreeListener(this); ``` #### 3. MenuBar组件 MenuBar组件由多个HTML元素和JavaScript事件处理程序构建，类似于桌面应用顶部的菜单栏。与Tree组件不同，MenuBar水平显示分层数据，且一次只显示一个分支。 ##### 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(); menu.addItem("File", filemenu); menu.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. 简单布局面板 前面介绍的组件是用户界面树的叶子节点，接下来介绍GWT自带的布局组件（面板）。 ##### 4.1 FlowPanel FlowPanel是一个