~~ Licensed to the Apache Software Foundation (ASF) under one or more | |
~~ contributor license agreements. See the NOTICE file distributed with | |
~~ this work for additional information regarding copyright ownership. | |
~~ The ASF licenses this file to You under the Apache License, Version 2.0 | |
~~ (the "License"); you may not use this file except in compliance with | |
~~ the License. You may obtain a copy of the License at | |
~~ | |
~~ http://www.apache.org/licenses/LICENSE-2.0 | |
~~ | |
~~ Unless required by applicable law or agreed to in writing, software | |
~~ distributed under the License is distributed on an "AS IS" BASIS, | |
~~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
~~ See the License for the specific language governing permissions and | |
~~ limitations under the License. | |
------ | |
Guide to Tobago | |
------ | |
{Guide to Tobago} | |
<This guide covers primarily Tobago 1 and 2. Most basic ideas are the same in Tobago 3, but | |
documented in the demo application.> | |
==================== | |
Tobago is a JavaServer Faces (JSF) framework and component library. It 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. | |
This guide assumes basic knowledge about JSF. For more information about JSF see one of the various books about JSF, | |
the {{{http://java.sun.com/javaee/5/docs/tutorial/doc/bnaph.html}Sun Java 5 Tutorial}} or | |
the {{{http://java.sun.com/javaee/javaserverfaces/download.html}JSF Specification.}} | |
{Content} | |
\ | |
%{toc|fromDepth=0|toDepth=4} | |
{Environment} | |
* {Building and Deploying the Tobago Examples} | |
Tobago uses Maven as a build management system. The provided examples are normally build with Maven, but it would | |
be easy to use an alternative build system. The necessary artifacts can be downloaded {{{./download.html}here}} or | |
from the Maven repository. | |
We will use the address book demo as an example in this guide. Since the address book example is currently | |
not part of the Tobago distribution, you have to check-out the sources from the Apache Subversion repository. | |
We will use the latest release tag for this. | |
+------------------------------------------+ | |
svn co https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/addressbook/ tobago-addressbook | |
+------------------------------------------+ | |
You will need Java 5 and Maven 2.0.9 or later to build the address book example. Use the following command to | |
compile the sources and deploy the web application on an embedded Jetty server: | |
+------------------------------------------+ | |
mvn jetty:run-exploded | |
+------------------------------------------+ | |
If you point your browser to {{http://localhost:8080/}} and you will be directed to the login dialog of the address | |
book example.\ | |
\ | |
[images/guide-addressbook-login.png] Address Book Login | |
You can click on the guest/guest or admin/admin links or fill in the authentication information yourself | |
and press the 'Login' button. After displaying a splash screen for a while the application will direct you to | |
the address list page.\ | |
\ | |
[images/guide-addressbook-list.png] Address List | |
A freshly started instance of the address book example will not contain any addresses in the list. But you can | |
add addresses by pressing the 'New' button in the tool bar. The addresses will be stored in an embedded Derby | |
database. | |
* {Building Tobago} | |
To use the latest version of Tobago you can use the snapshot artifacts build by our continuous integration server Continuum, | |
which are available in the {{{https://repository.apache.org/content/repositories/snapshots/org/apache/myfaces/tobago/}Apache snapshot repository.}} | |
Alternatively, you can build Tobago yourself. You will need Java 5 and Maven 2.0.9 or later. | |
Check-out Tobago from the Apache Subversion repository | |
+------------------------------------------+ | |
svn co https://svn.apache.org/repos/asf/myfaces/tobago/trunk/ tobago | |
+------------------------------------------+ | |
To build the complete project with all sub-modules you have to enter the following command | |
+------------------------------------------+ | |
mvn install | |
+------------------------------------------+ | |
For more information on building Tobago -- especially the 1.0.x branch -- see {{{./getting-started.html}Getting Started.}} | |
* {Building your own Tobago Application} | |
The Tobago example distribution contains the tobago-example-blank WAR, which can act as starting point for | |
your own Tobago application. Since Tobago is based on JSF you need a JSF implementation if the application server | |
you are targeting doesn't contain one. | |
If you cannot use Java 5 or higher you can use retrotranslated JARs from the Tobago distribution to develop and | |
run Tobago applications with Java\ 1.4 (only Tobago 1.0.x). | |
A Tobago application is a web application which is packaged as a WAR. For a JSF application the <<<FacesServlet>>> needs | |
to be configured in the <<</WEB-INF/web.xml>>>. To serve the internal resources of Tobago directly from the Tobago | |
JARs the Tobago <<<ResourceServlet>>> has to configured, too. The configuration of a Tobago application is controlled | |
by the <<<WEB-INF/tobago-config.xml>>> file. This can be used to declare the available themes and the default theme. | |
Additionally, it can be used to locally add markup -- see the {{Themes}} section for further information. | |
* {A Minimal Tobago Page} | |
You can use JSP or Facelets to write Tobago pages. For Facelets support the extension module tobago-facelets has to | |
be added as a dependency. Because the address book example uses JSP as rendering technology we will focus on JSP | |
for now. | |
Tobago provides two tag libraries -- the core library and the extension library. The corresponding TLDs contain | |
documentation for the provided tags which is generated from annotations on the underlying tag classes. The core tag | |
library contains basic controls and the extension library convenience tags for pre-assembled tag compositions -- for | |
example a composition of a label and an input control. | |
A minimal Tobago JSP page looks like this: | |
+------------------------------------------+ | |
<%@ page contentType="text/html;charset=UTF-8" language="java" %> | |
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> | |
<%@ taglib uri="http://myfaces.apache.org/tobago/component" prefix="tc" %> | |
<%@ taglib uri="http://myfaces.apache.org/tobago/extension" prefix="tx" %> | |
<f:view> | |
<tc:page> | |
<f:facet name="layout"> | |
<tc:gridLayout/> | |
</f:facet> | |
<tc:out value="Hello World"/> | |
</tc:page> | |
</f:view> | |
+------------------------------------------+ | |
A similar page is part of the blank WAR: \ | |
{{https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/blank/src/main/webapp/helloWorld.jsp}} | |
{Creating a Tobago page} | |
The address book example needs an address editing page to add new addresses to the address book and to update | |
existing ones. | |
A simple version of an address editor allows to edit the first and last name of a person and basic address data | |
like street, house number and city. Such an editor could look like this:\ | |
\ | |
[images/guide-simple-editor.png] Simple Address Editor | |
This page is generated by the following code: | |
+------------------------------------------+ | |
<%@ page contentType="text/html;charset=UTF-8" language="java" %> | |
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> | |
<%@ taglib uri="http://myfaces.apache.org/tobago/component" prefix="tc" %> | |
<%@ taglib uri="http://myfaces.apache.org/tobago/extension" prefix="tx" %> | |
<f:view> | |
<tc:page width="400"> | |
<f:facet name="layout"> | |
<tc:gridLayout rows="fixed;*" margin="10"/> | |
</f:facet> | |
<tc:box label="Address"> | |
<f:facet name="layout"> | |
<tc:gridLayout rows="fixed;fixed;fixed;fixed"/> | |
</f:facet> | |
<tx:in label="First Name"/> | |
<tx:in label="Last Name"/> | |
<tc:panel> | |
<f:facet name="layout"> | |
<tc:gridLayout columns="6*;1*"/> | |
</f:facet> | |
<tx:in label="Street / No"/> | |
<tc:in /> | |
</tc:panel> | |
<tx:in label="City"/> | |
</tc:box> | |
<tc:cell /> | |
</tc:page> | |
</f:view> | |
+------------------------------------------+ | |
We have a box with the label "Address" containing four rows of input controls for first name, last name, street, | |
house number, and city. | |
* {Basic Controls} | |
HTML offers a decent set of basic controls. These controls form the basis of the Tobago controls including | |
single-line input controls, text areas, check boxes, radio buttons, links, buttons, labels, and others. | |
The Tobago demo contains an overview page for the basic controls.\ | |
\ | |
[images/guide-basic-controls.png] Basic Controls | |
Live demo of the basic controls: {{http://tobago-vm.apache.org/demo-2-release/faces/content/01-basic/basic.xhtml}} | |
The basic controls page also shows two variants of a normal input control: the date input control and the time input | |
control. | |
* {Text Input} | |
The single-line text input control comes in two flavors: the <<<\<tc:in\>>>> tag from the core tag library (<<<tc>>> | |
is the preferred prefix for the core tag library) and the <<<\<tx:in\>>>> from the extension tag library (<<<tx>>>). | |
The extension tag library provides convenient shorthands for boilerplate code. For every input control there | |
is for example an extended version, which layouts a label next before the input field. The label is connected | |
with the field. If the label is clicked the related field is focused. | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tx:in value="#{controller.currentAddress.firstName}" | |
label="#{bundle.editorFirstName}" required="true"> | |
<f:validateLength minimum="2" maximum="20"/> | |
</tx:in> | |
+------------------------------------------+ | |
The <<<value>>> attribute refers the content of the control. If a value binding is used, this content can be written | |
back into a bean property. | |
The <<<label>>> attribute generates the textual description for the control. The theme decides how the label is | |
actually rendered, for example it assigns a default width. This width can be overwritten with the <<<labelWidth>>> | |
attribute. If you utilize a value binding to a resource bundle declared by a <<<\<tc:loadBundle\>>>> tag, you | |
automatically get localization for the text labels. An underscore in the label transforms the following | |
character into an access key. The theme normally underlines the access key to make this circumstance visible to | |
the user. The access key can be used to quickly focus the related input control by pressing <<<Alt>>> in combination | |
with the access key. | |
If the control is marked as <<<required>>> the respective validation takes place. Additionally, the theme tries to | |
visualize this fact. Speyside renders a small check mark icon inside the field, which vanishes if the field | |
contains any data. | |
For more information about the possible attributes of an input tag see the TLD documentation for | |
{{{http://myfaces.apache.org/tobago/tobago-core/tlddoc/tc/in.html}<<<\<tc:in\>>>>}} and | |
{{{http://myfaces.apache.org/tobago/tobago-core/tlddoc/tx/in.html}<<<\<tx:in\>>>>}}. | |
* {Sheet} | |
The sheet control is used to display tabular data. | |
The address book example uses a sheet to give an overview of all stored addresses.\ | |
\ | |
[images/guide-sheet.png] Sheet | |
Live demo of a sheet: {{http://tobago-vm.apache.org/demo-2-release/faces/content/02-sheet/sheet.xhtml}} | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:sheet columns="1*;1*;1*" value="#{controller.currentAddressList}" | |
var="address" state="#{controller.selectedAddresses}" | |
sortActionListener="#{controller.sheetSorter}" rows="25" | |
showRowRange="left" showPageRange="right" showDirectLinks="center"> | |
<tc:columnEvent event="dblclick" > | |
<tc:command action="#{controller.editAddress}"/> | |
</tc:columnEvent> | |
<tc:column id="firstName" label="#{bundle.listFirstName}" sortable="true" | |
rendered="#{controller.renderFirstName}"> | |
<tc:out value="#{address.firstName}"/> | |
</tc:column> | |
<tc:column id="lastName" label="#{bundle.listLastName}" sortable="true" | |
rendered="#{controller.renderLastName}"> | |
<tc:out value="#{address.lastName}"/> | |
</tc:column> | |
<tc:column id="dayOfBirth" label="Birthday" sortable="true" | |
rendered="#{controller.renderDayOfBirth}"> | |
<tc:out value="#{address.dayOfBirth}"> | |
<f:convertDateTime pattern="#{bundle.editorDatePattern}"/> | |
</tc:out> | |
</tc:column> | |
</tc:sheet> | |
+------------------------------------------+ | |
* {Tab Group} | |
The tab group control displays rectangular content in the same area of the screen with the help of tab panels. | |
In the address book example the tab group is used to structure the input controls for an address into three groups | |
for general, business, and miscellaneous information.\ | |
\ | |
[images/guide-tab-group.png] Tab Group | |
Live demo of a tab group: {{http://tobago-vm.apache.org/demo-2-release/faces/content/04-tab/tab.xhtml}} | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:tabGroup switchType="reloadTab" immediate="true"> | |
<tc:tab label="#{bundle.editorTabPersonal}"> | |
<jsp:include page="tab/personal.jsp"/> | |
</tc:tab> | |
<tc:tab label="#{bundle.editorTabBusiness}" rendered="#{!controller.simple}"> | |
<jsp:include page="tab/business.jsp"/> | |
</tc:tab> | |
<tc:tab label="#{bundle.editorTabMisc}" rendered="#{!controller.simple}"> | |
<jsp:include page="tab/misc.jsp"/> | |
</tc:tab> | |
</tc:tabGroup> | |
+------------------------------------------+ | |
* {Menu} | |
The menu control can be used to render a menu bar at the top of a screen like it is typically used in desktop | |
applications. But the location for menus is not limited to this place.\ | |
\ | |
[images/guide-menu.png] Menu | |
Live demo of a menu: {{http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml}} | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:menuBar> | |
<tc:menu label="#{bundle.menuFile}"> | |
<tc:menuCommand label="#{bundle.menuFileNew}" action="#{controller.createAddress}" immediate="true" | |
image="image/org/tango-project/tango-icon-theme/16x16/actions/contact-new.png"/> | |
<tc:menuCommand label="Add Dummy Addresses" action="#{controller.addDummyAddresses}" immediate="true"/> | |
<tc:menuSeparator/> | |
<tc:menuCommand label="#{bundle.admin}" action="#{admin.admin}" | |
image="image/org/tango-project/tango-icon-theme/16x16/categories/preferences-system.png"/> | |
<tc:menuSeparator/> | |
<tc:menuCommand label="Logout" action="#{controller.logout}" | |
image="image/org/tango-project/tango-icon-theme/16x16/actions/system-log-out.png"/> | |
</tc:menu> | |
<tc:menu label="#{bundle.menuSettings}"> | |
... | |
</tc:menu> | |
<tc:menu label="#{bundle.menuHelp}"> | |
... | |
</tc:menu> | |
</tc:menuBar> | |
+------------------------------------------+ | |
* {Tool Bar} | |
The tool bar control is used to render a special rectangular area of buttons. There are two versions of toolbars: | |
a standalone version and version that embeds itself in the border of a box. To embed a tool bar it has to be | |
attached to a <<<\<tc:box\>>>> via a toolbar facet. | |
The address book example uses a tool bar below the menu to provide convenient access to the most common actions | |
from the menu.\ | |
\ | |
[images/guide-toolbar.png] Tool Bar | |
Live demo of a tool bar: {{http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml}} | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:toolBar iconSize="big"> | |
<tc:button label="#{bundle.toolbarAddressList}" action="#{controller.search}" immediate="true" | |
image="image/org/tango-project/tango-icon-theme/32x32/mimetypes/x-office-address-book.png" | |
disabled="#{facesContext.viewRoot.viewId == '/application/list.jsp'}"/> | |
<tc:button label="#{bundle.listNew}" action="#{controller.createAddress}" | |
image="image/org/tango-project/tango-icon-theme/32x32/actions/contact-new.png"/> | |
<tc:button label="#{bundle.toolbarAbout}" | |
image="image/org/tango-project/tango-icon-theme/32x32/apps/help-browser.png"> | |
<tc:popupReference for=":page:about"/> | |
</tc:button> | |
<tc:button label="#{bundle.admin}" action="#{admin.admin}" | |
image="image/org/tango-project/tango-icon-theme/32x32/categories/preferences-system.png"/> | |
</tc:toolBar> | |
+------------------------------------------+ | |
* {Popup} | |
Popups are used to render small modal dialogs inside the current screen. The original screen is disabled until | |
the popup is released with one of the popup buttons.\ | |
\ | |
[images/guide-popup.png] Tool Bar | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:popup id="about" width="300" height="220" left="200" top="200"> | |
<tc:box label="About"> | |
<f:facet name="layout"> | |
<tc:gridLayout rows="150px;*;fixed" columns="150px;*"/> | |
</f:facet> | |
<tc:image width="150" height="150" | |
value="image/org/tango-project/tango-icon-theme/address-book-splash-screen.png"/> | |
<tc:panel> | |
... | |
</tc:panel> | |
<tc:cell spanX="2"/> | |
<tc:cell spanX="2"> | |
<tc:panel> | |
<f:facet name="layout"> | |
<tc:gridLayout columns="*;fixed"/> | |
</f:facet> | |
<tc:cell/> | |
<tc:button label="OK"> | |
<tc:attribute name="popupClose" value="immediate"/> | |
</tc:button> | |
</tc:panel> | |
</tc:cell> | |
</tc:box> | |
</tc:popup> | |
+------------------------------------------+ | |
* {File Upload} | |
The file select control can be used to upload files.\ | |
\ | |
[images/guide-upload.png] File Upload | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:file value="#{controller.uploadedFile}" required="true"> | |
<tc:validateFileItem contentType="image/*"/> | |
</tc:file> | |
+------------------------------------------+ | |
{Features and Concepts} | |
* {Layout} | |
Tobago organizes the placement of components with the help of layout managers. The main layout manager | |
is called grid layout. It divides the available rectangular space into grid cells. The grid is spawned | |
by the column and row values of the <<<\<tc:gridLayout\>>>> tag. The syntax of these values is based on | |
the {{{http://www.w3.org/TR/html401/types.html#type-multi-length}multi-length notation}} known from HTML. | |
To add a layout manager to a container like box, panel or page you have to add a layout facet (i.e. a facet | |
with the name 'layout') to the respective container tag. | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:panel> | |
<f:facet name="layout"> | |
<tc:gridLayout columns="*" rows="fixed;fixed;*"/> | |
</f:facet> | |
<tx:in label="First Name"/> | |
<tx:in label="Last Name"/> | |
<tc:cell /> | |
</tc:panel> | |
+------------------------------------------+ | |
In this example we place to two input controls with labels into two consecutive rows. Below the two input fields | |
we add a spacer element. The layout token '<<<fixed>>>' advises the layout manager to give the input control | |
the height, which this kind of control normally possesses in the selected theme. | |
The values of the column and row attributes of the <<<\<tc:gridLayout\>>>> tag can contain a semicolon separated | |
list of layout tokens. A layout token can be an exact length in pixels like <<<200px>>>, a percentage length like <<<25%>>>, | |
a relative length like <<<2*>>>, or a specific length called <<<fixed>>>, which's exact length is determined by the | |
theme and make sure the control is usable -- a single-line input control for example needs to be so high that | |
characters from the assigned font can be read inside the control. | |
Relative lengths are determined last by the layout manager. The available remaining space is distributed among the | |
existing relative lengths. Each length receives space proportional to the integer before the '<<<*>>>'. A single | |
'<<<*>>>' is a shorthand for '<<<1*>>>'. | |
The layout manager handles the <<<rendered>>> attribute of controls, too. If the <<<rendered>>> attribute is | |
dynamically defined by a value binding, the page can contain fewer controls in some cases than in others. | |
The layout manager can then distribute the newly available space between the remaining relative and percentage | |
lengths. | |
* {Themes} | |
A theme defines how the structured view is actually rendered. It provides the look & feel of the controls inside a | |
view. It appoints colors, dimensions, spacing, fonts and other graphical properties. | |
Tobago includes a small collection of themes called after cities on the island Tobago: Scarborough, Speyside, | |
Charlotteville, and Richmond. Scarborough is a basic theme, which tries to focus on features of plain | |
HTML, Speyside is the main theme of Tobago, Charlotteville and Richmond are mainly color variations of Speyside.\ | |
\ | |
[images/guide-theme-scarborough.png] Scarborough | |
Scarborough\ | |
\ | |
[images/guide-theme-speyside.png] Speyside | |
Speyside\ | |
\ | |
[images/guide-theme-charlotteville.png] Charlotteville | |
Charlotteville\ | |
\ | |
[images/guide-theme-richmond.png] Richmond | |
Richmond | |
* {Markup} | |
Since you don't have direct control over design without writing your own theme, Tobago supports the concept of | |
markup. You can assign certain logical markup values to a control to fine-tune the rendering. A theme specifies | |
the supported markup for every control. The standard theme already provides some helpful markups.\ | |
\ | |
*-----------------------+-------------------------+ | |
| <<<\<tc:out\>>>> | strong, deleted, number | | |
*-----------------------+-------------------------+ | |
| <<<\<tc:in\>>>> | number | | |
*-----------------------+-------------------------+ | |
| <<<\<tc:label\>>>> | number | | |
*-----------------------+-------------------------+ | |
| <<<\<tc:treeNode\>>>> | strong | | |
*-----------------------+-------------------------+ | |
Also see the {{{https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml}standard <<<tobago-config.xml>>>}} | |
The markup <<<strong>>> is normally emphasized, <<<deleted>>> is rendered struck out, and <<<number>>> is | |
right aligned. Multiple markups can be combined as a comma separated list: | |
+------------------------------------------+ | |
... | |
<tc:label value="Normal"/> | |
<tc:out value="999.99"/> | |
<tc:label value="Number"/> | |
<tc:out markup="number" value="999.99"/> | |
<tc:label value="Emphasized"/> | |
<tc:out markup="strong" value="999.99"/> | |
<tc:label value="Emphasized Number"/> | |
<tc:out markup="number,strong" value="999.99"/> | |
... | |
+------------------------------------------+ | |
This code fragment is rendered like this:\ | |
\ | |
[images/guide-markup.png] Markup example | |
You can add markup in your own theme or extend the current themes on the fly by adding a <<<\<renderers\>>>> section | |
into the <<<tobago-config.xml.>>> | |
The address book example adds markup values to the <<<\<tc:progress\>>>> control to be able to colorize the control | |
depending on the criticallity of the progress value. On the administration page the progress control is used to | |
visualize the memory consumption of the VM. | |
+------------------------------------------+ | |
<renderers> | |
<renderer> | |
<name>Progress</name> | |
<supported-markup> | |
<markup>ok</markup> | |
<markup>warn</markup> | |
<markup>error</markup> | |
</supported-markup> | |
</renderer> | |
</renderers> | |
+------------------------------------------+ | |
See the {{{https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-example/tobago-example-addressbook-war/src/main/webapp/WEB-INF/tobago-config.xml}address book <<<tobago-config.xml>>>}} for a complete example. | |
The various progress variants look like this:\ | |
\ | |
[images/guide-progress.png] Progress markup | |
Markup attributes are rendered into HTML as extra CSS style classes, which can be used to modify the normal | |
styling of a control. In the progress example the following CSS is added to the Speyside theme: | |
+------------------------------------------+ | |
.tobago-progress-value-markup-ok { | |
background: green; | |
} | |
.tobago-progress-value-markup-warn { | |
background: yellow; | |
} | |
.tobago-progress-value-markup-error { | |
background: red; | |
} | |
+------------------------------------------+ | |
See the address book example | |
{{{https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-example/tobago-example-addressbook-web/src/main/webapp/tobago-resource/html/speyside/standard/style/tobago.css}Speyside <<<tobago.css>>>}}. | |
The <<<tobago.css>>> file is collected by the Tobago resource manager and can be used to overwrite and extend the | |
default <<<tobago.css>>> file of the theme. | |
Tobago 1.0.x and Tobago 1.5.x are using the old name <<<style.css>>>, since Tobago 2.0.0 | |
<<<tobago.css>>> is used, <<<style.css>>> will also be included for compatibility (in Tobago 2.x). | |
The {{{https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-theme/tobago-theme-example/}example theme}} provides | |
an example for styling sheet cells and contains more complex examples of markup, which need addtional JavaScript | |
to generate more dynamic behaviours like fade-out effects or client-side change detection. | |
* {Partial Rendering} | |
To avoid the reload of complete screens Tobago provides partial rendering, which advises the client to update | |
only parts of the screen to optimize the amount of data sent to the client and the time to render necessary updates. | |
Some controls like the tab control and the sheet directly support partial rendering. Whereas container | |
controls like the generic panel allow to group arbitrary controls to be able to update them exclusively as a group. | |
* {Virtual Forms} | |
The page tag establishes an implicit form for all controls on the screen. The form tag allows to divide these | |
controls into smaller groups to be able to manage validation only for these grouped controls. | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
<tc:form> | |
<tx:selectOneChoice label="#{bundle.footerLanguage}" | |
value="#{controller.language}"> | |
<f:selectItems value="#{controller.languages}"/> | |
<f:facet name="change"> | |
<tc:command action="#{controller.languageChangedList}"/> | |
</f:facet> | |
</tx:selectOneChoice> | |
</tc:form> | |
+------------------------------------------+ | |
* {Security} | |
The extension module tobago-security allows to protect method bindings with the help of annotations. The module | |
provides alternative command components with security handling. The available annotations are <<<@RolesAllowed>>>, | |
<<<@DenyAll>>>, and <<<@PermitAll>>>. | |
A code fragment from the address book example: | |
+------------------------------------------+ | |
public class AdminController { | |
@RolesAllowed("admin") | |
public String admin() { | |
return OUTCOME_ADMIN; | |
} | |
... | |
} | |
+------------------------------------------+ |