Tree user interaction

  • 397 views
Uploaded on

Interacting Tree user in Flex

Interacting Tree user in Flex

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
397
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Tree user interaction Hemakumar.S Open Source Developer
  • 2. Tree user interaction
    • Users can edit tree control labels. The controls also support several keyboard navigation and editing keys. Editing a node label at run time.
    • Set the editable property of the Tree control to true to make node labels editable at run time. To edit a node label, the user selects the label, and then enters a new label or edits the existing label text.
    • To support label editing, the Tree control's List superclass uses the following events. These events belong to the ListEvent class:
  • 3. Events
    • itemEditBegin:
    • Dispatched when the editedItemPosition property has been set and the cell can be edited.
    • itemEditEnd:
    • Dispatched when cell editing session ends for any reason.
    • itemFocusIn:
    • Dispatched when tree node gets the focus: when a user selects the label or tabs to it.
  • 4. Cont….
    • itemFocusOut:
    • Dispatched when a label loses focus.
    • itemClick:
    • Dispatched when a user clicks on an item in the control.
    • Down ,ArrowPage, DownEnd:
    • Moves the caret to the end of the label.
    • Up ArrowPage UpHome:
    • Moves the caret to the beginning of the label.
    • Right Arrow:
    • Moves the caret forward one character.
  • 5. Edit labels by using Keyboard
    • Left Arrow:
    • Moves the caret backward one character.
    • Enter:
    • Ends editing and moves selection to the next visible node, which can then be edited. At the last node, selects the label.
    • Shift Enter:
    • Ends editing and moves selection to the previous visible node, which can then be edited. At the first node, selects the label.
  • 6. Cont….
    • Escape:
    • Cancels the edit, restores the text, and changes the row state from editing to selected.
    • TAB:
    • When in editing mode, accepts the current changes, selects the row below, and goes into editing mode with the label text selected. If at the last element in the tree or not in editing mode, sends focus to the next control.
    • Shift-TAB:
    • When in editing mode, accepts the current changes, selects the row above, and goes into editing mode. If at the first element in the tree or not in editing mode, sends focus to the previous control.
  • 7. Tree Navigation Keys
    • Down Arrow:
    • Moves the selection down one. When the Tree control gets focus, use the
    • Down arrow to move focus to the first node.
    • Up Arrow:
    • Moves the selection up one item.
    • Right Arrow:
    • Opens a selected branch node. If a branch is already open, moves to the first child node.
    • Left Arrow :
    • Closes a selected branch node. If a leaf node or a closed branch node is currently selected, selects the parent node.
    • Spacebar or * (Asterisk on numeric keypad):
    • Opens or closes a selected branch node (toggles the state).
    • + (Plus sign on numeric keypad):
    • Opens a selected branch node.
    • -(Minus sign on numeric keypad):
    • Closes a selected branch node.
  • 8. Cont….
    • Control + Arrow keys:
    • Moves the focus, but does not select a node. Use the Spacebar to select a node. End Moves the selection to the bottom of the list.
    • Home:
    • Moves the selection to the top of the list.
    • Page down:
    • Moves the selection down one page.
    • Page up:
    • Moves the selection up one page.
    • Control:
    • If the allowMultipleSelection property is true, allows multiple noncontiguous selections.
    • Shift:
    • If the allowMultipleSelection property is true, allows multiple contiguous selections.
  • 9. Thank You