3/16/2011

New Features of JSF 2.0 - Part 3

JSF 2.0 : Custom Components - Part 2


In this part of the Tutorial to learn JSF 2.0 we will cover the advanced functions of the custom components. If you want to read the other articles about the new features of JSF 2.0, then take a look here:


Part 1 - JSF Resources || Part 2 - Custom Components I


Now we will cover the advanced usage of custom components. To do so, let´s first take a look at the component we developed the last time:



<h:body>
   <composite:interface>
   </composite:interface>

   <composite:implementation>
   <h1>Hello World</h1>
   </composite:implementation>

</h:body>





As you can see it consists of an interface and an implementation, just as you would expect it in Java: The interface defines the contract, the implementation the concrete behaviour.


Before we add some content, just a note: You don´t need to fill out the interface part - it´s completly optional. But it will help the developer using your component a lot if you put everything in, that you are using in your implementation part.


We won´t cover all aspects of the custom components, but we will get you so far, that you can go the last steps on your own.


so - let´s start with the interface part. Here is an example of what you might add to it:


<composite:interface>
    <composite:attribute name="someLabel" >

</composite:interface>




This defines an attribute that you can use in your implementation. For example as a label:


<composite:implementation>
    <ice:outputLabel value="#{cc.attrs.someLabel}"/>
</composite:implementation>



You always access attributes by #{cc.attrs.attributeName}. cc is the top node of the object structure. 


You could use this component like this:

<test:testComponent someLabel="This is a label"/>.


Or if you want to use dynamic values:



<test:testComponent someLabel="#{someBean.value}"/>.

Ok, next step: How to access methods and beans !

<composite:interface>
    <composite:attribute name="buttonLabel" >
    <composite:attribute name="someMethod" method-signature="java.lang.String methodName()">
</composite:interface>

To pass methods into your custom component, you need to specify the method signature by using the method declaration language like this:

RETURN-VALUE someIdentifyingName(Method parameters).

In our case we have a method that has no input parameters and returns a String. This is the perfect signature to use it as an action method for a commandButton !

 <ice:commandButton id="buttonId" value="#{cc.attrs.buttonLabel}"
      action="#{cc.attrs.someMethod}"/>

That´s all you have to do in your composite component. Now you can dynamically create test components that will render a nice button. You could use it like that:


<test:testComponent buttonLabel="Please Click Me !" someMethod="#{someBean.aMethod}"/>.


That´s all for Part 2 of Custom Components ... stay tuned for Part 3 :)







If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.