...
1.1 CHARACTERISTICS of a TREE CONTROL
A tree control is a visual representation mechanism for a data set with a tree structure.
...
1.2 Input Actions Associated with Parts of the Tree Cell
- It should be possible for the application developer to override the actions mapped to one of the areas
- It should be possible for the application developer to easily specify what a mouse action (say click) should do across the entire cell.
- Some platforms that have dedicated gestures for scrolling (such as the flick gesture in touch platforms). In such cases, these specific gestures should be supported.
- Note: There is some ambiguity in terms of how the white space is treated. As seen in the above diagram, we propose that by default clicking on the white space should select the node. Clicking on the whitespace and dragging should start a panning action (in addition to selecting the node).
...
2.1 Nodes should Open and Close
- The control should be able to support smooth animation during open and close.
[Parameters : Speed with which the animation for the open and close of the node, type of animation] - Tree component does not need to support the case where only one node is open at a time
- Applications may want to auto-open nodes with only one child node. The tree control itself should make this feasible. Implementation team may consider an attribute that the application developer can set to easily trigger this behavior if needed.
- By default the tree should remember expanded nodes and reopen in its prior state. Applications may want to:
- always reopen the tree with all the nodes closed & scrolled to the top,
- always reopen the tree in another state specified by the application developer or
- always reopen the tree in its previous state. Application developer should be able to specify one of these settings
...
2.2 The list component should be able to support horizontal and vertical scrolling
If a scroll bar is present, then the item with focus should be in the visible window, unless the the user explicitly scrolls off the view.
Scrolling should cause entire lines to appear or disappear from the viewable area (we should not see partially displayed row of text)
- In case the node name does not fit in the viewable area and has been truncates (and a horizontal scroll bar is presented), hovering over the node should bring up a tool tip with the entire node name
- When tree nodes are being opened the tree should scroll horizontally to ensure that the first few (7- 9 ?) characters of the newly visible child-nodes are in the view screen
- If a tree node is selected and then the tree is resized, the selected item should stay visible during and after the resize.
2.3 Should be able to select one or more items
- Should be able to select items by clicking
- Should be able to select multiple items
- Should be able to select multiple discontiguous items
(keyboard and selection conventions should be the same as those for the list spec.) - Should be able to have checkboxes in front of the node name, in order to facilitate selection
- UX rational: Sometimes need to incrementally "mark" nodes for other operations - more convenient than normal selection for later batch operations. This makes multi select via keyboard much simpler for users.
...
2.4 The tree control should support customized context menus when right clicking on a node
Sometimes, in addition to the right click menu (or instead of it) these actions are invoked via a pull down menu placed in the Title bar of the tree control. Actions may also be shown as buttons, icons or links in the cell that are revealed on hover (or mouseover).
UX Rationale for contextual menu: Common UX usage that needs to be supported
2.5 Should support Drag and Drop of nodes
- Nodes or elements can be dropped into other locations in the tree
- Nodes or elements can be dropped on to other locations in the UI outside the tree (where the drop action is appropriate, if the drop action is not appropriate for a certain area, the cursor should change into a stop cursor).
- The tree should provide drop feedback. By default it should disambiguate exactly which node the content will drop into. Application developers should be able to further customize this into cases where they want to convey that a certain node does not work as a drop-site or cases where they want to allow content to be dropped between two nodes (so that a new node is added at that location).
...
The tree component may need to convey to the user that the data in the tree is still loading. This can be at the level for the child node, parent node, several nodes, or globally. Spinners are animated icons shown when parts of the tree is still loading. Several cases are illustrated in the mock ups here:
Note: The child nodes need to be shown as spinners only if there is a lag in determining the exact icon to display. The appropriate icon should be shown as soon as it is available.
...
The diagram and table below discuss how these actions can be performed using the keyboard and tab traversal. After that we look at the mobile and TV platforms.
| Keyboard Operation (Win) | Keyboard Operation (Mac) | Action |
|---|---|---|
| Right Arrow | Right Arrow | Expand current selection (or go to first child node) |
| Left Arrow | Left Arrow | Collapse current selection (or go to parent node) |
| Up Arrow | Up Arrow | Move selection up one node |
| Down Arrow | Down Arrow | Move selection down one node |
| Home | Home | Move selection to the first node in the tree |
| End | End | Move selection to the last node in the tree |
| Page Up | Page Up | Move the selection up on the first fully visible item on the current page. If the first fully visible item is selected, move the selection on the first fully visible item on the previous page. |
| Page Down | Page Down | Move selection down on the last fully visible item on the current page. If the last fully visible item is selected, move the selection on the last fully visible item on the next page. |
| Ctrl-PgDn | Cmd-PgDn | Move focus down on the last fully visible item on the current page. If the last fully visible item is focused, move focus on the last fully visible item on the next page. |
| Ctrl-PgUp | Cmd-PgUp | Move focus up on the first fully visible item on the current page. If the first fully visible item is focused, move focus on the first fully visible item on the previous page. |
| Ctrl-A | Cmd-A | Select all nodes in the tree. Focus remains on the same item. |
| Shift-Up Arrow | Shift-Up Arrow | Extend selection up one node |
| Shift-Down Arrow | Shift-Down Arrow | Extend selection down one node |
| Shift-Home | Shift-Home | Extend selection to the top of the tree |
| Shift-End | Shift-End | Extend selection to the bottom of the tree |
| Shift-PgUp | Shift-PgUp | Select all items between anchor and the first fully visible item on the current page. If the first fully visible item is already included in the selection, extend the selection to the first fully visible item on the previous page. All previous selections, if applicable, are canceled. Available in multi-selection mode only. |
| Shift-PgDn | Shift-PgDn | Select all items between anchor and the last fully visible item on the current page. If the last fully visible item is already included in the selection, extend the selection to the last fully visible item on the next page. All previous selections, if applicable, are canceled. Available in multi-selection mode only. |
| F2 | F2 | Rename selected node |
| Enter | Enter | Save changes made to the selected node |
| Esc | Esc | Cancel changes made to the selected node |
| Ctrl-Up Arrow | Cmd-Up Arrow | Move focus up one node |
| Ctrl-Down Arrow | Cmd-Down Arrow | Move focus down one node |
| Ctrl-Home | Cmd-Home | Move focus to the first node in the tree |
| Ctrl-End | Cmd-End | Move selection to the last node in the tree |
| Space | Space | Select a single node, create anchor. |
| Ctrl-Space | Ctrl-Cmd-Space | Select/Deselect a single node, create anchor. |
| Shift-Space | Shift-Space | Select a range of nodes |
| * (numlock) | * (numlock) | Expand everything |
| + (numlock) | + (numlock) | Expand current selection |
| - (numlock) | - (numlock) | Collapse current selection |
| Ctrl-Shift-Up | Cmd-Shift-Up | Expands selection up by one item. Only in multi-selection modes. If focus is on an unselected item, pressing Ctrl-Shift-Up selects all items between anchor and the item which is right above the focused item. The item which is right above the focused item is also included in the selection. Available in multi-selection mode only. |
| Ctrl-Shift-Down | Cmd-Shift-Down | Expands selection down by one item. Only in multi-selection modes. If focus is on an unselected item, pressing Ctrl-Shift-Down selects all items between anchor and the item which is right below the focused item. The item which is right below the focused item is also included in the selection. Available in multi-selection mode only. |
| Ctrl-Shift-Space | Cmd-Shift-Space | Selects all items between anchor and focused item. Focused item is also included in the selection. Available in multi-selection mode only. |
| Ctrl-Shift-Home | Cmd-Shift-Home | Selects all items between anchor and the first item. Available in multi-selection mode only. |
| Ctrl-Shift-End | Cmd-Shift-End | Selects all items between anchor and the last item. Available in multi-selection mode only. |
| Ctrl-Shift-PageUp | Cmd-Shift-PageUp | Select all items between anchor and the first fully visible item on the current page. If the first fully visible item is already included in the selection, extend the selection to the first fully visible item on the previous page. Available in multi-selection mode only. |
| Ctrl-Shift-PageDown | Cmd-Shift-PageDown | Select all items between anchor and the last fully visible item on the current page. If the last fully visible item is already included in the selection, extend the selection to the last fully visible item on the next page. Available in multi-selection mode only. |
...
Overview
Content Tools
ThemeBuilder