Java PureFaces – Clean & Simple HTML Output
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:
This is all that is needed in the simplest app JSP page. Here is the code of the createGuessComponent from the demo:
which creates this simple view:

Guess Demo Screen Shot
and this HTML:
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:
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:
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.