From ac47c7a97f7fb653eb5125a697f33a5d7c5d604d Mon Sep 17 00:00:00 2001 From: Ilia Motornyi Date: Wed, 17 May 2017 11:43:45 +0300 Subject: [PATCH] Reflect latest Tree API and styling changes to the documentation --- .../components/components-tree.asciidoc | 69 ++++++++----------- 1 file changed, 28 insertions(+), 41 deletions(-) diff --git a/documentation/components/components-tree.asciidoc b/documentation/components/components-tree.asciidoc index f81342c5ba..03ea963170 100644 --- a/documentation/components/components-tree.asciidoc +++ b/documentation/components/components-tree.asciidoc @@ -87,25 +87,16 @@ The caption and the icon of tree items is generated by the [classname]#ItemCapti object, which supports selection listeners and data binding. For more details, see link:<>. The [classname]#Tree# also supports the shortcut method [methodname]#addSelectionListener()#. -//// -todo not implemented yet. [classname]#Tree# also emits [classname]##ItemClickEvent##s when items are clicked. -This way you can handle item clicks also when selection is not enabled or you want special user interaction specifically on clicks. - +This way you can handle item clicks also when you want special user interaction specifically on clicks. [source, Java] ---- -tree.addItemClickListener( - new ItemClickEvent.ItemClickListener() { - public void itemClick(ItemClickEvent event) { - // Pick only left mouse clicks - if (event.getButton() == ItemClickEvent.BUTTON_LEFT) - Notification.show("Left click", - Notification.Type.HUMANIZED_MESSAGE); - } - }); +tree.addItemClickListener(event -> + Notification.show("Click", + Notification.Type.HUMANIZED_MESSAGE) +); ---- -//// [[components.tree.expandcollapse]] == Expanding and Collapsing Nodes @@ -138,13 +129,11 @@ tree.addCollapseListener(event -> log("Item collapsed: " + event.getCollapsedIte The return types of the methods `getExpandedItem` and `getCollapsedItem` are the same as the type of the [classname]#Tree# the events originated from. Note that collapse listeners will not be triggered for any expanded subtrees of the collapsed item. -//// -todo not implemented yet [[components.tree.node.collapsing]] == Prevent Node Collapsing [classname]#Tree# supports setting a callback method that can allow or prevent the user from collapsing an expanded node. -It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#SerializablePredicate#. +It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#ItemCollapseAllowedProvider#. For nodes that cannot be collapsed, the [literal]#++collapse-disabled++# class name is applied to the expansion element Avoid doing any heavy operations in the method, since it is called for each item when it is being sent to the client. @@ -156,7 +145,6 @@ Set alwaysExpanded; personTree.setItemCollapseAllowedProvider(person -> !alwaysExpanded.contains(person)); ---- -//// [[components.treegrid.keyboard]] == Keyboard Navigation and Focus Handling in TreeGrid @@ -164,48 +152,47 @@ personTree.setItemCollapseAllowedProvider(person -> The user can navigate through rows with kbd:[Up] and kbd:[Down], collapse rows with kbd:[Left], and expand them with kbd:[Right]. -//// -todo styling documentation [[components.tree.css]] == CSS Style Rules [source, css] ---- -.v-tree {} - .v-tree-node {} /* A node (item) */ - .v-tree-node-caption {} /* Caption of the node */ - .v-tree-node-children {} /* Contains child nodes */ - .v-tree-node-root {} /* If node is a root node */ - .v-tree-node-leaf {} /* If node has no children */ +.v-tree8 { + .v-tree8-scroller, .v-tree8-scroller-horizontal { } + .v-tree8-tablewrapper { + .v-tree8-body { + .v-tree8-row, + .v-tree8-stripe, + .v-tree8-row-focused, + .v-tree8-row-has-data { + .v-tree8-expander, expanded {} + .v-tree8-cell-content {} + } + } + } +} ---- [[components.tree.css.itemstyles]] === Generating Item Styles -You can style each tree item individually by generating a style name for them with a [interfacename]#Tree.ItemStyleGenerator#, which you assign to a tree with [methodname]#setItemStyleGenerator()#. +You can style each tree item individually by generating a style name for them with a [interfacename]#StyleGenerator#, which you assign to a tree with [methodname]#setStyleGenerator()#. The generator should return a style name for each item or `null`. [source, Java] ---- // Show all leaf nodes as disabled -tree.setItemStyleGenerator(new Tree.ItemStyleGenerator() { - @Override - public String getStyle(Tree source, Object itemId) { - if (! tree.hasChildren(itemId)) - return "disabled"; +tree.setStyleGenerator(item -> { + if (!tree.getDataProvider().hasChildren(item)) + return "leaf"; return null; } -}); +); ---- -The style names are prefixed with `v-tree-node-caption-`. -You could thereby define the item styling as follows: - -[source, CSS] +[source, css] ---- -.v-tree-node-caption-disabled { - color: graytext; - font-style: italic; +.leaf .v-tree8-cell-content { + background-color:green } ---- -//// -- 2.39.5