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

def add_tab(self, widget, name, tab_cb):

        holder = Tag(_type='div', _class='')
        holder.add_child('content', widget)

        li = Tag(_type='li', _class='')

        a = Widget(_type='a', _class='')
        if len(self._tabs) == 0:
            a.add_class('active')
            holder.style['display'] = 'block'
        else:
            holder.style['display'] = 'none'

        # we need a href attribute for hover effects to work, and while empty
        # href attributes are valid html5, this didn't seem reliable in testing.
        # finally, '#' moves to the top of the page, and '#abcd' leaves browser history.
        # so no-op JS is the least of all evils
        a.attributes['href'] = 'javascript:void(0);'

        self._tab_cbs[holder.identifier] = tab_cb
        a.onclick.connect(self._on_tab_pressed, li, holder)

def __init__(self, *args, **kwargs):
        super(TabBox, self).__init__(*args, **kwargs)

        self._section = Tag(_type='section')

        self._tab_cbs = {}

        self._ul = Tag(_type='ul', _class='tabs clearfix')
        self.add_child('ul', self._ul)

        self.add_child('section', self._section)

        # maps tabs to their corresponding tab header
        self._tabs = {}

        self._tablist = list()

def add_tab(self, widget, name, tab_cb):

        holder = Tag(_type='div', _class='')
        holder.style['padding'] = '15px'
        holder.add_child('content', widget)

        li = Tag(_type='li', _class='')

        a = Widget(_type='a', _class='')
        if len(self._tabs) == 0:
            a.add_class('active')
            holder.style['display'] = 'block'
        else:
            holder.style['display'] = 'none'

        # we need a href attribute for hover effects to work, and while empty
        # href attributes are valid html5, this didn't seem reliable in testing.
        # finally, '#' moves to the top of the page, and '#abcd' leaves browser history.
        # so no-op JS is the least of all evils

def add_tab(self, widget, name, tab_cb):

        holder = Tag(_type='div', _class='')
        holder.style['padding'] = '15px'
        holder.add_child('content', widget)

        li = Tag(_type='li', _class='')

        a = Widget(_type='a', _class='')
        if len(self._tabs) == 0:
            a.add_class('active')
            holder.style['display'] = 'block'
        else:
            holder.style['display'] = 'none'

        # we need a href attribute for hover effects to work, and while empty
        # href attributes are valid html5, this didn't seem reliable in testing.
        # finally, '#' moves to the top of the page, and '#abcd' leaves browser history.
        # so no-op JS is the least of all evils
        a.attributes['href'] = 'javascript:void(0);'

        a.attributes[a.EVENT_ONCLICK] = "sendCallback('%s','%s');" % (a.identifier, a.EVENT_ONCLICK)

Returns:
            str: a key used to refer to the child for all future interaction, or a list of keys in case
                of an iterable 'value' param
        """
        if type(value) in (list, tuple, dict):
            if type(value)==dict:
                for k in value.keys():
                    self.append(value[k], k)
                return value.keys()
            keys = []
            for child in value:
                keys.append( self.append(child) )
            return keys

        if not isinstance(value, Tag):
            raise ValueError('value should be a Tag (otherwise use add_child(key,other)')

        key = value.identifier if key == '' else key
        self.add_child(key, value)
        value.style['grid-area'] = key
        value.style['position'] = 'static'

        return key

def add_tab(self, widget, name, tab_cb):

        holder = Tag(_type='div', _class='')
        holder.style['padding'] = '15px'
        holder.add_child('content', widget)

        li = Tag(_type='li', _class='')

        a = Widget(_type='a', _class='')
        if len(self._tabs) == 0:
            a.add_class('active')
            holder.style['display'] = 'block'
        else:
            holder.style['display'] = 'none'

        # we need a href attribute for hover effects to work, and while empty
        # href attributes are valid html5, this didn't seem reliable in testing.
        # finally, '#' moves to the top of the page, and '#abcd' leaves browser history.
        # so no-op JS is the least of all evils

def main(self, name='world'):
        # margin 0px auto allows to center the app to the screen
        wid = gui.VBox(width=300, height=200, margin='0px auto')

        lbl = gui.Label("Close or reload the page, the console thread will stop automatically.")
        wid.append(lbl)

        #add the following 3 lines to your app and the on_window_close method to make the console close automatically
        tag = gui.Tag(_type='script')
        tag.add_child("javascript", """window.onunload=function(e){sendCallback('%s','%s');return "close?";};""" % (str(id(self)), "on_window_close")) 
        wid.add_child("onunloadevent", tag)
        
        # returning the root widget
        return wid

def add_tab(self, widget, name, tab_cb):

        holder = Tag(_type='div', _class='')
        holder.style['padding'] = '15px'
        holder.add_child('content', widget)

        li = Tag(_type='li', _class='')

        a = Widget(_type='a', _class='')
        if len(self._tabs) == 0:
            a.add_class('active')
            holder.style['display'] = 'block'
        else:
            holder.style['display'] = 'none'

        # we need a href attribute for hover effects to work, and while empty
        # href attributes are valid html5, this didn't seem reliable in testing.
        # finally, '#' moves to the top of the page, and '#abcd' leaves browser history.
        # so no-op JS is the least of all evils
        a.attributes['href'] = 'javascript:void(0);'

        a.attributes[a.EVENT_ONCLICK] = "sendCallback('%s','%s');" % (a.identifier, a.EVENT_ONCLICK)

self._render_children_list.remove(k)
                        self.children.pop(k)
                        # when the child is removed we stop the iteration
                        # this implies that a child replication should not be allowed
                        break

    def _ischanged(self):
        return self.children.ischanged() or self.attributes.ischanged() or self.style.ischanged()

    def _set_updated(self):
        self.children.align_version()
        self.attributes.align_version()
        self.style.align_version()


class Widget(Tag):
    """Base class for gui widgets.

    Widget can be used as generic container. You can add children by the append(value, key) function.
    Widget can be arranged in absolute positioning (assigning style['top'] and style['left'] attributes to the children
    or in a simple auto-alignment.
    You can decide the horizontal or vertical arrangement by the function set_layout_horientation(layout_orientation)
    passing as parameter Widget.LAYOUT_HORIZONTAL or Widget.LAYOUT_VERTICAL.

    Tips:
    In html, it is a DIV tag
    The self.type attribute specifies the HTML tag representation
    The self.attributes[] attribute specifies the HTML attributes like 'style' 'class' 'id'
    The self.style[] attribute specifies the CSS style content like 'font' 'color'. It will be packed together with
    'self.attributes'.
    """

def __init__(self, data=None, update=None, updateRate=1,
                 **kwargs):
        super(PlotlyWidget, self).__init__(**kwargs)
        self.updateRate = updateRate
        self.data = data
        self.update = update

        javascript_code = gui.Tag()
        javascript_code.type = 'script'
        javascript_code.attributes['type'] = 'text/javascript'
        code = """
        var PLOT = document.getElementById('plot');
        var url = "plot/get_refresh";
        var plotOptions = {
                           title: 'Title goes here'
                          ,xaxis: {title: 'time'}
                          ,yaxis: {title: 'random number',type: 'linear'}
                          };
        plotOptions['margin'] = {t:50, l:50, r:30};

        Plotly.d3.json(url,
            function(error, data) {
                Plotly.plot(PLOT, data, plotOptions);
            });