Java PureFaces – Clean & Simple HTML Output

by Matt Pickell for JavaPureFaces

What does the HTML from Java PureFaces look like?  In this post I going to show exactly what mark-up is created.  I’ve cut and pasted a couple of examples from the previous Guess-A-Number demo to show some examples. I’ll start by using a single JSP page for the project:

JSF page for the demo

This is all that is needed in the simplest app JSP page. Here is the code of the createGuessComponent from the demo:

createGuessComponent Java Code

which creates this simple view:

Guess Demo Screen Shot

Guess Demo Screen Shot

and this HTML:

Table Based HTML Java PureFaces output

Or, with the simple swapping of the PurePanelGroup into the code where a PurePanelGrid is currently used, you can get the more updated, non-table based layout (much more CSS-friendly) in the body of the page:

Cleaner HTML output

There is still a table in there. That is configured to allow for an error message next to the input box through JSF messaging. Want to get rid that all tables? That, too, can be easily changed by chaining another option off of the PureInput Component, leaving even smaller, cleaner HTML:

Cleanest HTML output

Although now there is no message for the required input field if the user leaves it blank. This example is shows that when comparing this to the java code that created it, you can now see it is almost line for line (there is no error message, so it is not rendered).

You can use table-based layouts, or work with more current semantic layouts. Either way, it is very easy to create a view.

It is also very easy to manipulate the attributes of the HTML elements, like the style classes in the HTML shown here (class=””). The framework model can support any element attribute, such as DOM “Level 0” Events (onclick, onkeypress, etc.) and inline styles (style=””), to name a few of the more used attributes, by just chaining them onto the component you are adding.

Leave a Reply