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!