Make <div> a first-class citizen of JSF

[stephanrauh]

Divs play a crucial role in Bootstrap, but they aren't part of JSF's DOM tree. This mismatch often leads to difficulties. AngularFaces has the same problem, so I invented a way to make divs and spans first-class citizens of JSF. I'd like to donate the code to the BootsFaces project.

First-class divs would be an option that has to be activated in the web.xml, so it's the programmers' choice if they want to use the feature or not.

Demonstration of the problem:

<b:panelGrid colSpans="3,9">
  <h:outputText value="street"/>
  <b:inputText value="#{address.street}" />
  <h:outputText value="zipcode/city"/>
  <div>
     <b:inputText value="#{address.zip}" />
     <b:inputText value="#{address.city}" />
  </div>
</b:panelGrid>     

The idea is to display the two field zipcode and city in a single column, so that they align nicely with the wider fields, such as the street names. Unfortunately, JSF converts both the opening <div> and the closing </div> to text nodes. As a result, the form looks, well, confused.

It's possible to solve the problem in JSF using <h:panelGroup display="block"> instead of <div>. But that's verbose and ugly. Adding insult to injury, hardly anybody knows this trick.

[TheCoder4eu]

Did you try to use a <b:row> instead of a <div> ?

[TheCoder4eu]

A <b:container> instead of a <div> could be appropriate.

[ahofmeister]

Why do you think, that should work? As far as I understand, <b:inputText> spans the whole container. A component to 'group' other components such as <b:inputText> would be nice.

[stephanrauh]

Thanks for your upvote! I'll raise the priority of this ticket.

[jbmb]

if you want the div to become part of the component tree, you could use the xmlns:jsf="http://xmlns.jcp.org/jsf" namespace (pass-through element):
<div jsf:id="someId">...</div>
Is that not sufficient?

[stephanrauh]

That didn't work when I tried (see http://www.beyondjava.net/blog/jsf-2-2-html5-cheat-sheet/). Does it work for you?

[stephanrauh]

The feature has been implemented, but it has not been documented yet.

[stephanrauh]

While documenting the feature, I noticed it needs some polishing. Currently, it's marked as "experimental".

[stephanrauh]

Probably it's not perfect, but I've polished the feature enough to call in done and implemented.