Widgets let you work on a conceptual level

You need a lot of stuff to make something work on a web page: some dynamically generated HTML, some JavaScript, some CSS and some URLs on a server that provide other resources, such as embedded images or web services that validate input.

We can write all these bits for you, and deliver them packaged in a Python class that is easy to use. A tabbed panel is a simple example of this:

A screenshot of a tabbed panel, open at one tab.

Should a user click on a different tab, different contents are displayed:

A screenshot of a tabbed panel, open at a different tab.

With Reahl, you can create a TabbedPanel object, add Tab objects to it and specify what each Tab should be filled with once opened.

For that, you get a working tabbed panel with its JavaScript that takes care to keep the browser’s back button working. You also get server-side functionality that make the panel work even when JavaScript is disabled (useful for search engine indexing amongst other things). When we improve TabbedPanel, you get those improvements without changes to your code.

Here is the complete Reahl web application which produces the TabbedPanel in the figure above:

from __future__ import print_function, unicode_literals, absolute_import, division

from reahl.web.fw import UserInterface
from reahl.web.ui import HTML5Page, TabbedPanel, Tab, P

class MyPage(HTML5Page):
    def __init__(self, view):
        super(MyPage, self).__init__(view, style='basic')

        tabbed_panel = self.body.add_child(TabbedPanel(view, 'mytabbedpanel'))

        contents1 = P.factory(text='A paragraph to give content to the first tab.')
        tabbed_panel.add_tab(Tab(view, 'Tab 1', '1', contents1))

        contents2 = P.factory(text='And another ...  to give content to the second tab.')
        tabbed_panel.add_tab(Tab(view, 'Tab 2', '2', contents2))
        
        contents3 = P.factory(text='Something else on the third tab.')
        tabbed_panel.add_tab(Tab(view, 'Tab 3', '3', contents3))


class TabbedPanelUI(UserInterface):
    def assemble(self):
        self.define_view('/', title='Tabbed panel demo', page=MyPage.factory())



Previous topic

Reahl features

Next topic

Validating user input

Documentation versions