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

if type(y) == property:
                if hasattr(y, "fget"):
                    if hasattr(y.fget, "editor_attributes"):
                        group = y.fget.editor_attributes['group']

                        attributeEditor = None
                        attributeDict = y.fget.editor_attributes
                        # 'background-repeat':{'type':str, 'description':'The repeat behaviour of an optional background image', ,'additional_data':{'possible_values':'repeat | repeat-x | repeat-y | no-repeat | inherit'}},
                        if attributeDict['type'] in (bool, int, float, gui.ColorPicker.__name__, gui.DropDown.__name__, 'url_editor', 'css_size', 'base64_image', 'file'):
                            if attributeDict['type'] == bool:
                                chk = gui.CheckBox(
                                    'checked', width=default_width, height=default_height)
                                attributeEditor = EditorAttributeInputGeneric(
                                    chk, self.targetWidget, x, y, y.fget.editor_attributes, self.appInstance)
                            elif attributeDict['type'] == int:
                                spin = gui.SpinBox(attributeDict['additional_data']['default'], attributeDict['additional_data']['min'], attributeDict[
                                                   'additional_data']['max'], attributeDict['additional_data']['step'], width=default_width, height=default_height)
                                attributeEditor = EditorAttributeInputInt(
                                    spin, self.targetWidget, x, y, y.fget.editor_attributes, self.appInstance)
                            elif attributeDict['type'] == float:
                                spin = gui.SpinBox(attributeDict['additional_data']['default'], attributeDict['additional_data']['min'], attributeDict[
                                                   'additional_data']['max'], attributeDict['additional_data']['step'], width=default_width, height=default_height)
                                attributeEditor = EditorAttributeInputFloat(
                                    spin, self.targetWidget, x, y, y.fget.editor_attributes, self.appInstance)
                            elif attributeDict['type'] == gui.ColorPicker.__name__:
                                attributeEditor = EditorAttributeInputColor(
                                    self.targetWidget, x, y, y.fget.editor_attributes, self.appInstance)
                            elif attributeDict['type'] == gui.DropDown.__name__:
                                drop = gui.DropDown(
                                    width=default_width, height=default_height)
                                for value in attributeDict['additional_data']['possible_values']:
                                    drop.append(gui.DropDownItem(value), value)

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)
        wid.append(container)

        container = gui.HBox(width='100%')
        lbl_column_count = gui.Label('Columns:')
        spin_column_count = gui.SpinBox(3, 0, 4)
        spin_column_count.onchange.do(self.on_column_count_change, table)
        container.append(lbl_column_count)
        container.append(spin_column_count)
        wid.append(container)

        bt_fill_table = gui.Button('Fill table', width=100)
        bt_fill_table.onclick.do(self.fill_table, table)
        wid.append(bt_fill_table)

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)
        self.ddate.set_value('2000-01-01')
        self.dialog.add_field_with_label('ddate', 'Date', self.ddate)

        self.dialog.set_on_confirm_dialog_listener(self.dialog_confirm)

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)
        self.ddate.set_value('2000-01-01')
        self.dialog.add_field_with_label('ddate', 'Date', self.ddate)

        self.dialog.confirm_dialog.do(self.dialog_confirm)

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'"})

subContainerRight.style['overflow'] = 'auto'
        subContainerRight.style['text-align'] = 'center'
        self.count = 0
        self.counter = gui.Label('', width=200, height=30, margin='10px')

        self.lbl = gui.Label('This is a LABEL!', width=200, height=30, margin='10px')

        self.bt = gui.Button('Press me!', width=200, height=30, margin='10px')
        # setting the listener for the onclick event of the button
        self.bt.set_on_click_listener(self, 'on_button_pressed')

        self.txt = gui.TextInput(width=200, height=30, margin='10px')
        self.txt.set_text('This is a TEXTAREA')
        self.txt.set_on_change_listener(self, 'on_text_area_change')

        self.spin = gui.SpinBox(100, width=200, height=30, margin='10px')
        self.spin.set_on_change_listener(self, 'on_spin_change')

        self.check = gui.CheckBoxLabel('Label checkbox', True, width=200, height=30, margin='10px')
        self.check.set_on_change_listener(self, 'on_check_change')

        self.btInputDiag = gui.Button('Open InputDialog', width=200, height=30, margin='10px')
        self.btInputDiag.set_on_click_listener(self, 'open_input_dialog')

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

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

        items = ('Danny Young','Christine Holand','Lars Gordon','Roberto Robitaille')

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)
        wid.append(container)

        container = gui.HBox(width='100%')
        lbl_column_count = gui.Label('Columns:')
        spin_column_count = gui.SpinBox(3, 0, 4)
        spin_column_count.onchange.do(self.on_column_count_change, table)
        container.append(lbl_column_count)
        container.append(spin_column_count)
        wid.append(container)

        bt_fill_table = gui.Button('Fill table', width=100)
        bt_fill_table.onclick.do(self.fill_table, table)
        wid.append(bt_fill_table)

        chk_use_title = gui.CheckBoxLabel('Use title', True)
        chk_use_title.onchange.do(self.on_use_title_change, table)
        wid.append(chk_use_title)

        self.fill_table(table, table)

        table.on_item_changed.do(self.on_table_item_changed)

menu.append([m1, m2, m3, m4])

        menubar.append(menu)

        self.toolbar = editor_widgets.ToolBar(
            width='100%', height='30px', margin='0px 0px')
        self.toolbar.style['border-bottom'] = '1px solid rgba(0,0,0,.12)'
        self.toolbar.add_command(
            '/editor_resources:delete.png', self.toolbar_delete_clicked, 'Delete Widget')
        self.toolbar.add_command(
            '/editor_resources:cut.png', self.menu_cut_selection_clicked, 'Cut Widget')
        self.toolbar.add_command(
            '/editor_resources:paste.png', self.menu_paste_selection_clicked, 'Paste Widget')

        lbl = gui.Label("Snap grid", width=100)
        spin_grid_size = gui.SpinBox('15', '1', '100', width=50)
        spin_grid_size.set_on_change_listener(self.on_snap_grid_size_change)

        grid_size = gui.HBox(children=[lbl, spin_grid_size], style={
                             'outline': '1px solid gray', 'margin': '2px', 'margin-left': '10px'})
        self.toolbar.append(grid_size)

        self.fileOpenDialog = editor_widgets.EditorFileSelectionDialog(
            'Open Project', 'Select the project file.<br>It have to be a python program created with this editor.', False, '.', True, False, self)
        self.fileOpenDialog.confirm_value.do(self.on_open_dialog_confirm)

        self.fileSaveAsDialog = editor_widgets.EditorFileSaveDialog(
            'Project Save', 'Select the project folder and type a filename', False, '.', False, True, self)
        self.fileSaveAsDialog.add_fileinput_field('untitled.py')
        self.fileSaveAsDialog.confirm_value.do(self.menu_save_clicked)

        m10.onclick.do(self.menu_new_clicked)

def __init__(self, default_value='100', min=100, max=5000, step=1, allow_editing=True, **kwargs):
        """
        Args:
            default_value (str):
            min (int):
            max (int):
            step (int):
            allow_editing (bool): If true allow editing the value using backpspace/delete/enter (othewise
            only allow entering numbers)
            kwargs: See Widget.__init__()
        """
        super(SpinBox, self).__init__('number', default_value, **kwargs)
        self.attributes['min'] = str(min)
        self.attributes['max'] = str(max)
        self.attributes['step'] = str(step)
        # eat non-numeric input (return false to stop propogation of event to onchange listener)
        js = 'var key = event.keyCode || event.charCode;'
        js += 'return (event.charCode >= 48 && event.charCode <= 57)'
        if allow_editing:
            js += ' || (key == 8 || key == 46 || key == 45|| key == 44 )'  # allow backspace and delete and minus and coma
            js += ' || (key == 13)'  # allow enter
        self.attributes[self.EVENT_ONKEYPRESS] = '%s;' % js
        #FIXES Edge behaviour where onchange event not fires in case of key arrow Up or Down
        self.attributes[self.EVENT_ONKEYUP] = \
            "var key = event.keyCode || event.charCode;" \
            "if(key==13){var params={};params['value']=document.getElementById('%(id)s').value;" \
            "sendCallbackParam('%(id)s','%(evt)s',params); return true;}" \
            "return false;" % {'id': self.identifier, 'evt': self.EVENT_ONCHANGE}

subContainerRight.style['overflow'] = 'auto'
        subContainerRight.style['text-align'] = 'center'
        self.count = 0
        self.counter = gui.Label('', width=200, height=30, margin='10px')

        self.lbl = gui.Label('This is a LABEL!', width=200, height=90, margin='10px')

        self.bt = gui.Button('Press me!', width=200, height=30, margin='10px')
        # setting the listener for the onclick event of the button
        self.bt.set_on_click_listener(self.on_button_pressed)

        self.txt = gui.TextInput(width=200, height=30, margin='10px')
        self.txt.set_text('This is a TEXTAREA')
        self.txt.set_on_change_listener(self.on_text_area_change)

        self.spin = gui.SpinBox(100, width=200, height=30, margin='10px')
        self.spin.set_on_change_listener(self.on_spin_change)

        self.check = gui.CheckBoxLabel('Label checkbox', True, width=200, height=30, margin='10px')
        self.check.set_on_change_listener(self.on_check_change)

        self.btInputDiag = gui.Button('Open InputDialog', width=200, height=30, margin='10px')
        self.btInputDiag.set_on_click_listener(self.open_input_dialog)

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

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

        items = ('Danny Young','Christine Holand','Lars Gordon','Roberto Robitaille')