Using <div /> tags in JSF since 0.9.0 (experimental)

If you're coming from the Bootstrap world, you are probably used to use <div /> tags a lot in your pages. Bootstrap may offer many components, but there are quite a few useful Bootstrap components it doesn't implement yet. Plus, BootsFaces aims to be a friendly and tolerant framework. If you prefer your own implementation of, say, <b:tabView />, so be it. These three thoughts convinced us to make the <div /> tag a first class citizen of JSF. As an option, of course.

So we've written a tag decorator which converts your div tags to <h:panelGroups />. This turns them into JSF components, even if you don't use the pass-through attributes of JSF 2.2+. If you've activated our tag decorator, these three lines generate identical code:

Why?

Truth to tell, you can use <div /> tags in ordinary JSF-code. The problem is that they are not included in the JSF component tree. In other words: you can't use them for the update attribute of AJAX statements. You can't use render="false".

Other advantages are that the HMTL5-like coding style is not restricted to <div />. There are also a couple of HTML element that are converted to JSF elements:

HTML tag

converts to

body

h:body

head

h:head

form

h:form

input

b:inputText

label

h:outputLabel (subject to change when <b:outputLabel /> is implemented)

option

f:selectItem

button

b:commandButton

div

h:panelGroup display="block"

span

h:panelGroup

Plus, you can omit the prefix b: of BootsFaces components.

This all makes for a more compact JSF code. As a bonus, your web designer may appreciate it because their toolchain usually doesn't cope with the JSF extensions of HTML.

Examples

How to activate the HTML5-friendly markup

To activate the relaxed markup, you have to add a few lines to your application's web.xml:

How to get rid of the HTML5-friendly markup

BootsFaces allows you to active and deactivate the HTML5-friendly markup both globally and on a per-page base. The global configuration is done by adding the parameter to the web.xml:

The default value of net.bootsface.defaults.decorator is true, so you only need to specify the value to deactivate it. Once you've done so, you can reactivate it in any tag of your page by adding bootsFacesDecorator="true":

You can activate and deactivate the decorator multiple times on any page. However, this does not follow the usual rules of JSF. The decorator is called during parsing the files. This means it doesn't respect the tree hierarchy of the JSF component tree. Plus, template files and include files are parsed after the current file. Be prepared to encounter surprises if you try to activate and deactivate the decorator within the page. In particular, deactivating the decorator in the global template file does not have the desired effect.

What about risks and side-effects?

Making the <div /> tag a first-class citizen of JSF adds some components to the JSF tree, which may slow down rendering. In rare cases, you may have to modify your program if it relies on your <div /> not to be a part of the JSF tree. However, that shouldn't be much of an issue because the <div /> is not a NamingContainer. In other words: it doesn't modify any existing id, so your update and for targets are still valid.