GWT - 树形控件

上一页
下一页

介绍

树形控件表示一个标准的分层树形控件。树包含用户可以打开、关闭和选择的 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 样式规则将应用于所有树形控件。您可以根据需要覆盖它。

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

类构造函数

序号 构造函数 & 描述
1

Tree()

构造一个空的树。
2

Tree(TreeImages images)

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

Tree(TreeImages images, boolean useLeafImages)

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

类方法

序号 函数名称 & 描述
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中添加以下内容，它将演示树形控件的使用。

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() {
      //create a label
      final Label labelMessage = new Label();
      labelMessage.setWidth("300");

      // Create a root tree item as department
      TreeItem department = new TreeItem("Department");

      //create other tree items as department names
      TreeItem salesDepartment = new TreeItem("Sales");
      TreeItem marketingDepartment = new TreeItem("Marketing");
      TreeItem manufacturingDepartment = new TreeItem("Manufacturing");

      //create other tree items as employees
      TreeItem employee1 = new TreeItem("Robert");
      TreeItem employee2 = new TreeItem("Joe");
      TreeItem employee3 = new TreeItem("Chris");

      //add employees to sales department
      salesDepartment.addItem(employee1);
      salesDepartment.addItem(employee2);
      salesDepartment.addItem(employee3);

      //create other tree items as employees
      TreeItem employee4 = new TreeItem("Mona");
      TreeItem employee5 = new TreeItem("Tena");	   

      //add employees to marketing department
      marketingDepartment.addItem(employee4);
      marketingDepartment.addItem(employee5);	    

      //create other tree items as employees
      TreeItem employee6 = new TreeItem("Rener");
      TreeItem employee7 = new TreeItem("Linda");

      //add employees to sales department
      manufacturingDepartment.addItem(employee6);
      manufacturingDepartment.addItem(employee7);

      //add departments to department item
      department.addItem(salesDepartment);
      department.addItem(marketingDepartment);
      department.addItem(manufacturingDepartment);

      //create the tree
      Tree tree = new Tree();

      //add root item to the tree
      tree.addItem(department);	   

      tree.addSelectionHandler(new SelectionHandlerL<TreeItem>() {
         @Override
         public void onSelection(SelectionEvent<TreeItem> event) {
            labelMessage.setText("Selected Value: "
            + event.getSelectedItem().getText());
         }
      });

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(tree);
      panel.add(labelMessage);

      //add the tree to the root panel
      RootPanel.get("gwtContainer").add(panel);
   }	
}

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

GWT Tree Widget

在树中选择任何值，都会更新树下显示所选值的邮件。

gwt_complex_widgets.htm
打印页面
上一页
下一页
广告

© . All rights reserved.