ICEfaces 3 to 4 Migration Guide

Overview

The purpose of this guide is to provide information regarding changes made in ICEfaces 4 that may impact the behaviour of existing ICEfaces 3 applications, or may represent changes to previously established best-practices for ICEfaces application development.

No ICE Comps

No SingleSubmit
widgetVar API change

Incompatible API Changes

No more "singleSubmit"

The "icecore:singleSubmit" tag and related "singleSubmit" attributes on various ACE and MOBI components have been removed in ICEfaces 4 in favour of the more JSF-compliant "ace:ajax" tag mechanism for triggering ajax submits with partial page processing and or rendering.

The ace:ajax tag must be used in conjunction with ACE and MOBI components, and the f:ajax tag must be used with any JSF standard "h:" components. It is possible and safe to wrap a form or set of components on the page with both an f:ajax and ace:ajax tag if you are using mixed "h:" and "ace:" or "mobi:" components.

The ace:ajax tag provides a large set of configurability in terms of the scope of execution and rendering for ajax submits, as well as which client-events should trigger the submits, and a mechanism for intercepting the submit with a custom client-side JavaScript callback, checking the submit status, etc. See the ace:ajax Wiki topic for more information on how best XXX

The "icecore:singleSubmit" tag may be replaced with the equivalent:

<ace:ajax execute="@this" "render="@all"/>

Wrapping a Form or Multiple Components

The ace:ajax and/or f:ajax tags can be used in place of the old icecore:singleSubmit tag.

See the reference examples below:

<h:body>
    <f:view>
        <h:form>
            <h:inputText id="inputTxt" value="#{indexBean.message}"
                valueChangeListener="#{indexBean.valueChange}"/>
            <ace:pushButton value="Display" action="#{indexBean.displayText}">
            </ace:pushButton>
           <ace:ajax render="output">
               <ace:linkButton value="Display" action="#{indexBean.displayText}">
               </ace:linkButton>
               <h:outputText id="output" value="#{indexBean.message}"></h:outputText>
            </ace:ajax>
        </h:form>
        </f:ajax>
    </f:view>
</h:body>

 <h:form id="form" style="text-align: left">
           <ace:panel header="#{msgs['example.ace.chart.bar.sample_title']} ">
               <h:panelGrid columns="2">
                   <h:outputLabel for="widthEntry" value="#{msgs['example.ace.chart.bar.barWidth']}"/>
                   <h:panelGrid columns="3">
                       <h:outputText  style="white-space:pre;" value="0  " />
                       <ace:sliderEntry id="widthEntry"
                                clickableRail = "true"
                                min="0"
                                max="15"
                                stepPercent="1"
                                value="#{chartBarBean.barWidth}">
                           <ace:ajax event="slideEnd" execute="@this" render="@all" listener="#{chartBarBean.updateChart}"/>
                       </ace:sliderEntry>
                       <h:outputText style="white-space:pre;" value="  15px"/>
                   </h:panelGrid>
                   <h:outputLabel for="customColor" value="#{msgs['example.ace.chart.bar.colorOption']}"/>
                   <h:selectOneMenu id="customColor" value="#{chartBarBean.chooseColorOption}" >
                       <f:selectItem itemLabel="Use Default Colors" itemValue="default"/>
                       <f:selectItem itemLabel="Use Custom Colors" itemValue="custom"/>
                       <f:selectItem itemLabel="Vary Bar Color" itemValue="vary"/>
                       <f:ajax execute="@this" render="@all" listener="#{chartBarBean.updateChart}"/>
                   </h:selectOneMenu>
                   <h:outputLabel for="stackSeries" value="#{msgs['example.ace.chart.bar.stackSeries']}"/>
                   <h:selectBooleanCheckbox id="stackSeries" value="#{chartBarBean.stackSeries}">
                       <f:ajax execute="@this" render="@all" listener="#{chartBarBean.updateChart}"/>
                   </h:selectBooleanCheckbox>
                </h:panelGrid>
           </ace:panel>
        </h:form>

Nesting within a Single Component

 <ace:sliderEntry id="widthEntry"
                                clickableRail = "true"
                                min="0"
                                max="15"
                                stepPercent="1"
                                value="#{chartBarBean.barWidth}">
                           <ace:ajax event="slideEnd" execute="@this" render="@all" listener="#{chartBarBean.updateChart}"/>
                       </ace:sliderEntry>