Creating ICEfaces 2.1 Applications with Eclipse

The ICEfaces Eclipse Integration provides ICEfaces 2.1 support for developers who use the Eclipse IDE for Java EE. The integration allows you to quickly start developing ICEfaces 2.1 applications. Design view integration allows you to easily work with ICEfaces components.

Development Tools Used

The following tools are used in this tutorial:

• Eclipse IDE for Java EE Developers - Version Helios
• Tomcat 7.x Web Server
• Java 6.x
• ICEfaces 2 Integration for Eclipse
  
  

  ---

  ICEfaces 2 Eclipse Plugin

Download the Eclipse plugin from http://www.icefaces.org/main/downloads/ under Tools Support -> Eclipse.
Place the zip file in a local directory.

Unable to render embedded object: File (download1.png) not found.

Start Eclipse. From the Eclipse main menu bar, select Help -> Install New Software... -> Add --> Archive...
Select the plugin (zip file) from your local directory, give it a name and click Ok.

Unable to render embedded object: File (plugin1.png) not found.

Select the checkbox beside ICEfaces Update Site, click Next, accept Licenses and click Finish.

Unable to render embedded object: File (plugin2.png) not found.

This will require a restart of Eclipse.

Creating an ICEfaces 2 Project

Now that we have the ICEfaces 2 plugin installed, we can create a new project with ICEfaces capabilities.
From the Eclipse main menu bar, select File -> New -> Dynamic Web Project

Unable to render embedded object: File (newproject.png) not found.

Type in the Project name and select a Target runtime. For Configuration, select 'ICEfaces 2 Project' and click Next>

Unable to render embedded object: File (newprojectdialog.png) not found.

In the JSF Capabilities dialog, there is a download button (with the arrow pointing down) available to download the required JSF and ICEfaces jars. Click on the button to launch the Download Library dialog.

Unable to render embedded object: File (jsfcapabilitiesbefore.png) not found.

Once you click the button you will see a list of selections similar to those in the image below. Libraries have to be downloaded one at a time. To download a library, highlight it and click Next> to accept the license. Finally, click Finish.
The JSF 2 (Mojarra 2.1.3) jars are required.

Unable to render embedded object: File (jarselection.png) not found.

After the libraries have been downloaded select the libraries you want to include in your project by checking the checkbox beside each library. Click Next>

Unable to render embedded object: File (jsfcapabilitiesafter.png) not found.

The next dialog is related to ICEfaces configurations. Accept the defaults and Click Finish:

Unable to render embedded object: File (icefacesconfigurations.png) not found.

The new project should show up in the Project Explorer:

Unable to render embedded object: File (projectexplorer.png) not found.

Running an ICEfaces 2 Project

We have created an ICEfaces/JSF 2 project, now lets run the project. Right click on the project in Project Explorer:

Unable to render embedded object: File (runonserver.png) not found.

If you have downloaded and extracted Tomcat 7 locally, in the Run On Server dialog choose Tomcat 7. The first time you do this, you will be asked to browse to the location of Tomcat 7 on your file system:

Unable to render embedded object: File (runonserverdialog.png) not found.

After clicking on the Finish button, Eclipse will launch the application in the browser you have selected under Window -> Web Browser:

Unable to render embedded object: File (runninginbrowser.png) not found.

Adding an ICEfaces 2 Advanced (ACE) Component

The Eclipse Visual JSF Page Designer has been added since Eclipse 3.3 as part of WTP 2.0. The Design Time Canvas provides an intuitive close-to-WYSIWIG editing experience. It allows you to visually manipulate JSF page layout and components using drag and drop.

The ICEfaces 2 plugin includes design time support for ICEfaces Advanced Components (ICEfaces 2) and ICEfaces Components (ICEfaces 1.8.2 compatible with ICEfaces 2). This includes the palette view and property view when opening your ICEfaces pages with the Web Page Editor.

To open your page with the Web Page Editor:
Right click on the ICEfaces xhtml page
Select Open With -> Web Page Editor

Unable to render embedded object: File (webpageeditor1.png) not found.

You can select ICEfaces Advanced Components and/or ICEfaces components from the Palette. In this case we select a dateTimeEntry component from the ICEfaces Advanced components:

Unable to render embedded object: File (paletteselection1.png) not found.

Drag and Drop the component on to the Design Time Canvas:

Unable to render embedded object: File (dragdrop1.png) not found.

The component will automatically be rendered in the Design Time Canvas:

Unable to render embedded object: File (dropped1.png) not found.

Component attributes can be modified in property view and the changes will automatically be updated in the Design Time Canvas. In this case, we add the renderAsPopup=true attribute and the Design Time Canvas automatically renders a button to launch the calendar popup:

Unable to render embedded object: File (propertyedit1.png) not found.

With the ICEfaces Advanced Components, we need to add a styleClass to the h:body tag and an h:outputStylesheet after the h:body tag as follows:

Unable to render embedded object: File (advancedcomponentstyling.png) not found.

We can now run the application and see the added component rendered out to the browser:

Unable to render embedded object: File (browserrendering.png) not found.