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

#creating a container VBox type, vertical (you can use also HBox or Widget)
        main_container = gui.Widget(width=300, style={'margin':'0px auto'}, layout_orientation=gui.Widget.LAYOUT_VERTICAL)


        m11 = gui.MenuItem('Save', [gui.MenuItem('Save'), gui.MenuItem('Save as')], width=100, height=30)
        m1 = gui.MenuItem('File', [m11, gui.MenuItem('Open')], width=100, height=30)
        menu = gui.Menu([m1, gui.MenuItem('View', width=100, height=30), gui.MenuItem('Dialog', width=100, height=30)], width='100%', height='30px')
        
        menubar = gui.MenuBar(width='100%', height='30px')
        menubar.append(menu)

        listview = gui.ListView(children={'0': gui.ListItem('zero'), 'n': 'n'})
        print( listview.append({'1': gui.ListItem('uno'), '2': gui.ListItem('due')}) )
        print( listview.append([gui.ListItem('tre'), gui.ListItem('quattro')]) )

        dropdown = gui.DropDown({'0': gui.DropDownItem('zero'), 'n': gui.DropDownItem('n')})
        print( dropdown.append({'1': gui.DropDownItem('uno'), '2': gui.DropDownItem('due')}) )
        print( dropdown.append(['tre', 'quattro']) )

        table = gui.Table({'0': gui.TableRow(['zero','zeroo','zerooo']), 'n':gui.TableRow(['n','nn','nnn'])})
        print( table.append({'1': gui.TableRow(['uno','unoo','unooo']), '2':gui.TableRow(['due','duee','dueee'])}) )
        row3 = gui.TableRow()
        row3.append(['tre','tree','treee'])
        row4 = gui.TableRow()
        row4.append(['quattro','quattroo','quattrooo'])
        print( table.append({'3':row3 , '4':row4}) )
        print( table.append({'5':gui.TableRow(['5','55','555']) , '6':gui.TableRow(['6','66','666'])}) )
        print( table.append(gui.TableRow(['sette','settee','setteee']) ) )

        main_container.append([menubar, listview, dropdown, table])
        # returning the root widget
        return main_container

def __init__(self, widget, listenersList, eventConnectionFuncName, eventConnectionFunc, **kwargs):
        super(SignalConnection, self).__init__(**kwargs)

        self.style.update(
            {'overflow': 'visible', 'height': '24px', 'outline': '1px solid lightgray'})
        self.label = gui.Label(eventConnectionFuncName, width='32%')
        self.label.style.update({'float': 'left', 'font-size': '10px',
                                 'overflow': 'hidden', 'outline': '1px solid lightgray'})

        self.dropdownListeners = gui.DropDown(width='32%', height='100%')
        self.dropdownListeners.onchange.do(self.on_listener_selection)
        self.dropdownListeners.attributes['title'] = "The listener who will receive the event"

        self.dropdownMethods = gui.DropDown(width='32%', height='100%')
        self.dropdownMethods.onchange.do(self.on_connection)
        self.dropdownMethods.attributes['title'] = """The listener's method who will receive the event. \
        A custom method is selected by default. You can select another method, but you should check the method parameters."""

        self.eventConnectionFunc = eventConnectionFunc
        self.eventConnectionFuncName = eventConnectionFuncName
        self.refWidget = widget
        self.listenersList = listenersList
        self.dropdownListeners.append(gui.DropDownItem("None"))
        for w in listenersList:
            ddi = gui.DropDownItem(w.identifier)
            ddi.listenerInstance = w
            self.dropdownListeners.append(ddi)

        if not self.eventConnectionFunc.callback is None:
            try:

self.btInputDiag.onclick.do(self.open_input_dialog)

        self.btFileDiag = gui.Button('File Selection Dialog', width=200, height=30, margin='10px')
        self.btFileDiag.onclick.do(self.open_fileselection_dialog)

        self.btUploadFile = gui.FileUploader('./', width=200, height=30, margin='10px')
        self.btUploadFile.onsuccess.do(self.fileupload_on_success)
        self.btUploadFile.onfailed.do(self.fileupload_on_failed)

        items = ('Danny Young','Christine Holand','Lars Gordon','Roberto Robitaille')
        self.listView = gui.ListView.new_from_list(items, width=300, height=120, margin='10px')
        self.listView.onselection.do(self.list_view_on_selected)

        self.link = gui.Link("http://localhost:8081", "A link to here", width=200, height=30, margin='10px')

        self.dropDown = gui.DropDown.new_from_list(('DropDownItem 0', 'DropDownItem 1'),
                                                   width=200, height=20, margin='10px')
        self.dropDown.onchange.do(self.drop_down_changed)
        self.dropDown.select_by_value('DropDownItem 0')

        self.slider = gui.Slider(10, 0, 100, 5, width=200, height=20, margin='10px')
        self.slider.onchange.do(self.slider_changed)

        self.colorPicker = gui.ColorPicker('#ffbb00', width=200, height=20, margin='10px')
        self.colorPicker.onchange.do(self.color_picker_changed)

        self.date = gui.Date('2015-04-13', width=200, height=20, margin='10px')
        self.date.onchange.do(self.date_changed)

        self.video = gui.Widget( _type='iframe', width=290, height=200, margin='10px')
        self.video.attributes['src'] = "https://drive.google.com/file/d/0B0J9Lq_MRyn4UFRsblR3UTBZRHc/preview"
        self.video.attributes['width'] = '100%'

def append(self, item, key=''):
        if isinstance(item, type('')) or isinstance(item, type(u'')):
            item = DropDownItem(item)
        elif not isinstance(item, DropDownItem):
            raise ValueError("item must be text or a DropDownItem instance")
        super(DropDown, self).append(item, key=key)

obj=gui.TextInput(single_line=True,width=self.field_width,height=20)
                    obj.set_value(self.field_content[field])
                    
                elif field_spec['shape']=='text':
                    obj=gui.TextInput(width=self.field_width,height=110,single_line=False)
                    obj.set_value(self.field_content[field])
                    # extra lines
                    self.col_row+=5

                elif field_spec['shape']=='spinbox':
                    print('spinbox not implemented')
                    return None,None

                    
                elif field_spec['shape']=='option-menu':
                    obj=gui.DropDown(width=self.field_width,height=25)
                    for key, value in enumerate(values):
                        item=gui.DropDownItem(value,width=self.field_width,height=25)
                        obj.append(item, key=key)
                    content=self.field_content[field]
                    if self.field_content[field] not in values:
                        obj.style['color'] = 'red'
                        content=values[0]
                    obj.set_value(content)
                    # print self.field_content[field],obj.get_value(),values


                else:
                    print("Uknown shape for: " + field)
                    return None,None
                
                # create buttons where required

def empty(self):
        self._selected_item = None
        self._selected_key = None
        super(DropDown, self).empty()

def append(self, value, key=''):
        if isinstance(value, type('')) or isinstance(value, type(u'')):
            value = DropDownItem(value)
        keys = super(DropDown, self).append(value, key=key)
        if len(self.children) == 1:
            self.select_by_value(value.get_value())
        return keys

def menu_dialog_clicked(self, widget):
        self.dialog = gui.GenericDialog(title='Dialog Box', message='Click Ok to transfer content to main page', width='500px')
        self.dtextinput = gui.TextInput(width=200, height=30)
        self.dtextinput.set_value('Initial Text')
        self.dialog.add_field_with_label('dtextinput', 'Text Input', self.dtextinput)

        self.dcheck = gui.CheckBox(False, width=200, height=30)
        self.dialog.add_field_with_label('dcheck', 'Label Checkbox', self.dcheck)
        values = ('Danny Young', 'Christine Holand', 'Lars Gordon', 'Roberto Robitaille')
        self.dlistView = gui.ListView.new_from_list(values, width=200, height=120)
        self.dialog.add_field_with_label('dlistView', 'Listview', self.dlistView)

        self.ddropdown = gui.DropDown.new_from_list(('DropDownItem 0', 'DropDownItem 1'),
                                                    width=200, height=20)
        self.dialog.add_field_with_label('ddropdown', 'Dropdown', self.ddropdown)

        self.dspinbox = gui.SpinBox(min=0, max=5000, width=200, height=20)
        self.dspinbox.set_value(50)
        self.dialog.add_field_with_label('dspinbox', 'Spinbox', self.dspinbox)

        self.dslider = gui.Slider(10, 0, 100, 5, width=200, height=20)
        self.dspinbox.set_value(50)
        self.dialog.add_field_with_label('dslider', 'Slider', self.dslider)

        self.dcolor = gui.ColorPicker(width=200, height=20)
        self.dcolor.set_value('#ffff00')
        self.dialog.add_field_with_label('dcolor', 'Colour Picker', self.dcolor)

        self.ddate = gui.Date(width=200, height=20)

subContainer.append(vbox,'vbox')
        hbox = HBox(width=300, height=250)
        lbl1 = Label('lbl1', width=50, height=50, style='background-color: #ffb509')
        hbox.append(lbl1,'lbl1')
        lbl2 = Label('lbl2', width=50, height=50, style='background-color: #40ff2b')
        hbox.append(lbl2,'lbl2')
        lbl3 = Label('lbl3', width=50, height=50, style='background-color: #e706ff')
        hbox.append(lbl3,'lbl3')
        subContainer.append(hbox,'hbox')
        mainContainer.append(subContainer,'subContainer')
        comboJustifyContent = gui.DropDown.new_from_list(('flex-start','flex-end','center','space-between','space-around'),
                                    style='left: 160px; position: absolute; top: 60px; width: 148px; height: 30px')
        mainContainer.append(comboJustifyContent,'comboJustifyContent')
        lblJustifyContent = Label('justify-content', style='left: 40px; position: absolute; top: 60px; width: 100px; height: 30px')
        mainContainer.append(lblJustifyContent,'lblJustifyContent')
        comboAlignItems = gui.DropDown.new_from_list(('stretch','center','flex-start','flex-end','baseline'),
                                    style='left:160px; position:absolute; top:100px; width:152px; height: 30px')
        mainContainer.append(comboAlignItems,'comboAlignItems')
        lblAlignItems = Label('align-items', style='left:40px; position:absolute; top:100px; width:100px; height:30px')
        mainContainer.append(lblAlignItems,'lblAlignItems')
        mainContainer.children['comboJustifyContent'].onchange.do(self.onchange_comboJustifyContent,vbox,hbox)
        mainContainer.children['comboAlignItems'].onchange.do(self.onchange_comboAlignItems,vbox,hbox)

        lblTitle = gui.Label("The following example shows the two main layout style properties for the VBox and HBox containers. Change the value of the two combo boxes.",
                                    style='position:absolute; left:0px; top:0px')
        mainContainer.append(lblTitle)

        self.mainContainer = mainContainer
        return self.mainContainer