Build a user interface with Widgets¶
The next step is to change the page to display the list of Addresses in the address book.
Create your own AddressBox Widget to display a single Address.
Then add to the page a custom AddressBookPanel Widget that contains a nice
heading and many AddressBox instances: one for each Address in our
list.
(To keep things simple for now, hardcode the list of Addresses.)
Note
In the definition of the View, use a WidgetFactory for
AddressBookPage: the WidgetFactory is used to create an
AddressBookPage each time that URL is visited and only for
the duration of the request.
from __future__ import print_function, unicode_literals, absolute_import, division
from reahl.web.fw import UserInterface, Widget
from reahl.web.bootstrap.ui import HTML5Page, TextNode, Div, H, P
from reahl.web.bootstrap.navbar import Navbar, ResponsiveLayout
from reahl.web.bootstrap.grid import Container
class AddressBookPage(HTML5Page):
def __init__(self, view):
super(AddressBookPage, self).__init__(view)
self.body.use_layout(Container())
layout = ResponsiveLayout('md', colour_theme='dark', bg_scheme='primary')
navbar = Navbar(view, css_id='my_nav').use_layout(layout)
navbar.layout.set_brand_text('Address book')
navbar.layout.add(TextNode(view, 'All your addresses in one place'))
self.body.add_child(navbar)
self.body.add_child(AddressBookPanel(view))
class AddressBookPanel(Div):
def __init__(self, view):
super(AddressBookPanel, self).__init__(view)
self.add_child(H(view, 1, text='Addresses'))
for address in [Address('John', '[email protected]'),
Address('Jane', '[email protected]')]:
self.add_child(AddressBox(view, address))
class AddressBox(Widget):
def __init__(self, view, address):
super(AddressBox, self).__init__(view)
self.add_child(P(view, text='%s: %s' % (address.name, address.email_address)))
class AddressBookUI(UserInterface):
def assemble(self):
self.define_view('/', title='Address book', page=AddressBookPage.factory())
class Address(object):
def __init__(self, name, email_address):
self.name = name
self.email_address = email_address