How to use the flexx.ui function in flexx

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

with ui.HBox(flex=1):
                    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)
                with ui.HBox(flex=0):
                    ui.Button(text='Box A', flex=1)
                    ui.Button(text='Box B', flex=1)
                    ui.Button(text='Box C is a bit longer', flex=1)
                with ui.HBox(flex=1):
                    ui.Button(text='Box A', flex=1)
                    ui.Button(text='Box B', flex=0)
                    ui.Button(text='Box C is a bit longer', flex=2)
                with ui.HBox(flex=2):
                    ui.Button(text='Box A', flex=1)
                    ui.Button(text='Box B', flex=2)
                    ui.Button(text='Box C is a bit longer', flex=3)
            
            with ui.VBox():
                
                with ui.HBox(flex=1):
                    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)
                with ui.HBox(flex=0):
                    ui.Button(text='Box A', flex=1)
                    ui.Button(text='Box B', flex=1)
                    ui.Button(text='Box C is a bit longer', flex=1)
                with ui.HBox(flex=1):
                    ui.Button(text='Box A', flex=1)
                    ui.Button(text='Box B', flex=0)
                    ui.Button(text='Box C is a bit longer', flex=2)
                with ui.HBox(flex=2):

def init(self):
            self.ctx = self.node.getContext('2d')#, {alpha: false})
        
        @event.connect('mouse_wheel')
        def _change_font_size(self, *events):
            s = self.font_size
            for ev in events:
                if ev.vscroll > 0:
                    s += 1
                else:
                    s -= 1
            self.font_size = max(5, min(s, 30))

""" * 100

class Editor(ui.CanvasWidget):
    
    @event.prop(both=True)
    def font_size(self, v):
        return int(v)
    
    class JS:
        
        text = TEXT
        
        def init(self):
            self.ctx = self.node.getContext('2d')#, {'alpha': False})
            
            # Use trick to get HiDPI text:
            # http://www.html5rocks.com/en/tutorials/canvas/hidpi/
            self.dpratio = window.devicePixelRatio or 1
            self.bsratio = (self.ctx.webkitBackingStorePixelRatio or

self.fields[parameter] = \
                                    ui.LineEdit(title=title,
                                                text=value,
                                                style='width: 95%;')
                            self.result_property[parameter] = 'text'
                        elif value is None:
                            ui.Label(text=title, wrap=True)
                        else:  # field
                            print(str(value) + "not recognized")
                with ui.VBox():
                    self.btn = ui.Button(text="start simulation")
                with ui.GroupWidget(title="Save"):
                    with ui.HBox():
                        self.name = ui.LineEdit(title="Name:",
                                                placeholder_text='name')
                        self.save = ui.Button(text="Save Parameters")
                    self.description = ui.LineEdit(
                        title="Description",
                        text='',
                        style='width: 95%;',
                        placeholder_text='description')

import abcEconomics
from flexx import ui


class LoadForm(ui.Widget):
    def init(self):
        with ui.Widget(style="overflow-y: scroll"):
            with ui.VBox(style="overflow-y: scroll") as self.vbox:
                name_descriptions = [(d['name'], d['description'])
                                     for d in abcEconomics.parameter_database.all()]
                for name, desc in name_descriptions:
                    with ui.GroupWidget():
                        btn = ui.Button(title=name, text=name)
                        delete = ui.Button(title=name, text='(del)')
                        ui.Label(text=desc)

                    btn.connect('mouse_click', self.wdg)
                    delete.connect('mouse_click', self.delete)

    def update(self, event):
        with self.vbox:

def main():
    
    pages = {}
    class_names = []
    layouts = set()
    
    # Get all pages and class names
    namespace = {}; namespace.update(ui.__dict__); namespace.update(ui.layouts.__dict__); namespace.update(ui.widgets.__dict__); namespace.update(ui.pywidgets.__dict__)
    for mod in namespace.values():
        if isinstance(mod, ModuleType):
            classes = []
            for w in mod.__dict__.values():
                if isinstance(w, type) and issubclass(w, (app.PyComponent, app.JsComponent)):
                    if w.__module__ == mod.__name__ and not w.__name__.startswith("_"):
                        classes.append(w)
                        if issubclass(w, ui.Layout):
                            layouts.add(w.__name__)
            if classes:
                classes.sort(key=lambda x: x.__name__)
                classes.sort(key=lambda x: len(x.mro()))
                class_names.extend([w.__name__ for w in classes])
                pages[mod.__name__] = classes
    
    # Create page for each module

A programmer can build content using these html widgets (as in list 1),
or embed plain HTML inside one such widget (as in list 2). In the
first approach the widgets can still be used in the Flexx way, but the
second approach is a bit "lighter" (e.g. the elements don't have a
representation on the Python side).

Widgets programmed in this way are widgets like any other and can
naturally be embedded in a larger Flexx application. This makes it
possible to mix styles depending on needs or programmer preferences.
"""

from flexx import app, event, ui

window = None  # fool pyflakes
html = ui.html  # shorthand

LIPSUM = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
"""


class Example(ui.Widget):
    
    CSS = """
    .flx-Example {