Getting started with the ICEfaces (1.5.2) library of rich AJAX JSF components in JDeveloper 10.1.3.x

14

November 2006 saw the announcement by ICEsoft that their ICEfaces library of JSF components was being released under an open source license. This basically means that a lot of rich, often AJAX powered components became much more readily available for JSF application developers. Next to for example ADF Faces/MyFaces Trinidad and MyFaces Tomahawk, ICEfaces is another set to pick components from. Note however:  ICEfaces does not mix freely within a JSF page with other JSF implementations. More on that later in this article. I decided to give ICEfaces a spin, watched the demos on http://component-showcase.icefaces.org/component-showcase/ and became convinced that the components were worth a second look. ICEfaces comes with a plugin for JDeveloper 10.1.3.x – since I am a happy JDeveloper user, that was to be my starting point. I will show you how to get a simple ICEfaces application running in no time at all (well, under 30 minutes). We will be using ICEfaces 1.5.2, which was released just days ago.....

To get started with ICEfaces:

1. Go to http://www.icefaces.org/main/downloads/os-downloads.iface, Register (if this is your first visit – note: registering is free) or Login (for a returning visitor)

2. Download ICEfaces-v1.5.2-JDeveloper.zip by pressing the download button. Save the zip-file just anywhere on your drive (c:\temp will do nicely)

 

3. Fire up JDeveloper 10.1.3.1. Go to Help, Check for Updates. Choose install from local file. Then browse and select the ICEfaces-v1.5.2-JDeveloper.zip file you have downloaded from ICEfaces. Click Next and subsequently Finish at the first opportunity.

 

4. JDeveloper needs to be restarted. When that is done, the plugin is installed and ready to rock. (you may check to see either if there are new Libraries predefined or if the menu option ICEfaces Integration has been added to the RMB menu on projects).

 

5. Let’s now create a new Application and a new Project. 

 

 

6. Apparently, the ICEfaces Integration option in the Project’s RMB menu is only available for a Web Project. We can turn our project into a Web Project by creating a dummy JSF page: go to File, New and from Web Tier, JSF pick JSF JSP. Accept all defaults in the wizard that pops up.

 

7. Now when you go to the RMB menu on the MyFirstICEfaces project, the option ICEfaces Integration is enabled. Click on that option.  

 

Two things happen: the ICEfaces libraries are added to your project and some ICEfaces configuration details are added to the web.xml file. Or at least: that is what I thought should happen. For my project, it did not happen. So I opened the web.xml file and pasted in the following elements:

<span><p>&lt;context-param&gt;<br />        &lt;param-name&gt;javax.faces.STATE_SAVING_METHOD&lt;/param-name&gt;<br />        &lt;param-value&gt;server&lt;/param-value&gt;<br />    &lt;/context-param&gt;<br />    &lt;context-param&gt;<br />        &lt;param-name&gt;javax.faces.application.CONFIG_FILES&lt;/param-name&gt;<br />        &lt;param-value&gt;/WEB-INF/faces-config.xml&lt;/param-value&gt;<br />    &lt;/context-param&gt;<br />    &lt;servlet&gt;<br />        &lt;servlet-name&gt;Persistent Faces Servlet&lt;/servlet-name&gt;<br />        &lt;servlet-class&gt;com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet&lt;/servlet-class&gt;<br />        &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;<br />    &lt;/servlet&gt;<br />    &lt;servlet&gt;<br />        &lt;servlet-name&gt;Blocking Servlet&lt;/servlet-name&gt;<br />        &lt;servlet-class&gt;com.icesoft.faces.webapp.xmlhttp.BlockingServlet&lt;/servlet-class&gt;<br />        &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;<br />    &lt;/servlet&gt;<br />    &lt;servlet&gt;<br />        &lt;servlet-name&gt;uploadServlet&lt;/servlet-name&gt;<br />        &lt;servlet-class&gt;com.icesoft.faces.component.inputfile.FileUploadServlet&lt;/servlet-class&gt;<br />        &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;<br />    &lt;/servlet&gt;<br />    &lt;servlet&gt;<br />        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;<br />        &lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;<br />        &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;<br />    &lt;/servlet&gt;<br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;Persistent Faces Servlet&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;/xmlhttp/*&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt;<br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;Persistent Faces Servlet&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;*.iface&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt;<br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;Persistent Faces Servlet&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;*.jspx&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt;<br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;/faces/*&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt;<br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;Blocking Servlet&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;/block/*&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt;<br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;uploadServlet&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;/uploadHtml&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt; <br /></p></span>

 

 8. Add the ICEfaces Taglibrary to the project. Double click on the MyFirstICEfaces project (or select Edit Project Properties) and go to JSP Tag Libraries. Click the Add button. Select the ICEfaces Component Suite 1.5.2 to add to the project.

 

9. Let’s create our first JSF page with ICEfaces components. Go to File, New and from Web Tier, JSF choose the option JSF JSP. The Create JSF JSP Page wizard opens. Call the file for example ICEfacesTabsDemo.jspx. Select the ICEfaces Taglibrary along with the JSF Core and JSF Html libraries.

 

 

The WYSIWYG JSP Editor opens – with a pretty much blank screen as we have not yet added any content to the page. Go to the source view. Move the namespace declarations on t
he jsp:root element to the f:view element. Then remove all
tags outside f:view (the elements jsp:root, jsp:output and jsp:directive.page). Next, add our very first ICEfaces element: ice:outputText. The page now looks as follows:

<span><p>&lt;f:view xmlns:h=&quot;http://java.sun.com/jsf/html&quot;<br />          xmlns:f=&quot;http://java.sun.com/jsf/core&quot;<br />          xmlns:ice=&quot;http://www.icesoft.com/icefaces/component&quot;&gt;<br />    &lt;html&gt;<br />      &lt;head&gt;<br />        &lt;meta http-equiv=&quot;Content-Type&quot;<br />              content=&quot;text/html; charset=windows-1252&quot;/&gt;<br />        &lt;title&gt;MyFirst ICEfaces&lt;/title&gt;<br />      &lt;/head&gt;<br />      &lt;body&gt;<br />         &lt;h:form&gt;<br />           &lt;ice:outputLabel value=&quot;Hello World&quot; /&gt;<br />         &lt;/h:form&gt;<br />      &lt;/body&gt;<br />    &lt;/html&gt;<br />  &lt;/f:view&gt; <br /></p></span>

We can also drag and drop ICEfaces components from the Component Palette onto the editor:

 

When we run this page, the browser opens up with the familiar:

 


A slightly more interesting ICEface component

 

<span><p>&lt;f:view xmlns:h=&quot;http://java.sun.com/jsf/html&quot;<br />        xmlns:f=&quot;http://java.sun.com/jsf/core&quot;<br />        xmlns:ice=&quot;http://www.icesoft.com/icefaces/component&quot;&gt;<br />  &lt;html&gt;<br />    &lt;head&gt;<br />      &lt;meta http-equiv=&quot;Content-Type&quot;<br />            content=&quot;text/html; charset=windows-1252&quot;/&gt;<br />      &lt;title&gt;MyFirst ICEfaces&lt;/title&gt;<br />      &lt;link href=&quot;css/xp/xp.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;<br />    &lt;/head&gt;<br />    &lt;body&gt;&lt;ice:form style=&quot;width: 45%;&quot;&gt;<br />        &lt;ice:panelTabSet&gt;<br />          &lt;ice:panelTab label=&quot;Tab 1&quot;&gt;<br />            &lt;ice:outputText value=&quot;Other Content&quot;/&gt;<br />          &lt;/ice:panelTab&gt;<br />          &lt;ice:panelTab label=&quot;Tab 2&quot;&gt;<br />            &lt;ice:outputText value=&quot;Some Content&quot;/&gt;<br />          &lt;/ice:panelTab&gt;<br />          &lt;ice:panelTab label=&quot;Tab 3&quot;&gt;<br />            &lt;ice:outputText value=&quot;Empty&quot;/&gt;<br />          &lt;/ice:panelTab&gt;<br />        &lt;/ice:panelTabSet&gt;<br />      &lt;/ice:form&gt;&lt;/body&gt;<br />  &lt;/html&gt;<br />&lt;/f:view&gt;<br />  <br />&nbsp;</p></span>

Mixing ICEfaces with other JSF libraries such as ADF Faces/MyFaces Trinidad and Apache MyFaces Tomahawk

ICEfaces components cannot be used in the same page as JSF components from other libraries. This is caused by the special ViewHandler used by ICEfaces in conjunction with its Dynamic (Ajax) Rendering architecture. It’s a shame, since my main JSF library is usually ADF Faces, but some components in ICEfaces make for interesting complements to ADF Faces.

It is possible to combine ICEfaces and other JSF implementations in the same web application. That means we can have pages containing a mix of ADF Faces and MyFaces Tomahawk for example as well as pages based in ICEfaces components. It has been suggested that using (I)FRAMES this opens up possibilities of still combining ADF Faces and ICEfaces in what at least appears to be a single page… It is also quite possible to open up pop-up window from an ADF Faces page that is based on ICEfaces and displays in the data context and using the underlying data as the ADF Faces page.

Note that the ICEfaces Faces Servlet is also mapped to the iface url extension (for example http://10.255.255.100:8988/MyFirstIICEfaces-MyFirstICEfaces-context-root/ICEfacesTabsDemo.iface). That allows us eventually to distinguish between jspx and iface which in turn makes it possible to mix in one web application both ICEfaces pages and for example pages built using ADF Faces or Apache MyFaces Tomahawk.


Resources

ICEfaces Tutorials: http://www.icefaces.org/main/resources/tutorials.iface .

 

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

14 Comments

  1. Hi,

    I have a problem with CSS, the page works as expected but the actual tabs don’t appear, I only see three links in a row that work as expected, but don’t actually look like tabs. What can I do?

    Thanks!

  2. Hello again guys, I already resolve my problem … I had downloaded three .zip for the Jdeveloper integration (today): ICEfaces-1.6.1-bin.zip, ICEfaces-1.6.1-libs-JDeveloper.zip and ICEfaces-JDeveloper-IDE-v2.0.0.zip, but only installed the first two .zip on the JDeveloper extension becouse I belived that there could be a error due to versions problem. After I got several errors, and no solutions found, then I decided to install the ICEfaces-JDeveloper-IDE-v2.0.0.zip update and after the restart I did can see the “ICEface Integration …” feature in the right context menu of the proyect. More good notices, the Integration did what it’s supposed to do … add the ICEFaces libraries and components, and also write some code to my web.xml (I already had erased all the content for this file to see what code would be generated. Finally, my application works fine. Note: remember that I’m using JDev 10.1.3.3 and the ICEfaces files mentiones above.

  3. Hey, nice example … but I’m getting the lame “500 Internal Server Error – Servlet error: Session expired”
    I found an article about a OC4J bug related to the OC4J “forward”: http://support.icesoft.com/jive/entry.jspa?entryID=752&categoryID=80
    I already tried with web.xml version of the article (with some changes for the example) but I still getting errors.

    I’m trying with JDeveloper 10.1.3.3 and ICEfaces 1.6.0.1 .. everything goes ok … (the only rare is that I can’t see the “Iceface Integration…” option on the project context menu, but I did all the work manually.

    Can anybody give me a hand on this problem?.

    Thanks in advance.

  4. For those of you that get the “Failed to execute JSP lifecycle” error. If you replace everything in your web.xml file with what is in this tutorial then it will work. More specifically the differences in this tutorial and what were in my web.xml was…

    My Computer:

    Faces Servlet
    *.jspx

    Persistent Faces Servlet
    /faces/*

    This tutorial:

    Persistent Faces Servlet
    *.jspx

    Faces Servlet
    /faces/*

    If I update these servlet-mapping’s it works as well.

  5. Wouter van Reeven on

    I tried the steps in this tutorial with JDev 10.1.3.2 and IceFaces 1.6.0 and it didn’t work. For some reason I didn’t get the IceFaces Components taglib to register itself with JDeveloper, nor did I see the Enable IceFaces menu option in the RBM. With JDev 10.1.3.3 and IceFaces 1.6.0 all is working accordingly to the tutorial.

    Wouter van Reeven
    AMIS

  6. Roberto Ciminago on

    Thanks Amis,

    This guide is really clear and useful to get started with IceFaces, it is what I really needed!

    Regards,
    Rob

  7. James,

    In all fairness: that is what I surmised to be possible. I have not actually tried that out – it was on the list, but along with too many other things. I hope to give it a try one of these days and post the results on the weblog.

    Lucas

  8. You say at the end of your article that it is possible to combine ICEFaces with other JSF implementations within the same application. Do you have any experience of this, or happen to know whether this is only possible with certain JSF implementations? I’d like to be able to use ICEFaces along with Infragistics NetAdvantage components. I tried to adjust the url mappings in web.xml so that some pages could bypass the ICEFaces servlet and use the other JSF components. I didn’t manage to get ICEFaces out of the loop though – it always managed to hook a bit of its own framework code into my otherwise ICE-free page, causing it to fail.
    Thanks.

  9. I tried on jdeveloper but no luck.

    When the project is enabled for iceFaces it changes my web.xml automatically. The servlet mapping for /faces/* is changed from “Faces Servlet” to “Persistent Faces Servlet” but in the sample above it is pointing to “Faces Servlet”. Does “Persistent Faces Servlet” extends “Faces Servlet”.

    Thanks

  10. I downloaded Jdev 10.1.3, icefaces 1.5.2 and followed your tutorial but when I run my application I get
    500 Internal Server Error

    Servlet error: Error instantiating servlet ‘Persistent Faces Servlet’. Servlet class com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet not found in …

    What am I doing wrong?

    Thanks

  11. Dear writer,
    I’ve tryed your demo but is not working with jdeveloper 10.1.3.2, I get the following error:
    SEVERE: Failed to execute JSP lifecycle.
    javax.servlet.jsp.JspException: com.sun.faces.context.FacesContextImpl
    at com.sun.faces.taglib.html_basic.FormTag.doStartTag(FormTag.java:355)
    at com.icesoft.faces.webapp.parser.Parser.executeJspLifecycle(Parser.java:162)
    ….

    Any help would be appreciated,
    Thx