[nagare-users:635] 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,

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