How to use the flexx.event.StringProp function in flexx

border-bottom: 2px solid rgba(0, 0, 0, 0.6);
        }
        .flx-_FileBrowserJS > u {
            width: 100%;
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            text-decoration: none;
        }
        .flx-_FileBrowserJS > i {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            width: 100%;
        }
    """

    _items = event.ListProp(settable=True)
    _dirname = event.StringProp(settable=True)


    def init(self):
        self.node.onclick = self._nav

    def _render_dom(self):
        dirname = self._dirname.rstrip(sep)
        pparts = dirname.split(sep)
        path_els = []
        for i in range(0, len(pparts)):
            el = create_element("a",
                {"dirname": sep.join(pparts[:i+1]) + sep}, pparts[i] + sep)
            path_els.append(el)
        elements = []
        elements.append(create_element("b", {},
                        create_element("a",

DEFAULT_MIN_SIZE = 10, 24

    CSS = """
        .flx-Label {
            border: 0px solid #454;
            user-select: text;
            -moz-user-select: text;
            -webkit-user-select: text;
            -ms-user-select: text;
        }"""

    text = event.StringProp('', doc="""
        The text shown in the label (HTML is shown verbatim).
        """)

    html = event.StringProp('', doc="""
        The html shown in the label.

        Warning: there is a risk of introducing openings for XSS attacks
        when html is introduced that you do not control (e.g. from user input).
        """)

    wrap = event.IntProp(0, settable=True, doc="""
        Whether the content is allowed to be wrapped on multiple
        lines. Set to 0/False for no wrap (default), 1/True for word-wrap,
        2 for character wrap.
        """)

    def init(self):
        if self.text:
            self.set_text(self.text)
        elif self.html:

The id of the DOM element that contains this widget if
        parent is None. Use 'body' to make this widget the root.
        """)

    parent = event.ComponentProp(None, doc="""
        The parent widget, or None if it has no parent. Setting
        this property will update the "children" property of the
        old and new parent.
        """)

    children = app.LocalProperty((), doc="""
        The child widgets of this widget. This property is not settable and
        only present in JavaScript.
        """)

    title = event.StringProp('', settable=True, doc="""
        The string title of this widget. This is used to mark
        the widget in e.g. a tab layout or form layout, and is used
        as the app's title if this is the main widget.
        """)

    icon = app.LocalProperty('', settable=False, doc="""
        The icon for this widget. This is used is some widgets classes,
        and is used as the app's icon if this is the main widget.
        It is settable from Python, but only present in JavaScript.
        """)

    css_class = event.StringProp('', settable=True, doc="""
        The extra CSS class name to asign to the DOM element.
        Spaces can be used to delimit multiple names. Note that the
        DOM element already has a css class-name corresponding to
        its class (e.g. 'flx-Widget) and all its superclasses.

"""
Example similar to greeter1.py, but with reactions defined outside of
the class. This style is generally not recommended.
"""

from flexx import event

class Person(event.Component):
    
    first_name = event.StringProp('Jane', settable=True)
    last_name = event.StringProp('Doe', settable=True)
    children = event.ListProp([], doc='The children of this person')
    
    @event.action
    def add_child(self, child):
        self._mutate_children(self.children + [child])
    

p1 = Person()

# Actions defined outside the class

@p1.reaction('first_name', 'last_name')
def greet_explicit1(*events):
    for ev in events:
        p = ev.source

value of ``editable``.
        """)

    selected_index = event.IntProp(-1, settable=True, doc="""
        The currently selected item index. Can be -1 if no item has
        been selected or when the text was changed manually (if editable).
        Can also be programatically set.
        """)

    selected_key = event.StringProp('', settable=True, doc="""
        The currently selected item key. Can be '' if no item has
        been selected or when the text was changed manually (if editable).
        Can also be programatically set.
        """)

    placeholder_text = event.StringProp('', settable=True, doc="""
        The placeholder text to display in editable mode.
        """)

    editable = event.BoolProp(False, settable=True, doc="""
        Whether the combobox's text is editable.
        """)

    options = event.TupleProp((), settable=True, doc="""
        A list of tuples (key, text) representing the options. Both
        keys and texts are converted to strings if they are not already.
        For items that are given as a string, the key and text are the same.
        If a dict is given, it is transformed to key-text pairs.
        """)

    _highlighted = app.LocalProperty(-1, settable=True, doc="""
        The index of the currently highlighted item.

    @event.emitter
    def _nav(self, ev):
        dirname = ev.target.dirname or None
        filename = ev.target.filename or None
        if dirname or filename:
            return {"dirname": dirname, "filename": filename}


class FileBrowserWidget(PyWidget):
    """ A PyWidget to browse the file system. Experimental. This could be the
    basis for a file open/save dialog.
    """

    _WidgetCls = _FileBrowserJS

    path = event.StringProp("~", doc="""
        The currectly shown directory (settable). Defaults to the user directory.
        """)

    @event.action
    def set_path(self, dirname=None):
        """ Set the current path. If an invalid directory is given,
        the path is not changed. The given path can be absolute, or relative
        to the current path.
        """
        if dirname is None or not isinstance(dirname, str):
            dirname = "~"
        if dirname.startswith("~"):
            dirname = os.path.expanduser(dirname)
        if not os.path.isabs(dirname):
            dirname = os.path.abspath(os.path.join(self.path, dirname))
        # Set if valid, otherwise default to home dir

"""

# todo: also a one-liner to invoke actions from emitters (issue #425)

from flexx import event


class Person(event.Component):

    first_name = event.StringProp('Jane', settable=True)
    last_name = event.StringProp('Doe', settable=True)


class Greeter(event.Component):

    message = event.StringProp('', settable=True)

    @event.reaction
    def show_message(self):
        print('Message:', self.message)

p = Person()

# This is the line that this is about
g = Greeter(message=lambda: p.first_name + ' ' + p.last_name)

p.set_first_name('Alice')

event.loop.iter()

# _phosphor_boxpanel = RawJS("flexx.require('phosphor/lib/ui/boxpanel')")


class BaseBoxLayout(Layout):
    """ Base class for BoxLayout and BoxPanel.
    """
    
    def __init__(self, *args, **kwargs):
        kwargs['orientation'] = kwargs.get('orientation', self._DEFAULT_ORIENTATION)
        super().__init__(*args, **kwargs)
    
    spacing = event.FloatProp(5, settable=True, doc="""
        The space between two child elements (in pixels)
        """)
    
    orientation = event.StringProp('h', doc="""
        The orientation of the child widgets. 'h' or 'v'. Default
        horizontal. The items can also be reversed using 'hr' and 'vr'.
        """)
    
    def set_orientation(self, v=None):
        """ Set the orientation. Allowed values are: 0, 1,
        'h', 'v', 'hr', 'vr', 'horizontal', 'vertical',
        'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'.
        """
        if v is None:
            v = self._DEFAULT_ORIENTATION
        if isinstance(v, str):
            v = v.lower().replace('-', '')
        v = {'horizontal': 'h', 0: 'h', 'lefttoright': 'h',
             'vertical': 'v', 1: 'v', 'toptobottom': 'v',
             'righttoleft': 'hr', 'bottomtotop': 'vr'}.get(v, v)

from tornado.web import StaticFileHandler

class ScaleImageWidget(flx.Widget):
    """ Display an image from a url.
    
    The ``node`` of this widget is an
    `<img> `_
    wrapped in a `<div> `_
    (the ``outernode``) to handle sizing.
    """

    DEFAULT_MIN_SIZE = 16, 16

    _sequence = 0

    source = event.StringProp('', settable=True, doc="""
        The source of the image, This can be anything that an HTML
        img element supports.
        """)

    stretch = event.BoolProp(False, settable=True, doc="""
        Whether the image should stretch to fill all available
        space, or maintain its aspect ratio (default).
        """)

    def _create_dom(self):
        global window
        outer = window.document.createElement('div')
        inner = window.document.createElement('img')
        outer.appendChild(inner)
        return outer, inner
</div>

}
        .flx-DropdownContainer > .flx-Widget {
            position: fixed;
            min-height: 100px;
            max-height: 300px;
            width: 200px;
            background: white;
            z-index: 10001;
            display: none;
        }
        .flx-DropdownContainer.expanded > .flx-Widget {
            display: initial;
        }
    """

    text = event.StringProp('', settable=True, doc="""
        The text displayed on the dropdown widget.
        """)

    def _render_dom(self):
        nodes = super()._render_dom()
        for widget in self.children:
            nodes.append(widget.outernode)
        return nodes

    def _expand(self):
        rect = super()._expand()
        node = self.children[0].outernode
        node.style.left = rect.left + 'px'
        node.style.top = (rect.bottom - 1) + 'px'
        # node.style.width = (rect.width - 6) + 'px'