JSF 2 - Unique ids across multiple pages

Question

I'm looking to create a JSF application in which there are multiple xhtml pages displayed in different regions of the browser. I could do this with iframes but they add extra memory and accessing objects across iframes is not that trivial.

I am considering an approach in which I load different xhtml pages within the main page using ajax. The problem is that there will be many elements within the main page that will have the same ids, since the ids are unique only within their respective view roots.

I know 1 solution would be to implement some custom client side logic that handles these duplicate ids, but it would be better to just not have duplicate ids at all.

What can i do to solve the problem?

A side question: Is there a framework that handles such a requirement better, i.e. having multiple pages displayed within the same browser window?

When you said "using ajax", do you mean JSF's `` or plain JS like `jQuery.load()` or something? I have the impression that the latter is the case because the former would have thrown duplicate ID exceptions for that. If the latter is true, is there any particular functional or technical reason that you're preferring plain JS over of ``? Anyway, here's some food for thought: http://stackoverflow.com/questions/4421839 — BalusC, Sep 28 '11 at 21:23
yes. I meant the Jquery ajax. From the very beginning i'm using some custom client code that does pretty much the same thing that f:ajax does except that it provides me the ability to decide what to execute and re-render from js. It also helps me have finer control on what to do before and after the ajax request. And, it allows me to attach ajax behaviors to things apart from browser events such as jquery custom events. — Abbas Gadhia, Sep 29 '11 at 10:51

score 3 · Accepted Answer · answered Oct 01 '11 at 17:23

You could replace the view root with one that implements NamingContainer:

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.0"
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <component>
    <component-type>javax.faces.ViewRoot</component-type>
    <component-class>components.ReplacementRoot</component-class>
  </component>
</faces-config>

This sample implementation creates a clientId based on the viewId:

public class ReplacementRoot extends UIViewRoot implements NamingContainer {
  @Override
  public String getClientId(FacesContext context) {
    return "jsf" + getViewId().replaceAll("[^\\p{Alnum}]", "_");
  }
}

This will generate client identifiers of the form jsf_index_xhtml:foo.

Cool! I was wondering how to have a custom view root but didn't know that it was possible this way. Previous to this, i was thinking of implementing a custom form and do something similar to what you wrote above. — Abbas Gadhia, Oct 03 '11 at 13:31

score 1 · Answer 2 · answered Sep 28 '11 at 18:50

Have a look on the Portlet technology since probably this is what you want. The problem is that I haven't seen yet really good portlet implementations, and also that you need a JSF portlet bridge in order to handle the JSF lifecycle - don't know the state of that either.

Another option would be to create your own facelets provider, that adds dynamically whatever components you need, so when you rebuild the component tree, they will suddenly appear. I couldn't tell you more about that either, but I've seen it done and working for some wiki-like software that was editing the pages as facelets xhtml.

JSF 2 - Unique ids across multiple pages

2 Answers2