Transcript Slide 1
JSF Portlet
Backing 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/WEBINF/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/webfacesconfig_1_1.dtd">
<faces-config xmlns="http://java.sun.com/JSF/Configuration">
<managed-bean>
<managed-bean-name>book</managed-bean-name>
<managed-beanclass>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/WEBINF/src, use Eclipse to create
com.ext.portlet.library.ui.BookBean:
BookBean.java
package 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-beanclass>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.java
package 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 title
setTitle("");
}
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 History
James Min
Ivan Cheung
01/17/2007
01/30/2007