In this tutorial we will learn about the JSF 2 composite facet tag library.
JSF 2 composite facet
In this tutorial we will learn about the JSF 2 composite facet tag library.
<composite:facet> tag is used to specify a facet for the component. This tag uses the "name" attribute to specify the facet.
Attributes of JSF 2 composite facet tag
- name : This is a required attribute. Value of this attribute can be of java.lang.String. This attribute specifies the facet name.
- displayName : This is not a required attribute. Value of this attribute can be of java.lang.String type. This attribute specifies the name which will be displayed in a tool palette.
- required : This is not a required attribute. Value of this attribute can be of the boolean type. If the value of this attribute is true then the facet must be provided by it's name on the using page.
- preferred : This is not a required attribute. Value of this attribute can be of the boolean type that specifies whether it is a "preferred" component or not
- expert : This is not a required attribute. Value of this attribute can be the type of boolean (true/false) that specifies whether this component is only for the expert users or not.
- shortDescription : Value of this attribute can be the type of java.lang.String. This attribute can be used for describing the short description of the composite component that what's it aim ?
Example :
Here an example is being given which will demonstrate you about how to use the JSF 2 composite facet tag in the applications. In this example I have created a composite component (facetComponent.xhtml). In this composite component I have used the <composite:facet> tag inside the <composite:interface> tag and then in the <composite:implementation> tag I have used the <composite:renderedFacet> tag that the facet will be rendered at that point. Then created a using page (facetExample.xhtml) where this composite component will be used. At this page I have used the composite facet with the name specified in the composite component page.
Directory Structure
facetComponent.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:composite="http://java.sun.com/jsf/composite"
>
<composite:interface>
<composite:facet name="facet1" />
<composite:attribute name="name" required="true" />
<composite:facet name="facet2" />
</composite:interface>
<composite:implementation>
<h:panelGrid border="1" columns="3" rules="all">
<composite:renderFacet name="facet1" />
<h:outputText value="#{cc.attrs.name}" />
<composite:renderFacet name="facet2" />
</h:panelGrid>
</composite:implementation>
</html>
facetExample.xhtml
<!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:dev="http://java.sun.com/jsf/composite/compositeComponent" > <body> <f:view> <h:form> <dev:facetComponent name="Deepak"> <f:facet name="facet1"> <h:outputText value="1."/> </f:facet> <f:facet name="facet2"> <h:outputText value="Rohini, Delhi" /> </f:facet> </dev:facetComponent> </h:form> </f:view> </body> </html>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfCompositeFacet</display-name> <welcome-file-list> <welcome-file>facetExample.xhtml</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> <url-pattern>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
How To execute this example
To execute this example you can download a WAR file example form here and import this war file into your eclipse by File -> import -> web -> war file and simply execute this example by selecting the imported project as follows :- Select your project -> Right Click -> Run As -> Run On Server.
Output :
After successfully execution of the above example you will get the output as follows :
The HTML source code will be as follows :
<!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"> <body> <form id="j_idt3" name="j_idt3" method="post" action="/jsfCompositeFacet/facetExample.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt3" value="j_idt3" /> <table border="1" rules="all"> <tbody> <tr> <td>1.</td> <td>Deepak</td> <td>Rohini, Delhi</td> </tr> </tbody> </table> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVSQWsTQRR+3WRbG6vERHuReCqCIBvEFqxBTGgTupjWQCpYPOgkmSYbZ3fHmbfJpodCL3rwIqgHoaIHDx4KHvwF4kEQFPSoF/HuRRCvzmzSpIX24IN5s8y+9733fe/t/AKTSwEn2qRDrAAdZi0R2Vom3Jz49u799J0vMTBKkGA+aZRIHX1hwyS2BJUtnzVCfjUP2qa6R5RPqhNDONa+7TTw4uXomg0EpG+VI3hGvKZ1vdamdcw9+nzzRVKeYwZAyFWeyZUF92ATYhplU8CszgmtdVKn0qr7Lvc96qF1w14hruM1F3wPieNRMVMRPqcCe9doT8LAUgpWwPFR2aIXuHt/coRxRiTajSH7KM72kDapSP18+erv1oNLBozZYHYIC6jCS47iVgK3RsX9naeZo09+PNxlEdewffpDLvuZmYrZ3GHMFna/93GqCKdDkO7tXqNNIJwkiMKpBUjlaotgQdAqRcUnPZpmQQjSKzsSw62vmWcfyPOYZhSXzgaNOja6ce1V0tmDu6qiqr2khk1FlXSoWPv49srj7U/LBhhlmKwrDaUaCEVIRUPOanWyVdWW18yVISFVTiPCQJjuRzh+tkqFQ5izQWqM5kLOO5pQWmp/Skl4RpW3ZOANmtGeKWJWoVIp28XFUGlo/Z+GB4iXGIkXFYbBLo9Hu6zPmH4+raSZO6Qfx+XMWqTrJGBY6j/OFDhnvVX/LvX+vD6/tp1v56f0cnQzkM7qRCyGRKVRK2yhy1SR+Te/v8+HeiFNvTkXhqticB7+Az07iW2gAwAA" autocomplete="off" /> </form> </body> </html>
[ 0 ] Comments