JavaServer Faces (JSF) is often considered dead. It hasn’t been on the Technology Radar for years and many developers think that it's outdated. However, companies have an investment in the technology. JSF isn't easy to learn and many teams in larger enterprises are now used to writing JSF applications quickly using predefined components. Migrating these applications to a *JS framework would be a huge effort. JSF also has an open standard process, resulting in stable versions—JSF version 2.3 was just released.

Tobago

Tobago is a subproject of Apache MyFaces (the Open Source implementation of JSF). The goal is to provide the community with a well-designed set of user interface components based on JSF. By omitting the need to code HTML, CSS, or JavaScript, Tobago allows users to easily create business Web applications, and emulates the development process of conventional user interfaces (rather than the creation of Web pages) via:

1.    UI components abstracted from HTML, along with any layout information that does not belong to the general page structure. The final output format is determined by the client/user-agent;

2.    A theming mechanism that makes it easy to change the look-and-feel and provides special implementations for certain browsers; and

3.    A layout manager used to arrange the components automatically. This means that the developer doesn’t need to manually lay out pages using HTML tables or other constructs.

The development of Tobago started in 2002 and it was donated to the Apache Incubator in 2005. Until Tobago 2.x, the layout was computed on the server to make advanced features available that aided in the development of a  web application. The use of current technologies such as SCSS, CSS3, HTML5, AJAX now make it possible to implement advanced layout managers in the browser. This was the goal for the next major release Tobago 3.

Bootstrap

Themes in Tobago 3 are implemented using the Bootstrap 4 alpha version, a CSS library initially developed by Twitter. Bootstrap makes it easy to obtain a modern and rich design, to natively achieve layout requirements and make rendering more efficient and responsive. A fallback solution ensures that as much code as possible is reused for new themes. In addition, Font Awesome is used as the icon library.

Code Samples

The new layout managers are simple to use. Here are some examples to show the differences of the three most important layout managers.

Segment Layout

The segment layout uses the 12 columns layout from Bootstrap. The number and the proportion of the columns can be set to large, medium, small or extraSmall. Every attribute has a different CSS class, but the usage is the same. The value is a semicolon separated list of integers, the sum of which has to be 12. A value of n will use n columns from the grid.

											
<tc:segmentLayout medium="1;6;2;3">
        <tc:in value="1"/>
        <tc:in value="2"/>
        <tc:in value="3"/>
        <tc:in value="4"/>
        <tc:hidden/>
        <tc:in value="5"/>
</tc:segmentLayout>
										

View it in demo application

Flex Layout

The GridLayout from Tobago 2.0 can be replaced with a CSS 3 FlexLayout. In the following example, the columns attribute is set to “200px;auto;1*;2*;1*”. 

This means:     

  • Column 1: width is always at 200px.
  • Column 2: width is always the width of the button.
  • The left space is filled with the remaining buttons.
  • The fourth button is twice the size of button three and five.

											
<tc:flexLayout columns="200px;auto;1*;2*;1*">
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
 </tc:flexLayout>
										

View it in demo application

This is also possible with rows instead of columns.

Flow Layout

This is the default layout. The buttons in the example are displayed successively on the same line. Components that don't fit in the current line are moved to the next one. Components like an outputfield or a checkbox are displayed in a separate line.

											
<tc:flowLayout>
      <tc:out id="o1" label="Output" value="Outputvalue"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:button label="Button"/>
      <tc:selectBooleanCheckbox label="Checkbox"/>
 </tc:flowLayout>
										

View it in demo application

Migration of Previous Versions

There are several migration steps to do, depending on the application you want to migrate.

The steps can be classified by

  • Tag library
  • Java API
  • CSS
  • JavaScript
  • External components (for Java, CSS, Javascript)

Most of these steps are relatively simple to carry out., e.g. by find and replace with regular expressions. A migration guide will be provided (see draft on the project site)

Please note that the classic grid layout manager is not working exactly the same as before. There are some issues, especially for vertical layout. The main focus of the release was segment layout and flex layout.

Users are happy with the continuous evolution of the Tobago library:

"For over 10 years we have been working closely with the Tobago team. The close collaboration has been mutually beneficial. Currently we are working on more than 60 intranet applications based on Apache Tobago. We see the new features from Tobago 3 as a significant architectural leap— in particular the innovations with Ajax, theming, and responsive design. We expect a fast project adoption —even with the associated migration costs," said Rainer Rohloff, Senior Software Architect at Norddeutsche Landesbank. "We look forward to working on additional projects with the Tobago team in the future."

Summary

Tobago provides a comfortable way to layout screens of desktop-like applications with a consistent look & feel. Tobago emphasizes the separation of structure and design of screens. Screens are developed independently of the view technology—no HTML, CSS, or JavaScript. Because of strict separation, a screen can be displayed with different themes. These themes can be used to render screens according to different corporate design without changing the sources of the screens.

Tobago 3’s increased responsiveness and standardization makes it easier to integrate libraries and other projects. Tobago reduces developer resources and programming time, providing individuals and organizations with improved productivity and ease of implementation.

We appreciate feedback and contributions from the community. Currently there is only one standard theme that does not look very good. We would appreciate it if someone would like to contribute a better-looking alternative.

For downloads, release notes, documentation, and more information on Tobago, visit http://myfaces.apache.org/tobago and https://twitter.com/MyFacesTeam.