| <?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://xmlns.jcp.org/jsf/facelets" |
| xmlns:f="http://xmlns.jcp.org/jsf/core"> |
| |
| <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/3.0_to_4.0.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="#{apiController.getJiraUrl('4.0.0')}"/>. |
| </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/> |
| <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.</p> |
| <p><b>New components supported</b><br/> |
| Styles can be used in:</p> |
| <ul> |
| <li><tc:link label="<tc:bar>" outcome="/content/20-component/050-container/60-bar/Bar.xhtml"/></li> |
| <li><tc:link label="<tc:link>" |
| outcome="/content/20-component/040-command/00-button-link/Button_and_Link.xhtml"/></li> |
| <li><tc:link label="<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="<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="<tc:button>" outcome="/content/20-component/040-command/00-button-link/Button_and_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="<tc:in>" outcome="/content/20-component/010-input/20-suggest/Suggest.xhtml" |
| fragment="page:mainForm:localMenu"/> with <tc:suggest>: <code>localMenu</code></li> |
| <li><tc:link label="<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><tc:image> now supports a Font Awesome string as value.</li> |
| <li><tc:event> now supports the <code>rendered</code> attribute.</li> |
| <li><f:ajax> now supports the <code>disabled</code> attribute.</li> |
| <li><tc:link> now supports <code>outcome</code> and <code>fragment</code> attribute.</li> |
| <li><tc:style> now supports the <code>rendered</code> attribute.</li> |
| <li>New tag <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'. |
| Possible 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="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> |
