Funding for 'IT Lab' Project, Phase 1: Progress of sticker sales. Purchase a sticker to help us reach our target.Updated: 2010-02-28 11:53
10.7%
Home » Volume 01 Issue 08 September 2009 » Web Tech
Getting started with ICEfaces and Eclipse


by Isuru Perera

In my last article, I introduced the ICEfaces framework and I hope you all enjoyed reading it.

As I promised, I am going to explain how to create a simple project using Eclipse IDE (Integrated development environment). Needless to say, Eclipse is one of the best IDEs in the world and it is my favorite.

ICEfaces has released a plug-in to Eclipse. I will show you how to install the plug-in. ICEfaces plug-in will help you to get started with ICEfaces project development.

By the way, are you new to Eclipse? Please visit http://www.eclipse.org/ and explore.

Installing ICEfaces Integration For Eclipse Galileo

Eclipse Galileo is the latest annual release from Eclipse Foundation. If you do not have it, please download from http://www.eclipse.org/downloads/. Make sure you download “Eclipse IDE for Java EE Developers (189 MB)” as we are going to create a web application.

Here are the steps to install ICEfaces Integration For Eclipse Galileo.


1. Download “ICEfaces-1.8-Eclipse-3.5.0-plugins-v3.6.1.zip” from www.icefaces.org downloads page and extract it to a directory. (Eclipse Galileo version is 3.5)

2.  Now run Eclipse and select Help → Install New Software...

3.  Then select “Add” → “Local...”

4. Please give the path to extracted ICEfaces plugin directory.

5. Click “OK”.

6. Make sure “Group items by category” is unchecked.

7. Select all features listed: ICEfaces Eclipse Integration – Core, ICEfaces Facelets Eclipse Integration and JSF Facelets Tools Incubator

8. Click Next.

9. Accept licenses and Finish

10. Restart Eclipse

That's all you have to do to install ICEfaces integration.


Creating a new ICEfaces Project

Now I am going to show you how to create a new ICEfaces project in Eclipse.

1. In Eclipse, select File → New → Other...

2. Select Web → Dynamic Web Project and click on Next

3. Give a name to the project.

4. Select a Target Runtime. We will use Tomcat 6. Click on “New” and select “Apache Tomcat v6.0”. Click next and select the directory of tomcat installation. I recommend you to download “tar.gz” version of Tomcat 6 Core Binary Distribution from http://tomcat.apache.org/download-60.cgi. Then you can extract tomcat to a new directory and give the path.


5. Now you should be back in “New Dynamic Web Project” window. Dynamic web module version should have changed automatically to 2.5 after selecting Tomcat 6.


6. Select “ICEfaces Facelets Project” for Configuration.

Note: I recommend you to select Facelets, which is an alternative view technology for building JSF applications. It's very simple and easy to use. See Resources for more information.


7. Click “Next”. You will be asked to configure source and build directories. Keep the defaults and click “Next”.


8. Also keep the defaults in Web module configuration. Click “Next”

9. Now you should get “JSF Compatibilities” page and here you have to download the required libraries. Click on “Download Library...”

10. There is a list of libraries to select. You have download one library at a time.

11. Download “ICEfaces Core Library v1.8.1”, “ICEfaces Facelets Library v1.8.1”, “ICEfaces Support Library v1.8.1” and “JSF 1.2 (Sun RI)”


12. Make sure “Include libraries with this application” is checked. Click “Finish”. (There are some more additional configuration, but defaults will be okay. Click “Next” if you want to see additional configuration

You should see the new project in Project Explorer view.

I hope you now understand how to create a new ICEfaces Project from Eclipse.

Creating a simple application

Let's create a simple application.

We will add components to “ICEfacesPage1.xhtml” page, which was created automatically by the new project wizard.

You can also add new pages and the you can select a template using the wizard. When using Facelets, make sure to create new HTML page using .xhtml as extension.

We will create the page to enter a name and then say “Hello” to the user after clicking on a button.

First of all, we will create a managed bean to store data. Following are the steps.

1. In WEB-INF directory, double click on “faces-config.xml”. Eclipse should open Faces Configuration Editor. Click on “Managed Bean”

2. Then click “Add” and create a new Java Class.

3. Enter “view” as the package, and “ManagedBean”as the class name. Click “Next”

4. Select “request” as scope. Click “Finish”

5. Click on “Managed Bean class” to go to the class file

6. Write code for storing name and the action listener method for button in the managed bean. Following is the source code for ManagedBean.java

package view;

import javax.faces.event.ActionEvent;

public class ManagedBean {

  private String name;

  private String greeting;

  public String getName() {

    return name;

  }

  public void setName(String name) {

    this.name = name;

  }

  public String getGreeting() {

    return greeting;

  }

  public void sayHello(ActionEvent event) {

    this.greeting = "Hello, " + name;

  }

}

7. Now create the page for the requirement. Following is the source code for the ICEfacesPage1.xhtml page.

Note: You can also get a close-to-WYSIWIG Web Page editor in Eclipse. Right click xhtml file in Project Explorer View and select Open With → Web Page Editor.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

  xmlns:ui="http://java.sun.com/jsf/facelets"

  xmlns:f="http://java.sun.com/jsf/core"

  xmlns:h="http://java.sun.com/jsf/html"

  xmlns:ice="http://www.icesoft.com/icefaces/component">

<head>

<title><ui:insert name="title">Hello World</ui:insert></title>

</head>

<body>

<div id="header"></div>

<div id="content"><ice:form>

  <ice:outputLabel value="Your Name:" for="txtName"></ice:outputLabel>

  <ice:inputText id="txtName" value="#{managedBean.name}"></ice:inputText>

  <ice:commandButton value="Say Hello"

    actionListener="#{managedBean.sayHello}"></ice:commandButton>

  <ice:outputText value="#{managedBean.greeting}"

    style="color: blue; font-size: 16pt;"></ice:outputText>

</ice:form></div>

</body>

</html>

 Running the Project

Now it's time to run the project.

Before running you can select which browser to open the web page. We will select the “Default system Web Browser” from Eclipse Window Menu → Web Browser.

Right click on the project name, “ICEfacesProject” in Project Explorer view and select Run As → Run on Server.

Select Tomcat v6.0 Server and click on “Finish”.

Now enter your name and click on “Say Hello”

Conclusion

In this article I demonstrated creating a very simple project.

In the next issue, I will explain creating a little more advanced application with the use of Ajax Push.

If you have any questions, please send a mail to chrishantha@gmail.com


Resources

ICEfaces Main Website - http://www.icefaces.org/
ICEfaces Documentation - http://documentation.icefaces.org/
ICEfaces Blog - http://blog.icefaces.org/

The component showcase - http://component-showcase.icefaces.org/
ICEfaces Forums - http://www.icefaces.org/JForum/
ICEfaces Twitter  - http://twitter.com/icefaces
The ICEfaces Tutorial - http://facestutorials.icefaces.org/tutorial/index.html
Inside Facelets Part 1: An Introduction - http://www.jsfcentral.com/articles/facelets_1.html
Inside Facelets Part 2: Using Facelets - http://www.jsfcentral.com/articles/facelets_2.html
Facelets fits JSF like a glove -http://www.ibm.com/developerworks/java/library/j-facelets/


 


 







Previous Article

Eclipse Icefaces Portlet project

Submitted by Anonymous on Thu, 03/04/2010 - 18:19.

Hi Isuru, thanks for your tutorial.

Do you know any way to create an IceFaces portlet project using Eclipse?

Regards

Brus

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options