Facelet Composite Components

Posted on March 8, 2012 by Jianming Li

Contents

  1. Setup Test Project
  2. Create a Test Bean
  3. Create a New Facelet Composite Component
  4. Setup testcc-taglib.xml
  5. Test Composite Component
  6. Test
  7. Debug
  8. References
 

Setup Test Project

* Follow this post to setup a dynamic web project using MyFaces Trinidad in Eclipse. You can download the sample code to begin with.
* Add CDI/WELD support to the project. See this post for details.
– Add weld.jar to build path and assembly path
– Add weld listener to web.xml
– Add beans.xml to src/MEATA-INF

Create a Test Bean

* Create a new package named test
* Create a new Java class in test package named TestBean

package test;
 
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
 
@Named
@RequestScoped
public class TestBean {
	public String getTitle() {
		return "Test Bean";
	}
 
	private String val;
	private String[] vals;
 
	public String[] getVals() {
		return vals;
	}
 
	public void setVals(String[] vals) {
		this.vals = vals;
	}
 
	public String getVal() {
		return val;
	}
 
	public void setVal(String val) {
		this.val = val;
	}
 
	public String getStr(){
		return "A string";
	}
 
	public String[] getStrs(){
		String[] tmp = new String[3];
		tmp[0] = "String one";
		tmp[1] = "String two";
		tmp[2] = "String three";
		return tmp;
	}
}

Create a New Facelet Composite Component

* Add a new folder named faceletlib under WEB-INF directory
* Add a new xhtml file named testccFace.xhtml in the faceletlib directory. Note that we introduced two new variables in the composite whose values can be passed in at run time: testcc_id and testcc_bean

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:trh="http://myfaces.apache.org/trinidad/html"
	xmlns:tr="http://myfaces.apache.org/trinidad"
	xmlns:c="http://java.sun.com/jstl/core">
 
	<tr:panelLabelAndMessage for="#{testcc_id}">
		<f:facet name="help">
			<tr:outputText value="Pick a date" />
		</f:facet>
		<tr:inputDate id="#{testcc_id}" simple="true" />
	</tr:panelLabelAndMessage>
 
	<tr:spacer height="15" />
 
	<tr:panelFormLayout>
		<!-- A bunch of form components -->
		<tr:selectOneChoice value="#{testcc_bean.val}" required="true"
			label="Select One Option:">
			<f:selectItem itemLabel="Option1" itemValue="1" />
			<f:selectItem itemLabel="Option1" itemValue="2" />
			<f:selectItem itemLabel="Option1" itemValue="3" />
		</tr:selectOneChoice>
 
		<tr:selectManyCheckbox value="#{testcc_bean.vals}" required="true"
			label="Select many options:">
			<f:selectItem itemLabel="Option1" itemValue="1" />
			<f:selectItem itemLabel="Option1" itemValue="2" />
			<f:selectItem itemLabel="Option1" itemValue="3" />
		</tr:selectManyCheckbox>
 
	</tr:panelFormLayout>
</ui:composition>

Setup testcc-taglib.xml

* Create a new xml file named testcc-taglib.xml in the WEB-INF directory
* Define a namespace for the new facelet taglib, e.g. http://www.testcc.com/facelets
* Enter the tag-name and point source to testccFace.xhtml file

<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
	<namespace>http://www.testcc.com/facelets</namespace>
	<tag>
		<tag-name>testcc</tag-name>
		<source>faceletlib/testccFace.xhtml</source>
	</tag>
</facelet-taglib>

* Declare new facelet tag lib in web.xml:

  <!--
      =================
  		Facelet Tag library
      =================
  -->  
  <context-param>
    <param-name>facelets.LIBRARIES</param-name>
    <param-value>/WEB-INF/testcc-taglib.xml</param-value>
  </context-param>

Test Composite Component

* Add a new folder named testcc (read test composite component) under WebContent directory
* Add a new xhtml page named testccForm.xhtml
* Add testcc namespace in order to use the new taglib: xmlns:tcc=”http://www.testcc.com/facelets”
* Use the tablib and pass in values for the two variables, i.e. testcc_id and testcc_bean:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:tr="http://myfaces.apache.org/trinidad"
	xmlns:tcc="http://www.testcc.com/facelets">
 
  Sample Form: #{testBean.title}
	<tr:form>
		<tr:messages styleClass="message" />
		<tcc:testcc testcc_id="id1" testcc_bean="#{testBean}">
		</tcc:testcc>
	</tr:form>
 
</ui:composition>

* Add a new xhtml page named testcc.xhtml and include testccForm.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/templates/template1.xhtml"
	xmlns:tr="http://myfaces.apache.org/trinidad"
	xmlns:h="http://java.sun.com/jsf/html">
 
	<ui:define name="body">
        <ui:include src="testccForm.xhtml"/>    
	</ui:define>
 
</ui:composition>

Test

* Deploy to Tomcat
* Point browser to http://localhost:8080/jsf2.myfaces2.trinidad2.one/faces/testcc/testcc.xhtml

Debug

* Add to xhtml page:

<ui:debug hotkey="p" rendered="true"></ui:debug>

* Press control p to see debug info.

References

* Apache MyFaces Trinidad 1.2 By: David Thomas
* Facelet Tools

This entry was posted in jsf. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.