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.)


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)

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


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.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): = name
        self.email_address = email_address

Previous topic

Layout and styling

Next topic

Fetch Addresses from the database