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.

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

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

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 book com.ext.portlet.library.ui.BookBean request

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 book com.ext.portlet.library.ui.BookBean request title <book name>

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

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

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

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 Min01/17/2007 Ivan Cheung01/30/2007