A tabbed panel example¶
A common requirement in web applications is a page which contains a number of tabs between which a user can flip – each with different content.
A simple example is illustrated in the figure below:
Should a user click on a different tab, different contents are displayed:
Here is the complete Reahl web application which produces the TabbedPanel in the figure above:
from __future__ import unicode_literals
from __future__ import print_function
from reahl.web.fw import UserInterface
from reahl.web.ui import TwoColumnPage, TabbedPanel, Tab, P
class MyPage(TwoColumnPage):
def __init__(self, view):
super(MyPage, self).__init__(view, style='basic')
tabbed_panel = self.main.add_child(TabbedPanel(view, 'mytabbedpanel'))
tabbed_panel.add_tab(Tab(view, 'Tab 1', '1', P.factory(text='A paragraph to give content to the first tab.')))
tabbed_panel.add_tab(Tab(view, 'Tab 2', '2', P.factory(text='And another ... to give content to the second tab.')))
tabbed_panel.add_tab(Tab(view, 'Tab 3', '3', P.factory(text='Something else on the third tab.')))
class TabbedPanelUI(UserInterface):
def assemble(self):
self.define_view('/', title='Tabbed panel demo', page=MyPage.factory())
Using Reahl, this is written entirely in Python, and in terms of user interface widgets: You create a page by inheriting from the existing TwoColumnPage Widget (which comes with basic two-column layout already). In the __init__ of that page, you add a TabbedPanel Widget as a child to the main column of this TwoColumnPage, and populate the TabbedPanel with Tabs. Each Tab is given a factory it can use to generate its own contents if and when that becomes necessary (in each case here, the contents is just a paragraph with text, but it could have been any Widget).
What you get for that is tabs that can be switched via JavaScript, preventing the entire page to be refreshed when the user switches tabs. For users who have JavaScript switched off, the tabs still work, they just result in the page being refreshed. Search engines can crawl these tabs, and they can be bookmarked by browsers.
All these extra considerations you get without having to break a sweat – and you get the better implementation each time we improve it.