How to use the remi.gui.HBox function in remi

def construct_ui(self):
        self.main_container = gui.VBox()
        self.main_container.style['top'] = "0px"
        self.main_container.style['display'] = "flex"
        self.main_container.style['overflow'] = "auto"
        self.main_container.style['width'] = "100%"
        self.main_container.style['flex-direction'] = "column"
        self.main_container.style['position'] = "absolute"
        self.main_container.style['justify-content'] = "space-around"
        self.main_container.style['margin'] = "0px"
        self.main_container.style['align-items'] = "center"
        self.main_container.style['left'] = "0px"
        self.main_container.style['height'] = "100%"
        hbox_snap = gui.HBox()
        hbox_snap.style['left'] = "0px"
        hbox_snap.style['order'] = "4348867584"
        hbox_snap.style['display'] = "flex"
        hbox_snap.style['overflow'] = "auto"
        hbox_snap.style['width'] = "90%"
        hbox_snap.style['flex-direction'] = "row"
        hbox_snap.style['position'] = "static"
        hbox_snap.style['justify-content'] = "space-around"
        hbox_snap.style['-webkit-order'] = "4348867584"
        hbox_snap.style['margin'] = "0px"
        hbox_snap.style['align-items'] = "center"
        hbox_snap.style['top'] = "2%"
        hbox_snap.style['height'] = "15%"
        button_snap = gui.Button('snap')
        button_snap.style['margin'] = "0px"
        button_snap.style['overflow'] = "auto"

"""
        Adds a field to the dialog together with a descriptive label and a unique identifier.

        Note: You can access to the fields content calling the function GenericDialog.get_field(key).

        Args:
            key (str): The unique identifier for the field.
            label_description (str): The string content of the description label.
            field (Widget): The instance of the field Widget. It can be for example a TextInput or maybe
            a custom widget.
        """
        self.inputs[key] = field
        label = Label(label_description)
        label.style['margin'] = '0px 5px'
        label.style['min-width'] = '30%'
        container = HBox()
        container.style['justify-content'] = 'space-between'
        container.style['overflow'] = 'auto'
        container.style['padding'] = '3px'
        container.append(label, key='lbl' + key)
        container.append(self.inputs[key], key=key)
        self.container.append(container, key=key)

def main(self):        
        #creating two "pages" widgets to be shown alternatively
        lbl = gui.Label("Page 2. Press the button to change the page.", style={'font-size':'20px'})
        bt2 = gui.Button("change page")
        page2 = gui.HBox(children=[lbl, bt2], style={'margin':'0px auto', 'background-color':'lightgray'})
        
        lbl = gui.Label("Page 1. Press the button to change the page.", style={'font-size':'20px'})
        bt1 = gui.Button("change page")
        page1 = gui.VBox(children=[lbl, bt1], style={'width':'300px', 'height':'200px', 'margin':'0px auto', 'background-color':'white'})

        bt1.onclick.do(self.set_different_root_widget, page2)
        bt2.onclick.do(self.set_different_root_widget, page1)

        # returning the root widget
        return page1

def construct_ui(self):
        self.main_container = gui.VBox()
        self.main_container.style['top'] = "0px"
        self.main_container.style['display'] = "flex"
        self.main_container.style['overflow'] = "auto"
        self.main_container.style['width'] = "100%"
        self.main_container.style['flex-direction'] = "column"
        self.main_container.style['position'] = "absolute"
        self.main_container.style['justify-content'] = "space-around"
        self.main_container.style['margin'] = "0px"
        self.main_container.style['align-items'] = "center"
        self.main_container.style['left'] = "0px"
        self.main_container.style['height'] = "100%"
        hbox_snap = gui.HBox()
        hbox_snap.style['left'] = "0px"
        hbox_snap.style['order'] = "4348867584"
        hbox_snap.style['display'] = "flex"
        hbox_snap.style['overflow'] = "auto"
        hbox_snap.style['width'] = "70%"
        hbox_snap.style['flex-direction'] = "row"
        hbox_snap.style['position'] = "static"
        hbox_snap.style['justify-content'] = "space-around"
        hbox_snap.style['-webkit-order'] = "4348867584"
        hbox_snap.style['margin'] = "0px"
        hbox_snap.style['align-items'] = "center"
        hbox_snap.style['top'] = "125px"
        hbox_snap.style['height'] = "150px"
        button_snap = gui.Button('snap')
        button_snap.style['margin'] = "0px"
        button_snap.style['overflow'] = "auto"

def append_field_with_label(self,text,field,button=None,width=300,key=''):
        key = field.identifier if key == '' else key
        self.inputs[key] = field
        label = gui.Label(text)
        label.style['margin'] = '0px 5px'
        label.style['min-width'] = '30%'
        _row = gui.HBox()
        _row.style['justify-content'] = 'space-between'
        _row.style['overflow'] = 'auto'
        _row.style['padding'] = '3px'
        _row.append(label, key='lbl' + key)
        _row.append(self.inputs[key], key=key)
        if button is not None:
            _row.append(button,key='button'+str(key))
        self._container.append(_row,key=key)

def main(self):        
        main_container = gui.VBox()
        lbl = gui.Label("Press the buttons to add or remove labels")
        bt_add = gui.Button("add a label", style={'margin':'3px'})
        bt_add.onclick.do(self.on_add_a_label_pressed)
        bt_remove = gui.Button("remove a label", style={'margin':'3px', 'background-color':'orange'})
        bt_remove.onclick.do(self.on_remove_a_label_pressed)
        bt_empty = gui.Button("empty", style={'margin':'3px', 'background-color':'red'})
        bt_empty.onclick.do(self.on_empty_pressed)
        self.lbls_container = gui.HBox()
        main_container.append([lbl, bt_add, bt_remove, bt_empty, self.lbls_container])

        # returning the root widget
        return main_container

"""
        Adds a field to the dialog together with a descriptive label and a unique identifier.

        Note: You can access to the fields content calling the function GenericDialog.get_field(key).

        Args:
            key (str): The unique identifier for the field.
            label_description (str): The string content of the description label.
            field (Widget): The instance of the field Widget. It can be for example a TextInput or maybe
            a custom widget.
        """
        self.inputs[key] = field
        label = Label(label_description)
        label.style['margin'] = '0px 5px'
        label.style['min-width'] = '30%'
        container = HBox()
        container.style['justify-content'] = 'space-between'
        container.style['overflow'] = 'auto'
        container.style['padding'] = '3px'
        container.append(label, key='lbl' + key)
        container.append(self.inputs[key], key=key)
        self.container.append(container, key=key)

self.style['display'] = 'block'
        self.style['overflow'] = 'hidden'
        self.style['margin'] = '0px auto'
        
        self._frame=gui.VBox(width=root_width, height=400)

        self.append_field(self._frame,key='frame')

        self.spacer=gui.Label('\n',width=400, height=20)
        self._frame.append(self.spacer,key='spacer')
        
        self.media_list = gui.ListView(width=250, height=300)
        self.media_list.set_on_selection_listener(self.on_media_selected)
        self._frame.append(self.media_list,key='media_list')

        self.buttons_frame= gui.HBox(width=280, height=30)
        self._frame.append(self.buttons_frame,key='buttons_frame')
        
        self.media_name=gui.Label('Selected Item: ',width=400, height=20)
        self._frame.append(self.media_name,key='media_name')

        self.delete_media = gui.Button('Delete',width=80, height=30)
        self.delete_media.set_on_click_listener(self.on_delete_media_button_pressed)
        self.buttons_frame.append(self.delete_media,key='delete_media')
        
        self.rename_media = gui.Button('Rename',width=80, height=30)
        self.rename_media.set_on_click_listener(self.on_rename_media_button_pressed)
        self.buttons_frame.append(self.rename_media,key='rename_media')

        self.deleteall_media = gui.Button('Delete All',width=80, height=30)
        self.deleteall_media.set_on_click_listener(self.on_deleteall_media_button_pressed)
        self.buttons_frame.append(self.deleteall_media,key='deleteall_media')

def append_label(self,label,bold=True):
        label.style['margin'] = '0px 5px'
        label.style['min-width'] = '30%'
        if bold:
            label.css_font_weight='bold'
            label.css_font_size = '18px'
        _row = gui.HBox()
        _row.style['justify-content'] = 'space-between'
        _row.style['overflow'] = 'auto'
        _row.style['padding'] = '3px'
        _row.append(label)
        self._container.append(_row)