Feature: (example for) editable TreeItem title

[edreamleo]

The flx.Widget docs mention _render_dom, but this is Greek to me. Earlier on the same (Widget) page is this generic example:

def _render_dom(self):
        # This method automatically gets called when any of the used
        # properties (only count, in this case) changes.
        return flx.create_element('div', {},
            flx.create_element('button',
                               {'onclick': self.increase_count},
                               '+'),
            flx.create_element('span',
                               {'style.background': '#afa'},
                               str(self.count)),
            )

Would it be possible to show how to make a flx.TreeItem editable? This would make a great addition to the TreeWidget demo.

The TreeItem class in ui.widgets.tree.py contains this:

def _render_dom(self):
    # We render more or less this:
    # <li>
    #     <span class='flx-TreeItem'>     # the row that represents the item
    #         <span class='padder'></span>    # padding
    #         <span class='collapsebut'></span>   # the collapse button
    #         <span class='checkbut'></span>  # the check button
    #         <span class='title'></span>     # the title text for this item
    #         <span class='text'></span>      # the text for this item
    #         </span>
    #     <ul></ul>                           # to hold sub items
    # </li>

    subnodes = [item.outernode for item in self.children]

    # Get class names to apply to the li and row. We apply the clases to
    # both to allow styling both depending on these values, but strictly
    # speaking visible and collapsed are only needed for the li and
    # selected and checked for the span.
    cnames = []
    collapsed = bool(self.collapsed) if len(self.children) > 0 else self.collapsed
    for name, val in [('visible', self.visible),
                      ('collapsed', collapsed),
                      ('selected', self.selected),
                      ('checked', self.checked),
                      ]:
        cnames.append(name + '-' + str(val))
    cnames = ' '.join(cnames)

    # Get title and text content
    title, text = self._render_title(), self._render_text()

    # Note that the outernode (the <li>) has not flx-Widget nor flx-TreeItem
    text_class = 'text hastitle' if len(title) > 0 else 'text'
    return create_element('li', {'className': cnames},
                create_element('span', {'className': 'flx-TreeItem ' + cnames},
                    create_element('span', {'className': 'padder'}),
                    create_element('span', {'className': 'collapsebut'}),
                    create_element('span', {'className': 'checkbut'}),
                    create_element('span', {'className': 'title'}, title),
                    create_element('span', {'className': text_class}, text),
                    ),
                create_element('ul', {}, subnodes),
                )

This is all very cool, but it's not exactly obvious how to make headlines editable ;-)

I'll be happy to dive in, but some hints would be welcome.

Edward

[edreamleo]

Would it be possible to show how to make a flx.TreeItem editable?

Or even better, add editable and editing properties!

[edreamleo]

My brother Speed has offered to help. He understands JS more than I do.

[almarklein]

The flx.Widget docs mention _render_dom, but this is Greek to me.

Yes, it's not a very Pythonic pattern. The idea is borrowed from how react and vue work. It looks very different, but the nice thing is that its declarative, which makes it less prone to errors, and its also quite efficient thanks to the use of a virtual DOM.

Would it be possible to show how to make a flx.TreeItem editable?

That would indeed require overloading quite a bit of the _render_dom method, and would maybe be a bit too involved to include in that demo. A separate examples could work though.

Or even better, add editable and editing properties!

That might definitely be worth exploring :)

[edreamleo]

On Fri, Nov 23, 2018 at 4:54 AM Almar Klein ***@***.***> wrote: Would it be possible to show how to make a flx.TreeItem editable? That would indeed require overloading quite a bit of the _render_dom method, and would maybe be a bit too involved to include in that demo. A separate examples could work though. Or even better, add editable and editing properties! That might definitely be worth exploring :)

Oh good :-) Edward