ajax-enabling your jsf components and web pages

®

IBM Software Group

© 2006 IBM Corporation

AJAX-Enabling Your JSF Components and Web Pages

This learning module covers the use of AJAX technology to enable better response and performance in your EGL/JSF Web Pages.

2Last update: 12/04/2007

Course

Course Setup Web/JSF Overview JSF Properties Deep Dive Essential JSF Components Additional JSF Components JSF dataTables Page Flow and State Management AJAX Controls and JavaScriptAJAX Controls and JavaScript JSF Component Tree and Dynamic Property Setting Web-Site Design and Template Pages Appendices

Internationalization Page Design Best Practices Additional Use Cases

Units:

JSF/EGL Web Page and Site Design JSF/EGL Web Page and Site Design and Developmentand Development


Unit Objectives

At the end of this unit, you will be able to:

Describe the concepts and functions of AJAX and JavaScript

Use different types of AJAX to make your pages respond faster

Request Refresh Submit Refresh External Refresh

Leverage JavaScript to invoke AJAX engine for creating better response web applications

Using JavaScript (*Under Construction*) Alerts Client-Side edits Pop-up pages


What are AJAX and JavaScript?

JavaScriptJavaScript is a programming language used for client-side web development. It is not related to Java, although both JavaScript and Java can trace language roots back to C.

JavaScript statements are interpreted at run-time in your PC’s browser. Some common examples of JavaScript usage include:

Opening or popping up a new window with programmatic control over the size, position and characteristics of the new window

Client-Side (browser-based) validation of web form input values Swapping (changing) images as the mouse cursor moves over them

AjaxAjax, or AJAXAJAX, is a web development technology used for creating better responding, dynamic-content web applications.

Instead of refreshing the entire page from the server on each submit, AJAX exchanges small amounts of data with the server asynchronously.

You can target specific controls with this data – so that the entire page is not reloaded (this looks and behaves LOT better to most users)

AJAX also increases the web page's interactivity/speed, and enhances its functionality, and usability – making the page respond more like a Windows client application.

AJAX is an acronym standing for Asynchronous JAvaScript and XML.


Web Application Models

DBDB

ApplicationApplicationServerServer

ApplicationApplicationServerServer

EGL ApplicationEGL ApplicationProcess dataProcess data

Access databaseAccess databaseCall legacy systemsCall legacy systems

EGL ApplicationEGL ApplicationProcess dataProcess data

Access databaseAccess databaseCall legacy systemsCall legacy systems

HTML +CSS + dataHTML +CSS + data

HTTP HTTP RequestRequest

BrowserBrowser

PagPagee

PagPagee

HTML +CSS + dataHTML +CSS + data

DBDB

JavaScriptJavaScriptBrowserBrowser

PagPagee

PagPagee

AJAX EngineAJAX EngineAJAX EngineAJAX Engine

StandardStandard

The entire pageThe entire pageis reloaded fromis reloaded fromthe server on eachthe server on eachrequestrequest

AJAXAJAX

HTTP HTTP RequestRequestSynchronous Data TransferSynchronous Data Transfer

AAsynchronous Data Transfersynchronous Data Transfer

Only this much data is sent!


AJAX Page Requests

There are three major categories of AJAX page update processing:

1. Refresh Refresh Request With Refresh Request you define individual parameters to AJAX, and only the

values in the specified parameters are sent to your JSFHandler (data transmission is minimized). Data can be returned from your JSFHandler to an area of the page defined under AJAX control (typically inside a JSF PanelGroup Box enabled for AJAX update).

2. SubmitSubmit Refresh An AJAX Submit Refresh allows you to define areas of your page under AJAX

control (like Refresh Request) but instead of sending only individual parameters to your JSFHandler, the entire form is submitted – so your JSFHandler can reference any user value on any field in the form. See Notes for additional benefits of Submit Refresh.

3. ExternalExternal Request Allows a parent page to receive external values from a child page – or, can be

used with multiple pages on the same page (example later in this section).


EGL/JSF Steps to Implementing AJAX Request Refresh Functionality

Only 2 newnew steps

1. Create a new page – with a template (been there/done that)

2. Develop the EGL JSFHandler and business logic (been there/done that too) As you did in the last section , you will call a j2eelib.function to return an AJAX request

parameter – specifically: j2eelib.getQueryParameter(…)

3. Design the Page with JSF components bound to EGL data (been there/done that). However, you will use one or more JSF Panel Group controls to organize the AJAX requested data: JSF Panel GroupJSF Panel Group – if only JSF components are being added…or… JSF JSF JSPJSP Panel embedded inside the JSF Panel Group Panel embedded inside the JSF Panel Group – if JSP + HTML tags are to be

embedded or used in the design (example later in this section)

4. Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF Panel Group component: Note that this essentially creates the JavaScript call to the AJAX engine that creates the

HTTP request to your JSFHandler

5. Enable the AJAX container for update, and create a Refresh Request on the JSF Panel Group, adding parameters for data to be sent from the AJAX engine to your JSFHandler

Perhaps a bit more detail is in order before we dive in with a workshop.

AJAX

STEPS


AJAX-specific Properties in Your JSF Pages

There are three new JSF properties you have to learn, to understand how to implement AJAX

1. AJAX Properties, for a JSF Panel Group A JSF PanelGroupPanelGroup component contains

Ajax properties. In here you can specify which kind of request you want to enable.

And you can edit the request’s properties

2. AJAX Request Properties For every request, you can define one or

more parameters that are made available to your EGL JSFHandler

Here we are specifying that the: textCustState1textCustState1 and menuStates1menuStates1 JSF components can provide a request parameter to AJAX (which will be passed into your JSFHandler through a j2eelib.call

3. JavaScript call to the AJAX engine For each component you wish to enable for

AJAX, use QuickEditQuickEdit to define an AJAX action for a given target Component.

Below we are specifying that whatever JSF component is selected in Page Designer can invoke AJAX on group1group1 (a JSF panelGroup) control)


AJAX-specific Coding in your EGL JSFHandler

There are three (somewhat) new considerations for your EGL and the AJAX requests:

1. Use of preRender() preRender() is called every time a page is requested (see notes on the difference between preRender() and

onConstruction(). AJAX logic will go in preRender().

2. J2eelib.getQueryParameter(“…”) This EGL Built-in function allows you to access the value sent in via the AJAX parameter request

3. Test for NULL value Because preRender()preRender() is executed every time a page is requested (including the initial page build) we will need

to ensure – programmatically – that we are where we think we are, in the input/output cycle.

1.2.

3.


The Big Picture – Run-Time

For Request Refresh:

User enters “CA” and triggers a JavaScript event in the browser that calls AJAX

AJAX builds an HTTP request – including the parameter value, and invokes your JSFHandler

Your JSFHandler’s preRender()preRender() function is invoked. You obtain the user-entered data (getQueryParameter referencing JSF control ID) and use the data to look-up information in the database

EGL Data is returned to AJAX which renders the response in the designated area of the page (i.e. the JSF Panel Group)

Note that a similar lifecycle exists for Submit Refresh

Let’s try a few examples

DBDB

Application ServerApplication Server

HTML +CSS + dataHTML +CSS + dataJavaScriptJavaScript

HTTP RequestHTTP RequestParameter(“CA”)Parameter(“CA”) ordersArrayordersArray

1.

2.

3.

4.

AJAX EngineAJAX EngineAJAX EngineAJAX Engine


1. Create a new Page

Here is our target page. Users can search Customer Orders for a specified state

Our page will contain an: Input field – that fires off an

AJAX request and populates the dataTable when the user clicks the Search button

A Combo-Box that does the same, but does so when the user chooses (opens the Combo-Box and selects) a state

Create a new page, named: ajaxRefreshRequest.jspajaxRefreshRequest.jsp- For now, just change the

Page heading text as shown in the screen capture. Then edit the JSFHandler (next slide)


2. JSFHandler Code Copy the code in the Notes

section of the slide, and replace the boilerplate JSFHandler code. Note the following:

The preRender() function is executed every time the page is requested (and recall that AJAX will request the page)

Because of this, we need to differentiate a user action from the initial request

Thus if(custState != null) j2eelib.getQueryParameterj2eelib.getQueryParameter()

will retrieve the data from the AJAX engine.

You specify the You specify the JSF IDJSF ID of the control for this of the control for this parameterparameter

The sub-select returns all orders – where the order.customer_ID is equal to any customer_ID where the customer state = the state returned through the AJAX Query Parameter

We will also allow users to invoke the search by selecting a state from a Combo-Box tied to the states array.


3. Design the Page – 1 of 2

The screen capture below shows the JSF design. Create it as follows:

Add an HTML table to the page: 1 Row/2 columns/Width: 100% From Page Data, Drag and drop custState into the left hand column, create an input field,

no submit buttons! From the /images/ directory, drag search_button.gif image into the left column, next to

custState ***Notes From Page Data, Drag the statesstates array into the right column From the Palette, HTML Tags drawer, Add an HTML rule below these controls



Drag a Panel – Group Box onto the page. Select Type of component: GroupGroup

From Page Data, drag ordersArray inside the top-left corner of the Panel Group Box.

Create a read-only dataTable

Ensure that all controls are Output fields

Your dataTable will be nested inside the Panel – Group Box**(notes)


4. Create the JavaScript Event to Invoke the AJAX Engine

Select the custStatecustState control. From the *Quick Edit view, select the onbluronblur event, and specify: Use pre-defined behavior Action: Invoke Ajax behavior on the specified tagTarget: group1 (this directs AJAX to render data in the Panel Group Box)

Select StateAbbrevStateAbbrev. From the *Quick Edit view, select the onchangeonchange event - specify:

Use pre-defined behavior Action: Invoke Ajax behavior on the specified tagTarget: group1 (this directs AJAX to render data in the Panel Group Box)


5. Create an AJAX Refresh Request on the Panel Group – 1 of 2 Select the panelGrouppanelGroup – note, to do this, follow these steps:

1. First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see an: h:panelGroup entry. Click it.

2. After you select h:panelGroup, you will its see sub-properties. Select: – AjaxAjax Check: Allow Ajax updates Click Refresh, then click the icon: Click to edit Ajax request properties

1.1.

2.2.


5. Create an AJAX Refresh Request on the Panel Group – 2 of 2

From the hx:ajaxRefreshRequest property: Click: Add ParameterAdd Parameter (Under Parameter values sent from the browser)

Open the Combo-Box and select: textCustState1textCustState1 Again click: Add ParameterAdd Parameter

Open the Combo-Box again, and select: menuStates1menuStates1

NoteNote – These will be the parameters AJAX sends to your JSFHandler in each request. You will retrieve each separately using a j2eelib.getQueryParameter(…) function

That’s all there is to it! You’re ready to test your first AJAX page.


Run the Page

Type an upper-case state abbreviation: NY …or… NJ …or… CA …or… CT Click SearchSearch

Note the speed with which the data is returned, and note that the top part of the page doesn’t “blink” (more specifically, the entire page does not get re-loaded) when the data is returned

When you’re satisfied with this example: Edit the JSFHandler. Comment out:Comment out: // custState = j2eelib.getQueryParameter("textCustState1"); UnUn-comment:-comment: custState = j2eelib.getQueryParameter("menuStates1");

Save your JSFHandler changes, and run the page. Search using the Combo-Box


OPTIONAL WORKSHOP – Use Request From a dataTable Row-Click

Here’s an extension to the page we’ve been working on – passing a parameter as an AJAX request from a clicked-row inside a DataTable.

This particular Use Case is a bit “oblique” but this page pattern has lots of practical applications in real-life scenarios

If you have time, try the steps starting on the next slide.

Note that this is time-consuming and the steps


2. JSFHandler Code - Modifications

We will add three new lines to the JSFHandler for this scenario 1. A new dynamic array of customer records2. The EGL getget statement to retrieve the data from the database into the array3. A new j2eelib.getQueryParameter - which accepts an AJAX request parameter named:

“StateH” and assigns it to custState (subsequently used in the SQL table look-up)

Add the statement shown below inside the boxes

Ctrl/SCtrl/S

1.

2.

3.Comment out


3. Design the Page – Add a new Column and the dataTable – 1 of 2

You will add the Customers array to the page as a read-only dataTable. To do this you will need to add a column to the existing HTML table, then place the array in the table. As of this release – dragging and dropping an array in an HTML table is a two-step procedure…

Add a new column to the HTML table Click to the left-side of Select a State Right-click and select:

Table– Add Column to Right

Add the Customers array inside the new HTML column (follow these steps):1. From Page Data, select the customers – customer[]customers – customer[] array onto the page within any line break but notnot

(yet) inside the HTML table. Example: 1.a Configure the controls as output (read-only) 1.b Select: CustomerId and State2. Select the entire dataTable - Drag and drop it into the new HTML column

1.

2.


Customers arraydataTable

3. Design the Page – Add a new Column and the dataTable – 2 of 2

When you are finished, your HTML table containing the dataTable should look like this -

New HTML table column


3. Design the Page – Add a link and Hidden Variable to the dataTable

1. (From the Palette) Customize the Enhanced Faces Components drawer (Right-click, select Customize) Find the Input – Hidden component and un-check: Hide

2. (From the Palette) Drag an Input – Hidden component into the State column of the dataTable (see screen capture). From PropertiesProperties, ensure that its

Id is StateHStateH Value Value is is Browse and from Page Data select Customers.State Customers.State

3. Select the control (the output field, not the hidden one you just added) and from the Palette Double-Click Link to add a Faces Link to the State field. Do not fill in the URL**



Select the Link next to the StateLink next to the State control. From the *Quick Edit*Quick Edit view, select the onclickonclick event, and specify:

Use pre-defined behavior Action: Invoke Ajax behavior on the specified tagTarget: group1 (this directs AJAX to render data to JSF components inside the Panel Group Box)


5. Update the Panel Group’s AJAX Refresh Request – 1 of 2 Select the panelGroup – note, to do this, follow these steps:

First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see: h:panelGroup – click this property

When you do, you will see sub-properties of the h:panelGroup. Select – AjaxAjax Check: Allow Ajax updates Click Refresh, then click the icon: Click to edit Ajax request properties


5. Create an AJAX Refresh Request on the Panel Group – 2 of 2

From the hx:ajaxRefreshRequest property:Click: Add Parameter Add Parameter – this will add a 3– this will add a 3rdrd row row

(Under Parameter values sent from the browser) Type the following (CAREFULLYCAREFULLY) directly into the new empty box:

$$AJAXROW$$form1:tableEx2:StateH$$AJAXROW$$form1:tableEx2:StateH

NotesNotes $$AJAXROW$$ - $$AJAXROW$$ - JSF/AJAX statement prefix, i.e. the “current/clicked row” of a dataTable form1:tableEx2: - form1:tableEx2: - The fully-qualified HTML name of the dataTable** StateH - StateH - A hidden variable.

- - StateH is what the getQueryParameter references:

Note also that colons : separate the three-part field name form1:tableEx2:StateHform1:tableEx2:StateH


Run the Page

From the dataTable, Click: NY …or… NJ …or… CA …or… CT


Example 2 – Dependent ComboBoxes and AJAX Submit Refresh

Here is our target page. Users can search for customers by State. And for a given customer, and find their Orders

Our page will contain an: A Combo-Box that is

populated by server-side data. The user makes a selection which fires an AJAX Submit Refresh to open:

Another Combo-Box that retrieves customers for the selected state. The users then select a customer that fires off another Submit Refresh to return all Orders for the selected customer.

Let’s begin: Create a new page, named:

ajaxSubmitRefresh.jsp- For now, just change the

page heading text as shown in the screen capture


2. JSFHandler Code Copy the code in the Notes section of

the slide, and replace the boilerplate JSFHandler code.

Note the following:1. There are two dynamic arrays for

the ComboBoxes (note their properties), and a dynamic array of orders

2.A case statement in preRender() tests a hidden variable on the form – which determines the ComboBox that was selected – and calls one of two functions that will return dynamic array rows from different tables.

3. In the CustomersCB array we are inserting a row 1 – if customers are found – this will remind users to select a customer.

The SQL statements search for: Customers from a selected

state Orders for a selected Customer

Please read all of the //comments in the JSFHandler code

Don’t forget Ctrl/SCtrl/S

1.1.

2.2.

3.3.



The screen capture below shows the JSF design. Create it as follows:1. (From Page Data) Drag StatesCB onto the page to create the Select a State: ComboBox2. Drag a Panel - Group Box on the page below Error Messages

Select: Type of component: GroupGroup

3. Drag another Panel – Group Box on the page, and drop it inside the Panel – Group Box Select: Type of component: JSP JSP (see Notes on why you’re doing this)

4. (From Page Data) Drag CustomersCB onto the page, and drop it inside the JSP Panel – Group Box to create the Customers from selected state: ComboBox

StatesCB

CustomersCB Inside a JSP Panel Group Box

Inside a Group Panel Group box

Note: We have modified the default label text for the ComboBoxes



1. Drag a third Panel – Group Box (Type Group) onto the page – below the Customers ComboBox

2. (From Page Data) Drag the orders array inside the top-left corner of the Panel Group Box. Create a read-only dataTable Ensure that the OrderAmountOrderAmount Control Type is an Output field

Your dataTable will be nested inside the Panel – Group Box

3. (From the Palette – if you have not done so already) Customize the Enhanced Faces Components drawer (Right-click, select Customize). Find the Input – Hidden component and un-check: Hide

4. (From the Palette) Drag an Input – Hidden component onto the page From Properties, ensure that its Id is: hidden1hidden1

hidden1

ordersArray Inside a Group Panel Group box



Select the StateAbbrev StateAbbrev ComboBox.

From the *Quick Edit*Quick Edit view, select the onchangeonchange event - specify:- Use pre-defined behavior - Action: Invoke Ajax behavior on the specified tag- Target: group1 (this directs AJAX to render data in the Panel Group Box)

Next we have to assign a value to the hidden field on the page

With the ComboBox still selected, add the following line of JavaScript in the Quick Edit viewdocument.getElementById("form1:hidden1").value = 'combobox1';



Select the (Customers) LastName LastName CComboBox

From the *Quick Edit*Quick Edit view, select the onchangeonchange event - specify:- Use pre-defined behavior - Action: Invoke Ajax behavior on the specified tag- Target: group2 (this directs AJAX to render data in the Panel Group Box)

Next we have to assign a value to the hidden field on the page

With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view document.getElementById(“form1::hidden1”).value = ‘combobox2’;


7. Create an AJAX Submit Refresh on the Panel Group

Select the first panelGroup on the page (the part of the page which will be updated through AJAX). To do this click the LastName comboBox From the properties view, scroll up until you see h:panelGroup When you do, you will see sub-properties of the h:panelGroup. Select – AjaxAjax

Check: Allow Ajax updates Click Submit, then click the icon: Click to edit Ajax request properties You should see Target: group1


7. Create an AJAX Submit Refresh on the Panel Group Select the panelGroup – note, to do this, follow these steps:

First select the entire dataTable. Then from PropertiesProperties (the side bar of all the page properties) you will see: h:panelGroup – click this property

When you do, you will see sub-properties of the h:panelGroup. Select – AjaxAjax Check: Allow Ajax updates Click Submit, then click the icon: Click to edit Ajax request properties You should see the following:

Repeat the above step for h:panelGroup – group1

You are now ready to test your Submit Refresh


Run the Page – Test Submit Refresh Run the page on the server. To see data, select:

New York

Filibuster Lundquist

Note that we have not done much with error-handling. For example, what would be appropriate to show users if there were no customers for a selected state? An optional workshop coming up will show you some examples for this.


EGL/JSF Steps to Implementing AJAX External Refresh Functionality

The AJAX External Refresh allows you to use the AJAX engine to load additional (child) pages inside PanelGroup boxes in an existing (parent) page. The steps to do this are shown below – and would be used to create new pages from scratch. We’ll be re-purposing existing pages (so some steps will be consolidated)

Steps for Submit1. Create a new page – with a template (been there/done that)

2. Develop the EGL JSFHandler and business logic (been there/done that too)

3. Design the Page with JSF components bound to EGL data (Yep - been there/done that).

4. Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF panelGroup component (been there/done that in the last workshop)

5. Enable AJAX for update, and create an External Request on the JSF Panel Group

Wow – less to keep track of than before. Maybe we’ve “caught a break” with this one!


1. Create a New Page …and… 2. Add JSFHandler AJAX Logic

What if you want to AJAX-ify an existing web page? Let’s give that a shot. We’ll work with the parent/child pages: allcustomers and updatecustomer – and use AJAX External Refresh to load updatecustomer into the allcustomers page.

Since the basic page design is complete, we can proceed directly to step 2.

We will not need to modify the JSFHandler for our parent page (we’ll only need to add AJAX support in the JSF controls). But we will need to add the preRender() function and call to AJAX in updatecustomer.jsp.

Load updatecustomer.egl into the Content Area. Add the logic (and modify the existing code) as shown in the three areas here:

1. Add the onPreRender= JSFHandler property2. Add the onPreRender() function – including the

j2eelib. call to AJAX engine3. Modify the existing onConstruction() logic

Save your work (Ctrl/SCtrl/S)

1.1.

2.2.

3.3.


3. Add a Hidden Variable to the dataTable

Open allcustomers.jsp, and from the palette Drag an Input – Hidden component into the LastName column of the dataTable (see screen capture). From PropertiesProperties, ensure that its

Id is cidcid Value is Value is Browse, and from Page Data select Customers.CustomerIDCustomers.CustomerID

Browse to Page Data


3. Add the PanelGroup Box to the Page 1 of 2

Next, drag an HTML Horizontal Rule onto the page below the Data TableNext, drag an HTML Horizontal Rule onto the page below the Data Table

Then, Drag and drop a JSF PanelGroup Box (Type: Group) onto the pageThen, Drag and drop a JSF PanelGroup Box (Type: Group) onto the page


3. Add the PanelGroup Box to the Page – 2 of 2

Here’s what your page should look like:

PanelGroup box


4. Create a JavaScript Event for the AJAX Component

Select the group1 PanelGroup box, and from its properties: Scroll down to the – Ajax

sub-property Check: Allow Ajax updates Click: the icon to edit the

Ajax request properties

From the hx:ajaxExternalRequest sub-property, add a new parameter – exactly as shown here

Recall the syntax of this parameter from a previous workshop.

$$AJAXROW$$form1:tableEx1:cid$$AJAXROW$$form1:tableEx1:cid$$AJAXROW$$form1:tableEx1:cid$$AJAXROW$$form1:tableEx1:cid


4. Create a JavaScript Event for the AJAX Component

Select the Link next to the LastNameLink next to the LastName control. From the *Quick Edit*Quick Edit view, select the onclickonclick event, and specify:

Use pre-defined behavior Action: Multiple actionsMultiple actions – from the popup dialog box, Insert actions as shown below:

Action: Invoke Ajax behavior on the specified tagTarget: group1 (this directs AJAX to render data in the Panel Group Box)

Action: Do nothing and stop the eventTarget: No Target


Run the Page

Click a Customer LastName – note that updatecustomer.faces is loaded below the dataTable (and note the other characteristics of AJAX enabled pages: speed, refresh)

Obviously, in a real application you would design the externally-loaded page without a template – or with an appropriate template for U.I. quality

Finally – recall that External Refresh does NOT permit updates through your web pages (it’s a technique that can only be used for read/only pages in the current release).


Optional Topic – Create AJAX dataTable Paging Functionality

You may have noticed that the JSF pager controls invoke your EGL JSFHandler through a Form/Submit. This may be okay for some functionality, but you also might want: 1. A better (AJAX-matized) user experience, and 2. more programmatic control over your paging.

Let’s try creating our own AJAX-controls paging for a dataTable, and see if you think this approach has merit. Here’s what we’re going to build (at run-time). The AJAX techniques we’ll use have already been covered in this Unit, so this should be fairly simple and straightforward to put together.


Create AJAX dataTable Paging Functionality – 1 of 6

Create a new page, named (exactly):

ajaxPaging.jsp

Edit the EGL Page Code, and from the Notes section of the slide copy the code you see here over the boiler-plate

Read the comments in the code. Note the following: firstRowfirstRow will be used to control

which row the dataTable starts displaying from in the EGL dynamic array

pagingSizepagingSize is set to 8 – but it could be user-specified (!) We leave this up to consider as an Optional /Advanced workshop.

Fwd/bkwdDisableFwd/bkwdDisable are boolean variables used to control the button click options for paging



From Page Designer: Change the boiler-plate page heading text Add a JSF Panel - Group (type Group) to the page

(From Page Data) Drag the customers array into the Panel Group box Select output (read/only) fields and the some sub-set of the columns as fields in the dataTable

Add another Panel Group (type Group) to the page (From Page Data) Select both forwarding functions under the Actions folder, and drag them into the 2nd

Panel Group Add a JSF Input – Hidden control to the page Optional – Select each of the submit buttons, and from their – Display options properties, select Image and

browse for their Normal image to find a graphic for each. Example: images/next.jpg and images/prev.jpg

Customersarrayas a

dataTable

JSFPanelGroupgroup1

Functions as submit buttons – with images

JSFPanelGroupgroup2

Hidden Input Control



For each of the Panel Groups: Select the Panel Group, and from

Properties -Ajax

Specify:

Allow Ajax updates

Submit



For each of the Submit Buttons: Select the button, and from Quick Edit/onclick event, specify:

Use pre-defined behavior

Action: Multiple actions (see screen capture below)

An additional JavaScript statement to value the hidden input field according to which button is clicked:according to which button is clicked:

document.getElementById("form1:hidden1").value = 'fwd';



Also (for each of the Submit Buttons): Select the button, and from

Properties/All Attributes specify: The disabled Attribute Value:

Compute Bind it to the appropriate EGL boolean

variable



For the dataTable - Select the entire dataTable, and from Properties/All Attributes: Give the dataTable a border: 11

Delete the columnClassescolumnClasses value

Bind firstfirst to the EGL variable: firstRowfirstRow

Bind rowsrows to the EGL variable: pagingSizepagingSize

Run the page on the server


Optional Topic – Combining Mouse-Over Color With AJAX Pages

The approach used to showing which row is “current” via a JavaScript mouse-over (see prior workshop in the dataTable section of this course), is valid when the table is populated at the time the onload event is fired. This approach does not work when AJAX is used to update the content of the table as the <body onload=…> is fired only once: when the page is loaded. AJAX requests do not trigger the body onload event.

To work-around this, we need to trigger the onLoad javascript function (on slide 257 notes section) method every time a payload is received from an AJAX request and the request has completed. The following steps assume you have added the JavaScript for mouse-over row/color (this code has been added to this slides: ***Notes for your convenience) to a .JSP page with a dataTable under AJAX control.

Steps: Remove the onload= ... from the body tag. Locate the h:panelGroup for the table tableEx1 Click on the Ajax tab under h:panelGroup Click on “edit the Ajax request properties” icon on the bottom of the page.

This will bring up the “hx:ajaxRefreshRequest” tab. Click on “Quick Edit” tab.

This will bring up methods that can be used during the lifecycle of an Ajax request. Click on “oncomplete” and type: onLoad(‘form1:tableEx1’);

Run the page on the server – and test the combined Mouse-over color + AJAX


Optional Workshop – Combining AJAX With JavaScript Events (and Mouse-Over)

You may also wish to provide dynamic AJAX-enabled server-side database access in your pages, similar to type-ahead. Here’s a working page that shows how to do the following: Users type in (case-sensitive) search arguments (one keystroke at a time), and the

page’s server-side EGL functionality does a database lookup, filtering rows dynamically. Note also the mouse-over alternate colors. And by clicking a row in the dataTable, you fill

in the Customer’s Address directions (again, using AJAX)


Optional Workshop – Combining AJAX With JavaScript Events – 1 of 3

Unusual steps:

1. Create a new page, named (precisely): ajax_customer_search.jspajax_customer_search.jsp

2. Enter source view mode, in Page Designer

3. From the Notes section of the slide copy all of the .jsp source

4. Completely replace the new page boiler-plate with your copied source from the Notes

Notes: The AJAX functionality is fired

off by onKeyUp from the first input field

The 2nd Submit Button will not render (it uses a hidden .css tag)



Edit the EGL JSFHandler: ajax_customer_search.eglajax_customer_search.egl

1. From the Notes section of the slide copy all of the .egl source

2. Completely replace the new JSFHandler’s boiler-plate with your copied source from the Notes

Note the AJAX coding technique in onPreRender()onPreRender() – following the model discussed in this section



From Project Explorer, open: stylesheet.css Using Content Assist, add the two new entries shown here

The source for these is in the Slide Notes

Run ajax_customer_search.jsp on the server Type valid state abbreviations in the input field (letter by letter) Click a row in the dataTable (and AJAX will return the Directions to the multi-line input text)


Optional Workshop – Combining AJAX With Tab Pages (To Control JSF Component Rendering)

In some large and complex pages, where you have multiple tab panels, each of which contains one or more dataTables, you may wish improve the overall page’s loading speed and performance, by using AJAX and hiding/rendering selected panel components. This workshop will show you how to create a tab page, with panels that: Hide and render dataTables programmatically (events fired when users click a panel tab) Use AJAX to improve dataTable and page U.I. performance


Optional Workshop – Combining AJAX With Tab Pages – 1 of 6

Create a new page, named (precisely): ajaxTabPage.jspajaxTabPage.jsp. . Using the screen capture and notes, add the following JSF components to the page: Customize the page’s boiler-plate heading text Add a Panels – TabbedPanels – Tabbed control. For this component,

Customize the size to be 100% of the page’s width, and 250 pixels high From Panel List, add a third bfpanel as shown below – named Tab3

Inside each panel, drag and drop a Panel – Group BoxPanel – Group Box (they will be named: group1, group2, and group 3 successively)

Below the tab control, add: Two Button – CommandButton – Command components. From the Properties view, make them: Type: Plain A hidden input control

Panel – Group Box

Plain Command Buttons andHidden Input control



Edit the your EGL page code, and replace the boiler-plate text with the code from the slide notes.

Read the comments – note that there is little new in this logic

Ctrl/SCtrl/S – save your code

Populate the dynamic arraysFrom the database

Inspect a variable (that will be bound to the Hidden Input control)And use Render/Hide to programmatically Display the dataTable for the clicked tab panel



(From Page Designer) do the following: Select a (set focus insideset focus inside a ) bfpanel – (Tab1, Tab2, Tab3 – you will do one tab at a time)

(From Page Data) – drag and drop one of the customers array variables on top of the Panel Group Box inside the tab panel

For each dataTable – (Select the entire dataTable, and from All Attributes), specify a rendered property bound to one of the boolean variables (vis1, vis2, vis3).

(From Page Data) drag and drop the whichTab variable on top of the hidden input control



(From Page Designer) do the following: Select a (set focus insideset focus inside a ) bfpanel – (Tab2, Tab3 – you will do one tab at a time)

(From Quick EditQuick Edit) – in the onenter event add the statements shown in the screen capture below:

Tab2:

Tab3:

document.getElementById('form1:hidden1').value = "tab2";document.getElementById('form1:hidden1').value = "tab2";document.getElementById('form1:button1').click();document.getElementById('form1:button1').click();

document.getElementById('form1:hidden1').value = "tab3";document.getElementById('form1:hidden1').value = "tab3";document.getElementById('form1:button2').click();document.getElementById('form1:button2').click();

See ***NotesSee ***Notes



Select a (Command ButtonCommand Button ) – (you will do one button at a time) (From Quick Edit):

– Check Use pre-defined behavior.

– From Action: select Invoke Ajax behavior on the specified tag

– For button1 – specify: Target: group2

– For button2 – specify: Target: group3



Run the page on the server Only the first dataTable will render (you can do a View Source in the HTML and see for yourself)

Click Tab2 or Tab3 There will be a slight pause – as AJAX invokes your server side logic to render the

dataTable in the clicked tab – through the onenter event


Tab Controls – Programmatically Opening a Specific Tab With JavaScript

You may have a particular U.I. requirement where you need to use JavaScript to open to a particular tab. In the example we’ll be showing a user clicks a link, that opens to a specific tab. This is a rather advanced use case, that also involves using AJAX to load areas of the page – which is why we placed it in this section of the course. The techniques involved here are: 1. AJAX-controlled dataTables within the tabs2. Invoking JavaScript to select a specific panel within the tab control3. Other JavaScript options (not really necessary for this particular example, but you might find a use for them in

the future)

Finished Page:

• Search for customers, with LastNames > :hostVar

• Select a customer from a list, and:

• Load the data dynamically for that customer

• Go to a specific panel within the tab using JavaScript


Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 1 of 4

As we did in a previous workshop, we will be giving you the complete code for the page solution (and pointers to the salient AJAX and JavaScript techniques used):

1. Create a new page named: danPage2.jsp

2. Select and copy all of the finished page source in the Notes section of this slide

3. From Page Designer, enter Source mode – then Select all of the source, and replace it with the source from the Notes

4. Save your changes

5. Edit the EGL source code for this page



From your EGL JSFHandler:1. Select and copy all of the

finished page source in the Notes section of this slide

2. Select all of the source, and replace it with the source from the Notes

3. Save your changes

4. Note the following:1. Variables for page’s

functionality

2. AJAX getQueryParameter(“$$axjaxmode”) == null … which allows you to detect if no selection was made (and your EGL was invoked), or if this is the first time into the page’s lifecycle

3. Other – standard:1. AJAX logic

2. SQL logic

Return to Page Designer Return to Page Designer (working with danPage2.jsp)(working with danPage2.jsp)



The AJAX-specific properties of this Workshop are similar to previous ones: (use of panelGroup, etc. use of a hidden-input field in the dataTable column, use of a clicked Link, etc.). However, for this clicked link, note: 1. The onclick event contains JavaScript statements to return the address of the tab control in the browser and manipulate

individual panel actions (hiding/showing/and switching).2. There are multiple AJAX Action/Targets – which is how data is loaded into two separate AJAX-controlled zones in this

page with one user-event. Note also the that panelGroup JSF IDs are fully qualified: form1:groupxform1:groupx



Run the page, and watch the JavaScript and AJAX operations and events. Note that the JavaScript will open tabs, before the server-side AJAX data operations, etc.


When to use AJAX Pages

Because of the significant improvements in response time and overall user experience, there are only a few situations where AJAX should NOT be the used: Do not use AJAX for Page Design, when:

Users may (or may not) have JavaScript enabled Users need to utilize the back button Users want to be able to book-mark pages A page is Read-Only – and has no interaction with the user except forward to another page A page is displayed once – and all the data is returned one time

– Login– Registration (unless there are several parts to the registration page/process)

Consider using AJAX for: All pages where the workflow dictates user/page interaction – in other words, any page where the

user interacts with the JSFHandler more than once All pages where a large amount of data is going to the page from the JSFHandler

– Ex. Over 20 rows in a dataTable Large complex pages

– Ex. A master/detail tab page, where you can load records into different tabs depending on the workflow process

In addition to the above, there are two incredibly well-written technical articles in DeveloperWorks that should be considered “required reading” before making the decision for/against AJAX**

http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop1/ http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop2/

ajax-enabling your jsf components and web pages

Documents