Summary of Bootstrap differences

This section is intended as a quick reference for someone who knows the previous Widgets and Layouts and who needs to figure out how to map an older tool to its Bootstrap equivalent.

If that’s not you, you can safely skip this section.

The reahl.web.bootstrap package contains equivalent Layouts and Widgets for all of the Widgets previously supported. The new Widgets essentially do similar tasks but may look and behave differently to previous counterparts. In many cases the Widgets also have a different programming interface and the means by which their layout is controlled may also be different.

Below follows a more detailed breakdown of changes.

Basic Widgets

Simple Widgets are located in reahl.web.bootstrap.ui. These include Widgets that represent HTML (but styled versions) and a very small number of equally basic Widgets.

Whereas the standard reahl.web.ui module includes all basic Widgets, reahl.web.bootstrap.ui excludes basic Widgets that pertain to larger topics that were split out into their own modules:

The following changes happened here:

  • Before, an Input automatically displayed an error message below itself if it contained invalid input. Bootstrap versions do not. Depending on where they are used (via another Widget or a Layout) how and where error messages are displayed can differ, hence the Input cannot determine this by itself any longer.

  • The reahl.web.bootstrap.ui module now only contains Widgets corresponding to basic HTML elements or elements that are as simple as basic HTML elements in bootstrap-world. More complex Widgets are split out into separate modules.

  • Widgets that dealt with Layout of Forms, such as reahl.web.ui.LabelledBlockInput and reahl.web.ui.LabelledInlineInput have been axed. Instead, when using Bootstrap the layout of Forms are controlled using the new FormLayout and its subclasses:

  • Other Layouts have been added for these basic Widgets:
  • Some other Widgets that attempted to deal with styling, or that were mere aliases for HTML elements were removed:
  • Instead of a SimpleFileInput, there are two simple kinds of file input:
    • FileInputButton (just a button which behaves like a file input)
    • FileInput (a stylized version of a standard browser file input)
  • CheckboxInput has been split into two versions:

List of equivalent Widgets

Aside from the basic Widgets above, here is a list of old Widgets, and what the Bootstrap equivalent is. The old versions of these Widgets will disappear in Reahl 4.0:

Old version Bootstrap version
reahl.web.ui.FileUploadInput reahl.web.bootstrap.files.FileUploadInput
reahl.web.ui.SlidingPanel reahl.web.bootstrap.carousel.Carousel
reahl.web.ui.TabbedPanel reahl.web.bootstrap.tabbedpanel.TabbedPanel
reahl.web.ui.Menu reahl.web.bootstrap.navs.Nav (and related classes)
reahl.web.ui.CueInput reahl.web.bootstrap.forms.CueInput
reahl.web.ui.ErrorFeedbackMessage reahl.web.bootstrap.ui.Alert
reahl.web.ui.PopupA reahl.web.bootstrap.popups.PopupA (works differently)
reahl.web.datatable reahl.web.bootstrap.tables
reahl.web.layout reahl.web.bootstrap.grid
reahl.web.pager reahl.web.bootstrap.pagination

Page layout

In Reahl 3.1, reahl.web.pure.PageColumnLayout was used to create a page with several columns. In Reahl 3.2 the same results can be achieved by using a reahl.web.layout.PageLayout that uses a reahl.web.pure.ColumnLayout for its contents area.

This new arrangement works with Bootstrap as well: use reahl.web.layout.PageLayout in conjunction with a with reahl.web.bootstrap.grid.ColumnLayout for its contents.

Bootstrap’s reahl.web.bootstrap.grid.ResponsiveSize works differently to Pure’s reahl.web.pure.UnitSize: with Pure, you could state sizes as fractions, eg ‘1/2’. Bootstrap sizes are stated as integers and their meaning is always “how many 1/12ths”. Ie: 1 is 1/12th, 6 is 6/12ths and so on.

Added in (or for) Bootstrap

A small number of classes/modules were added for Bootstrap that do not have simple equivalents:

Class or package or module Contents
reahl.web.bootstrap.navbar.Navbar A more elaborate header for a site.
reahl.web.bootstrap.forms.StaticData An Input that can only be used for output.
reahl.web.bootstrap.forms.InputGroup A composed Input with Widgets before and after it.