Is it possible to change the element id separator in JSF?

Question

For example, the following snippet:

<h:form id="levelone">
    <h:inputText id="leveltwo" value="Test" />
</h:form>

generates the following markup:

<form id="levelone" name="levelone" method="post" action="/test/testPage.html" 
      enctype="application/x-www-form-urlencoded">
   <input id="levelone:leveltwo" type="text" name="levelone:leveltwo" 
          value="Test" />
</form>

Is it possible to change the automatically generated ids to use a different separator than colon?

For example, I'd like to change

levelone:leveltwo

to

levelone-leveltwo

Background

We're using the Mojo JavaScript application framework in our webapp, and it doesn't seem to like the colons in the id's.

Answer 1

In older versions, no it is not possible. It is a hard coded constant. In 2.0, you can change it. See this blog post.

Answer 2

Tomahawk has extended components, like <t:inputText> which have the forceId attribute. There you'll have to set it as <t:inputText forceId="levelone-leveltwo" /> - i.e. you won't be able to use the automatic generated container(s) name.

I'd advise against such a thing - I don't see a valid reason why the : should be changed to -

Answer 3

This is not possible in JSF 1.x, but since JSF 2.x you can define it in web.xml as init-param of javax.faces.SEPARATOR_CHAR.

That said, I guess that you just wanted to change it because you'd like to get your CSS to work, is it? The colon : is namely indeed an illegal character in CSS. If this reason is true for you, then it might be good to know that you can escape illegal characters in CSS the usual way by \.

Thus, e.g.

#levelone\:leveltwo {
    color: blue;
}

ought to work.

The same applies when you intend to use it with jQuery or any other JavaScript framework which selects elements with help of CSS selectors:

var leveltwo = $('#levelone\:leveltwo');

Alternatively, you can also just give it a styleClass which you in turn can correlate with a CSS class. Thus, e.g.

<h:inputText styleClass="myinput" />

which generates

<input type="text" class="myinput" />

can be styled with

.myinput {
    color: blue;
}