New in Tobago 3.0

In November 2015 the first alpha version of 3.0.0 has been released, the first final release followed in December 2016. Here is a quick overview over the features and changes made in the last time to release this major revision.

Tobago 3.0.0 contains several entries in Jira and most of them are exclusive in this version.

Please take also a look at the Migration from Tobago 2.0 to 3.0 guide.

Overview and History

Until Tobago 2.0 the layout was computed on the server, to make advanced features available for comfortable web application.

With CSS3 and HTML5 it is possible these days, to make advanced layout managers implemented in the browser.

New Features and Enhancements

Bootstrap

The base theme that comes with Tobago changes from plain CSS to Twitters Bootstrap. So your applications have the advantage of modern HTML5 web applications with less coding.

New Layout Managers
  • Segment Layout (uses the 12 columns layout from Bootstrap)
  • Flex Layout (CSS3)
    You may replace the GridLayout from Tobago 2.0 with FlexLayout.
  • Flow Layout
  • The new layout managers have been written a bit more concised: Using as container instead of a facet.
tx library
  • The tx library is no longer needed
  • The label is integrated into the tc library.
  • This results in a more intuitive API
  • Rich variations of positioning the label with new attribute labelLayout
New tags Improved tags Internal Refactoring
  • Using standard ajax mechanism.
  • The clientId will be now rendered to the rool element in HTML of a component.
  • Change the icon format from GIF to PNG.
Collapsible concept

There is a new collapsible concept for <tc:box>, <tc:section>, <tc:panel> and <tc:popup> where the collapse state can be switched via an <tc:operation>.

More changes
  • File upload now uses Servlet 3.0 instead of Commons Fileupload. This simplifies the setup.
  • Font Awesome as an icon library.
  • ARIA support codes are added. Those can be used in renderer classes.
  • Resources can be excluded from parent theme.
  • ResourceBundles support parameters
  • The lang attribute of the HTML root tag will be rendered now.
  • Messages are closeable now.
  • Custom CSS classes can be added to a component.
  • Support more units than 'px'. Now ex, em, mm, cm, in can be used as well.
  • The link attribute of <tc:link> & <tc:button> does support rightClick -> newTab.
Removed
  • The AutoAccessKey feature (using underscore to indicate next character as an access key) is removed. Now the accessKey attribute must be used.
  • JSP support removed.
  • The tag <tc:time> is removed. Use <tc:date> instead.
<?xml version="1.0" encoding="UTF-8"?>
<!--
* 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.
-->
<ui:composition template="/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:param name="title" value="#{demoBundle.new_in_3_0}"/>
<p>In November 2015 the first alpha version of 3.0.0 has been released,
the first final release followed in December 2016.
Here is a quick overview over the features and changes made in the last time to release this major revision.</p>
<p>Tobago 3.0.0 contains several entries in
<tc:link label="Jira"
link="http://issues.apache.org/jira/secure/ReleaseNote.jspa?projectId=12310273&amp;styleName=Html&amp;version=12325880"/>
and most of them are exclusive in this version.</p>
<p>Please take also a look at the <tc:link label="Migration from Tobago 2.0 to 3.0"
outcome="/content/10-intro/50-migration/97-migration/migration30.xhtml"/> guide.</p>
<tc:section label="Overview and History">
<p>Until Tobago 2.0 the layout was computed on the server, to make advanced features available for comfortable web
application.</p>
<p>With CSS3 and HTML5 it is possible these days, to make advanced layout managers implemented in the browser.</p>
</tc:section>
<tc:section label="New Features and Enhancements">
<b>Bootstrap</b>
<p>The base theme that comes with Tobago changes from plain CSS to Twitters Bootstrap.
So your applications have the advantage of modern HTML5 web applications with less coding.</p>
<b>New Layout Managers</b>
<ul>
<li>Segment Layout (uses the 12 columns layout from Bootstrap)</li>
<li>Flex Layout (CSS3)<br/>You may replace the GridLayout from Tobago 2.0 with FlexLayout.</li>
<li>Flow Layout</li>
<li>The new layout managers have been written a bit more concised: Using as container instead of a facet.</li>
</ul>
<b>tx library</b>
<ul>
<li>The tx library is no longer needed</li>
<li>The label is integrated into the tc library.</li>
<li>This results in a more intuitive API</li>
<li>Rich variations of positioning the label with new attribute labelLayout</li>
</ul>
<b>New tags</b>
<ul>
<li><tc:link label="&lt;tc:section>"
outcome="/content/20-component/050-container/40-section/section.xhtml"/>
</li>
<li><tc:link label="&lt;tc:header> &amp; &lt;tc:footer>"
outcome="/content/20-component/050-container/50-header+footer/header+footer.xhtml"/>
</li>
<li><tc:link label="&lt;tc:figure>"
outcome="/content/20-component/020-output/45-figure/figure.xhtml"/></li>
</ul>
<b>Improved tags</b>
<ul>
<li>The <code class="language-markup">&lt;tc:in/></code> tag may be extended to an
<tc:link label="#{demoBundle.group}"
outcome="/content/20-component/010-input/50-input-group/group.xhtml"/>.
</li>
<li>A <code>size</code> attribute is added for
<ul>
<li><tc:link label="&lt;tc:selectOneListbox>"
outcome="/content/20-component/030-select/40-selectOneListbox/selectOneListbox.xhtml"/>,
</li>
<li><tc:link label="&lt;tc:selectManyListbox>"
outcome="/content/20-component/030-select/60-selectManyListbox/selectManyListbox.xhtml"/>,
</li>
<li><tc:link label="&lt;tc:selectManyShuffle>"
outcome="/content/20-component/030-select/70-selectManyShuttle/selectManyShuttle.xhtml"/> and
</li>
<li><tc:link label="&lt;tc:treeListbox>"
outcome="/content/20-component/090-tree/04-listbox/tree-listbox.xhtml"/>.
</li>
</ul>
</li>
<li>Only <code>disabled="true"</code> must be set to disable an
<tc:link label="image"
outcome="/content/20-component/020-output/40-image/image.xhtml"/>.
</li>
<li><tc:link label="&lt;tc:sheet>"
outcome="/content/20-component/080-sheet/sheet.xhtml"/>
<ul>
<li>Constraints are no longer needed to set a multi-line header.</li>
<li>A width can be defined for columns which will influence the auto layout of the browser.</li>
</ul>
</li>
</ul>
<b>Internal Refactoring</b>
<ul>
<li>Using standard ajax mechanism.</li>
<li>The clientId will be now rendered to the rool element in HTML of a component.</li>
<li>Change the icon format from GIF to PNG.</li>
</ul>
<b>Collapsible concept</b>
<p>There is a new
<tc:link label="collapsible concept"
outcome="/content/30-concept/53-collapsible/collapsible.xhtml"/>
for <code class="language-markup">&lt;tc:box></code>, <code class="language-markup">&lt;tc:section></code>,
<code class="language-markup">&lt;tc:panel></code> and <code class="language-markup">&lt;tc:popup></code>
where the collapse state can be switched via an <code class="language-markup">&lt;tc:operation></code>.
</p>
<b>More changes</b>
<ul>
<li>File upload now uses Servlet 3.0 instead of Commons Fileupload. This simplifies the setup.</li>
<li>Font Awesome as an icon library.</li>
<li>ARIA support codes are added. Those can be used in renderer classes.</li>
<li>Resources can be excluded from parent theme.</li>
<li>ResourceBundles support parameters</li>
<li>The <code>lang</code> attribute of the HTML root tag will be rendered now.</li>
<li><tc:link label="#{demoBundle.messages}"
outcome="/content/20-component/020-output/30-messages/messages.xhtml"/>
are closeable now.
</li>
<li>Custom CSS classes can be added to a component.</li>
<li>Support more units than 'px'. Now ex, em, mm, cm, in can be used as well.</li>
<li>The <code>link</code> attribute of
<tc:link label="&lt;tc:link> &amp; &lt;tc:button>"
outcome="/content/20-component/040-command/00-button+link/button+link.xhtml"/>
does support rightClick -&gt; newTab.
</li>
</ul>
<b>Removed</b>
<ul>
<li>The AutoAccessKey feature (using underscore to indicate next character as an access key) is removed.
Now the <code>accessKey</code> attribute must be used.
</li>
<li>JSP support removed.</li>
<li>The tag <code lang="language-markup">&lt;tc:time></code> is removed. Use
<tc:link label="&lt;tc:date>"
outcome="/content/20-component/010-input/40-date/date.xhtml"/> instead.
</li>
</ul>
</tc:section>
</ui:composition>