How to use the flexx.app function in flexx

global perf_counter
        t = perf_counter() - self._start_times.pop(0)
        mib = data.byteLength / 1024 / 1024
        text = 'Received %i MiB in %s seconds.' % (mib, str(t)[:5])
        self.status.set_html(self.status.html + '  ' + text)
        self.progress.set_value(self.progress.value + 1)

        if len(self._start_times) == 0:
            t = perf_counter() - self._start_time
            text = 'Total time %s.' % str(t)[:5]
            self.status.set_html(self.status.html + '  ' + text)


if __name__ == '__main__':
    m = app.launch(SpeedTest, 'firefox-browser')
    app.run()

def benchmark(self):
        print()
        print('==== PScript on %s =====' % BACKEND)
        print()
        # pystone_main()
        convolve()
        bench_str()


b1 = app.launch(BenchmarkerPy, BACKEND)
with b1:
    b2 = BenchmarkerJs()
b1.benchmark()
b2.benchmark()

app.run()

with ui.VBox():

            ui.Label(text='Widgets in BoxPanels in a widget in a vbox')

            with ui.Widget(flex=1):
                with ui.VFix():
                    with ui.HFix():
                        Red(flex=1)
                        Red(flex=1)
                    with ui.HFix():
                        Red(flex=1)
                        Red(flex=1)


if __name__ == '__main__':
    m = app.launch(Deep2, 'app')
    app.run()

ui.Label(text='Widgets in BoxPanels in a widget in a vbox')

            with ui.Widget(flex=1):
                with ui.VFix():
                    with ui.HFix():
                        Red(flex=1)
                        Red(flex=1)
                    with ui.HFix():
                        Red(flex=1)
                        Red(flex=1)


if __name__ == '__main__':
    m = app.launch(Deep2, 'app')
    app.run()

t0 = time()
    for i in range(1000000):
        def f():
            pass
    print("  create_function.py", time()-t0)

    t0 = time()
    def g(x):
        return x
    for i in range(1000000):
        g(i)
    print("  function_call.py", time()-t0)


class BenchmarkerPy(app.PyComponent):

    @event.action
    def benchmark(self):
        print('\n==== Python %s %s =====\n' % (platform.python_implementation(),
                                               platform.python_version()))
        # pystone_main()
        convolve()
        bench_str()


class BenchmarkerJs(app.JsComponent):

    @event.action
    def benchmark(self):
        print()
        print('==== PScript on %s =====' % BACKEND)

class PrimeFinderJs(app.JsComponent):

    @event.action
    def find_prime_js(self, n):
        find_prime(n)


if __name__ == '__main__':

    # Create app instance
    finder = app.launch(PrimeFinder, 'app or chrome-app')

    finder.find_prime_py(2000)  # 0.6-0.7 s
    finder.find_prime_js(2000)  # 0.1-0.2 s

    app.run()

"""
This example demonstrates the order of initialization:

* Initial property values are set.
* The init() method gets called.
* Events are handled.
"""

from flexx import app, event


class Example(app.Model):
    
    def init(self):
        print('Py: in init')
        self.spam = 5
    
    @event.prop
    def foo(self, v=2):
        print('Py: setting foo')
        return v
    
    @event.connect('foo')
    def on_foo(self, *events):
        for ev in events:
            print('Py: handling %s event' % ev.type, self.foo + self.spam)

    class JS:

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.
        """)

    flex = event.FloatPairProp((0, 0), settable=True, doc="""
        How much space this widget takes (relative to the other
        widgets) when contained in a flexible layout such as HBox,
        HFix, HSplit or FormLayout. A flex of 0 means to take

vertical, or their reversed variants 'hr' and 'vr'. Settable with
        values: 0, 1, 'h', 'v', 'hr', 'vr', 'horizontal', 'vertical',
        'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'
        (insensitive to case and use of dashes).
        """)
    
    spacing = event.FloatProp(4, settable=True, doc="""
        The space between two child elements (in pixels).
        """)

    padding = event.FloatProp(1, settable=True, doc="""
        The empty space around the layout (in pixels).
        """)

    # splitter_positions = event.TupleProp(doc="""  xx local property!
    splitter_positions = app.LocalProperty(doc="""
        The preferred relative positions of the splitters. The actual
        positions are subject to minsize and maxsize constraints
        (and natural sizes for box-mode).
        """)

    def __init__(self, *args, **kwargs):
        kwargs['mode'] = kwargs.get('mode', self._DEFAULT_MODE)
        kwargs['orientation'] = kwargs.get('orientation', self._DEFAULT_ORIENTATION)

        self._seps = []
        self._dragging = None

        super().__init__(*args, **kwargs)

        if 'Split' in self._id and 'spacing' not in kwargs:
            self.set_spacing(8)

class JS:
        
        @event.connect('foo')
        def react_to_foo_a(self, *events):
            for ev in events:
                print('A: foo changed from %s to %s' % (ev.old_value,
                                                        ev.new_value))
        
        @event.connect('foo')
        def react_to_foo_b(self, *events):
            print('B: foo changed from %s to %s' % (events[0].old_value, 
                                                    events[-1].new_value))


class MyModel2(app.Model):
    # Has a prop on JS, react in Py
    
    @event.connect('foo')
    def react_to_bar_a(self, *events):
        for ev in events:
            print('A: foo changed from %s to %s' % (ev.old_value,
                                                    ev.new_value))
    
    @event.connect('foo')
    def react_to_bar_b(self, *events):
        print('B: foo changed from %s to %s' % (events[0].old_value, 
                                                events[-1].new_value))
    
    class JS:
        
        @event.prop