jsf portlet backing beans and ui components copyright © 2000-2007 liferay, inc. all rights...
TRANSCRIPT
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><book name></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