NetBeans Forums

readystateprint · Joined: 20 Aug 2009 Posts: 1

Writing a simple Composite Component with JSF 2.0

Posted by driscoll on November 01, 2008 at 11:46 AM | Comments (14)

One of the pain points for JSF has always been the complexity that you face in creating components. In JSF 2.0, creating a new component that's made up of existing components is a snap.

Here's a quick example of how you can create a new component, and use it in your page.

For this example, I wanted to create a simple text box that has a yellow background. Useful? No. Simple? Yes Smile

In fact, it only needs two files. (This may look like a bit of code for a blog entry, but bear with me - most of it is just xhtml fluff. There's only about 4 or 5 lines that you'll actually need to learn.)

The first file is the page itself. Since JSF 2.0 uses Facelets as the preferred way to create pages, we'll use that. Here's the page:

<!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"
xmlns:ez="http://java.sun.com/jsf/composite/simpleout">
<h:head>
<title>Yellow Text Example</title>
</h:head>
<h:body>
<h1>Output Text Example</h1>
<h:form id="form1">
<ez:out value="Test Value"/>
<p><h:commandButton value="reload"/></p>
<h:messages/>
</h:form>
</h:body>
</html>

Two lines you need to care about here:
xmlns:ez="http://java.sun.com/jsf/composite/simpleout"
defines the composite component library, and
<ez:out value="Test Value"/>
then uses the composite component. But where is the "simpleout" component library? It's in the directory WEB-INF/resources/simpleout, and the "out" component is defined in a file named out.xhtml in that directory. Here's the contents of that file:

<!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"
xmlns:composite="http://java.sun.com/jsf/composite">
<head>
<title>This will not be present in rendered output</title>
</head>
<body>

<composite:interface>
<composite:attribute name="value" required="false"/>
</composite:interface>

<composite:implementation>
<h:outputText value="#{cc.attrs.value}" style="background-color: yellow"/>
</composite:implementation>
</body>
</html>

Again, there's really two bits to look at here. The first is
<composite:attribute name="value" required="false"/>
says that our out component can take one attribute, named "value", and that it's presence is optional. Then,
<h:outputText value="#{cc.attrs.value}" style="background-color: yellow"/>
is where we actually define the component, with the "value" attribute set to the value attribute that's been passed in.

And that's it. No Java code is required for this very simple example.

I'll do other blogs about how to create more complex composite components, but I hope that I've made my point about how very simple this new way of component creation can be.

As always, if you have any questions, feel free to ask. And remember that you can try out this example by downloading GlassFish, and updating to JSF EDR2.