This example will show you how to create a composite component by combining h:outputLabel and h:inputText components. Below are the steps taht you need to follow.
1. In WebContent/resources folder create a new folder. This is the folder in which you are going to create your composite component. I name this folder as "custom".
2. Create a new xhtml page in this folder. The code of our composite component will be written in this file. I name this file as labelledInputText.xhtml. Note that then "labelledInputText" will become the name of my composite component.
3. This is the content of my labelledInputText.xhtml 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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
<head>
</head>
<body>
<composite:interface>
<composite:attribute name="label"/>
<composite:attribute name="value"/>
</composite:interface>
<composite:implementation>
<h:outputLabel value="#{cc.attrs.label}" /> :
<h:inputText value="#{cc.attrs.value}" />
</composite:implementation>
</body>
</html>
"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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
<head>
</head>
<body>
<composite:interface>
<composite:attribute name="label"/>
<composite:attribute name="value"/>
</composite:interface>
<composite:implementation>
<h:outputLabel value="#{cc.attrs.label}" /> :
<h:inputText value="#{cc.attrs.value}" />
</composite:implementation>
</body>
</html>
4. The most imporant parts of above code can be explained as below.
xmlns:composite="http://java.sun.com/jsf/composite" - This tag library should be imported at the to of the page.
<composite:interface> - Within these tags the attributes of the composite component are defined.
<composite:attribute> - You can define attributes of the composite component by using this tag.
<composite:implementation> - Within these tags you and add any number of JSF components. You sould design your final composite component between these tags. This is what you see after the final page is rendered.
#{cc.attr....} - You can access the attributes defined in <composite:interface> section like this.
5. Well, now we have created out composite component. We may use it in out xhtml pages as below.
<cust:labelledInputText label="Name" value="#{myBean.message}"/>
See my sample xhtml page(index.xhtml) below where I use this component.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:tl="http://tech-lead.blogspot.com/tags"
xmlns:cust="http://java.sun.com/jsf/composite/custom">
<h:head>
</h:head>
<body>
<h:form>
<cust:labelledInputText label="Name" value="#{myBean.message}"/>
<a4j:commandButton value="Ok" action="#{myBean.print()}"/>
</h:form>
</body>
</html>
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:tl="http://tech-lead.blogspot.com/tags"
xmlns:cust="http://java.sun.com/jsf/composite/custom">
<h:head>
</h:head>
<body>
<h:form>
<cust:labelledInputText label="Name" value="#{myBean.message}"/>
<a4j:commandButton value="Ok" action="#{myBean.print()}"/>
</h:form>
</body>
</html>
Did you note the namespace declaration xmlns:cust="http://java.sun.com/jsf/composite/ custom" at the top of the page. This is needed to use your component in page. The last part(/custom) is the name of the folder you created inside the resources folder(parent fodler of the labelledInputText.xhtml file).
Below is the sample managed bean I use to test this page.
import javax.faces.bean.ManagedBean;
@ManagedBean(name="myBean")
public class MyBean {
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void print() {
System.out.println(message);
}
}
@ManagedBean(name="myBean")
public class MyBean {
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void print() {
System.out.println(message);
}
}
Now run the application and point to the index.xhtml page. Wow! you will see a textbox rendered together with a label on page. Now enter a value in to the text box and press the button. See the console. The value you entered will be printed on it.
Congratulations! It means you have successfully created your first JSF composite component.
No comments:
Post a Comment