| <?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"> |
| <ui:param name="title" value="2 to 3"/> |
| |
| <tc:section label="Migration from Tobago 2.0 to 3.0"> |
| |
| <p> |
| There are several migration steps to do, dependent on the application |
| you want to migrate. The steps can be classified by |
| </p> |
| |
| <ul> |
| <li>Tag library</li> |
| <li>Java API</li> |
| <li>CSS</li> |
| <li>JavaScript</li> |
| <li>External components (for Java, CSS, Javascript)</li> |
| </ul> |
| |
| <p> |
| Most of these steps are relatively simple to carry out. |
| Just replace "this" with "that" and so on. |
| Some of them can be done with regular expressions. |
| </p> |
| |
| <tc:section label="Tag Library"> |
| <tc:section label="JSP"> |
| JavaServer Pages are no longer supported. You need to migrate to Facelets as VDL. |
| You may do that before migrating to Tobago 3. |
| </tc:section> |
| |
| <tc:section label="Replacing tx with tc"> |
| <p> |
| <code class="language-markup"><tx:in label="a" fieldId="b" id="c" /></code> |
| will be transformed to |
| <code class="language-markup"><tc:in label="a" id="c" /></code>. |
| The id of the input element in HTML is id="c::field". |
| </p> |
| |
| <p> There is a little conflict between the "label" attribute used in the JSF spec. and the Tobago tx: label: |
| Tobago means it should be displayed, and JSF spec. means that this should be used to display messages. |
| In most cases there is no issue for that. But for the case that the application need a message label, but |
| should not be displayed we need a new attribute: |
| </p> |
| |
| <p> (preliminary) "labelPosition" or "labelLayout" with value "none" |
| With this attribute we may advise the renderer also the position of the label. |
| Or, using an attribute "renderLable"... |
| </p> |
| </tc:section> |
| |
| <tc:section label="<tc:time> -> <tc:date>"> |
| You need to set the <code class="language-markup"><f:convertDateTime type="time"\/></code> |
| inside the <code class="language-markup"><tc:date/></code>. |
| </tc:section> |
| |
| <tc:section label="<tc:cell>"> |
| Replace all <code class="language-markup"><tc:cell/></code> |
| with <code class="language-markup"><tc:panel/></code>. |
| Dependent of the used layout manager, these tags may be dropped completely. |
| </tc:section> |
| |
| <tc:section label="Layout manager no longer as facet."> |
| <p> |
| The layout managers are no longer a facet of a container. |
| They are in the tree hierarchy explicitly. |
| </p> |
| <p> |
| Old: |
| </p> |
| <demo-highlight language="markup"><tc:panel> |
| <f:facet name="layout"> |
| <tc:flowLayout/> |
| </f:facet> |
| ... content ... |
| </tc:panel></demo-highlight> |
| <p> |
| New: |
| </p> |
| <demo-highlight language="markup"><tc:flowLayout> |
| ... content ... |
| </tc:flowLayout></demo-highlight> |
| </tc:section> |
| <tc:section label="<tc:image>"> |
| <code class="language-markup"><tc:image/></code> |
| has no longer the attributes <code class="language-markup">width</code> |
| and <code class="language-markup">height</code>, please use a |
| <code class="language-markup"><tc:style/></code>child tag instead. |
| </tc:section> |
| <tc:section label="<tc:sheet>"> |
| tc:column with f:facet name="dropDownBox" can now easily and much more flexible implemented with |
| the header facet of the tc:sheet. Example: |
| <tc:link label="Sheet Filter" |
| outcome="/content/20-component/080-sheet/50-filter/Sheet_Filter.xhtml" /> |
| </tc:section> |
| <tc:section label="Menu"> |
| The Menu tags tc:menu, tc:menuBar, tc:menuCommand and tc:menuSeparator are no longer available and |
| needs to be migrated to tc:links or tc:bar or tc:buttons with tc:link and tc:separator inside. |
| </tc:section> |
| <tc:section label="Popup"> |
| The popup was implemented new, using a general concept of collapsible in Tobago. |
| <tc:section label="<tc:popupReference>"> |
| This tag is removed. |
| </tc:section> |
| <tc:section label="<tc:popup>"> |
| The tc:popup tag is no longer a facet of a command. The tag can be put anywhere on the page. |
| The open/close commands now can be used flexible |
| </tc:section> |
| Example: |
| <tc:link label="popup" |
| outcome="/content/30-concept/53-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml" /> |
| </tc:section> |
| <tc:section label="facets"> |
| <tc:section label="action"> |
| Replace <code class="language-markup"><f:facet name="action"></code> with <code class="language-markup"><tc:event event="load"></code> |
| </tc:section> |
| <tc:section label="change"> |
| The <code class="language-markup"><f:facet name="change"></code> and the attribute <code class="language-markup">renderedPartially</code> are replaced by <code class="language-markup"><f:ajax></code>, |
| use <code class="language-markup"><tc:event></code> instead of <code class="language-markup"><tc:command></code> |
| </tc:section> |
| </tc:section> |
| |
| </tc:section> |
| |
| <tc:section label="Java API"> |
| <tc:section label="ActionListenerImpl"> |
| Class is no longer present, you should use a JSF 2 exception handler instead. |
| </tc:section> |
| <tc:section label="Renderer classes"> |
| The API of the RendererBase class has changed a bit. |
| Also the automatic renderer selection has been dropped. |
| If you write your own renderer for existing classes, you now need to register it in |
| the faces-config.xml as ususal in JSF. |
| </tc:section> |
| <tc:section label="Typesafety"> |
| <p> |
| To have typesafe code many Java classes to provide constants are migrated to Java enums, |
| e. g. <code>org.apache.myfaces.tobago.component.Attributes</code>. |
| </p> |
| </tc:section> |
| |
| </tc:section> |
| |
| <tc:section label="CSS"> |
| <tc:section label="Bootstrap"> |
| Tobago 3 uses the great <tc:link label="Bootstrap" link="http://v4-alpha.getbootstrap.com/"/> CSS library. |
| Currently in version 4.0.0-alpha.5. |
| </tc:section> |
| <tc:section label="Class names"> |
| Because of the use of the Bootstrap lib, some Tobago CSS classes are no longer needed, and |
| has been |
| </tc:section> |
| <tc:section label="box-sizing"> |
| Changed from content-box to border-box. |
| </tc:section> |
| </tc:section> |
| |
| <tc:section label="JavaScript"> |
| |
| </tc:section> |
| |
| <tc:section label="External components and dependencies"> |
| <tc:section label="File upload"> |
| <tc:section label="Servlet API 3.0"> |
| Tobago 3 requires Servlet API 3.0. Tought the file upload uses |
| <code class="language-java">javax.servlet.http.Part</code> |
| instead of <code class="language-java">org.apache.commons.fileupload.FileItem</code>. |
| </tc:section> |
| <tc:section label="Filter"> |
| You no long need to define a TobagoMultipartFormdataFilter in the web.xml. |
| </tc:section> |
| <tc:section label="Dependencies"> |
| <p> |
| There is no longer a tobago-fileupload.jar. |
| </p> |
| <p> |
| Remove the dependency to commons-fileupload.jar in your web app, if there is any. |
| </p> |
| </tc:section> |
| <tc:section label="FacesServlet Configuration"> |
| If using JSF 2.0 or 2.1 you will need to add a tag <code><multipart-config></code> |
| Tag to the FacesServlet config in the <code>web.xml</code>. Since JSF 2.2 this is not needed. |
| </tc:section> |
| Example: |
| <tc:link label="File Upload" |
| outcome="/content/20-component/100-upload/Upload.xhtml" /> |
| </tc:section> |
| |
| </tc:section> |
| |
| |
| |
| |
| <!-- todo: refactor from APT to HTML --> |
| |
| <pre> |
| |
| <b>TODO:</b> |
| |
| Because of the changed layout model (no longer on the server, but with browser CSS) there a some |
| classes, methods and parameters removed. |
| |
| |
| * AbstractUIPage.getActionPosition() |
| |
| * AbstractUIPage.setActionPosition() |
| |
| * class Box |
| |
| * class Dimension |
| |
| * class Position |
| |
| * ClientProperties.pageWidth |
| |
| * ClientProperties.pageHeight |
| |
| * <code class="language-markup"><tc:gridLayoutConstraint></code> -> <code class="language-markup"><tc:span></code> (only for attributes columnSpan and rowSpan) |
| |
| * <code class="language-markup"><tc:gridLayoutConstraint></code> -> <code class="language-markup"><tc:style></code> (all other attributes) |
| |
| * <code class="language-markup"><tc:toolBar></code> -> <code class="language-markup"><tc:buttons></code> |
| * <code class="language-markup"><tc:toolBarCommand></code> -> <code class="language-markup"><tc:button></code> |
| |
| * If using <code class="language-markup"><tc:page></code> with the attributes state, width, height: remove the attributes |
| |
| * TODO: use ExternalContext.redirect instead of AjaxUtils.redirect |
| |
| * Replace <code>AjaxUtils.getRequestPartialIds()</code> with |
| <code>FacesContext.getPartialViewContext().getExecuteIds()</code> or |
| <code>FacesContext.getPartialViewContext().getRenderIds()</code> respectively. |
| |
| * TODO: Move data from ClientProperties to TobagoContext |
| |
| * TODO: Replace <code class="language-markup"><tc:columnEvent></code> with <code class="language-markup"><tc:row></code> |
| |
| <code class="language-markup"><tc:mediator></code> removed |
| |
| If you need a Tobago component to set e. g. some style in a renderer as a replacement, |
| use a simple <code class="language-markup"><tc:panel></code>. |
| |
| Tango Icons |
| |
| Tango icon lib is no longer part of Tobago. Replaced by Font Awesome. If you need it, please |
| include it in the application. |
| |
| Dependencies to JS/CSS libs: jQuery UI |
| |
| Tobago uses the jQuery UI library. The library is customizable to limit the amount of JS and CSS content. |
| You will find the used modules in the header of each jQuery UI file. |
| |
| * E. g. Tobago 2.0.10 contains jQuery UI 1.10.4 with these contents: |
| |
| * jquery.ui.core.js |
| |
| * jquery.ui.widget.js |
| |
| * jquery.ui.mouse.js |
| |
| * jquery.ui.position.js |
| |
| * jquery.ui.draggable.js |
| |
| * jquery.ui.datepicker.js |
| |
| * jquery.ui.slider.js |
| |
| * jquery.ui.core.css |
| |
| * jquery.ui.datepicker.css |
| |
| * jquery.ui.slider.css |
| |
| * jquery.ui.theme.css |
| |
| * Tobago 3.0.0 contains jQuery UI 1.12.1 with this component: |
| |
| * widget.js |
| |
| If you are using jQuery UI directly, you may add the required resources via the tobago-config.xml |
| and exclude the jQuery UI resource that comes with Tobago. |
| |
| </pre> |
| |
| </tc:section> |
| |
| </ui:composition> |
