Tree¶

A TreeWidget object can contain TreeItems, which in turn, can contain TreeItems to construct a tree. First an example flat list with items that are selectable and checkable:

from flexx import app, ui

class Example(ui.Widget):

    def init(self):

        with ui.TreeWidget(max_selected=2):

            for t in ['foo', 'bar', 'spam', 'eggs']:
                ui.TreeItem(text=t, checked=False)

Next, a tree example illustrating connecting to various item events, and custom styling:

from flexx import app, event, ui

class Example(ui.Widget):

    CSS = '''
    .flx-TreeWidget {
        background: #000;
        color: #afa;
    }
    '''

    def init(self):

        with ui.BoxPanel():

            self.label = ui.Label(flex=1, style='overflow-y: scroll;')

            with ui.TreeWidget(flex=1, max_selected=1) as self.tree:
                for t in ['foo', 'bar', 'spam', 'eggs']:
                    with ui.TreeItem(text=t, checked=None):
                        for i in range(4):
                            item2 = ui.TreeItem(text=t + ' %i'%i, checked=False)
                            if i == 2:
                                with item2:
                                    ui.TreeItem(title='A', text='more info on A')
                                    ui.TreeItem(title='B', text='more info on B')
    class JS:

        @event.connect('tree.items**.checked', 'tree.items**.selected',
                    'tree.items**.collapsed')
        def on_event(self, *events):
            for ev in events:
                id = ev.source.title or ev.source.text
                if ev.new_value:
                    text = id + ' was ' + ev.type
                else:
                    text = id + ' was ' + 'un-' + ev.type
                self.label.text = text + '<br />' +  self.label.text

class flexx.ui.TreeItem(*args, **kwargs)¶

Inherits from: Model

An item to put in a TreeWidget. TreeItem objects are Model objects, but do not inherit from ui.Widget.

Items are collapsable/expandable if their collapsed property is set to True or False (i.e. not None), or if they have sub items. Items are checkable if their checked property is set to True or False (i.e. not None). Items are selectable depending on the selection policy defined by TreeWidget.max_selected.

checked¶

property – Whether this item is checked (i.e. has its checkbox set). The value can be None, True or False. None (the default). means that the item is not checkable.

collapsed¶

property – Whether this item is expanded (i.e. shows its children). The value can be None, True or False. None (the default) means that the item is not collapsable (unless it has sub items).

items¶

property – The list of sub items.

mouse_click¶

emitter – Event emitted when the item is clicked on. Depending on the tree’s max_selected, this can result in the item being selected/deselected.

mouse_double_click¶

emitter – Event emitted when the item is double-clicked.

selected¶

property – Whether this item is selected. Depending on the TreeWidget’s policy (max_selected), this can be set/unset on clicking the item.

text¶

property – The text for this item. Can be used in combination with title to obtain two columns.

title¶

property – The title for this item that appears before the text. Intended for display of key-value pairs. If a title is given, the text is positioned in a second (virtual) column of the tree widget.

visible¶

property – Whether this item (and its sub items) is visible.

class flexx.ui.TreeWidget(*init_args, **kwargs)¶

Inherits from: Widget

A Widget that can be used to structure information in a list or a tree. To add items, create TreeItem objects in the context of a TreeWidget. Sub items can be created by instantiating TreeItems in the context of another TreeItem.

When the items in the tree have no sub items, the TreeWidget is in “list mode”. Otherwise, items can be collapsed/expanded etc. This widget can be fully styled using CSS, see below.

Style

Style classes applied to the TreeWidget:

• flx-listmode is set on the widget’s node if no items have sub items.

Style classes for a TreeItem’s elements:

• flx-TreeItem indicates the row of an item (its text, icon, and checkbox).
• flx-TreeItem > collapsebut the element used to collapse/expand an item.
• flx-TreeItem > checkbut the element used to check/uncheck an item.
• flx-TreeItem > text the element that contains the text of the item.
• flx-TreeItem > title the element that contains the title of the item.

Style classes applied to the TreeItem, corresponding to its properties:

• visible-true and visible-false indicate visibility.
• selected-true and selected-false indicate selection state.
• checked-true, checked-false and checked-null indicate checked state, with the null variant indicating not-checkable.
• collapsed-true, collapsed-false and collapsed-null indicate collapse state, with the null variant indicating not-collapsable.

get_all_items()¶

Get a flat list of all TreeItem instances in this Tree (including sub items and sub-sub items, etc.).

items¶

property – The list of (direct) TreeItem instances for this tree.

max_selected¶

property – The maximum number of selected items. Default 0. Can be -1 to allow any number of selected items. This determines the selection policy.