×
关于

Vaadin Web 开发教程

概述安装开发环境Vaadin 应用程序框架介绍开始编写 Web 应用Vaadin Web 应用的基本组成部分使用资源UI 组件概述UI 组件-LabelUI 組件-LinkUI 組件-TextFieldUI 組件-TextAreaUI 組件-PasswordFieldUI 組件-RichTextAreaUI 組件-ButtonUI 組件-CheckboxUI 组件-Select 组件UI 组件-Table 组件UI 组件-Tree 组件UI 组件-MenuBar 组件UI 组件-Embedded 组件UI 组件-Upload 组件UI 组件-Form 组件UI 组件-ProgressIndicator 组件UI 组件-Slider 组件UI 组件-LoginForm 组件UI 组件-自定义组件UI 布局-概述UI 布局-VerticalLayout 和 HorizontalLayout 布局UI 布局-GridLayout 布局UI 布局-FormLayout 布局UI 布局-PanelUI 布局-HorizontalSplitPanel 和 VerticalSplitPanel 布局UI 布局-TabSheet 布局UI 布局-Accordion 布局UI 布局-AbsoluteLayout 布局可視化界面編輯插件使用主题-概述使用主题-创建和应用新主题数据绑定-概述数据绑定-Property 接口使用 Item 介面管理一組 Property使用 Container 介面管理一組 ItemSQLContainer 概述开始使用 SQLContainerSQLContainer-过滤及排序SQLContainer-编辑SQLContainer-引用其它 SQLContainerSQLContainer-使用 FreeformQuery

UI 组件-Tree 组件


Tree 组件可以用来显示具有层次关系的数据源,比如文件系统。Tree 组件的一个典型应用是作为菜单显示。

final Object[][] planets = new Object[][]{
        new Object[]{"Mercury"},
        new Object[]{"Venus"},
        new Object[]{"Earth", "The Moon"},
        new Object[]{"Mars", "Phobos", "Deimos"},
        new Object[]{"Jupiter", "Io", "Europa", "Ganymedes",
                                "Callisto"},
        new Object[]{"Saturn",  "Titan", "Tethys", "Dione",
                                "Rhea", "Iapetus"},
        new Object[]{"Uranus",  "Miranda", "Ariel", "Umbriel",
                                "Titania", "Oberon"},
        new Object[]{"Neptune", "Triton", "Proteus", "Nereid",
                                "Larissa"}};

Tree tree = new Tree("The Planets and Major Moons");

// Add planets as root items in the tree.
for (int i=0; i    String planet = (String) (planets[i][0]);
    tree.addItem(planet);

    if (planets[i].length == 1) {
        // The planet has no moons so make it a leaf.
        tree.setChildrenAllowed(planet, false);
    } else {
        // Add children (moons) under the planets.
        for (int j=1; j            String moon = (String) planets[i][j];

            // Add the item as a regular item.
            tree.addItem(moon);

            // Set it to be a child.
            tree.setParent(moon, planet);

            // Make the moons look like leaves.
            tree.setChildrenAllowed(moon, false);
        }

        // Expand the subtree.
        tree.expandItemsRecursively(planet);
    }
}

main.addComponent(tree);

当然你可以选择合适的 Menu 风格使得 Tree 看起来更像菜单,比如:

注:到这里你可能注意到到目前为止在介绍 UI 组件时文章都避免涉及 CSS,Theme 应用,这是为的使Vaadin 应用开发更像开发桌面应用,后面会集中介绍主题的使用,对于一般应用你可以使用缺省主题。

同 Field 组件一样,你可以使用 getValue,setValue 设置或取得 Tree 组件当前选中的 Item 项。Tree 组件对应的 Container 类型为 HierarchicalContainer.

Tags: Java EE, Vaadin, Web


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)