Getting Started with ICEfaces 2

You are viewing an old version (v. 1) of this page.
The latest version is v. 81, last edited on Apr 13, 2012 (view differences | )
view page history | view next version >>

Getting Started with ICEfaces 2

There a few simple steps required to take advantage of ICEfaces 2 in your JSF 2 application.

Adding the icefaces.jar to your project immediately allows you to take advantage of our Direct-to-DOM (D2D) rendering technology. D2D only sends browser DOM changes from the server to the browser, minimizing bandwidth consumption without the need to specify the new "f:ajax" component in your pages.

Once the icefaces.jar is added to your project, you can also take advantage of ICEfaces Window Scope and Single Submit features.

ICEfaces 2 provides a compatible component library based on the ICEfaces 1.x component suite. This set of components are referred to as "ICEfaces Components" and immediately allow developers to build ICEfaces 2 applications give the developer access to a mature AJAX component suite.

Unable to render embedded object: File (autocomplete-main.png) not found.

This tutorial will discuss the following topics related to ICEfaces 2:

  • [Adding ICEfaces to your JSF 2 project]
  • [Adding ICEfaces Components]
  • [Adding ICEfaces ACE Components]
  • [Adding ICEpush]
  • [Tutorial Source Code Download]

Adding the Component

To get auto-complete functionality we use the ice:selectInputText component. This component is displayed like a regular inputText component but adds auto-complete functionality.

The ice:selectInputText component can generate one of two types of lists:

  1. A list of String data
  2. A list of arbitrarily complex child components

The following code sample shows an implementation using a list of String data:

<ice:selectInputText rows="10" width="300" valueChangeListener="#{autoCompleteBean.updateList}">
    <f:selectItems value="#{autoCompleteBean.list}"/>

This will display a drop-down list of cities that match the text input. The 'rows' attribute defines how many results will be returned when text is entered. The 'width' attribute sets the width of the input text box and the drop-down list. The 'valueChangeListener' attribute binds to a backing bean method that determines the associated list when a value is changed.

Nested in the ice:selectInputText component tag is an f:selectItems JSF tag. The 'value' binding in this tag provides the list of available options. The screen shot below shows the component in action:

Unable to render embedded object: File (autocomplete-action.png) not found.

The following code sample shows an implementation with a list of arbitrarily complex child components:

<ice:selectInputText rows="6" 
    <f:facet name="selectInputText">
        <ice:panelGrid columns="3" 
            <ice:outputText value="#{}"/>
            <ice:outputText value="#{city.state}"/>
            <ice:outputText value="#{}"/>

This will display values similar to the first way but adds more information to the drop down menu, such as state and zip, in addition to the city. The screen shot below shows this method in action:

Unable to render embedded object: File (autocomplete-action2.png) not found.

Create the Backing Beans

In the application we use three main backing beans:

  • AutoCompleteBean: Stores the values gathered from the AutoCompleteDictionary class. Also contains utility methods for updating the list and getting the matches from the dictionary list.
  • AutoCompleteDictionary: Gets the dictionary list from a file in the file system. Also sorts the dictionary appropriately.
  • City: Basic class used as an object in the dictionary list.

Create the Dictionary

The backing beans retrieve lists of viable options from AutoCompleteDictionary. Our dictionary is populated from an xml file as follows:

<java version="1.6.0_21" class="java.beans.XMLDecoder"> 
  <object class="java.util.ArrayList"> 
    <void method="add"> 
      <object class="com.icesoft.icefaces.tutorial.component.autocomplete.City"> 
        <void property="areaCode"> 
        <void property="city"> 
        <void property="country"> 
        <void property="state"> 
          <string>New York</string> 
        <void property="stateCode"> 
        <void property="zip"> 

In this case, we have encapsulated the options available to the user in a zipped xml file that is deployed with the applications. Options available to the user could also be retrieved from a database.

Tutorial Source Code Downloads

Example Source Notes
autocomplete-tutorial [autocomplete-tutorial source code|^|Download Source Code] Simple example on how to use the Auto-Complete component.
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.