How to use the remi.gui function in remi

checkbox_display_tagged.style['height'] = "30px"
        vbox_settings.append(checkbox_display_tagged, 'checkbox_display_tagged')
        hbox_snap.append(vbox_settings, 'vbox_settings')
        button_close = gui.Button('close')
        button_close.style['background-color'] = 'red'
        button_close.style['width'] = "200px"
        button_close.style['height'] = '30px'
        hbox_snap.append(button_close, 'button_close')
        self.main_container.append(hbox_snap, 'hbox_snap')
        width = 200
        height = 200
        self.image_original = PILImageViewerWidget(width=width, height=height)
        self.main_container.append(self.image_original, 'image_original')
        self.image_result = PILImageViewerWidget(width=width, height=height)
        self.main_container.append(self.image_result, 'image_result')
        self.image_label = gui.Label('', width=400, height=30, margin='10px')
        self.image_label.style['align-items'] = "center"
        self.main_container.append(self.image_label, 'image_label')

        button_close.set_on_click_listener(self.on_close_pressed)
        button_snap.set_on_click_listener(self.on_snap_pressed)
        button_open.set_on_click_listener(self.on_open_pressed)

        return self.main_container

def display_media(self):
        self.media_list.empty()
        self.current_media_name=''
        items=sorted(os.listdir(self.current_media))
        i=0
        for item in items:
            if (self.is_profile is False and os.path.isdir(self.current_media+ os.sep+item) is False) or (self.is_profile is True and os.path.isdir(self.current_media+ os.sep+item) is True and os.path.exists(self.current_media+ os.sep + item + os.sep + 'pp_showlist.json') is True):
                obj= gui.ListItem(item,width=200, height=20)
                self.media_list.append(obj,key=i)
                i+=1
        return

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

def open_medialists(self,profile_dir):
        self.medialists = []
        files = os.listdir(profile_dir)
        if files: files.sort()
        for this_file in files:
            if this_file.endswith(".json") and this_file not in ('pp_showlist.json','schedule.json'):
                self.medialists = self.medialists + [this_file]
        self.medialists_display.empty()
        key=0
        for index in range (len(self.medialists)):
            obj = gui.ListItem(self.medialists[index],width=300, height=20)
            self.medialists_display.append(obj, key=key)
            key+=1
        self.current_medialists_index=-1
        self.current_medialist=None

Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
"""

import remi.gui as gui
import remi.server
from remi import start, App
import os #for path handling



class ResizeHelper(gui.Widget, gui.EventSource):
    EVENT_ONDRAG = "on_drag"

    def __init__(self, project, **kwargs):
        super(ResizeHelper, self).__init__(**kwargs)
        gui.EventSource.__init__(self)
        self.style['float'] = 'none'
        self.style['background-color'] = "transparent"
        self.style['border'] = '1px dashed black'
        self.style['position'] = 'absolute'
        self.style['left']='0px'
        self.style['top']='0px'
        self.project = project
        self.parent = None
        self.refWidget = None
        self.active = False
        self.onmousedown.do(self.start_drag)

def main(self):
        wid = gui.VBox(width=300, height=300, margin='0px auto')

        self._items = ("/test/1", "/test/7")

        self.dd = gui.DropDown.new_from_list(self._items, width='80%', height=40)
        self.list = gui.ListView.new_from_list(self._items, width='80%', height='50%')
        self.ent = gui.TextInput(width=200, height=30, hint='enter words')
        self.bt = gui.Button('Update Models', width=200, height=30)
        self.bt.style['margin'] = 'auto 50px'

        self.bt.set_on_click_listener(self.on_button_pressed)

        # appending a widget to another, the first argument is a string key
        wid.append([self.dd, self.list, self.ent, self.bt])

        # returning the root widget
        return wid

def __init__(self, title='File dialog', message='Select files and folders',
                 multiple_selection=True, selection_folder='.',
                 allow_file_selection=True, allow_folder_selection=True,
                 confirm_name='OK',cancel_name='Cancel',callback=None,**kwargs):
        super(FileSelectionDialog, self).__init__(title, message,confirm_name,cancel_name, **kwargs)

        self.callback=callback
        self.style['width'] = '475px'
        self.fileFolderNavigator = gui.FileFolderNavigator(multiple_selection, selection_folder,
                                                       allow_file_selection,
                                                      allow_folder_selection)
        self.append_field(self.fileFolderNavigator,'fileFolderNavigator')

def main(self):
        wid = gui.VBox(width=320, height=320, margin='0px auto')
        wid.style['text-align'] = 'center'
        
        bt = gui.Button('Data', width=100, height=30)
        bt.style['margin'] = '10px'
        bt.onclick.do(self.on_button_pressed)

        self.plot_data = [0, 1]
        self.mpl = MatplotImage(width=250, height=250)
        self.mpl.style['margin'] = '10px'
        self.mpl.ax.set_title("test")
        self.mpl.ax.plot(self.plot_data)
        self.mpl.redraw()

        wid.append(bt)
        wid.append(self.mpl)

        return wid

def main(self):

        b1 = gui.Button('Show second tab', width=200, height=30)
        
        tb = gui.TabBox(width='80%')
        tb.append(b1, 'First')

        b2 = gui.Button('Show third tab', width=200, height=30)
        tb.add_tab(b2, 'Second', None)

        b3 = gui.Button('Show first tab', width=200, height=30)
        tb.add_tab(b3, 'Third', None)
        
        b1.onclick.do(self.on_bt1_pressed, tb, b2)
        b2.onclick.do(self.on_bt2_pressed, tb, 'Third')
        b3.onclick.do(self.on_bt3_pressed, tb, 0)

        return tb