widget library

[En Ware]

I have looked through the repositories have only found http://www.nagare.org/trac/browser/examples/nagare/examples/widgets.py.

Is there a tutorial or something else I could go by to create my own widgets? 

[apoirier]

Hi,

Le vendredi 13 janvier 2017 19:42:33 UTC+1, En Ware a écrit :

I have looked through the repositories have only found http://www.nagare.org/trac/browser/examples/nagare/examples/widgets.py.

Is there a tutorial or something else I could go by to create my own widgets?

 

With Nagare, every element of an application is a component which can embed is

own view, logic and data. Also components can communicate each other with the

'answer' / 'on_answer' mechanism.

So what is called "widgets" in other frameworks are only normal components in Nagare,

just with, in general, a predominant view part and a thin data part.

For example, here is a little Bootstrap widget (from http://getbootstrap.com/javascript/#dropdowns) :

class DropdownButton(object):
    def __init__(self, labels):
        self.labels = labels

@presentation.render_for(DropdownButton)
def render(self, h, comp, model):
    # All the Bootstrap widgets can include these CSS and JS.
    # They will be included only once in the final header of the page.
    h.head.css_url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
    h.head.javascript_url('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    h.head.javascript_url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')

    with h.div(class_='dropdown'):
        with h.button(class_='btn btn-primary dropdown-toggle', type='button', data_toggle='dropdown'):
            h << 'Dropdown trigger' << ' ' << h.span(class_='caret')

        with h.ul(class_='dropdown-menu'):
            for i, label in enumerate(self.labels):
                with h.li:
                    h << h.a(label).action(comp.answer, i)  # Return the selected entry indice

    return h.root

Then this widget can be embedded in any view of an other component:

class App(object):
    def __init__(self):
        self.dropdown = component.Component(DropdownButton(('Action', 'Another Action', 'Something else here')))
        self.dropdown.on_answer(self.print_selection)

    def print_selection(self, i):
        print 'Entry #%d selected' % (i + 1)


@presentation.render_for(App)
def render(self, h, *args):
    h.head << h.head.meta(name='viewport', content='width=device-width, initial-scale=1')

    with h.div(class_='container'):
        h << h.h1('Bootstrap widget example')

    with h.div(class_='container'):
        h << self.dropdown

    return h.root

Note how the 'DropdownButton' and the 'App' components are exactly defined in the same way.

Hope this help.

Best regards,

Alain