How to use flexx - 10 common examples

    @event.reaction('buttons.children*.pointer_down')
    def run_test(self, *events):
        global window, perf_counter
        self.status.set_text('Test results: ')
        self.progress.set_value(0)

        tests = []
        for ev in events:
            if isinstance(ev.source, ui.Button):
                sze = 5 if '5' in ev.source.text else 1
                n = int(ev.source.text.split(' ')[0])
                for i in range(n):
                    tests.append(sze)

        self.progress.set_max(len(tests))
        self._start_time = perf_counter()
        for n in tests:

def test_print(self):
        # Test code
        assert py2js('print()') == 'console.log();'
        assert py2js('print(3)') == 'console.log(3);'
        assert py2js('foo.print()') == 'foo.print();'
        
        # Test single
        assert evalpy('print(3)') == '3'
        assert evalpy('print(3); print(3)') == '3\n3'
        assert evalpy('print(); print(3)') == '\n3'  # Test \n
        assert evalpy('print("hello world")') == 'hello world'
        # Test multiple args
        assert evalpy('print(3, "hello")') == '3 hello'
        assert evalpy('print(3+1, "hello", 3+1)') == '4 hello 4'
        # Test sep and end
        assert evalpy('print(3, 4, 5)') == '3 4 5'
        assert evalpy('print(3, 4, 5, sep="")') == '345'
        assert evalpy('print(3, 4, 5, sep="\\n")') == '3\n4\n5'
        assert evalpy('print(3, 4, 5, sep="--")') == '3--4--5'
        assert evalpy('print(3, 4, 5, end="-")') == '3 4 5-'

def test_var_args3(self):
        code1 = 'var x = ' + self.method3.js.jscode
        lines = [line for line in code1.split('\n') if line]
        
        code2 = py2js('x(2, 3)')
        assert evaljs(code1 + code2, False) == '[2,3]'
        code2 = py2js('x()')
        assert evaljs(code1 + code2, False) == '[]'
        code2 = py2js('a=[2,3]\nx(*a)')
        assert evaljs(code1 + code2, False) == '[2,3]'
        code2 = py2js('a=[2,3]\nx(1,2,*a)')
        assert evaljs(code1 + code2, False) == '[1,2,2,3]'

def init(self):
        self.t = time()

        with flx.HFix():
            self.label1 = flx.Label(flex=2, style='overflow-y:scroll; font-size:60%;')
            flx.Widget(flex=1)
            with flx.VFix(flex=2):
                flx.Widget(flex=1)
                test_widget1 = flx.Widget(flex=2, style='background: #afa;')
                flx.Widget(flex=1)
                test_widget2 = flx.Widget(flex=2, style='background: #faa;')
                flx.Widget(flex=1)
            flx.Widget(flex=1)
            self.label2 = flx.Label(flex=1, style='overflow-y:scroll; font-size:60%;')

        for name in ['pointerdown', 'pointermove', 'pointerup', 'pointercancel',
                     'mousedown', 'mousemove', 'mouseup', 'click', 'dblclick',
                     'touchstart', 'touchmove', 'touchend', 'touchcancel'
                     ]:
            test_widget1.node.addEventListener(name,
                lambda e: self.show_event1(e.type))

""" An example that defines two apps, one with a single hbox and
one with hboxes in vboxes in hboxes. For performance testing
"""

from flexx import ui


class MyApp1(ui.App):
    
    def init(self):
        
        with ui.VBox() as self.l1:
            ui.Button(text='Box A', flex=0)
            ui.Button(text='Box B', flex=0)
            ui.Button(text='Box C is a bit longer', flex=0)


class MyApp2(ui.App):
    
    def init(self):
        
        with ui.HBox():
            
            with ui.VBox():

def init(self):

        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)

def init(self):
        with ui.HBox(spacing=20):
            with ui.FormLayout() as self.form:
                # todo: can this be written with one line per row?
                # e.g. self.b1 = ui.Button(label='Name', text='Hola')
                ui.Label(text='Name:')
                self.b1 = ui.Button(text='Hola')
                ui.Label(text='Age:')
                self.b2 = ui.Button(text='Hello world')
                ui.Label(text='Favorite color:')
                self.b3 = ui.Button(text='Foo bar')
                #ui.Widget(flex=1)
            with ui.FormLayout() as self.form:
                # e.g. self.b1 = ui.Button(label='Name', text='Hola')
                ui.Widget(flex=1)  # Add a flexer
                ui.Widget()
                ui.Label(text='Pet name:')
                self.b1 = ui.Button(text='Hola')
                ui.Label(text='Pet Age:')

def init(self):
        with ui.VBox():

            self.reset = ui.Button(text='Reset event system')
            with ui.HFix(flex=1):
                SyncedSlidersWrong(flex=1)
                SyncedSlidersRight(flex=1)

            ui.Widget(flex=1)  # spacer

def init(self):
        super().init()

        with flx.VBox():

            flx.Label(text='You should see 5 pairs of buttons')

            with flx.HFix():  # Use minsize in CSS of button widget
                with flx.GroupWidget(title='asdas'):
                    with flx.HFix():
                        flx.Button(text='foo')
                        flx.Button(text='bar')

            with flx.HFix(minsize=50):  # Set minsize prop on container
                flx.Button(text='foo')
                flx.Button(text='bar')

            with flx.HFix():  # Set minsize prop on widget
                flx.Button(text='foo', minsize=50)
                flx.Button(text='bar')

            with flx.HFix():  # Old school setting of style
                flx.Button(text='foo', style='min-height:50px;')
                flx.Button(text='bar', )

            with flx.Widget():  # Singleton widgets (e.g. custom classes)
                with flx.HFix():
                    flx.Button(text='foo')
                    flx.Button(text='bar')

            flx.Widget(flex=1, style='background:#f99;')  # spacer

class Deep2(ui.Widget):

    def init(self):

        with ui.VBox():

            ui.Label(text='Widget in a vbox in a vbox in a vbox')

            with ui.VBox(flex=1):

                with ui.VBox(flex=1):
                    ui.Label(text='---')
                    Red(flex=1)


class Deep3(ui.Widget):

    def init(self):

        with ui.VBox():

            ui.Label(text='Widget in a vbox in a hbox in a vbox')

            with ui.HBox(flex=1):
                ui.Label(text='|||')

                with ui.VBox(flex=1):
                    ui.Label(text='---')
                    Red(flex=1)


class Deep4(ui.Widget):