®

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

2Last 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 ***NotesSee ***Notes

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

4Last update: 12/04/2007

Create the Initial Page – and Copy in the EGL From Project Explorer, create a

new .JSP page named: jsfButtonSelect.jspjsfButtonSelect.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.

5Last 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 Drag a Display Errors s error messages component below the dataTable

Drag the addNewRowToArrayAndDataTable (this should be named: button3), hideShowButton() and setButtonTitle() functions below the dataTable

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

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

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.