tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/30-whats-new/80-new-in-3-0/new-in-3-0.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://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" 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/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>