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 reahl.web.fw import UserInterface, Widget
from import HTML5Page
from reahl.web.bootstrap.ui import 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):

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

        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):
        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:
    def __init__(self, name, email_address): = name
        self.email_address = email_address

Previous topic

Layout and styling

Next topic

Fetch Addresses from the database