Icefaces - Developing user interfaces became so easy

I have blogged about icefaces in past and since then icefaces has changed a lot, with lot of new components added to the already rich ajax based library.

Being a server side developer the best thing i liked about icefaces is that it can create rich ajax enabled user interfaces without knowing a single line of java script. so icefaces is definitely a useful framework when you want to leverage your existing team of java developers to make a web interfaces.

The fact is you can achieve all this icefaces provides you with any other javascript framework but the time and resources utilized in that is much more and never forget the nightmare of debugging JavaScript at-least for the Java developers if not for the ui folks.

Some of the interesting things added in recent releases of Icefaces in 1.8.x and Icefaces 2.

1) Rounder Corners - If you have worked with user interface, I am sure you know about how to get the rounded corners either with the images or with jquery and all that. So icefaces does help you in that and does the whole stuff behind the scenes with one simple tag, which can be defined as follows, for which more details can be found at the following url - Icefaces rounded corners



2) New scopes introduced to the library which bridges the gap left in jsf2.

3) Expandable Table - Once of the good user interfaces features should be, it should show only that much data to the user which is required and should not display the whole dataset on the page as the page will look very cluttered and busy. Icefaces has given a component for rendering such useful layout with expandable table. You can have a look at the details of the same at the following url. Expandable Table

4) Rich Data-grid table - now has an inline editing enabled in it if required. Not sure how much work or java-script you need to write if you want to write this component yourself.

5) IcePush - Not to mention one of the biggest benefit which icefaces provide is AjaxPush which a strong framework supporting both synchronous and asynchronous types. IcePush can also be integrated with any other web frameworks if required.

6) Google Maps - In one of my previous projects, i also had a requirement where we had to show the map to the user for the location of offices. Icefaces google maps tag came in so handy. you can either pass the address as a string or pass longitude and latitude as follows.


Or


other properties you can pass with the map is zoom level, type of the map as satellite or hybrid etc. Also you can add any of the controls as follows.






Here is the brief comparison of icefaces with other ui framework in terms of AJAX Push, Icefaces Comparison with Echo 2, ZK etc

I myself also tried looking at GWT after such a buzz around it, but as a java developer who have never worked with Swing, i was not bought by the concept of coupling your ui pages so tightly with the java classes and defining labels and everything in the classes. JSF concept still goes far better then that.

Some of the other things in which icefaces gives you an edge is extending its component or even writing your own. For eg. In one of my previous projects we had the requirement in which we had to show the table to the user and once the user click on any column in the table the table should slide down and it should show the complete details of that column including the image from the details. Below is the brief code for the same which can help you in achieving this.

Writing a component can be done as follows.
Start with writing a component class by extending the UIInput or UIOuput in this case. Then override the following method in case you are writing for output. Also encode ever children in the loop as done below.
public void encodeBegin(FacesContext facesContext)
 throws IOException {
  ResponseWriter responseWriter = facesContext.getResponseWriter();
  DOMContext domContext = DOMContext.getDOMContext(facesContext, this);
  Element parentTd = (Element)domContext.getCursorParent();
  parentTd.setAttribute(HTML.STYLE_ELEM, "background-color:blue; background-repeat:repeat-x;border-bottom: medium none");
  Element tbody = (Element)domContext.getCursorParent().getParentNode().getParentNode();
  Element tr = (Element) domContext.createElement(HTML.TR_ELEM);
  tbody.appendChild(tr);
  String id = getClientId(facesContext);
  tr.setAttribute(HTML.ID_ATTR, id);
  Element td = domContext.createElement(HTML.TD_ELEM);
  tr.appendChild(td);
  td.setAttribute(HTML.BORDER_ATTR,"1px");
  td.setAttribute(HTML.COLSPAN_ATTR, "5");//TODO
  td.setAttribute(HTML.BGCOLOR_ATTR,"#ffffff");
  
  Node oldCursorParent = domContext.getCursorParent();
  domContext.setCursorParent(td);
  domContext.streamWrite(facesContext, this,
    domContext.getRootNode(), td);
  
  Iterator children = getChildren().iterator();
  while (children.hasNext()) {
   UIComponent nextChild = (UIComponent) children.next();
   if (nextChild.isRendered()) {
    DomBasicRenderer.encodeParentAndChildren(facesContext, nextChild);
   }
  }
 }
   

Once you have create the component class you need to define the component type & class in the faces-config and create a custom tag in custom-taglib if you are using facelets & you are ready to use the tags you created in your xhtml or jspx.

There are various other ways of writing a component which can be used also you can create a different renderer for different components.

Not to ignore icefaces can be very well used with iphone or other mobile devices which leaves you flexible enough to extend your application to mobile platform.

But what i am eagerly waiting for now is final release of Icefaces 2 which is presently in alpha. Icefaces 2 is drastically new framework with lot of enhanced ajax capability and the use of JSF 2.


Also very soon I will cover the integration of spring with icefaces.