tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/30-whats-new/80-new-in-3-0/Tobago_3.xhtml

<?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">

  <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" image="fa-external-link" link="#{apiController.getJiraUrl('3.0.0')}"/>.
    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/2.0_to_3.0.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_and_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="Input 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/Listbox.xhtml"/>,
          </li>
          <li><tc:link label="&lt;tc:selectManyListbox>"
                       outcome="/content/20-component/030-select/60-selectManyListbox/Multi_Listbox.xhtml"/>,
          </li>
          <li><tc:link label="&lt;tc:selectManyShuffle>"
                       outcome="/content/20-component/030-select/70-selectManyShuttle/Shuttle.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 root 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="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="Button and Link"
                 outcome="/content/20-component/040-command/00-button-link/Button_and_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>