Facelets offers a different way to specify components within your page with the jsfc attribute within a standard HTML element. In this recipe, we will use this technique for developing a simple JSF view.
We developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
The following JSF view shows you this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<title>Facelets Hello Application</title>
</head>
<body>
<h:message showSummary="true" showDetail="false" for="name" />
<form jsfc="h:form" id="helloForm">
Your name:
<input jsfc="h:inputText" required="true" id="name"
value="#{person.name}" />
<input type="submit" jsfc="h:commandButton" id="submit"
action="greeting" value="Say Hello" />
</form>
</body>
</html>
This view contains a simple h:form made off a text field (h:inputText) for inserting your name and a submit button (h:commandButton). Behind the scenes is a backing bean that is simple and irrelevant for us now.
Now, it is absolutely normal to ask "But, how is the view created using this jsfc attribute?". Well, the answer is simple. The Facelets compiler searches for a jsfc attribute for every element in the document. The value of an jsfc attribute is the name of an alternative element to replace the one used in the page. In our case, the compiler will render an h:form, an h:inputText, and an h:commandButton as these are the values for our jsfc attributes. Aliasing components allows the user to see a normal HTML element, such as form, input, and submit button, while the programmer can treat it as a JSF component.