®

IBM Software Group

© 2006 IBM Corporation

Programmatically Rendering and Hiding JSF Controls

This section describes how to hide and show JSF controls programmatically, using EGL server-side logic.

2Last update: 12/04/2007

Programmatically Rendering Controls Visible/InvisibleProgrammatically Rendering Controls Visible/Invisible

An extremely common requirement for production applications is to be able to render certain controls visible in the browser (or not) based on some programmatic condition.

This is very easy to do with RBDe/EGL – as with EGL and dynamic JSF controls – you can set properties that either render or do not render the controls at the server (before creating the HTML stream sent to the browser).

Here’s how: Add a boolean variable to your JSFHandler Value the variable programmatically (based on your business logic):

False – to hide controls True – to show controls

Bind the boolean variable to control’s “rendered” property

You may use this technique to render/not-render any JSF component Input field, button, combo-box, etc A dataTable A column within a dataTable

Let’s see how it works

3Last update: 12/04/2007

Rendering Controls Lab 1 of 3 – Create the Page and JSFHandler

Create a new page, named: controlVisibility.jspcontrolVisibility.jsp – use a page template Add an HTML table to the page: 3 Rows/2 Columns. Width 100% Add the static text and JSF components as shown below in the screen capture

NOTE: An input field/submit button A Record – inside of a JSF Group box A dataTable

Copy/Paste the EGL from the Notes section of the slide, and replace the default JSFHandler with this code

4Last update: 12/04/2007

Rendering Controls Lab 2 of 3 – Add the EGL Variables to the Page

From Page Data: Drag and drop ordersRec into the top row – it will create a vertical set of fields and literals

Make the fields output controls, and do not add OrderAmount to the page From Enhanced Faces Components, drag and drop a Panel – Group Box

You will be prompted for a type. Select Type: JSPJSP Drag and drop ordersRec into the Group BoxGroup Box Make the fields output controls, and do not add OrderAmount to the page

Drag and drop the orders array into the 3rd row – where it will create a dataTable Make the fields output controls, and do not add OrderAmount to the page

Drag and Drop the two functions on to the page – where the will create Submit Buttons

5Last update: 12/04/2007

Rendering Controls Lab 3 of 3 – Render the Controls (Visible/Invisible)

Do the following to render controls for fields (and to render specific dataTable columns):1. Select the JSF control 2. From Properties / All Attributes – open the ComboBox on the right hand side of the rendered value.3. Choose Compute, and from Page Data, choose the appropriate EGL visibility variable

Use the above steps to bind the visibility variables to: In the top row, the OrderID control In the middle row, the entire JSP Group Box – Note that in order to select the JSP Group Box:

Select the entire HTML table for the Record Click the Left arrow key on your PC

In the bottom row, the OrderID column of the dataTable

Run the page on the server, and click the submit buttons to see cause and effect Note that initially the OrderID control, column and the entire Group Box is NOT displayed. This is

because an EGL boolean variable is initialized by default to false.