How to use the flexx.ui.Widget function in flexx

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):

from flexx import ui
class MyApp(ui.App):
    ...
ui.HBox(children=[ui.Button(), ui.Button()])
ui.run()
# Hosts MyApp as before. The plain HBox ends up in the default app.

"""
##

import flexx
from flexx import ui


@ui.app(title='My app, new style!')
class Main(ui.Widget):
    
    def init(self):
        with ui.HBox() as self._hbox:
            self._b1 = ui.Button(text='Foo', flex=1)
            self._b2 = ui.Button(text='Bar', flex=2)


# client=Client(runtime='xul')  # Users should not have to care about client
# m = Main.launch(runtime='xul')  # pollute all widgets with extra name

m = Main.launch(runtime='firefox')
#m = Main()

def init(self):

        with ui.VBox():

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

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

def init(self):

        with ui.HBox():

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

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

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


class Deep(ui.Widget):
    def init(self):

        with ui.HFix():

            with ui.HFix():
                Deep1()
                Deep2()
                Deep3()

            with ui.VFix():
                Deep4()
                Deep5()
                Deep6()


if __name__ == '__main__':

ui.BokehWidget(plot=p1)
                ui.BokehWidget(plot=p2)

"""


import os

from flexx import event
from flexx.pyscript import window
from flexx.ui import Widget

Bokeh = None  # fool flakes


class BokehWidget(Widget):
    """ A widget that shows a Bokeh plot object.

    For Bokeh 0.12 and up. The plot's ``sizing_mode`` property is set to
    ``stretch_both`` unless it was set to something other than ``fixed``. Other
    responsive modes are 'scale_width', 'scale_height' and 'scale_both`, which
    all keep aspect ratio while being responsive in a certain direction.
    """

    CSS = """
    .flx-BokehWidget > .plotdiv {
        overflow: hidden;
    }
    """

    def init(self):

value=default,
                                                   step=step)
                                lineeditor = ui.LineEdit(title=title,
                                                         text=default)
                                self.sliders.append((slider, lineeditor))
                            self.fields[parameter] = slider
                            self.result_property[parameter] = 'value'
                            slider.connect('value', self.stt)
                            lineeditor.connect('submit', self.tts)
                            self.slider_to_textfield[slider] = lineeditor
                            self.textfield_to_slider[lineeditor] = slider
                            if is_integer:
                                self.int_sliders.add(slider)

                        elif isinstance(value, str):
                            with ui.Widget():
                                ui.Label(text=title,
                                         wrap=True, style="width: 80%")
                                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:",

def init(self):
        
        with ui.VBoxLayout():
            with ui.FormLayout(spacing=1):
                ui.Label(self, 'Name')
                self._name = ui.TextInput(self)
                ui.Label(self, 'Age')
                self._age = ui.IntInput(self)
            with ui.HBoxLayout():
                ui.Widget(self, flex=1)  # spacer
                ui.Button(self, 'Cancel', 
                          on_click=self.close, 
                          flex=0)
                ui.Button(self, 'Ok', 
                          on_click=self.process, 
                          flex=0)

def init(self):
        self._box = HBox(parent=self)
        with self._box:
            with VBox():
                self._left = VBox(flex=0)
            with VBox(flex=0):
                #self._plot = PlotWidget(flex=1)
                self._plot = PlotWidget(flex=0, 
                                        style='min-width:640px; min-height:480px;')
                Widget(flex=1)
            Widget(flex=1)
        
        # Add stretch element to left vbox
        Widget(flex=1, parent=self._left)

def init(self):
        self._box = HBox(parent=self)
        with self._box:
            with VBox():
                self._left = VBox(flex=0)
            with VBox(flex=0):
                #self._plot = PlotWidget(flex=1)
                self._plot = PlotWidget(flex=0, 
                                        style='min-width:640px; min-height:480px;')
                Widget(flex=1)
            Widget(flex=1)
        
        # Add stretch element to left vbox
        Widget(flex=1, parent=self._left)

"""
Simple hello world that demonstrates an interactive style for writing
simple apps. An empty widget is launched as an app, and other widgets
are added to it.

In an environment that runs the asyncio event loop in the REPL (e.g. Pyzo)
one can add and remove widgets interactively.
"""

from flexx import app, ui

app.init_interactive()

m = app.launch(ui.Widget)  # Main widget

b1 = ui.Button(text='Hello', parent=m)
b2 = ui.Button(text='world', parent=m)

app.run()