Upload
eileen-cunningham
View
219
Download
0
Embed Size (px)
DESCRIPTION
3 Last update: 12/04/2007 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
Citation preview
®
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
3Last update: 12/04/2007
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
4Last update: 12/04/2007
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.
5Last update: 12/04/2007
Web Application Models
DBDB
ApplicationApplicationServerServer
ApplicationApplicationServerServerEGL ApplicationEGL Application
Process dataProcess dataAccess databaseAccess database
Call legacy systemsCall legacy systems
EGL ApplicationEGL ApplicationProcess dataProcess data
Access databaseAccess databaseCall legacy systemsCall legacy systems
HTML +CSS + dataHTML +CSS + data
HTTP HTTP RequestRequest
BrowserBrowserPagPagee
HTML +CSS + dataHTML +CSS + data
DBDB
JavaScriptJavaScriptBrowserBrowserPagPagee
AJAX 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!
6Last update: 12/04/2007
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).
7Last update: 12/04/2007
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
8Last update: 12/04/2007
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)
9Last update: 12/04/2007
AJAX-specific Coding in your EGL JSFHandlerThere 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.
10Last update: 12/04/2007
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 Engine
11Last update: 12/04/2007
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)
12Last update: 12/04/2007
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.
13Last update: 12/04/2007
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
14Last update: 12/04/2007
3. Design the Page – 2 of 2 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)
15Last update: 12/04/2007
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)
16Last update: 12/04/2007
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.
17Last update: 12/04/2007
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.
18Last update: 12/04/2007
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
19Last update: 12/04/2007
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
20Last update: 12/04/2007
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
21Last update: 12/04/2007
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.
22Last update: 12/04/2007
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
23Last update: 12/04/2007
3. Design the Page – Add a link and Hidden Variable to the dataTable1. (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**
24Last update: 12/04/2007
4. Create the JavaScript Event to Invoke the AJAX Engine 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)
25Last update: 12/04/2007
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
26Last update: 12/04/2007
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
27Last update: 12/04/2007
Run the Page
From the dataTable, Click: NY …or… NJ …or… CA …or… CT
28Last update: 12/04/2007
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
29Last update: 12/04/2007
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.
30Last update: 12/04/2007
3. Design the Page – 1 of 2
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: GroupGroup3. 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
31Last update: 12/04/2007
3. Design the Page – 2 of 21. Drag a third Panel – Group Box (Type Group) onto the page – below the Customers
ComboBox2. (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 fieldYour 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
32Last update: 12/04/2007
5. Create the JavaScript Event to Invoke the AJAX Engine 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';
33Last update: 12/04/2007
5. Create the JavaScript Event to Invoke the AJAX Engine 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’;
34Last update: 12/04/2007
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
35Last update: 12/04/2007
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
36Last update: 12/04/2007
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.
37Last update: 12/04/2007
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!
38Last update: 12/04/2007
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.
39Last update: 12/04/2007
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
40Last update: 12/04/2007
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
41Last update: 12/04/2007
3. Add the PanelGroup Box to the Page – 2 of 2
Here’s what your page should look like:
PanelGroup box
42Last update: 12/04/2007
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
43Last update: 12/04/2007
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
44Last update: 12/04/2007
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).
45Last update: 12/04/2007
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.
46Last update: 12/04/2007
Create AJAX dataTable Paging Functionality – 1 of 6Create 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
47Last update: 12/04/2007
Create AJAX dataTable Paging Functionality – 2 of 6
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
dataTableJSF
PanelGroupgroup1
Functions as submit buttons – with images
JSFPanelGroupgroup2
Hidden Input Control
48Last update: 12/04/2007
Create AJAX dataTable Paging Functionality – 3 of 6
For each of the Panel Groups: Select the Panel Group, and from
Properties -Ajax
Specify: Allow Ajax updates
Submit
49Last update: 12/04/2007
Create AJAX dataTable Paging Functionality – 4 of 6
For each of the Submit Buttons: Select the button, and from Quick Edit/onclick event, specify:
Use pre-defined behaviorAction: 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';
50Last update: 12/04/2007
Create AJAX dataTable Paging Functionality – 5 of 6
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
51Last update: 12/04/2007
Create AJAX dataTable Paging Functionality – 6 of 6For 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
52Last update: 12/04/2007
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
53Last update: 12/04/2007
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)
54Last update: 12/04/2007
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)
55Last update: 12/04/2007
Optional Workshop – Combining AJAX With JavaScript Events – 2 of 3 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
56Last update: 12/04/2007
Optional Workshop – Combining AJAX With JavaScript Events – 3 of 3 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)
57Last update: 12/04/2007
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
58Last update: 12/04/2007
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
59Last update: 12/04/2007
Optional Workshop – Combining AJAX With Tab Pages – 2 of 6 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
60Last update: 12/04/2007
Optional Workshop – Combining AJAX With Tab Pages – 3 of 6
(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
61Last update: 12/04/2007
Optional Workshop – Combining AJAX With Tab Pages – 4 of 6
(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
62Last update: 12/04/2007
Optional Workshop – Combining AJAX With Tab Pages – 5 of 6
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
63Last update: 12/04/2007
Optional Workshop – Combining AJAX With Tab Pages – 6 of 6
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
64Last update: 12/04/2007
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
65Last update: 12/04/2007
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
66Last update: 12/04/2007
Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 2 of 4
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
functionality2. 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 logic2. SQL logic
Return to Page Designer Return to Page Designer (working with danPage2.jsp)(working with danPage2.jsp)
67Last update: 12/04/2007
Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 3 of 4
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
68Last update: 12/04/2007
Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 4 of 4
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.
69Last update: 12/04/2007
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/