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

def init(self):
        # All of this gets executed in JS
        super().init()
        with flx.HBox():
            self.canvas = WgpuCanvas()
        triangle.main(self.canvas)

def init(self, model):
        super().init()
        self.model = model

        # App layout
        with flx.VBox():
            flx.Label(flex=0, text=lambda: model.status)
            flx.Widget(flex=1)
            with flx.HBox(flex=2):
                flx.Widget(flex=1)
                self.canvas = flx.CanvasWidget(flex=0, minsize=400, maxsize=400)
                flx.Widget(flex=1)
            flx.Widget(flex=1)

        # Init context to draw to
        self._ctx = self.canvas.node.getContext('2d')

def init(self):
        
        with flx.HBox():
            actuator_bar = SamActuatorBar()
            launch_dashboard = ROSMonDashboardWidget(flex=1)
            #flx.Widget(flex=1)

def init(self):
        with flx.HBox():
            CodeEditor(flex=1)
            flx.Widget(flex=1)

def init(self, topic):

        self.server_name = topic.split("/")[1]
        self.service_name = "/" + self.server_name + "/start_stop"

        self.nodes = {}
        self.subscribe(topic, "rosmon_msgs/State", self.callback)
        self.list_container = flx.VBox(flex=1)
        with self.list_container:
            with flx.HBox(flex=1):
                self.expand = flx.Button(flex=0, text=">")
                self.label = flx.Label(flex=0, text=self.server_name + ":")
                self.launch_state = flx.Label(flex=0, text="IDLE", style='color: #F00;')
                #self.expand = flx.Button(text="Expand")
                flx.Widget(flex=1)
                self.start_stop = flx.Button(flex=0, text="Stop")
            self.base_layout = flx.VBox(flex=1, style='border:1px solid #777;')
            with self.base_layout:
                with flx.HFix():
                    flx.Label(text="Name")
                    flx.Label(text="State")
                    flx.Label(text="CPU")
                    flx.Label(text="Memory")
                    flx.Label(text="Restarts")
                    flx.Label(text="Action")
        self.base_layout.set_parent(None)

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

            with flx.HBox():
                self.first_edit = flx.LineEdit(placeholder_text='first name',
                                              text='Jane')
                self.last_edit = flx.LineEdit(placeholder_text='last name',
                                             text='Doe')
                flx.Widget(flex=1)  # spacer

            with flx.HBox():
                flx.Label(text=lambda: self.root.first_name,
                         style='border:1px solid red')
                flx.Label(text=lambda: self.root.last_name,
                         style='border:1px solid red')
                flx.Widget(flex=1)  # spacer

            MyPersonLabel(style='border:1px solid blue')

            flx.Widget(flex=1)  # spacer

def init(self):
        time = [i/100 for i in range(100)]
        with flx.VBox():
            with flx.HBox():
                flx.Label(text='Frequency:')
                self.slider1 = flx.Slider(min=1, max=10, value=5, flex=1)
                flx.Label(text='Phase:')
                self.slider2 = flx.Slider(min=0, max=6, value=0, flex=1)
            self.plot = flx.PlotWidget(flex=1, xdata=time, xlabel='time',
                                       ylabel='amplitude', title='a sinusoid')