Adam Bien's Weblog

Wednesday Aug 07, 2013

JSF/ Java EE CSS Styling Simplification with prependId

Without any configuration the JSF form:


<h:form id="address">
	<h:inputText id="zip" value="With prepending"/>
</h:form>

generates the following HTML output:


<form id="address" name="address" method="post" action="/jsf-prepend/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="address" value="address" />
<input id="address:zip" type="text" name="address:zip" value="With prepending" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-4980322844765163681:-2993627504656741843" autocomplete="off" />
</form>

The JSF ids are translated into hierarchical CSS ids what makes CSS styling harder.

JSF 2.2 comes with the prependId attribute:


<h:form id="address" prependId="false">
	<h:inputText id="zip" value="Without prepending"/>
</h:form>

With the attribute prependId="false" all ids are passed 1:1 without any transformation, what makes the CSS designers happier:


<form id="address" name="address" method="post" action="/jsf-prepend/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="address" value="address" />
<input id="zip" type="text" name="zip" value="Without prepending" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-5933108140449421568:-4153499441248471088" autocomplete="off" />
</form>

See you at Java EE Workshops at MUC Airport, especially at the Java EE User Interfaces workshop!


Special Events: Java 8 with Java EE 7: "More Power with Less Code", 13th October, 2014 and Java EE 7: "Testing and Code Quality", 14th October, 2014

A book about rethinking Java EE Patterns

Comments:

prependId="true" all ids are passed 1:1 without any transformation

Guess, that should be prependId="false"

Posted by Björn Raupach on August 07, 2013 at 03:56 PM CEST #

The attributed 'prependId' is indeed useful, but it's not new to JSF 2.2. As far as I remember I've been using this attribute since JSF 1.2. It's also helpful with JavaScript.

Posted by Edson Yanaga on August 07, 2013 at 04:12 PM CEST #

Yep, prependId has been in JSF since 1.0!

Ed

Posted by Ed Burns on August 08, 2013 at 12:04 AM CEST #

I agree with @Edson that prependId is useful. Especially for avoiding duplicate js id conflicts e.g. when creating a JSF component and using it twice in a page

Posted by Mike on August 08, 2013 at 04:57 PM CEST #

It is also useful when you have acceptance test inspecting your elements of the web page (e.g. from selenium or graphene etc.)

Posted by mnsbutt on June 02, 2014 at 11:14 PM CEST #

Post a Comment:
  • HTML Syntax: NOT allowed
realworldpatterns.com
...the last 150 posts
...the last 10 comments
Links
License