Facelets

From Foochal

Jump to: navigation, search

Contents

[edit]

Using Facelets

Define a pom entry: 

<dependency>
 <groupId>com.sun.facelets</groupId>
 <artifactId>jsf-facelets</artifactId>
 <version>1.1.11</version>
</dependency>

<dependency>
 <groupId>local</groupId>
 <artifactId>icefaces-facelets</artifactId>
 <version>1.5.3</version>
</dependency>

Get the icefaces-facelets.jar from the icefaces distribution and install it in your local repo. 

mvn install:install-file -Dpackaging=jar -DgroupId=local -Dversion=1.5.3 -DartifactId=icefaces-facelets -Dfile=icefaces-facelets.jar -o
[edit]

Make Facelets the ViewHandler in faces-config.xml

[edit]

With IceFaces 

<application>
 <locale-config>
  <default-locale>en</default-locale>
 </locale-config>
 <view-handler>com.icesoft.faces.facelets.D2DFaceletViewHandler</view-handler>
</application>
[edit]

Without IceFaces 

<!-- Facelets support -->
<application>
  <view-handler>org.jboss.seam.ui.facelet.SeamFaceletViewHandler</view-handler>
  <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
[edit]

View Ids

The <to-view-id> should point to the .iface paths, for example: 

<to-view-id>/showCart.iface</to-view-id>

where showCart.xhtml resides under the webapps directory.

[edit]

Configure facelets extension and tag library in web.xml 

<!-- Use Documents Saved as *.xhtml -->
<context-param>
 <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
 <param-value>.xhtml</param-value>
</context-param>

<context-param>
 <param-name>facelets.LIBRARIES</param-name>
 <param-value>/WEB-INF/facelets/tags/arcmind.taglib.xml</param-value>
</context-param>
[edit]

The taglib file 

<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
  "facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://www.arc-mind.com/jsf</namespace>
	<tag>
		<tag-name>field</tag-name>
		<source>field.xhtml</source>
	</tag>
	<tag>
		<tag-name>column</tag-name>
		<source>column.xhtml</source>
	</tag>
	<tag>
		<tag-name>columnCommand</tag-name>
		<source>columnCommand.xhtml</source>
	</tag>
</facelet-taglib>
[edit]

A reusable ui component

field.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:z="http://www.qualcomm.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:t="http://myfaces.apache.org/tomahawk">

THIS TEXT WILL BE REMOVED
<ui:composition>

	    <!--  The label is optional. Generate it if it is missing. -->
		<c:if test="${empty label}">
			<c:set var="label" value="${fieldName}" />
		</c:if>
	 
	 	<!-- The required attribute is optional, initialize it to true if not found. -->
		<c:if test="${empty required}">
			<c:set var="required" value="true" />
		</c:if>
	

		<h:panelGroup>
				<h:outputLabel id="${fieldName}Label" value="${label}" for="#{fieldName}" />			
		</h:panelGroup>

		<h:inputText id="#{fieldName}" value="#{entity[fieldName]}" 
			             required="${required}">
			  <ui:insert />
		</h:inputText>

		<!--  Display any error message that are found -->
	    <h:message id="${fieldName}Message" style="color: red; text-decoration: overline" for="#{fieldName}" />

</ui:composition>
THIS TEXT WILL BE REMOVED AS WELL

</html>
[edit]

A sample layout file

/WEB-INF/layout/layout.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:ui="http://java.sun.com/jsf/facelets">
	<head>
		<title>
			<ui:insert name="title">Default Title</ui:insert>
		</title>
		<link rel="stylesheet" type="text/css" href="./css/main.css" />
	</head>

	<body>

		<div id="header">
			<ui:insert name="header">
				<ui:include src="header.xhtml" />
			</ui:insert>
		</div>


		<div id="left">
			<ui:insert name="navigation">
				<ui:include src="navigation.xhtml" />
			</ui:insert>
		</div>


		<div id="center">
			<br />
			<span class="titleText">
				<ui:insert name="title" />
			</span>
			<hr />
			<ui:insert name="content">
				<div>
					<ui:include src="content.xhtml" />
				</div>
			</ui:insert>
		</div>

		<div id="right">
			<ui:insert name="news">
				<ui:include src="news.xhtml" />
			</ui:insert>
		</div>

		<div id="footer">
			<ui:insert name="footer">
				<ui:include src="footer.xhtml" />
			</ui:insert>
		</div>

	</body>

</html>
[edit]

A page using composition 

<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="/WEB-INF/layout/layout.xhtml">
		<ui:define name="title">Main Page</ui:define>
		<ui:define name="content">
			<div>
				<a href="listing.faces">Backend Store Management</a>
				<br />
				<a href="store.faces">Front End Store</a>
			</div>
		</ui:define>
	</ui:composition>
</html>
Retrieved from "http://wiki.foochal.org/index.php/Facelets"

Personal tools