Layout and styling¶
Styling is probably not the first thing a programmer wants to worry about. That is why Reahl comes with some styling you can use when starting a project – perhaps to be replaced by a graphic designer later.
Let us detour to introduce layout and styling ideas because that will allow us to to make the rest of the examples in the tutorial look just a little bit better.
Layout is used to change what a
Widget looks like, what css
classes are attached to it for styling, or even how children
Widgets are added to it – all for the purpose of influencing look and
Widget is configured to use a particular
Layout by calling
reahl.web.fw.Widget.use_layout() on the
construction. (You can also call
reahl.web.fw.WidgetFactory.use_layout() where you construct only
WidgetFactory for later use.) For example,
VerticalLayout can be used to make a
Menu appear with its items horizontally next to
each other or stacked vertically.
Some layout concepts are implemented in terms of some frontend library, others are generally applicable.
pure module includes some layouts based on the
Pure.css framework. The
Widget by adding several
it that are arranged as columns next to each other. You can specify
the size of these columns, and in such a way that the size can change,
depending on the size of the device used for viewing. See the
UnitSize for more details.
(See Package reahl.web.bootstrap for Layouts and Widgets built using the
layout module houses generically applicable concepts.
PageLayout is meant to be used with an
HTML5Page. It changes the page to have a header
and footer with a content area in between. If a
(for example) is passed to the
it will automatically be used as the layout of the content area of the page.
Here is an example of how
ColumnLayout can be used in conjunction to
create a page with some structure. In the example,
HorizontalLayout is also used to specify how
Menu is presented.
class MyCustomPage(HTML5Page): def __init__(self, view, bookmarks): super(MyCustomPage, self).__init__(view, style='basic') self.use_layout(PageLayout()) contents_layout = ColumnLayout(('secondary', UnitSize('1/4')), ('main', UnitSize('3/4'))).with_slots() self.layout.contents.use_layout(contents_layout) menu = Menu(view).use_layout(HorizontalLayout()).with_bookmarks(bookmarks) self.layout.header.add_child(menu)
There are also some
Widgets with special behaviour that relate to
layout and styling:
Widgetwraps around an
Input, and adds a
Labelto it. The combination of the
Labelare then arranged in two columns next to each other. Successive
LabelledBlockInputs appear underneath each other, with all the
Labels aligned and all the Inputs aligned.
LabelledInlineInputalso wraps around an
Inputand adds a
Label. The result though is an element that flows with text and can be used as part of a paragraph (
P), for example.
Sometimes it is useful to visually highlight certain
Widgets to make them stand out amongst their peers. This concept is called the “priority” of a
Widget. Normally, you would not specify the priority of a
Widget. But, amongst chosen grouping of
Widgets, you may set one
Widgetas having “primary” priority, with the others having “secondary” priority.
Widgetwith “secondary” priority will have a CSS class reahl-priority-secondary attached to it, which is normally styled such that it fades a bit into the background (perhaps lighter, or slightly greyed out). A
Widgetwith “primary” priority will have CSS class reahl-priority-primary which is normally styled such that it stands out visually.
PriorityGroupis an object to which you can add
Widgets, stating their priority (or lack of it). The
PriorityGroupwill ensure that only one of the
Widgets added to it will ever have primary priority. (Many could have no priority set, and many could be secondary.)
Widgets in Reahl are written such that the
Widget has an
identifiable HTML element that represents the
means that the HTML element has an id or class attribute which can be
used as target of CSS selectors. This allows for CSS to be attached to
Widget (or its contents). For example, the TabbedPanel is in a
Widgets that map one-to-one to HTML
tags do not have special classes – they can be targeted in CSS by just
using the HTML tag name they represent: the
Widget is just a <p>,
Given these ways to be able to target a
(possibly modified by a specific
CSS, you can write normal CSS to provide your own look and feel for
Widgets (if you really want to). In the
reference documentation for each
explanation is given of what the HTML for that
Widget looks like, for this purpose. (Similar
documentation is provided with
In order to use your own CSS on a page, you need to add a link to it on your HTML5Page subclass. For example in the __init__ of your class, you can write:
The minutiae of what
Widgets look like is probably not the first thing on a
programmer’s mind however. It is useful just to start programming using some
look for the
Widgets, and later customise this look to your
liking. For this reason, a stylesheet is provided which includes
styling for all the standard Reahl
Widgets. You can include this style
by adding it to the Head of your HTML5Page:
If you are using the HTML5Page as a page, the same effect
can be accomplished by merely passing
style='basic' to its
constructor (as can be seen in almost all of our code examples so