JSF Portlet Backing Beans and UI Components - PowerPoint PPT Presentation

sandra_john
jsf portlet backing beans and ui components l.
Skip this Video
Loading SlideShow in 5 Seconds..
JSF Portlet Backing Beans and UI Components PowerPoint Presentation
Download Presentation
JSF Portlet Backing Beans and UI Components

play fullscreen
1 / 23
Download Presentation
JSF Portlet Backing Beans and UI Components
326 Views
Download Presentation

JSF Portlet Backing Beans and UI Components

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