Vaadin Web应用开发教程(19):UI组件-Tree 组件
2012-08-14 06:54
507 查看
Tree 组件可以用来显示具有层次关系的数据源,比如文件系统。Tree组件的一个典型应用是作为菜单显示。
当然你可以选择合适的Menu风格使得Tree看起来更像菜单,比如:
注:到这里你可能注意到到目前为止在介绍UI组件时文章都避免涉及CSS,Theme应用,这是为的使Vaadin应用开发更像开发桌面应用,后面会集中介绍主题的使用,对于一般应用你可以使用缺省主题。
同Field组件一样,你可以使用getValue,setValue 设置或取得Tree组件当前选中的Item项。Tree组件对应的Container类型为HierarchicalContainer.
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.
相关文章推荐
- Vaadin Web应用开发教程(26):UI组件-LoginForm组件
- Vaadin Web应用开发教程(21):UI组件-Embedded组件
- Vaadin Web应用开发教程(21):UI组件-Embedded组件
- Vaadin Web应用开发教程(20):UI组件-MenuBar组件
- Vaadin Web应用开发教程(22):UI组件-Upload组件
- Vaadin Web应用开发教程(23):UI组件-Form组件
- Vaadin Web应用开发教程(27):UI组件-自定义组件
- Vaadin Web应用开发教程(24):UI组件-ProgressIndicator组件
- Vaadin Web应用开发教程(25):UI组件-Slider组件
- Vaadin Web应用开发教程(17):UI组件-Select 组件
- Vaadin Web应用开发教程(18):UI组件-Table 组件
- Vaadin Web应用开发教程(15):UI组件-Button
- Vaadin Web应用开发教程(24):UI组件-ProgressIndicator组件
- Vaadin Web应用开发教程(16):UI组件-Checkbox
- Vaadin Web应用开发教程(13):UI组件-RichTextArea
- Vaadin Web应用开发教程(14):UI组件-DateField
- Vaadin Web应用开发教程(10):UI组件-TextField
- Vaadin Web应用开发教程(8):UI组件-Label
- Vaadin Web应用开发教程(11):UI组件-TextArea
- Vaadin Web应用开发教程(9):UI组件-Link