icefaces facelets integration -...

ICEfaces Facelets Integration

ICESOFT TECHNOLOGIES INC. www.icefaces.org

Problems With JSP

• Many of the features of JSF are designed to be pluggable/extendable, such as the “View Handler”

• The default View Hander for JSF is designed for JavaServer Pages™ (JSP)

• JSP is somewhat of a technology mismatch with JSF which places some limitations on developers


places some limitations on developers

Limitations With JSP

• The original design decision made by the JSR-127 EG was to use JSP pages that contain XML syntax, for example:

<?xml version="1.0" encoding="UTF-8"?><jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"


xmlns:jsp="http://java.sun.com/JSP/Page"><jsp:directive.page contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"/><f:view>

<h:outputText value="Hello World" /></f:view>

</jsp:root>

Limitations With JSP (Cont.)

• Using JSP in this manner made it difficult to mix JSF component markup with HTML. The Sun JSF 1.2 RI has made it easier, but with JSF 1.1, there is no guarantee that the <br /> tag in the following code is going to end up in the same location:

<?xml version="1.0" encoding="UTF-8"?>



xmlns:h="http://java.sun.com/jsf/html"xmlns:jsp="http://java.sun.com/JSP/Page"><jsp:directive.page contentType="text/html;charset=UTF-8"


<h:outputText value="Hello" /><br /><h:outputText value="World" />

</f:view></jsp:root>

Limitations With JSP (Cont.)

• The workaround for this in JSF 1.1 is to surround HTML mark-up with the f:verbatim tag:


xmlns:h="http://java.sun.com/jsf/html"xmlns:jsp="http://java.sun.com/JSP/Page"><jsp:directive.page contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"/>



<h:outputText value="Hello" /><f:verbatim><br /></f:verbatim><h:outputText value="World" />

</f:view></jsp:root>

Facelets to the Rescue!

• Forcing XML-style JSP conventions was generally not well received by developers

• Inspired by an article by Hans Bergsten in June of 2004, Jacob Hookom, an independent software developer living in Eden Prairie, MN undertook the task of creating Facelets

• Facelets is an alternative View Handler to JSP that removes


• Facelets is an alternative View Handler to JSP that removes the limitations of JSP and provides powerful templating and composite component features

Compare Facelets to JSP

• The following Facelets XHTML markup is equivalent to the JSP markup from the previous slide:

<?xml version="1.0" encoding="UTF-8"?><f:view xmlns:f="http://java.sun.com/jsf/core">

<span>Hello</span><br /><span>World</span></f:view>


Facelets: Features

• Entirely removes JSP from JSF

• XHTML documents instead of JSP

• Uses SAX XML parser to parse XHTML instead of Jasper JSP Compiler– When compared to JSP/Jasper:

• Facelets view compiler creates a lighter-weight JSF component tree


• Facelets view compiler creates a lighter-weight JSF component tree

• Approximately 30% faster at parsing and compiling pages

• HTML elements become first-class JSF components

• Templating feature created specifically for JSF

• Composite Components

Facelets: Features (Cont.)

• Enhanced error reporting during development• Live development of JSF views• JSF EL value bindings can exist anywhere on the page

– Bean values can be placed in a page without using JSF component binding

• New tag library with a handful of components:– <ui:include />– <ui:composition />– <ui:define />


– <ui:define />– <ui:decorate />– <ui:repeat />

• Dynamic Includes– Dynamically insert and remove components from the component tree using

<ui:include src=”#{myBean.faceletFileName}” />– Can reduces memory overhead of large component trees

Facelets: The Future of JSF

• Facelets will become the premier view handler technology for JSF 2.0– JSP support in JSF could possibly be deprecated or dropped

• Many new composite component features

• The best of Ken Paulsen’s JSF Templating will be incorporated into Facelets


incorporated into Facelets

ICEfaces + Facelets Configuration

• Register D2DFaceletViewHander in faces-config.xml

• Register optional facelets.DEVELOPMENT in web.xml

• Additional Required Libraries:– icefaces-facelets.jar

– el-api.jar (Tomcat 5.5 only)

– el-ri.jar (Tomcat 5.5 only)


– el-ri.jar (Tomcat 5.5 only)

• Register javax.faces.DEFAULT_SUFFIX as .xhtml in web.xml

IDE Support

• In the past, IDE support for Facelets has been weak

• Today, MyEclipse 6.5 has full support for Facelets– Auto-complete in text editor

– JSF components available on a palette

– Design time view

• JBoss IDE (Eclipse) has full support for Facelets– Note that ICEfaces plugin is not available for JBoss IDE

• NetBeans 6.1 has improved support for Facelets– Auto-complete in text editor


– Auto-complete in text editor

– JSF components not available on a palette– No design time view

• Eclipse 3.3 (Europa) and 3.4 (Ganymede) have limited support for Facelets– No auto-complete in text editor (3.3)

– JSF components available on a palette– Properties view shows possible attribute names and values

– Design time view available with Web Page Editor

• Sometimes IDEs can be tricked into supporting Facelets by using .jspx file extensions with <jsp:root jsfc=“f:view”> inside the file

Facelets is Not JSP

• Cannot use JSP taglib, so need to remove these tags:– <jsp:root/>

– <jsp:directive.include…/>

– <jsp:output…/>

– <jsp:directive.content…/>

• JSP tags will be ignored and passed through to the browser


• JSP tags will be ignored and passed through to the browser

• You can however use a subset of JSTL tags with Facelets, including:– <c:forEach… />

– <c:if… />

– <c:catch… /> - exception handling

ICEfaces and Facelets

• In a standard JSF web application, Facelets is provided in the jsf-facelets.jar file

• ICEfaces ships with a file named icefaces-facelets.jarwhich fixes a few bugs that interfere with the integration of ICEfaces and Facelets


Facelets: Templating

• Provides an intuitive mechanism for defining logical areas of the page

• Can be used to separate layout from data input/output

• Logical areas of a page are defined using a <ui:include name=”” />

• Default content can be added as child elements to a


• Default content can be added as child elements to a defined <ui:include/>

• JSF pages that implement a template define the named include areas

• If a named insert is not implemented then the default values will be rendered

Facelets: Templating (Cont.)

• Terms:– Template: page used as a layout controller

– Template-client: page that uses a template to layout it’s own content

• URL is directed to template-client

• Template-client declares which template to use


• Template-client declares which template to use

• Template-client defines the content to be used by the template with <ui:define/>– Path references in templates are resolved from the path location of

the template-client

Facelets: Composite Components

• The JSF spec requires components to be written as Java classes

• Facelets addresses the developer's need for creating reusable JSF components that are composed with a combination of HTML and JSF markup

– Allows for the reuse and naming of a collection of other components

– Defined with XHTML markup, so there is no Java classes or renderer to write!


write!

• Composite components are essentially templates which have been associated with a custom tag library

• Referencing composite components in other JSF views is as simple as importing the namespace

Facelets: Composite Components (Cont.)

• Consider the following markup, which is extremely verbose:<h:column>

<f:facet name="header">

<h:outputText value="#{Msgs.title}" />

</f:facet>

<h:outputText value="#{book.title}" />

</h:column>


</h:column>

• With many columns in a table, the XHTML page becomes unnecessarily large

• Wouldn't it be nice too somehow encapsulate this code for reuse? With facelets, we can!

Facelets: Composite Components (Cont.)

• Question: How can we turn this:<h:column>

<f:facet name="header">

<h:outputText value="#{Msgs.title}" />

</f:facet>

<h:outputText value="#{book.title}" />

</h:column>


</h:column>

• Into one line of code, like this?

<my:column columnTitle="#{Msgs.title}"

columnvalue="#{book.title}">

• Answer: create a facelets tag library and zip it up into a .jar file

Facelets Templating


Overview

• The goal of this example is to demonstrate the Facelets templating feature

• The following Facelets tags will be used to build a simple, reusable template:

– ui:composition

– ui:decorate

– ui:define


– ui:define

– ui:include

Step 1: Creation of Templates

• Templates and JSP fragments are usually stored in a the protected WEB-INF folder to avoid accidental loading.

• Create the following folder structure in the jobApplication or another icefaces ready project:

web/WEB-INF/includes/templates

web/WEB-INF/includes/content


web/WEB-INF/includes/content

web/css/

Copy the content from the respective starter directories and copy faceletsTemplate.xhtml to the web folder:

Step 2: page-general.jsp Template

• The main template page-general.xhtml defines four <ui:insert /> tags:

– pageTitle, contentHeader, contentBody, and contentFooter.

• The template page in this case is mostly simple HTML and CSS.


• The footerContent ui:insert contains a <ui:include /> which points to common code we will use through out the fictional site.

Step 3: *menu-layout.jsp Templates

• The templates folder also contains a left-menu-layout.xhtml and right-menu-layout.xhtml templates.

• These templates define two <ui:insert /> menuContent and contentContainer

• Each template uses slightly different HTML and CSS layout code to change the placement of the menuContent.


Step 4: Using the templates

• Templates can be used either with the <ui:composition /> or <ui:decorate />

• Does anyone remember the subtle difference between the two tags?

• Lets run the application and view the faceletsTemplate.iface page.


• Toggle the <ui:decorate /> templates values to see how easy it is to apply a new template.

– template="/WEB-INF/includes/templates/left-menu-layout.xhtml"

– template="/WEB-INF/includes/templates/right-menu-layout.xhtml"

Step 5: Create Stateful Bean

• We need a new model bean to store the users current templates• Create a new Java class:

training.jobapplication.bean.model.TemplateState

• Add the following properties:

public static final String LEFT_MENU_LAYOUT = "left-menu-layout.xhtml";public static final String RIGHT_MENU_LAYOUT = "right-menu-layout.xhtml";private String currentState;


• Generate none static getters/setters for each property• Add the following constructor:

public TemplateState(){

currentState = LEFT_MENU_LAYOUT;

}

Step 6: Create template Support Bean

• Create a new Java class:training.jobapplication.bean.support.Templates

• Add the following code:

import java.util.HashMap;import training.jobapplication.bean.model.TemplateState;

public class Templates extends HashMap<String, String> {

public Templates(){


public Templates(){put(TemplateState.LEFT_MENU_LAYOUT, TemplateState.LEFT_MENU_LAYOUT);put(TemplateState.RIGHT_MENU_LAYOUT, TemplateState.RIGHT_MENU_LAYOUT);

}}

Step 7: Define Templates and TemplateState Beans

• Open the following file in the IDE:– jobApplication/WEB-INF/faces-config.xml

• Add the following managed-bean and managed-property:<managed-bean>

<managed-bean-name>templateState</managed-bean-name><managed-bean-class>

training.jobapplication.bean.model.TemplateState</managed-bean-class><managed-bean-scope>session</managed-bean-scope>


<managed-bean-scope>session</managed-bean-scope></managed-bean>

<managed-bean><managed-bean-name>templates</managed-bean-name><managed-bean-class>

training.jobapplication.bean.support.Templates</managed-bean-class><managed-bean-scope>application</managed-bean-scope>

</managed-bean>

Step 8: Add Dynamic template path

• Open the faceletsTemplate.xhtml file in the IDE• Add the following lines to enable dynamic templates:<ui:decorate

template="/WEB-INF/includes/templates/#{templates[templateState.currentState]}">

<ui:define name="content">

Some Content... <br />

<ice:form>

<ice:selectOneRadio value="#{templateState.currentState}"

partialSubmit="true" >


partialSubmit="true" >

<f:selectItem itemValue="#{templateState.LEFT_MENU_LAYOUT}"

itemLabel="Left Layout"/>

<f:selectItem itemValue="#{templateState.RIGHT_MENU_LAYOUT}"

itemLabel="Right Layout"/>

</ice:selectOneRadio>

</ice:form>

</ui:define>

</ui:decorate>

Step 9: Run Application

• The end result of the application will look like the following:

• Use the radiobutton to toggle between the twocontent templates


content templates

Facelets Templating


Overview

• The goal of this exercise is to create a Facelets template that can be used by template clients


Step 1: Create Protected Folder

• Create a folder named facelets under the protected WEB-INF folder:

WEB-INF/facelets


Step 2: Create Template

• Create the following file with the IDE:

WEB-INF/facelets/template.xhtml

• Paste the following markup:<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"><html></html></f:view>

Step 3: Create Template (Cont.)

• Paste the following markup after the <html> tag:<head>

<title>#{title}</title>

<link rel="stylesheet" type="text/css" href="./css/template.css" />

</head>


<body>

<div class="header"><ui:insert name="header" /></div>

<div class="menu"><ui:insert name="menu" /></div>

<div class="content"><ui:insert name="content" /></div>

<div class="footer"><ui:insert name="footer" /></div>

</body>

Step 4: Create Template Client

• Create the following file with the IDE, which will serve as a template client:

web/index.xhtml

• Paste the following markup:<?xml version="1.0" encoding="UTF-8"?>

<ui:composition template="/WEB-


<ui:composition template="/WEB-INF/facelets/template.xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets">

</ui:composition>

Step 5: Create Template Client (Cont.)

• Paste the following markup after the <ui:composition> tag:<ui:param name="title" value="Applicant System" />

<ui:define name="header">Header goes here</ui:define>

<ui:define name="menu">Menu goes here</ui:define>

<ui:define name="content">Content goes here</ui:define>


here</ui:define>

<ui:define name="footer">Footer goes here</ui:define>

Step 6: Create CSS

• Create the following folder with the IDE:

web/css

• Create the following file with the IDE, which will serve as a template client:

web/css/template.css


Step 7: Create CSS (Cont.)

• Paste the following text:

.header, .footer {background-color: LightSlateGray;border: DarkGray 1px solid;clear: both;

}.menu {


.menu {width: 200px;border: DarkGray 1px solid;background-color: LightBlue;float: left;

}.content {

border: DarkGray 1px solid;position: left 200px;

}

Run Application

• Publish/deploy the project

• Visit the following URL in the browser:– http://localhost:8080/jobApplication/index.iface


Composite Componentsand Ajax Push


Overview

• The goal of this exercise is to create a Facelets composite component and to update its appearance using Ajax Push

• The composite component instance will be a vertical progress bar that indicates how many applicants have applied for a job


Step 1: Create JAR Folder Layout

• Create the following folder structure anywhere on your filesystem:

dashboard-comps/META-INF/tags

OR

•


• WEB-INF/includes/components

Step 2: Create Facelets Tag Library

• Create the following text file:dashboard-comps/META-INF/dashboard.taglib.xml

Or

WEB-INF/includes/components/dashboard.taglib.xml

• Paste the following text into the new file:<?xml version="1.0" encoding="UTF-8"?>


<!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.companyname.com/dashboard/facelets</names

pace>

</facelet-taglib>

Step 3: Define Vertical Progress Bar Tag

• Paste the following tag definitions after the namespace:

<tag>

<tag-name>verticalProgress</tag-name>

<source>tags/verticalProgress.xhtml</source>

</tag>


Step 4: Create Composite Component Files

• Create the following new text file:dashboard-comps/META-INF/tags/verticalProgress.xhtml

Or

WEB-INF/includes/components/tags/verticalProgress.xhtml

• Paste the following text into the new file:<?xml version="1.0" encoding="UTF-8"?>


<ui:composition

xmlns:ice="http://www.icesoft.com/icefaces/component"

xmlns:ui="http://java.sun.com/jsf/facelets">

</ui:composition>

Step 5: verticalProgress.xhtml

• Paste the following markup as a child of ui:composition within the verticalProgress.xhtml file:<table id="#{id}" border="#{border}" bordercolor="#{borderColor}"

cellpadding="0" cellspacing="0" class="#{styleClass}"

height="#{height}" width="#{width}">

<tr>

<td valign="bottom">


<table width="100%" height="#{progressHeight}" border="0" cellpadding="0" cellspacing="0">

<tr>

<td bgcolor="#{progressColor}"> </td>

</tr>

</table>

</td>

</tr>

</table>

Step 6: Create JAR

• Zip these artifacts up into a JAR file so that it can be used in any ICEfaces web application:– cd dashboard-comps

– jar cf ../dashboard-comps.jar META-INF

OR


OR

• Use components available in project

Step 7: Copy JAR to Project

• Find the new JAR and copy it to the WEB-INF/lib folder of your jobApplication project

• REFRESH your project in Eclipse


Step 8: Create Facelet View

• Right click on the web folder, and create a new file named dashboard.xhtml


Step 9: Paste XML Declaration

• Paste the following text fragment into the top of the newly opened dashboard.xhtml file:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Step 10: Paste View and Form

• Paste the following markup into the dashboard.xhtml file:

<f:view xmlns:f="http://java.sun.com/jsf/core"

xmlns:ice="http://www.icesoft.com/icefaces/component"

xmlns:db="http://www.companyname.com/dashboa


xmlns:db="http://www.companyname.com/dashboard/facelets">

<ice:form>

</ice:form>

</f:view>

Step 11: Paste Composite Component Usage

• Paste the following markup as a child of the ice:form tag:<db:verticalProgress id="applicantCount" border="1"

bordercolor="#000000" height=“100" width="20" progressHeight="#{applicantMonitor.progressHeight}" progressColor="#0000AA" />

<ice:commandButton actionListener="#{applicantMonitor.start}" value="Start Monitoring" />


value="Start Monitoring" />

Step 12: Create Ajax Push Model Bean

• Create the following Java class with the IDE:– training.jobapplication.bean.model.ApplicantMonitor


Step 13: Add Implementation Methods

• Paste the following code that will serve to implement the methods required by the ICEfaces renderable interface:private static final String RENDER_GROUP_NAME =

"applicantMonitor";

public ApplicantMonitor() {

SessionRenderer.addCurrentSession(RENDER_GROUP_NAME);


SessionRenderer.addCurrentSession(RENDER_GROUP_NAME);

}

Step 14: Progress Height

• Add the following property to the ApplicantMonitor model bean:

private Integer progressHeight = 0;

• Generate getters/setters accordingly

• Paste the following convenience method:


public void incrementProgressHeight(int byValue) {

this.progressHeight += byValue;

SessionRenderer.render(RENDER_GROUP_NAME);

}

Step 15: Add Action Listener

• Paste the following action listener into the ApplicantMonitor model bean:public void start(ActionEvent actionEvent) {

final ApplicantMonitor thisMonitor = this;

new Thread() {

public void run() {

for (int i = 0; i < 10; i++) {

try {


try {

thisMonitor.incrementProgressHeight(10);

Thread.sleep(1000); //sleep for 1 second

} catch (Exception e) {

e.printStackTrace();

}

}

}

}.start();

}

Step 16: Configure Managed Bean

• Open the faces-config.xml file in the IDE

• Paste the following managed bean definition:<managed-bean>

<managed-bean-name>applicantMonitor</managed-bean-name>

<managed-bean-class>training.jobapplication.bean.model.ApplicantMonitor</managed-bean-class>


<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

Run Application

• Publish/deploy the project

• Visit the following URL in the browser:– http://localhost:8080/jobApplication/dashboard.iface


icefaces facelets integration -...

Documents