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

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

self.heading = flx.LineEdit(title="Heading", text="")
                self.pitch = flx.LineEdit(title="Pitch", text="")
                self.roll = flx.LineEdit(title="Roll", text="")
                flx.Widget(minsize=40)
            with flx.FormLayout(flex=1):
                flx.Widget(minsize=20)
                self.depth = flx.LineEdit(title="Depth", text="")
                self.xpos = flx.LineEdit(title="X", text="")
                self.ypos = flx.LineEdit(title="Y", text="")
                flx.Widget(minsize=40)
            with flx.FormLayout(flex=1):
                flx.Widget(minsize=20)
                self.xvel = flx.LineEdit(title="X vel", text="")
                self.yvel = flx.LineEdit(title="Y vel", text="")
                self.zvel = flx.LineEdit(title="Z vel", text="")
                flx.Widget(minsize=40)
            with flx.FormLayout(flex=1):
                flx.Widget(minsize=20)
                self.gps_status = flx.LineEdit(title="GPS Status", text="")
                self.dvl_status = flx.LineEdit(title="DVL Status", text="")
                self.battery_status = flx.LineEdit(title="Battery level", text="")
                flx.Widget(minsize=40)
            with flx.FormLayout(flex=1):
                flx.Widget(minsize=20)
                self.vbs_fb = flx.LineEdit(title="VBS fb", text="")
                self.lcg_fb = flx.LineEdit(title="LCG fb", text="")
                self.rpm_fb = flx.LineEdit(title="RPM fb", text="")
                flx.Widget(minsize=40)
            
        # We subscribe to these topics at full frquency (no extra arg)
        self.subscribe("/sam/core/gps", "sensor_msgs/NavSatFix", self.gps_callback)
        self.subscribe("/sam/core/battery_fb", "sensor_msgs/BatteryState", self.battery_callback)

for layer in self.layer_container:
            self.layer_control.removeLayer(layer)
            if self.map.hasLayer(layer):
                self.map.removeLayer(layer)
        for layer_url, layer_name in self.layers:
            if not layer_url.endswith('.png'):
                if not layer_url.endswith('/'):
                    layer_url += '/'
                layer_url += '{z}/{x}/{y}.png'
            new_layer = L.tileLayer(layer_url)
            self.layer_container.append(new_layer)
            self.map.addLayer(new_layer)
            self.layer_control.addOverlay(new_layer, layer_name)


class LeafletExample(flx.Widget):

    def init(self):
        with flx.HBox():
            self.leaflet = LeafletWidget(
                flex=1,
                center=(52, 4.1),
                zoom=12,
                show_scale=lambda: self.cbs.checked,
                show_layers=lambda: self.cbl.checked,
            )
            with flx.VBox():
                self.btna = flx.Button(text='Add SeaMap')
                self.btnr = flx.Button(text='Remove SeaMap')
                self.cbs = flx.CheckBox(text='Show scale')
                self.cbl = flx.CheckBox(text='Show layers')
                self.list = flx.VBox()

def encode(self, s, v):
            return dict(shape=(len(v), ),
                        dtype=self.typemap[v._type_],
                        data=bytes(v))


class SendData(flx.PyComponent):
    """ A simple example demonstrating sending binary data from Python to JS.
    """

    def init(self):
        self.view = SendDataView()
        self.view.set_data(data_array)


class SendDataView(flx.Widget):
    """ A widget that displays array data.
    """

    def init(self):
        self.label = flx.Label()
        self.apply_style('overflow-y: scroll;')  # enable scrolling

    @flx.action
    def set_data(self, data):
        # We receive the data as a typed array.
        # If we would send raw bytes, we would receive it as a DataView, which
        # we can map to e.g. a Int16Array like so:
        #   data = Int16Array(blob.buffer, blob.byteOffset, blob.byteLength/2)

        # Show the data as text. We could also e.g. plot it.
        text = ['%i: %f<br>' % (i, data[i]) for i in range(len(data))]

class MyApp(flx.JsComponent):
    """ This the root of the app, accessible via self.root on any component.
    It functions as a central data-store. In this case it is a JsComponent,
    but it can also be a PyComponent if that makes more sense.
    """

    first_name = flx.StringProp(settable=True)
    last_name = flx.StringProp(settable=True)

    def init(self):
        View()


class MyPersonLabel(flx.Widget):
    """ A simple widget that renders the name.
    """

    def _render_dom(self):
        return [self.root.first_name + ' ' + self.root.last_name]


class View(flx.Widget):
    """ This displays the person's name, as well as the input fields to update it.
    """

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

            with flx.HBox():
                self.first_edit = flx.LineEdit(placeholder_text='first name',

def init(self):

        with flx.HSplit():
            flx.Widget(style='background:#f00')
            with flx.VSplit():
                flx.Widget(style='background:#0f0')
                with flx.HSplit():
                    flx.Widget(style='background:#ff0')
                    with flx.VSplit():
                        flx.Widget(style='background:#f0f')
                        with flx.HSplit():
                            flx.Widget(style='background:#0ff')
                            flx.Widget(style='background:#00f')

def init(self):
        with flx.HBox(title='Flexx chatroom demo'):
            flx.Widget(flex=1)
            with flx.VBox():
                self.name_edit = flx.LineEdit(placeholder_text='your name')
                self.people_label = flx.Label(flex=1, minsize=250)
            with flx.VBox(minsize=450):
                self.messages = MessageBox(flex=1)
                with flx.HBox():
                    self.msg_edit = flx.LineEdit(flex=1,
                                                 placeholder_text='enter message')
                    self.ok = flx.Button(text='Send')
            flx.Widget(flex=1)

        self._update_participants()

def init(self):
        with MyHBox():

            with MyVBox(flex=2):

                with MyVBox(flex=4, spacing=30):
                    flx.Widget(flex=1, css_class='white')
                    flx.Widget(flex=1, css_class='white')

                with MyVBox(flex=2, css_class='blue'):
                    flx.Widget(flex=1, css_class='edge')
                    flx.Widget(flex=1, css_class='edge')

            with MyVBox(flex=6):

                with MyVBox(flex=4, spacing=30, css_class='red'):
                    flx.Widget(flex=1, css_class='edge')
                    flx.Widget(flex=1, css_class='edge')

                with MyHBox(flex=2):
                    flx.Widget(flex=6, css_class='white')

                    with MyVBox(flex=1):

# assert g.app.gui.guiName() == 'browser'
        # if 0: # Run all unit tests.
            # g.app.failFast = True
            # path = g.os_path_finalize_join(
                # g.app.loadDir, '..', 'test', 'unittest.leo')
            # c = g.openWithFileName(path, gui=self)
            # c.findCommands.ftm = g.NullObject()
                # # A hack. Some other class should do this.
                # # This looks like a bug.
            # c.debugCommands.runAllUnitTestsLocally()
                # # This calls sys.exit(0)
        # print('calling sys.exit(0)')
        # sys.exit(0)
        
#@+node:ekr.20181110170235.1: ** class LeoLog
class LeoLog(flx.Widget):

    CSS = """
    .flx-CodeEditor > .ace {
        width: 100%;
        height: 100%;
    }
    """

    def init(self):
        # pylint: disable=undefined-variable
        global window
        # https://ace.c9.io/#nav=api
        self.ace = window.ace.edit(self.node, "editor")
            # self.ace.setValue("import os\n\ndirs = os.walk")
        self.ace.navigateFileEnd()  # otherwise all lines highlighted
        self.ace.setTheme("ace/theme/solarized_dark")

with flx.HBox():

            with flx.VBox(flex=0, minsize=150):
                self.b1 = flx.RadioButton(text='Linear')
                self.b2 = flx.RadioButton(text='Basis')
                self.b3 = flx.RadioButton(text='Cardinal', checked=True)
                self.b4 = flx.RadioButton(text='Catmull Rom')
                self.b5 = flx.RadioButton(text='Lagrange')
                self.b6 = flx.RadioButton(text='Lanczos')
                flx.Widget(minsize=10)
                closed = flx.CheckBox(text='Closed')
                flx.Widget(minsize=10)
                self.tension = flx.Slider(min=-0.5, max=1, value=0.5,
                                          text='Tension: {value}')
                flx.Widget(flex=1)

            with flx.VBox(flex=1):
                flx.Label(text=GENERAL_TEXT, wrap=True, style='font-size: 12px;')
                self.explanation = flx.Label(text=CARDINAL_TEXT, wrap=True,
                                             style='font-size: 12px;')

                self.spline = SplineWidget(flex=1,
                                           closed=lambda: closed.checked,
                                           tension=lambda: self.tension.value)