GWT Tree组件

GWT Tree组件介绍

Tree组件代表一个标准的分层树部件。该树包含用户可以打开、关闭和选择的 TreeItem 层次结构。

GWT Tree组件声明

以下是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 {}

GWT Tree组件构造方法

构造方法	描述
Tree()	构造一个空的树对象。
Tree(TreeImages images)	构造一个树，该树使用指定的图像包作为图像。
Tree(TreeImages images, boolean useLeafImages)	构造一个树，该树使用指定的图像包作为图像。

GWT Tree组件方法

方法	描述
void add(Widget widget)	将小部件添加为根树项。
void addFocusListener(FocusListener listener)	添加一个监听器接口来接收鼠标事件。
TreeItem addItem(java.lang.String itemText)	添加一个包含指定文本的简单树项。
void addItem(TreeItem item)	将项目添加到此树的根级别。
TreeItem addItem(Widget widget)	添加包含指定小部件的新树项。
void addKeyboardListener(KeyboardListener listener)	添加侦听器接口以接收键盘事件。
void addMouseListener(MouseListener listener)	添加侦听器接口以接收鼠标事件。
void addTreeListener(TreeListener listener)	添加一个监听器接口来接收树事件。
void clear()	清除当前树中的所有树项。
protected void doAttachChildren()	如果小部件实现了 HasWidgets，则它必须覆盖此方法并为其每个子小部件调用 onAttach()。
protected void doDetachChildren()	如果小部件实现了 HasWidgets，则它必须覆盖此方法并为其每个子小部件调用 onDetach()。
void ensureSelectedItemVisible()	确保当前选定的项目可见，打开其父项并根据需要滚动树。
java.lang.String getImageBase()	已弃用。使用 Tree(TreeImages) ，因为它提供了一种更有效、更易于管理的方式来提供一组要在树中使用的图像。
TreeItem getItem(int index)	获取指定索引处的顶级树项。
int getItemCount()	获取此树根中包含的项目数。
TreeItem getSelectedItem()	获取当前选中的项目。
int getTabIndex()	获取小部件在选项卡索引中的位置。
boolean isAnimationEnabled()
protected boolean isKeyboardNavigationEnabled(TreeItem currentItem)	指示是否为树和给定的 TreeItem 启用键盘导航。
java.util.Iterator<Widget> iterator()	获取包含的小部件的迭代器。
void onBrowserEvent(Event event)	每当接收到浏览器事件时触发。
protected void onEnsureDebugId(java.lang.String baseID)	受影响的元素： -root = 根 TreeItem。
protected void onLoad()	在小部件附加到浏览器的文档后立即调用此方法。
boolean remove(Widget w)	删除子小部件。
void removeFocusListener(FocusListener listener)	删除以前添加的侦听器接口。
void removeItem(TreeItem item)	从此树的根级别删除项目。
void removeItems()	从此树的根级别删除所有项目。
void removeKeyboardListener(KeyboardListener listener)	删除以前添加的侦听器接口。
void removeTreeListener(TreeListener listener)	删除以前添加的侦听器接口。
void setAccessKey(char key)	设置小部件的“key”。
void setAnimationEnabled(boolean enable)	启用或禁用动画。
void setFocus(boolean focus)	显式聚焦/取消聚焦此小部件。
void setImageBase(java.lang.String baseUrl)	已弃用。使用 Tree(TreeImages) ，因为它提供了一种更有效、更易于管理的方式来提供一组要在树中使用的图像。
void setSelectedItem(TreeItem item)	选择指定的项目。
void setSelectedItem(TreeItem item, boolean fireEvents)	选择指定的项目。
void setTabIndex(int index)	设置小部件在选项卡索引中的位置。
java.util.Iterator<TreeItem> treeItemIterator()	树项的迭代器。

GWT Tree组件示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

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


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改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;
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>Tree Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.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.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
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.setText("Department");

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

        //create other tree items as employees
        TreeItem employee1 = new TreeItem();
        employee1.setText("Robert");
        TreeItem employee2 = new TreeItem();
        employee2.setText("Joe");
        TreeItem employee3 = new TreeItem();
        employee3.setText("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();
        employee4.setText("Mona");
        TreeItem employee5 = new TreeItem();
        employee5.setText("Tena");

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

        //create other tree items as employees
        TreeItem employee6 = new TreeItem();
        employee6.setText("Rener");
        TreeItem employee7 = new TreeItem();
        employee7.setText("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 SelectionHandler<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 Hidden组件 GWT MenuBar组件

GWT Tree组件

GWT Tree组件 介绍

GWT Tree组件 声明

CSS 样式规则

GWT Tree组件 构造方法

GWT Tree组件 方法

GWT Tree组件 示例

1）修改HelloWorld.gwt.xml

2）修改HelloWorld.css

3）修改HelloWorld.html

4）HelloWorld.java

微信关注

GWT Tree组件介绍

GWT Tree组件声明

GWT Tree组件构造方法

GWT Tree组件方法

GWT Tree组件示例