1 / 23

JSF Portlet Backing Beans and UI Components

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. Add JSF UI Components index.jsp Register & create the Backing Bean with JSF

sandra_john
Download Presentation

JSF Portlet Backing Beans and UI Components

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. Objective • Add JSF UI Components • index.jsp • Register & create the Backing Bean with JSF • faces-config.xml • Bind Backing Bean Property to UI Component • index.jsp

  3. 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.

  4. Add JSF UI Components Modify …/ext/portlets/library_jsf.war/index.jsp and add some UI components.

  5. 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>

  6. 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

  7. 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:

  8. 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>

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

  10. 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; }

  11. Initialize Values Modify faces-config.xml. This will initialize BookBean.title every time it is created (per request):

  12. 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>

  13. 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.

  14. 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>

  15. 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

  16. 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:

  17. 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>

  18. 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:

  19. 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>

  20. 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:

  21. 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; }

  22. 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.

  23. Revision History James Min 01/17/2007 Ivan Cheung 01/30/2007

More Related