JSF Portlet Backing Beans and UI Components Copyright © 2000-2007 Liferay, Inc. All Rights...

JSF PortletBacking Beans and UI Components

Copyright © 2000-2007 Liferay, Inc.

All Rights Reserved.No material may be reproduced electronically or in print without written

permission from Liferay, Inc.

Objective

1. Add JSF UI Components– index.jsp

2. Register & create the Backing Bean with JSF– faces-config.xml

3. Bind Backing Bean Property to UI Component– index.jsp

Key Concepts

UI Component– A Stateful object, maintained on the server, that

provides functionality for interacting with an end user.– UI components are JavaBeans with properties,

methods, and events.– Organized into a view, which is a tree of components

usually displayed as a page.

Backing Bean– Specialized JavaBeans that collect values from UI

components and implement event listener methods.

Add JSF UI Components

Modify …/ext/portlets/library_jsf.war/index.jsp and add some UI components.

index.jsp<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view> <h1> <h:outputText value="Simple JSF Portlet" /> </h1>

<h3> <h:outputText value="Add a book entry to the library:" /> </h3>

<h:form><br/><h:outputText value="Book Title:" /><h:inputText id="bookTitle" /><br/><br/>

</h:form>

</f:view>

Deploy the Files to Tomcat

• Open up a cmd prompt

– Click “Start”, “Run” and then type “cmd”

• Navigate to your ext\portlets directory and then type “ant compile deploy”

• …\ext\portlets>ant compile deploy

• From your browser, Click Home A1 or use CTRL-F5 to reload the portlet

Register your Backing Bean with JSF

Create …/ext/portlets/library_jsf_portlet.war/WEB-INF/faces-config.xml.

This file is used to store all of your JSF configuration information:

faces-config.xml<?xml version="1.0"?><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD

JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config xmlns="http://java.sun.com/JSF/Configuration"><managed-bean>

<managed-bean-name>book</managed-bean-name><managed-bean-

class>com.ext.portlet.library.ui.BookBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>

</managed-bean></faces-config>

Create your Backing Bean

In …/ext/portlets/library_jsf_portlet.war/WEB-INF/src, use Eclipse to create com.ext.portlet.library.ui.BookBean:

BookBean.javapackage com.ext.portlet.library.ui;

import java.util.ArrayList;import java.util.List;

import javax.faces.application.FacesMessage;import javax.faces.context.FacesContext;import javax.faces.event.ActionEvent;

public class BookBean {public String getTitle() {

return _title;}

public void setTitle(String title) {_title = title;

}

private String _title;}

Initialize Values

Modify faces-config.xml.

This will initialize BookBean.title every time it is created (per request):

faces-config.xml<?xml version="1.0"?><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer

Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config xmlns="http://java.sun.com/JSF/Configuration"><managed-bean>

<managed-bean-name>book</managed-bean-name><managed-bean-class>com.ext.portlet.library.ui.BookBean</

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

<property-name>title</property-name><value>&lt;book name&gt;</value>

</managed-property></managed-bean>

</faces-config>

Bind Backing Bean Property to UI Component

Modify index.jsp.

Adding value=“#{book.title}” binds the title property of the book bean to this input field.

index.jsp<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view> <h1> <h:outputText value="Simple JSF Portlet" /> </h1>

<h3> <h:outputText value="Add a book entry to the library:" /> </h3>

<h:form><br/><h:outputText value="Book Title:" /><h:inputText id="bookTitle" value="#{book.title}"/><br/><br/>

</h:form>

</f:view>

Deploy the Files to Tomcat

• Open up a cmd prompt

– Click “Start”, “Run” and then type “cmd”

• Navigate to your ext\portlets directory and then type “ant compile deploy”

• …\ext\portlets>ant compile deploy

• From your browser, Click Home A1 or use CTRL-F5 to reload the portlet

Create Command Button

Modify index.jsp and add a command button.

We will be using this button in a later exercise to add books to the database:

index.jsp<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view> <h1> <h:outputText value="Simple JSF Portlet" /> </h1>

<h3> <h:outputText value="Add a book entry to the library:" /> </h3>

<h:form><br/><h:outputText value="Book Title:" /><h:inputText id="bookTitle" value="#{book.title}"/><br/><br/>

<h:commandButton value="Add Book" /></h:form>

</f:view>

Register Simple Action Listener

Modify index.jsp.

Bind the BookBean.addBook() to the command button’s actionListener.

When the form is submitted JSF will generate an action event that will invoke this actionListener:

index.jsp<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view> <h1> <h:outputText value="Simple JSF Portlet" /> </h1>

<h3> <h:outputText value="Add a book entry to the library:" /> </h3>

<h:form><br/><h:outputText value="Book Title:" /><h:inputText id="bookTitle" value="#{book.title}"/><br/><br/>

<h:commandButton value="Add Book" actionListener="#{book.addBook}" /></h:form>

</f:view>

Handle Action Event

Modify BookBean.java.

Add the addBook() to handle the action event generated by the commandButton. The event handler will clear the title field when it is invoked:

BookBean.javapackage com.ext.portlet.library.ui;

import java.util.ArrayList;import java.util.List;

import javax.faces.application.FacesMessage;import javax.faces.context.FacesContext;import javax.faces.event.ActionEvent;

public class BookBean {public String getTitle() {

return _title;}

public void setTitle(String title) {_title = title;

}

public void addBook(ActionEvent actionEvent) {// clear the titlesetTitle("");

}

private String _title;}

Deploy the Files to Tomcat

• Compile and redeploy, restart Tomcat and refresh browser.

• Verify that the input field is being cleared after you submit the form.

Revision HistoryJames Min 01/17/2007

Ivan Cheung 01/30/2007