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

ColourMap().init()
        
        # initialise editor options OSC config class, and OSC editors
        self.eo=Options()
        self.eo.init_options(self.editor_dir)
        self.osc_config=OSCConfig()
      
        # initialise variables
        self.init() 

        # BUILD THE GUI

        
        # 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

super(TabView, self).__init__(**kwargs)
        
        self.bar_width=0
        self.bar_height=bar_height
        self.frame_width=frame_width
        self.frame_height=frame_height
        
        self.set_layout_orientation(gui.Container.LAYOUT_VERTICAL)

        
        #dictionary to  lookup panel object given key
        self.panel_obj=dict()
        self.tab_titles=dict()
        
        #tab bar
        self.tab_bar=gui.Container(width=self.bar_width,height=self.bar_height)
        self.tab_bar.set_layout_orientation(gui.Container.LAYOUT_HORIZONTAL)

def main(self):
        # the margin 0px auto centers the main container
        verticalContainer = gui.Container(width=540, margin='0px auto', style={'display': 'block', 'overflow': 'hidden'})

        horizontalContainer = gui.Container(width='100%', layout_orientation=gui.Container.LAYOUT_HORIZONTAL, margin='0px', style={'display': 'block', 'overflow': 'auto'})
        
        subContainerLeft = gui.Container(width=320, style={'display': 'block', 'overflow': 'auto', 'text-align': 'center'})
        self.img = gui.Image('/res:logo.png', height=100, margin='10px')
        self.img.onclick.do(self.on_img_clicked)

        self.table = gui.Table.new_from_list([('ID', 'First Name', 'Last Name'),
                                   ('101', 'Danny', 'Young'),
                                   ('102', 'Christine', 'Holand'),
                                   ('103', 'Lars', 'Gordon'),
                                   ('104', 'Roberto', 'Robitaille'),
                                   ('105', 'Maria', 'Papadopoulos')], width=300, height=200, margin='10px')
        self.table.on_table_row_click.do(self.on_table_row_click)

        # the arguments are	width - height - layoutOrientationOrizontal

self.lblTitle.add_class("DialogTitle")
        self.widgetsContainer = gui.HBox(width='100%', height='85%')
        self.widgetsContainer.style.update({'overflow-y': 'scroll',
                                            'overflow-x': 'hidden',
                                            'align-items': 'flex-start',
                                            'flex-wrap': 'wrap',
                                            'background-color': 'white'})

        self.append([self.lblTitle, self.widgetsContainer])

        # load all widgets
        self.add_widget_to_collection(gui.HBox, width='250px', height='250px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        self.add_widget_to_collection(gui.VBox, width='250px', height='250px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        self.add_widget_to_collection(gui.Container, width='250px', height='250px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        #self.add_widget_to_collection(gui.GridBox, width='250px', height='250px', style={'top':'20px', 'left':'20px', 'position':'absolute'})
        self.add_widget_to_collection(gui.Button, text="button", width='100px', height='30px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        self.add_widget_to_collection(gui.TextInput, width='100px', height='30px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        self.add_widget_to_collection(gui.Label, text="label", width='100px', height='30px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        self.add_widget_to_collection(gui.ListView, width='100px', height='100px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute', 'border': '1px solid lightgray'})
        self.add_widget_to_collection(gui.ListItem, text='list item')
        self.add_widget_to_collection(gui.DropDown, width='100px', height='30px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})
        self.add_widget_to_collection(gui.DropDownItem, text='drop down item')
        self.add_widget_to_collection(gui.Image, width='100px', height='100px', style={
                                      'top': '20px', 'left': '20px', 'position': 'absolute'})

def main(self):
        self.floatingPaneContainer = FloatingPanesContainer(width=800, height=600, margin='0px auto')
        self.floatingPaneContainer.append(gui.Label("Click a panel to select, than drag and stretch"))

        pane1 = gui.Container(width=100, height=200)
        pane1.style['background-color'] = 'yellow'
        self.floatingPaneContainer.add_pane(pane1, 10, 100)
        pane1.append(gui.Label("Panel1, drag and stretch"))

        pane2 = gui.VBox(width=100, height=200)
        pane2.style['background-color'] = 'green'
        self.floatingPaneContainer.add_pane(pane2, 150, 100)
        pane2.append(gui.Label("Panel2, drag and stretch"))
        

        # returning the root widget
        return self.floatingPaneContainer

def make_entry(self,field,field_spec,values):
        # print 'make entry',self.field_index,field,field_spec
        if self.col_row >= self.rows_in_col:
            self.current_col=self.col_1
        
        # print 'make entry',self.col_row, self.current_col        
        
        if field_spec['shape']=='tab':
            width=len(field_spec['text'])*8+4
            self.current_tab = self.tabview.add_tab(width,field_spec['name'],field_spec['text'])
            # print 'make tab', field_spec['name']
            self.current_tab.set_layout_orientation(gui.Container.LAYOUT_HORIZONTAL)
            self.col_0=gui.Container(width=self.frame_width/2) #0
            self.col_0.set_layout_orientation(gui.Container.LAYOUT_VERTICAL)
            self.col_1=gui.Container(width=self.frame_width/2) #0
            self.col_1.set_layout_orientation(gui.Container.LAYOUT_VERTICAL)

            self.current_tab.append(self.col_0,key='col_0')
            self.current_tab.append(self.col_1,key='col_1')

            self.current_col=self.col_0
            self.col_row=1
            # print '\nNEW TAB',self.col_row
            self.tab_row=1
            return None,None
        
        elif field_spec['shape']=='sep':
            self.current_col.append(gui.Label('',width=self.field_width,height=10))
            self.tab_row+=1
            self.col_row+=1

self.refWidget_origin_x + float(x) - self.origin_x))
                self.refWidget.style['top'] = gui.to_pix(self.round_grid(
                    self.refWidget_origin_y + float(y) - self.origin_y))
                self.update_position()

    def update_position(self):
        self.style['position'] = 'absolute'
        if self.refWidget:
            if 'left' in self.refWidget.style and 'top' in self.refWidget.style:
                self.style['left'] = gui.to_pix(gui.from_pix(
                    self.refWidget.style['left'])-gui.from_pix(self.style['width']))
                self.style['top'] = gui.to_pix(gui.from_pix(
                    self.refWidget.style['top'])-gui.from_pix(self.style['width']))


class Project(gui.Container):
    """ The editor project is pure html with specific tag attributes
        This class loads and save the project file, 
        and also compiles a project in python code.
    """

    def __init__(self, **kwargs):
        super(Project, self).__init__(**kwargs)

        self.style.update({'position': 'relative',
                           'overflow': 'auto',
                           'background-color': 'rgb(250,248,240)',
                           'background-image': "url('/editor_resources:background.png')"})
        self.attr_editor = True
        self.attr_editor_newclass = True

    def load(self, ifile, configuration):

self.lblName2 = gui.Label('PLAYER 2 NAME:', width='100%', height='35px', style={'margin':'0px 0px 0px', 'padding-top':'20px', 'font-size':'20px', 'line-height':'25px', 'text-align':'left'})
        self.txtName2 = gui.TextInput(width='96%', height='35px', style={'margin':'0px auto', 'padding-top':'20px', 'padding-left':'5px', 'font-size':'30px', 'line-height':'20px', 'text-align':'left', 'border':'1px solid white', 'background':'black'})
        self.txtName2.set_text('P2')
##        self.lblMatchSet = gui.Label('RACE TO:', width='100%', height='35px', style={'margin':'0px 0px 0px', 'padding-top':'20px', 'font-size':'20px', 'line-height':'25px', 'text-align':'left'})
##        self.txtMatchSet = gui.TextInput(width='100%', height='35px', style={'margin':'0px 0px 0px', 'padding-top':'20px', 'font-size':'30px', 'line-height':'20px', 'text-align':'left', 'border':'1px solid white', 'background':'black'})
##        self.txtMatchSet.set_text('5')
        # Start button
        btMenu = gui.Button('START', width='40%', height='40px', style={'margin':'50px 20% 20px', 'font-size':'30px', 'line-height':'30px', 'text-align':'center'}) 
##        widMenu.append([self.lblMenu, self.lblMenu2, self.lblName1, self.txtName1, self.lblName2, self.txtName2, self.lblMatchSet, self.txtMatchSet, btMenu])
        widMenu.append([self.lblMenu, self.lblMenu2, self.lblName1, self.txtName1, self.lblName2, self.txtName2, btMenu])
        # Buttons function call
        btMenu.onclick.connect(self.on_button_pressed_menu)
        
        
        # Main container scoreboard page
        wid = gui.Container(width=480, height=610, style={'margin':'0px auto', 'background':'black'})
        # Title
        self.lbl = gui.Label('SCOREBOARD', width='100%', height='35px', style={'margin':'0px 0px 0px', 'padding-top':'10px', 'font-size':'30px', 'line-height':'35px', 'text-align':'center'})
        # Containers for games counters
        # Horizontal container
        wid1 = gui.Container(width='100%', height=600, layout_orientation=gui.Container.LAYOUT_HORIZONTAL, style={'background':'black'})
        # Container for left side
        self.wid2 = gui.Container(width=230, height=350, margin='5px', style={'background':'green'})
        # Container for right side
        self.wid3 = gui.Container(width=230, height=350, margin='5px', style={'background':'green'})
        # Left side interface
        self.lblLeftName = gui.Label(self.Name1, width='95%', height='60px', style={'margin':'20px 2px 0px', 'font-size':'40px', 'line-height':'60px', 'text-align':'center', 'overflow':'hidden'})
        self.lblLeftNum = gui.Label(str(self.LeftNum), width='100%', height='130px', style={'margin':'0px 0px 10px', 'font-size':'140px', 'line-height':'130px', 'text-align':'center'})
        self.btLeftPlus = gui.Button('', width='80px', height='80px', style={'margin':'0px 10px 20px', 'font-size':'50px', 'line-height':'50px', 'text-align':'center'})
        self.btLeftPlus.attributes['class']='up80'
        self.btLeftMinus = gui.Button('', width='80px', height='80px', style={'margin':'0px 10px 20px', 'font-size':'50px', 'line-height':'50px', 'text-align':'center'})
        self.btLeftMinus.attributes['class']='dn80'

def __init__(self, **kwargs):
        super(ToolBar, self).__init__(**kwargs)
        self.set_layout_orientation(gui.Container.LAYOUT_HORIZONTAL)
        self.style['background-color'] = 'white'

def main(self):
        verticalContainer = gui.Container(width=540, margin='0px auto') #the margin 0px auto centers the main container
        verticalContainer.style['display'] = 'block'
        verticalContainer.style['overflow'] = 'hidden'

        horizontalContainer = gui.Container(width='100%', layout_orientation=gui.Container.LAYOUT_HORIZONTAL, margin='0px')
        horizontalContainer.style['display'] = 'block'
        horizontalContainer.style['overflow'] = 'auto'
        
        subContainerLeft = gui.Container(width=320)
        subContainerLeft.style['display'] = 'block'
        subContainerLeft.style['overflow'] = 'auto'
        subContainerLeft.style['text-align'] = 'center'
        self.img = gui.Image('/res:logo.png', width=100, height=100, margin='10px')
        self.img.set_on_click_listener(self.on_img_clicked)

        self.table = gui.Table.new_from_list([('ID', 'First Name', 'Last Name'),
                                   ('101', 'Danny', 'Young'),