® IBM Software Group © 2006 IBM Corporation Finding Out Which Submit Button Was Clicked – and Other JSF Command Button Techniques This section describes how to use JSF and EGL JSF Component Tree Interface statements to: 1. Find out which Submit Button was clicked at run-time, 2. work with JSF Submit Buttons from a U.I. Programming perspective

2 Last update: 12/04/2007 Working with JSF Submit (Command) Buttons  You may need (or just want) to do a number of U.I. programming techniques with JSF Submit Buttons, including:  Change their text or look  Hide/Show them  Obtain the JSF ID of whatever button was clicked by a user at run-time  We’ve already seen a couple of techniques for doing some of the above, but not specifically getting “which button was clicked”. So, we’ve created a JSF/EGL page for you, to show you how you can obtain that information. This workshop assumes you’ve finished prior labs in this course, and will also require you to update the externalTypes entries in the FacesContext.egl under: \EGLSource\com.ibm.egl.jsf\ See ***Notes

3 Last update: 12/04/2007 Update FacesContext.egl  From Project Explorer:  Open FacesContext.egl (assuming you don’t have any new customized externalTypes):  Select and copy all of the source in the ***Notes section of this slide  Replace the entire contents of the existing FacesContext file  Save your changes Note – the new entries specific to these programming techniques are:  getRequestParameterMap()  The externalType: Map

4 Last update: 12/04/2007 Create the Initial Page – and Copy in the EGL jsfButtonSelect.jsp  From Project Explorer, create a new.JSP page named: jsfButtonSelect.jsp  From the EGL code, select the existing code in the Notes section of this slide, and replace the existing boiler-plate   And save your code  Note the following (from reading the //comments):  Global variables of externalTypes, to access the submit (command) buttons you will place on the form in the next step  Different functions to obtain get and set the button properties  In this screen capture note that many of these functions are collapsed in the editor – so that you can see the whichButton() function  Different EGL/JSF Component Tree programming techniques. If you are not clear on these, please return to that section in this course.

5 Last update: 12/04/2007 Create the Page – 1 of 2  From Page Designer:  From Page Data, drag and drop the customers array on the page, and create the JSF dataTable shown below  With the dataTable selected:  Add two new columns (Update and Delete)  Give the dataTable a border, alternate row colors, 8-row paging  From the palette/Enhanced Faces Components  Drag a Command-Button into each of the new columns in the dataTable – note, these should be named: button1 and button2 as their JSF IDs – in order to match the expected EGL calls s  Drag a Display Errors error messages component below the dataTable  Drag the addNewRowToArrayAndDataTable (this should be named: button3), hideShowButton() and setButtonTitle() functions below the dataTable

6 Last update: 12/04/2007 Create the Page – 2 of 2  From Page Data, drag and drop the whichButton() function on top of both the Update and Delete Command-Buttons trueVal  From the All Attributes mode, select the Add A New Row button, to the dataTable, and render it compute – tied to the EGL boolean variable: trueVal  Run the page on the server, and test the functionality. If there is a problem, check to see that all of the button names match with the expected EGL JSF Component Tree references in the JSFHandler code.