GWT - Tree 小部件

简介

Tree 树形小部件 表示标准的分层树形小部件。树形小部件包含用户可以打开、关闭和选择的 TreeItem 层次结构。

类声明

以下是 com.google.gwt.user.client.ui.Tree 类的声明−

public class Tree
   extends Widget
      implements HasWidgets, SourcesTreeEvents, HasFocus,
         HasAnimation, HasAllKeyHandlers, HasAllFocusHandlers, 
            HasSelectionHandlers<TreeItem>, HasOpenHandlers<TreeItem>, 
               HasCloseHandlers<TreeItem>, SourcesMouseEvents, HasAllMouseHandlers

CSS 样式规则

以下默认 CSS 样式规则将应用于所有 Tree 小部件。您可以根据需要覆盖它。

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

类构造函数

Sr.No.	构造函数 &描述
1	Tree() 构造一个空树。
2	Tree(TreeImages images) 构造一个使用指定图像包的树。
3	Tree(TreeImages images, boolean useLeafImages) 构造一个使用指定图像包的树。

Sr.No.

构造函数 &描述

Tree()

构造一个空树。

Tree(TreeImages images)

构造一个使用指定图像包的树。

Tree(TreeImages images, boolean useLeafImages)

构造一个使用指定图像包的树。

类方法

Sr.No.	函数名称 &描述
1	void add(Widget widget) 将小部件添加为根树项。
2	void addFocusListener(FocusListener listener) 添加一个监听器接口来接收鼠标事件。
3	TreeItem addItem(java.lang.String itemText) 添加一个包含指定文本的简单树项。
4	void addItem(TreeItem item) 向此树的根级别添加一个项目。
5	TreeItem addItem(Widget widget) 添加一个包含指定小部件的新树项目。
6	void addKeyboardListener(KeyboardListener listener) 添加一个监听器接口以接收键盘事件。
7	void addMouseListener(MouseListener listener)
8	void addTreeListener(TreeListener listener) 添加一个监听器接口来接收树事件。
9	void clear() 清除当前树中的所有树项。
10	protected void doAttachChildren() 如果小部件实现了 HasWidgets，它必须重写此方法并为其每个子项调用 onAttach()小部件。
11	protected void doDetachChildren() 如果小部件实现 HasWidgets，则必须重写此方法并为其每个子小部件调用 onDetach()。
12	void EnsureSelectedItemVisible() 确保当前选定的项目可见，打开其父级并根据需要滚动树。
13	java.lang.String getImageBase() 已弃用。使用 Tree(TreeImages)，因为它提供了一种更高效、更易于管理的方式来提供一组要在树中使用的图像。
14	TreeItem getItem(int index) 获取指定索引处的顶级树项。
15	int getItemCount() 获取此树的根节点所包含的项目数。
16	TreeItem getSelectedItem() 获取当前选定的项目。
17	int getTabIndex() 获取小部件在选项卡索引中的位置。
18	boolean isAnimationEnabled()
19	protected boolean isKeyboardNavigationEnabled(TreeItem currentItem) 指示是否为 Tree 和给定的 TreeItem 启用了键盘导航。
20	java.util.Iterator<Widget> iterator() 获取包含的小部件的迭代器。
21	void onBrowserEvent(Event event) 每当收到浏览器事件时触发。
22	protected void onEnsureDebugId(java.lang.String baseID) 受影响的元素:-root = 根 TreeItem。
23	protected void onLoad() 小部件变为附加到浏览器的文档。
24	boolean remove(Widget w) 删除子窗口小部件。
25	void removeFocusListener(FocusListener listener) 删除先前添加的侦听器接口。
26	void removeItem(TreeItem item) 从此树的根级别删除一个项目。
27	void removeItems() 从此树的根级别移除所有项目。
28	void removeKeyboardListener(KeyboardListener listener) 移除先前添加的侦听器接口。
29	void removeTreeListener(TreeListener listener) 移除先前添加的侦听器接口。
30	void setAccessKey(char key) 设置小部件的"访问键"。
31	void setAnimationEnabled(boolean enable) 启用或禁用动画。
32	void setFocus(boolean focus) 明确聚焦/取消聚焦此小部件。
33	void setImageBase(java.lang.String baseUrl) 已弃用。使用 Tree(TreeImages)，因为它提供了一种更高效、更易于管理的方式来提供一组可在树中使用的图像。
34	void setSelectedItem(TreeItem item) 选择指定的项目。
35	void setSelectedItem(TreeItem item, boolean fireEvents) 选择指定的项目。
36	void setTabIndex(int index) 设置小部件在选项卡索引中的位置。
37	java.util.Iterator<TreeItem> treeItemIterator() 树项目的迭代器。

继承的方法

该类继承了以下类的方法 −

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

树形小部件示例

此示例将带您通过简单的步骤展示 GWT 中树形小部件的用法。按照以下步骤更新我们在 GWT - 创建应用程序 一章中创建的 GWT 应用程序 −

步骤	描述
1	在 com.tutorialspoint 包下创建一个名为 HelloWorld 的项目，如 GWT - 创建应用程序一章中所述。
2	修改 HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html 和 HelloWorld.java，如下所述。其余文件保持不变。
3	编译并运行应用程序以验证实现逻辑的结果。

以下是修改后的模块描述符src/com.tutorialspoint/HelloWorld.gwt.xml的内容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下是修改后的样式表文件war/HelloWorld.css的内容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Label {
   font-weight: bold;
   color: maroon;
}

.gwt-Tree .gwt-TreeItem {
   padding: 1px 0px;
   margin: 0px;
   white-space: nowrap;
   cursor: hand;
   cursor: pointer;
}

.gwt-Tree .gwt-TreeItem-selected {
  background: #ebeff9;
}

以下是修改后的 HTML 主机文件 war/HelloWorld.html 的内容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Tree Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

让我们来看看 Java 文件 src/com.tutorialspoint/HelloWorld.java 的以下内容，它将演示 Tree 小部件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
    //创建标签
    final Label labelMessage = new Label();
    labelMessage.setWidth("300");
    
    // 创建根树项作为部门
    TreeItem Department = new TreeItem("Department");
    
    //创建其他树项作为部门名称
    TreeItem salesDepartment = new TreeItem("Sales");
    TreeItem marketingDepartment = new TreeItem("Marketing");
    TreeItem manufacturingDepartment = new TreeItem("Manufacturing");
    
    //创建其他树项作为员工
    TreeItem employee1 = new TreeItem("Robert");
    TreeItem employee2 = new TreeItem("Joe");
    TreeItem employee3 = new TreeItem("Chris");
    
    //将员工添加到销售部门
    salesDepartment.addItem(employee1);
    salesDepartment.addItem(employee2);
    salesDepartment.addItem(employee3);
    
    //创建其他树项作为员工
    TreeItem employee4 = new TreeItem("Mona");
    TreeItem employee5 = new TreeItem("Tena");
    
    //将员工添加到营销部门
    marketingDepartment.addItem(employee4);
    marketingDepartment.addItem(employee5);
    
    //将其他树项创建为员工
    TreeItem employee6 = new TreeItem("Rener");
    TreeItem employee7 = new TreeItem("Linda");
    
    //将员工添加到销售部门
    manufacturingDepartment.addItem(employee6);
    manufacturingDepartment.addItem(employee7);
    
    //将部门添加到部门项
    Department.addItem(salesDepartment);
    Department.addItem(marketingDepartment);
    Department.addItem(manufacturingDepartment);
    
    //创建树
    Tree tree = new Tree();
    
    //将根项添加到树
    tree.addItem(department);
    
    tree.addSelectionHandler(new SelectionHandlerL<TreeItem>() {
         @Override
         public void onSelection(SelectionEvent<TreeItem> event) {
            labelMessage.setText("Selected Value: "
            + event.getSelectedItem().getText());
         }
    });
    
    // 将文本框添加到根面板。
    VerticalPanel panel = new VerticalPanel();
    panel.setSpacing(10);
    panel.add(tree);
    panel.add(labelMessage);
    
    //将树添加到根面板
    RootPanel.get("gwtContainer").add(panel);
   }	
}

完成所有更改后，让我们像在 GWT - 创建应用程序一章中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果 −