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

# Initialise an instance of the Pi Presents and Web Editor driver classes
        self.pp=PiPresents()
        self.ed = WebEditor()
        self.ed.init(self.manager_dir)


        mww=550
        # root and frames

        root = gui.VBox(width=mww, margin='0px auto') #the margin 0px auto centers the main container
        root.style['display'] = 'block'
        root.style['overflow'] = 'hidden'
        # root = gui.VBox(width=mww,height=600) #10
        top_frame=gui.VBox(width=mww,height=40) #1
        middle_frame=gui.VBox(width=mww,height=500) #5
        # middle_frame.style['background-color'] = 'LightGray'
        button_frame=gui.HBox(width=280,height=30) #10

        menubar=gui.MenuBar(width='100%', height='30px')


        # menu
        # menu = gui.Menu(width=mww-20, height=30)
        menu=gui.Menu(width='100%', height='30px')

        miw=70
        # media menu
        media_menu = gui.MenuItem('Media',width=miw, height=30)        
        media_import_menu = gui.MenuItem('Import',width=miw, height=30)
        media_upload_menu = gui.MenuItem('Upload',width=miw, height=30)
        media_manage_menu = gui.MenuItem('Manage',width=miw, height=30)

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"

See the License for the specific language governing permissions and
   limitations under the License.
"""

""" This example shows an application using Svg graphics 
     to display an interactive gauge.
"""

import remi.gui as gui
from remi import start, App
import math
from threading import Timer
import random


class InputGauge(gui.VBox, gui.EventSource):

    def __init__(self, width, height, _min, _max, **kwargs):
        super(InputGauge, self).__init__(**kwargs)
        gui.EventSource.__init__(self)
        self.set_size(width, height)
        self.gauge = Gauge(width, height, _min, _max)
        self.gauge.set_value(_min)
        self.append(self.gauge)
        
        self.onmousedown.do(self.confirm_value)
        self.onmousemove.do(self.gauge.onmousemove)
    
    @gui.decorate_event
    def confirm_value(self, widget, x, y):
        """event called clicking on the gauge and so changing its value.
           propagates the new value

def main(self, name='world'):
        wid = gui.VBox(width=350, height=400, margin='0px auto')
        
        self.tree = gui.TreeView(width=300, height=300)
        self.tree.append(gui.TreeItem("item1"))
        it2 = gui.TreeItem("item2")
        self.tree.append(it2)
        
        subit2 = gui.TreeItem("sub item2")
        it2.append([gui.TreeItem("sub item1"), subit2, gui.TreeItem("sub item3")])
        
        subit2.append([gui.TreeItem("sub sub item1"), gui.TreeItem("sub sub item2"), gui.TreeItem("sub sub item3")])
        
        wid.append(self.tree)

        # returning the root widget
        return wid

def main(self):
        wid = gui.VBox(width=500, height=500, style={'margin':'5px auto', 'padding': '10px'})

        lbl_description = gui.Label("""Example about TableWidget usage.
                                    Change rows and columns count in order to see the behaviour. 
                                    After changing the size, 'Fill the table' content by means of the button.""")

        wid.append(lbl_description)

        table = gui.TableWidget(10, 3, True, True, width=300, height=300)
        table.style['font-size'] = '8px'

        container = gui.HBox(width='100%')
        lbl_row_count = gui.Label('Rows:')
        spin_row_count = gui.SpinBox(10, 0, 15)
        spin_row_count.onchange.do(self.on_row_count_change, table)
        container.append(lbl_row_count)
        container.append(spin_row_count)

self, width='100%')
        self.attributeEditor.style['overflow'] = 'hide'
        self.signalConnectionManager = editor_widgets.SignalConnectionManager(
            width='100%', height='50%', style={'order': '1'})

        self.mainContainer.append([menubar, self.subContainer])

        self.subContainerLeft = gui.VBox(width='20%', height='100%')
        self.subContainerLeft.style['position'] = 'relative'
        self.subContainerLeft.style['left'] = '0px'
        self.widgetsCollection.style['order'] = '0'
        self.subContainerLeft.append(
            {'widgets_collection': self.widgetsCollection, 'signal_manager': self.signalConnectionManager})
        self.subContainerLeft.add_class('RaisedFrame')

        self.centralContainer = gui.VBox(width='56%', height='100%')
        self.centralContainer.append(self.toolbar)

        self.subContainerRight = gui.Container(width='24%', height='100%')
        self.subContainerRight.style.update(
            {'position': 'absolute', 'right': '0px', 'overflow-y': 'auto', 'overflow-x': 'hidden'})
        self.subContainerRight.add_class('RaisedFrame')

        self.instancesWidget = editor_widgets.InstancesWidget(width='100%')
        self.instancesWidget.treeView.on_tree_item_selected.do(
            self.on_instances_widget_selection)

        self.subContainerRight.append(
            {'instances_widget': self.instancesWidget, 'attributes_editor': self.attributeEditor})

        self.subContainer.append(
            [self.subContainerLeft, self.centralContainer, self.subContainerRight])

def main(self):

        # trivial main page
        # ********************
        root = gui.VBox(width=600,height=200) #1

        # button 
        button_tabbed_dialog = gui.Button( 'Open Tabbed Editor',width=250, height=30)
        button_tabbed_dialog.set_on_click_listener(self.on_tabbed_dialog_button_clicked)
        root.append(button_tabbed_dialog)

        # and fields in main page    
        self.t1f1_field=gui.Label('Tab1 Field 1: ',width=400,height=30)
        root.append(self.t1f1_field)
        
        self.t2f1_field=gui.Label('Tab2 Field 1: ',width=400,height=30)
        root.append(self.t2f1_field)


        # dialog to contain the TabView
        # ***********************************

# frames
        root = gui.Container(width=770,height=500, margin='0px auto') #the margin 0px auto centers the main container
        bottom_frame=gui.Container(width=770,height=400)#1

        bottom_frame.set_layout_orientation(gui.Container.LAYOUT_HORIZONTAL)       
        # bottom_frame.style['display'] = 'block'
        # bottom_frame.style['overflow'] = 'auto'
        
        left_frame=gui.Container(width=300,height=400)#1
        # left_frame.set_layout_orientation(gui.Container.LAYOUT_VERTICAL)
        left_frame.style['margin']='10px'

        
        middle_frame=gui.VBox(width=50,height=250)#1
        middle_frame.style['margin']='10px'
        
        right_frame=gui.Container(width=300,height=400)#1
        
        updown_frame=gui.VBox(width=50,height=400)#1
        updown_frame.style['margin']='10px'
  

        #menu
        menubar=gui.MenuBar(width='100%', height='30px')
        menu = gui.Menu(width='100%', height='30px')

    
        #profile menu
        profile_menu = gui.MenuItem('Profile',width=80, height=30)
        profile_open_menu = gui.MenuItem('Open',width=120, height=30)

def main(self, name='world'):
        self.wid = gui.VBox(margin='0px auto')

        self.svgplot = SvgPlot(600, 600)
        self.svgplot.style['margin'] = '10px'
        self.plotData1 = SvgComposedPoly(0,0,60,2.0, 'rgba(255,0,0,0.8)')
        self.plotData2 = SvgComposedPoly(0,0,60,1.0, 'green')
        self.plotData3 = SvgComposedPoly(0,0,30,3.0, 'orange')
        self.svgplot.append_poly([self.plotData1, self.plotData2, self.plotData3])

        scale_factor_x = 1.0
        scale_factor_y = 200.0
        self.plotData1.scale(scale_factor_x, scale_factor_y)
        self.plotData2.scale(scale_factor_x, scale_factor_y)
        self.plotData3.scale(scale_factor_x, scale_factor_y)

        self.wid.append(self.svgplot)

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"
        button_snap.style['width'] = "200px"
        button_snap.style['height'] = "30px"
        hbox_snap.append(button_snap, 'button_snap')
        button_open = gui.Button('open image from file')
        button_open.style['margin'] = "0px"
        button_open.style['overflow'] = "auto"
        button_open.style['width'] = "200px"
        button_open.style['height'] = "30px"
        hbox_snap.append(button_open, 'button_open')
        vbox_settings = gui.VBox()
        vbox_settings.style['order'] = "4349486136"
        vbox_settings.style['display'] = "flex"
        vbox_settings.style['overflow'] = "auto"
        vbox_settings.style['width'] = "250px"
        vbox_settings.style['flex-direction'] = "column"
        vbox_settings.style['position'] = "static"
        vbox_settings.style['justify-content'] = "space-around"
        vbox_settings.style['-webkit-order'] = "4349486136"
        vbox_settings.style['margin'] = "0px"
        vbox_settings.style['align-items'] = "center"
        vbox_settings.style['top'] = "149.734375px"
        vbox_settings.style['height'] = "80px"
        checkbox_display_original = gui.CheckBoxLabel(' Display original image', False, '')
        checkbox_display_original.style['order'] = "4348263224"
        checkbox_display_original.style['-webkit-order'] = "4348263224"
        checkbox_display_original.style['display'] = "block"