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

# To make it prettier put a tittle of what is this demo
        self.title_label = gui.Label("Dynamical layout change demo")
        self.title_label.set_size(350, 20)
        self.description_label = gui.Label("""Choose from the dropdown a widget and it will be added to the interface.
                                           If you change the dropdown selection it will substitute it.""")
        self.description_label.set_size(350, 80)


        # Create dropdown and it's contents
        self.dropdown = gui.DropDown()
        self.dropdown.set_size(200, 20)

        choose_ddi = gui.DropDownItem("Choose...")
        button_ddi = gui.DropDownItem("Add button")
        label_ddi = gui.DropDownItem("Add label")

        self.dropdown.append(choose_ddi)
        self.dropdown.append(button_ddi)
        self.dropdown.append(label_ddi)

        # Add a listener
        self.dropdown.set_on_change_listener(self.on_dropdown_change)

        # Add the dropdown to the widget
        self.wid.append(self.title_label)
        self.wid.append(self.description_label)
        self.wid.append(self.dropdown)

        # returning the root widget
        return self.wid

def __init__(self, widget, attributeName, propertyDef, attributeDict, appInstance, *args, **kwargs):
        super(EditorAttributeInputCssSize, self).__init__(
            widget, attributeName, propertyDef, attributeDict, appInstance, *args, **kwargs)
        self.numInput = gui.SpinBox(
            '0', -999999999, 999999999, 1, width='100%', height='100%')
        self.numInput.onchange.do(self.onchange)
        self.numInput.style['text-align'] = 'right'

        self.dropMeasureUnit = gui.DropDown(width='100%', height='100%')
        self.dropMeasureUnit.append(gui.DropDownItem('px'), 'px')
        self.dropMeasureUnit.append(gui.DropDownItem('%'), '%')
        self.dropMeasureUnit.select_by_key('px')
        self.dropMeasureUnit.onchange.do(self.onchange)
        '''
        self.set_from_asciiart("""
            |del|lbl                   |input           |meas   |
            """)
        '''
        self.style.update({'grid-template-columns': "6% 46% 33% 15%",
                           'grid-template-rows': "100%", 'grid-template-areas': "'del lbl input meas'"})
        self.append({'del': self.removeAttribute, 'lbl': self.label,
                     'input': self.numInput, 'meas': self.dropMeasureUnit})

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
                if field_spec['shape']=='browse':
                    button=self.browse_button(20,20,'','browse_button',self.field_index,field_spec['text'])

self.wid.style['text-align'] = 'center'
        
        # To make it prettier put a tittle of what is this demo
        self.title_label = gui.Label("Dynamical layout change demo")
        self.title_label.set_size(350, 20)
        self.description_label = gui.Label("""Choose from the dropdown a widget and it will be added to the interface.
                                           If you change the dropdown selection it will substitute it.""")
        self.description_label.set_size(350, 80)


        # Create dropdown and it's contents
        self.dropdown = gui.DropDown()
        self.dropdown.set_size(200, 20)

        choose_ddi = gui.DropDownItem("Choose...")
        button_ddi = gui.DropDownItem("Add button")
        label_ddi = gui.DropDownItem("Add label")

        self.dropdown.append(choose_ddi)
        self.dropdown.append(button_ddi)
        self.dropdown.append(label_ddi)

        # Add a listener
        self.dropdown.set_on_change_listener(self.on_dropdown_change)

        # Add the dropdown to the widget
        self.wid.append(self.title_label)
        self.wid.append(self.description_label)
        self.wid.append(self.dropdown)

        # returning the root widget
        return self.wid

def new_from_list(cls, items, **kwargs):
        item = None
        obj = cls(**kwargs)
        for item in items:
            obj.append(DropDownItem(item))
        if item is not None:
            try:
                obj.select_by_value(item)  # ensure one is selected
            except UnboundLocalError:
                pass
        return obj

def refresh_servers(self):
        self.dynamic_reconfigure_servers = find_reconfigure_services()
        rospy.loginfo("Found dynamic reconfigure servers:\n" +
                      str(self.dynamic_reconfigure_servers))
        self.dropdown = gui.DropDown()
        choose_ddi = gui.DropDownItem("Choose server...")
        self.dropdown.add_child(0, choose_ddi)
        for idx, server_name in enumerate(self.dynamic_reconfigure_servers):
            ddi = gui.DropDownItem(server_name)
            self.dropdown.add_child(idx + 1, ddi)

        self.dropdown.set_on_change_listener(self.on_dropdown_change)
        # using ID 2 to update the dropdown
        self.hor_servers.add_child(2, self.dropdown)
        # This makes the dropdown not be left
        self.dropdown.style['display'] = 'block'
        self.dropdown.style['margin'] = '10px auto'
        self.dropdown.style['float'] = 'none'
        self.wid.add_child(1, self.hor_servers)

def __init__(self, text, *args, **kwargs):
        """
        Args:
            kwargs: See Widget.__init__()
        """
        super(DropDownItem, self).__init__(*args, **kwargs)
        self.type = 'option'
        self.set_text(text)

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

        #Label
        self.lbl = gui.Label("  Label with Lock Icon")
        self.lbl.add_class("glyphicon glyphicon-lock label label-primary")
        
        #Text Input
        self.tf = gui.TextInput(hint='Your Input')
        self.tf.add_class("form-control input-lg")

        #Drop Down
        self.dd = gui.DropDown(width='200px')
        self.dd.style.update({'font-size':'large'})
        self.dd.add_class("form-control dropdown")
        self.item1 = gui.DropDownItem("First Choice")
        self.item2 = gui.DropDownItem("Second Item")
        self.dd.append(self.item1,'item1')
        self.dd.append(self.item2,'item2')
             
        #Table
        myList = [  ('ID','Lastname','Firstname','ZIP','City'),
                    ('1','Pan','Peter','99999','Neverland'),
                    ('2','Sepp','Schmuck','12345','Examplecity')  ]

        self.tbl = gui.Table.new_from_list(content=myList,width='400px',height='100px',margin='10px')
        self.tbl.add_class("table table-striped")
        
        #Buttons

        #btn adds basic design to a button like rounded corners and stuff
        #btn-success, btn-danger and similar adds theming based on the function