Tobago 4

Overview and History

After the last major release in December 2016, Tobago 4 comes with 127 changes, bugfixes and new features in December 2017.

In general, the step to version 4 is quite compatible, so the migration is easy. Please follow the Migration from Tobago 3 to 4 guide.

New Features and Enhancements

The highlights

  • Update to Bootstrap 4 beta 2
  • Reimplementation of grid layout mananger and split layout manager
  • Security enhancements
  • Java 8 or 9
The full list is available in Jira.

Layout Managers

  • Grid Layout was reimplemented with use of the modern CSS grid
  • Split Layout was reimplemented (was not available in Tobago 3)
  • Flex Layout was optimized (works now without JavaScript)
  • Segment Layout was enhanced. New attributes "offset" and "margin". Also it's possible to use "auto" and "1fr" as with of the children.
  • The syntax of the layout attributes are refactored to be compatible to modern CSS. E.g. use of "fr" as unit for fraction in grid layout. The old syntax works also, so not migration is needed.

CSS Styles

Reimplementation of Inline Styles
Is better and faster, because not use of JavaScript is needed now. Background: This is possible with CSP Level 2.

Inline Style for Rows ans Columns
<tc:style> can now be used as subtag of <tc:row> and <tc:column>. The styles are set dynamically, so different styling of rows is possible.

New components supported
Styles can be used in:

Markups

Markups are now easily accessable by JavaScript. The markup could be found on component root in the attribute data-tobago-markup.

New markups:

Messages near the input fields

The error messages are now rendered directly by the input control. In this demo you please leave the content free and just click "check". (This also works with AJAX.)

For more information have a look at Message Layout

Tag library

  • <tc:image> now supports a Font Awesome string as value.
  • <tc:event> now supports the rendered attribute.
  • <f:ajax> now supports the disabled attribute.
  • <tc:link> now supports outcome and fragment attribute.
  • <tc:style> now supports the rendered attribute.
  • New tag <tc:meta> implemented.

Theming

  • Optimize the theme builder
    Faster loading the Bootstrap theme and using same base _tobago.scss for all theme.
  • Speyside Theme
    The Speyside theme is now part of the distribution. It looks a bit more condensed and the menu is fully viewable for all submenus. You can switch the theme here in the demo menu under Configuration → Theme.
  • Scarborough Theme
    The Scarborough theme is now part of the distribution. It looks quite same as the bootstrap theme, but a bit nicer.
  • Roxborough Theme
    The Scarborough theme is now part of the distribution. It has a nice dark look for ambient light situations or photo galleries.

Security enhancements

  • CSP level 2
  • Frame attack protection via headers instead of JavaScript
  • Roles

Font Awesome updated to 4.7.0

New icons are available from the FontAwesome icon library.

New XSD Version

With Tobago 4 there is a new XSD version for the tobago-confix.xml.

  • decode-line-feed added
    Default value is 'false'. If set to 'true' control characters are not decoded on ajax requests.
  • security-annotation added
    It determines what happen to the according component if - for example - @RolesAllowed() is not 'true'. Posible values are 'hide', 'disable' and 'ignore'.
  • renderers, renderer, supported-markup-type removed
    It is not longer needed to specify which markups are allowed on specific components.
    'renderers' only contains the 'supported-markup-type' element. So it was also removed.

More improvements

<?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"
xmlns:f="http://java.sun.com/jsf/core">
<ui:param name="title" value="#{demoBundle.new_in_4_0}"/>
<tc:section label="Overview and History">
<p>
After the last major release in December 2016, Tobago 4 comes with
127 changes, bugfixes and new features in December 2017.
</p>
<p>
In general, the step to version 4 is quite compatible,
so the migration is easy. Please follow the
<tc:link label="Migration from Tobago 3 to 4"
outcome="/content/10-intro/50-migration/96-migration/migration40.xhtml"/>
guide.
</p>
</tc:section>
<tc:section label="New Features and Enhancements">
<tc:section label="The highlights">
<ul>
<li>Update to Bootstrap 4 beta 2</li>
<li>Reimplementation of grid layout mananger and split layout manager</li>
<li>Security enhancements</li>
<li>Java 8 or 9</li>
</ul>
The full list is available in
<tc:link label="Jira" image="fa-external-link"
link="https://issues.apache.org/jira/projects/TOBAGO/versions/12338728"/>.
</tc:section>
<tc:section label="Layout Managers">
<ul>
<li><tc:link label="Grid Layout" outcome="/content/30-concept/16-layout/50-grid/grid-layout.xhtml"/>
was reimplemented with use of the modern CSS grid
</li>
<li><tc:link label="Split Layout" outcome="/content/30-concept/16-layout/60-split/split-layout.xhtml"/>
was reimplemented (was not available in Tobago 3)
</li>
<li><tc:link label="Flex Layout" outcome="/content/30-concept/16-layout/20-flex/flex-layout.xhtml"/>
was optimized (works now without JavaScript)
</li>
<li><tc:link label="Segment Layout" outcome="/content/30-concept/16-layout/30-segment/segment-layout.xhtml"/>
was enhanced. New attributes "offset" and "margin".
Also it's possible to use "auto" and "1fr" as with of the children.
</li>
<li>
The syntax of the layout attributes are refactored to be compatible to modern CSS.
E.g. use of "fr" as unit for fraction in grid layout.
The old syntax works also, so not migration is needed.
</li>
</ul>
</tc:section>
<tc:section label="CSS Styles">
<p><b>Reimplementation of Inline Styles</b><br/>
Is better and faster, because not use of JavaScript is needed now.
Background: This is possible with CSP Level 2.</p>
<p><b>Inline Style for Rows ans Columns</b><br/>
&lt;tc:style> can now be used as subtag of &lt;tc:row> and &lt;tc:column>.
The styles are set dynamically, so different styling of rows is possible.</p>
<p><b>New components supported</b><br/>
Styles can be used in:</p>
<ul>
<li><tc:link label="&lt;tc:bar>" outcome="/content/20-component/050-container/60-bar/bar.xhtml"/></li>
<li><tc:link label="&lt;tc:link>"
outcome="/content/20-component/040-command/00-button+link/button+link.xhtml"/></li>
<li><tc:link label="&lt;tc:tab>" outcome="/content/20-component/070-tab/tab.xhtml"/></li>
</ul>
</tc:section>
<tc:section label="Markups">
<p>Markups are now easily accessable by JavaScript.
The markup could be found on component root in the attribute <code>data-tobago-markup</code>.</p>
<p>New markups:</p>
<ul>
<li><tc:link label="&lt;tc:bar>" outcome="/content/20-component/050-container/60-bar/bar.xhtml"
fragment="page:mainForm:backgroundColor"/>: <code>light</code>, <code>dark</code></li>
<li><tc:link label="&lt;tc:button>" outcome="/content/20-component/040-command/00-button+link/button+link.xhtml"
fragment="page:mainForm:markup"/>:
<code>primary</code>,
<code>secondary</code>,
<code>success</code>,
<code>danger</code>,
<code>warning</code>,
<code>info</code>,
<code>light</code>,
<code>dark</code>,
<code>none</code></li>
<li><tc:link label="&lt;tc:in>" outcome="/content/20-component/010-input/20-suggest/suggest.xhtml"
fragment="page:mainForm:localMenu"/> with &lt;tc:suggest>: <code>localMenu</code></li>
<li><tc:link label="&lt;tc:popup>" outcome="/content/20-component/060-popup/popup.xhtml"
fragment="page:mainForm:markup"/>: <code>small</code>, <code>large</code></li>
</ul>
</tc:section>
<tc:section label="Messages near the input fields">
The error messages are now rendered directly by the input control. In this demo you
please leave the content free and just click "check". (This also works with AJAX.)
<tc:in id="error-demo" label="Error demo" required="true">
<f:facet name="after">
<tc:button label="check">
<f:ajax execute="error-demo @this" render="error-demo"/>
</tc:button>
</f:facet>
</tc:in>
<p>For more information have a look at
<tc:link label="Message Layout"
outcome="/content/30-concept/16-layout/90-message-layout/message-Layout.xhtml"/></p>
</tc:section>
<tc:section label="Tag library">
<ul>
<li>&lt;tc:image> now supports a Font Awesome string as value.</li>
<li>&lt;tc:event> now supports the <code>rendered</code> attribute.</li>
<li>&lt;f:ajax> now supports the <code>disabled</code> attribute.</li>
<li>&lt;tc:link> now supports <code>outcome</code> and <code>fragment</code> attribute.</li>
<li>&lt;tc:style> now supports the <code>rendered</code> attribute.</li>
<li>New tag &lt;tc:meta> implemented.</li>
</ul>
</tc:section>
<tc:section label="Theming">
<ul>
<li><b>Optimize the theme builder</b><br/>
Faster loading the Bootstrap theme and using same base _tobago.scss for all theme.
</li>
<li><b>Speyside Theme</b><br/>
The Speyside theme is now part of the distribution.
It looks a bit more condensed and the menu is fully viewable for all submenus.
You can switch the theme here in the demo menu under Configuration → Theme.
</li>
<li><b>Scarborough Theme</b><br/>
The Scarborough theme is now part of the distribution.
It looks quite same as the bootstrap theme, but a bit nicer.
</li>
<li><b>Roxborough Theme</b><br/>
The Scarborough theme is now part of the distribution.
It has a nice dark look for ambient light situations or photo galleries.
</li>
</ul>
</tc:section>
<tc:section label="Security enhancements">
<ul>
<li>CSP level 2</li>
<li>Frame attack protection via headers instead of JavaScript</li>
<li><tc:link label="Roles" outcome="/content/30-concept/80-security/20-roles/roles.xhtml"/></li>
</ul>
</tc:section>
<tc:section label="Font Awesome updated to 4.7.0">
New icons are available from the
<tc:link label="FontAwesome" image="fa-external-link"
link="http://fontawesome.io/icons/"/>
icon library.
</tc:section>
<tc:section id="xsd" label="New XSD Version">
<p>With Tobago 4 there is a new XSD version for the tobago-confix.xml.</p>
<ul>
<li><code>decode-line-feed</code> added<br/>
Default value is 'false'. If set to 'true' control characters are not decoded on ajax requests.
</li>
<li><code>security-annotation</code> added<br/>
It determines what happen to the according component if - for example - @RolesAllowed()
is not 'true'.
Posible values are 'hide', 'disable' and 'ignore'.
</li>
<li><code>renderers</code>, <code>renderer</code>, <code>supported-markup-type</code> removed<br/>
It is not longer needed to specify which markups are allowed on specific components.<br/>
'renderers' only contains the 'supported-markup-type' element. So it was also removed.
</li>
</ul>
</tc:section>
<tc:section label="More improvements">
<ul>
<li><tc:link label="#{demoBundle.exception_handler}"
outcome="/content/30-concept/22-exception-handler/exception-handler.xhtml"/></li>
<li><p>The page is now loadable by ajax.</p></li>
</ul>
</tc:section>
</tc:section>
</ui:composition>