® IBM Software Group © 2006 IBM Corporation How to create Popup Pages using EGL/JSF This Learning Module shows how to utilize the RBDe tooling to create.

®

IBM Software Group

© 2006 IBM Corporation

How to create Popup Pages using EGL/JSF

This Learning Module shows how to utilize the RBDe tooling to createPopup pages. The tutorial explains how to pass parameters to and fromPopup pages, as well as create a Popup page with pure JavaScript.

2

Pop-Up Pages

It is a very common requirement to have to want to, upon some event on a page: 1. Open a Popup window, 2. Allow the user to select some value from that window and 3. Return the value to the calling (parent) window.

There are various ways of doing Pop-ups, and we’ll show you three: Using the Panel-Dialog control Using a page launched via JavaScript Opening a window in a new frame

From a “parent page” allow users to click a link that opens a “popup child page” – where users select a value that is returned to a parent page control

From a “parent page” allow users to click a link that opens a “popup child page” – where users select a value that is returned to a parent page control

Click to open a popup page

Click to return a value to the parent page

Requirements

3

Creating and Utilizing Pop-Up Pages Using the JSF Panel-Dialog Component

You can use the JSF Panel-Dialog component to create (or actually) to simulate Pop-up pages.

The Panel-Dialog: Is a component placed on your “parent” page Is initially hidden (typically) – and then rendered upon some event, which you have full

control over Uses (has access to) all of the data on your parent page Creates a pop-up page effect

Which allows you a lot of visual (U.I.) control – including:– Placement– .CSS– Etc.

Can be placed under AJAX control And can utilize your parent page’s preRender functionality

Can realize the following use cases: Show data in a pop-up Pass selected parameters back to the parent page data Be passed parameters from the parent page

– As existing values on the form– Through AJAX (preRender) functionality

Follow the steps on the next set of slides to try this simple approach to pop-up pages.

4

Creating and Utilizing Pop-Up Pages Using the JSF Panel-Dialog Component

Create a new web page called tabDialogPage.jsp

Copy/Paste the code in the notes section into the page code (There’s not really anything in the logic that should be new…so...) Save (Ctrl/S) the EGL JSFHandler code

Return to Page Designer, and from Page Data select and drag customer onto the Page – as an input record

From the Palette select and drag three submit buttons on the page as shown From each button’s Properties:

Their JSF IDs should be:– Button1– Button2– Button3

Change the Display – Button label – as shown

5

Using the JSF Panel-Dialog Component – Static Data From the Parent PageUsing the JSF Panel-Dialog Component – Static Data From the Parent Page

From the Palette select and drag a Panel – Dialog component, below the customer record. It will create a small control that looks like this

Customize the control as follows: From Page Data, drag and drop the ordersorders array on top of the new control

Select some (not all) of the Orders columns as fields (be sure to select the CustomerIDCustomerID column) With the Panel Dialog control selected, from the Properties view, specify the following:

Show the dialog by clicking: Button1Button1 Position the dialog horizontally and vertically relativerelative to: textCustomerID1textCustomerID1 From Display options, specify the MsgMsg field (from the EGL Handler) for the title bar

6

Using the JSF Panel-Dialog Component – Static Data From the Parent PageUsing the JSF Panel-Dialog Component – Static Data From the Parent Page

Run the page Click the Show Orders For This Customer submit button Wow…

However – this is only one use case scenario (Pop-ups based on static data).

Let’s check out a few other things we can do with the Panel-Dialog component

7

Using the JSF Panel-Dialog Component – Returning Data to the Parent PageUsing the JSF Panel-Dialog Component – Returning Data to the Parent Page

From the Palette select and drag another Panel – Dialog component, below the first component

Customize the control as follows: From Page Data, drag and drop the customerscustomers array on top of the new control

Select some (not all) of the customer columns as fields

With the Panel Dialog control selected, from the Properties view, specify the following: Show the dialog by clicking: Button2Button2 Position the dialog horizontally centered and vertically in the middle of the page From Display options, type in a title bar literal: Please select a customer from the list

Select the dataTable, and from its Properties: Add a Border: 1 From Display options:

Specify Alternate row colors (by deleting the ColumnClass)

From Row Actions: Add an action that’s performed when a row is clicked Submit the entire form (bottom radio button selection) From All Attributes, bind the action property to the selCust()selCust() EGL function

8


Run the page Click Select a Customer

Let’s do one more of these (like the above), then we’ll move on to the final use case

9


From the Palette select and drag another Panel – Dialog component, below the second component

Customize the control as follows: From Page Data, drag and drop the statesstates array on top of the new control

Select the StateNameStateName field Create StateName as an output control

With the Panel Dialog control selected, from the Properties view, specify the following: Show the dialog by clicking: Button3Button3 Make the Pop-up ModelessModeless Position the dialog horizontally right and vertically at the bottom of the page From Display options, type in a title bar literal: Please Select a State

Select the dataTable, and from its Properties: Add a Border: 1 Make the dataTable Width: 200 PX From Display options:

Specify Alternate row colors (by deleting the ColumnClass) Specify 400 px – as the Height of a scrollable area

From Row Actions: Add an action that’s performed when a row is clicked Submit the entire form (bottom radio button selection) From All Attributes, bind the action property to the selState()selState() EGL function

10


Run the page. Click Get State Abbreviation. Also, try moving the Pop-up window around.

Equate F4 with a button click

Note that you could:1. Select the entire form2. From Properties:

• Add an action assigned to a keystroke

11

Using the JSF Panel-Dialog Component – Using AJAX for Dynamic Content – 1 of 4Using the JSF Panel-Dialog Component – Using AJAX for Dynamic Content – 1 of 4

Note – this technique is similar to the topic: OPTIONAL WORKSHOP – Use Request From a dataTable Row-Click – previously presented in this course. If you haven’t done that workshop, you might consider doing – or at least reviewing it before starting in on this workshop.

From Page Data select and drag customers2customers2 onto the page, and create a dataTable control with some of the customer columns as fields From the Palette drag a hidden input field into the customerId column

From Properties - name the field: custH … as the JSF Id From Properties - name the field: custH … as the JSF Id Bind its value to: the CustomerID column in the customers2 arrayBind its value to: the CustomerID column in the customers2 array

– You can see a picture of ths, on the next slideYou can see a picture of ths, on the next slide

From the Palette select and drag another Panel – Dialog component, below the third component (or really, anywhere on the page)

Customize the control as follows: From Page Data, drag and drop the orders2orders2 array on top of the new control

Select some of the fields

With the Panel Dialog control selected, from the Properties view, specify the following: DO NOT SELECT A FIELD TO SHOW THE DIALOG (we’ll use AJAX for that) Position the dialog relative to: textCustomerId3 From Display options, type in a title bar literal: Orders For Selected CustomerOrders For Selected Customer

Select the orders2 dataTable, and from its Properties: Add a Border: 1 From Display options:

Specify Alternate row colors (by deleting the ColumnClass)

12


Select the dataTable’s CustomerID column. Then double-click an Enhanced Faces Link component. Do not specify a URL

With the Link component selected – from Quick Edit Select the onclick event Check Use pre-defined behavior. Select Multiple Actions – and define two actions:

Invoke Ajax behavior on dialog4 Show the specified tag dialog4

See Slide Notes: For an explanation ofwhat’s happening behind the scenes

13


Select the dialog4 (Panel-Dialog you just added to the page). From its Properties Select the Ajax sub property Check: Allow Ajax updates and Type of update: Refresh Click the Click to edit Ajax request properties icon Click Add Parameter – and add the following string: $$AJAXROW$$$AJAXROW$

$form1:tableEx4:custH$form1:tableEx4:custH

See Slide Notes

14


Run the page.

Click one of the

rows in the dataTable (for a customer with orders)

15

Creating and Utilizing Pop-Up Pages (JavaScript) – 1 of 4 Create a new web page called parentPage.jsp

Copy/Paste the code in the notes section into the page code (There’s not really anything in the logic that should be new…so...) Save (Ctrl/S) the EGL JSFHandler code

Return to Page Designer, and from Page Data, select and drag rec onto the Page

Create inputField as an “input field” Create outPutField as an “output field” Customize the Submit Button (Options…) as shown in the

screen capture

From the \WebContent\images\ directory Drag: popupPage.jpg onto the field

From Page Data, select and drag the moveValue() function on top of the Submit Button to bind it

Your page should look something like this

No need to fret over getting the U.I. exact. What’s important in this workshop is coming up on the next slide…

16

Create a Popup JavaScript Function – 2 of 4 Select the popupPage imageimage in Page Designer, and from QuickEdit, select the

onclick event. Add the following JavaScript statement:

my_window = window.open('http://localhost:9080/EGLWeb/faces/childPage.jsp',"myWin",'scrollbars=no,width=190,height=385,top=20,left=550');

Let’s dissect this – as you may have to modify it my_window=window.open declare a JavaScript variable for a command that opens a new browser (“window”) http://localhost: m omput rc e 9080 The port on my computer WebSphere is listening on, for TCP/IP commands.

NOTENOTE – this value must match the URL you see when you run your pages. If your port is: 9081 – make this # 9081. If you’re running Tomcat, make this # Tomcat’s Port (typically, 8080)

EGLWeb/faces/ my project’s root directory in WebSphere, and the /faces/ subdirectory where WebSphere finds the faces “listener program” childPage.jsp The popup page you’re about to create “myWin” a variable for the window name – that you can refer to (say if you want to close the popup page, from the parent page!) Scrollbars=no Don’t add scrollbars to the popup window (you can change this if you want to see what it does) Width how wide to make the popup window in the browser Height how tall to make the popup window in the browser Top how far down (in pixels) from the top of the screen to position the top left corner of the popup window Left how far to the right (in pixels) to position the left border of the popup window

17

Creating and Utilizing Pop-Up Pages – 3 of 4 Now Create a new web page called

childPage.jsp Copy/Paste the EGL code in this slide’s

Notes into the JSFHandler Save (Ctrl/S)

From Page Designer. Drag the customer array onto the page

Specify as (read-only) Select only the “FirstName” and “LastName”

columns to display.

In the dataTable - Select the LastName field From Enhanced Faces Components

- Double click on a link Specify the following URL:

parentPage.faces

18

Creating and Utilizing Pop-Up Pages – 4 of 4 With the LastName field (and the link) still selected, click the QuickEdit tab

Select the “onclick” event and add the code in the notes to the text area

This JavaScript basically:1. Defines a variable for the browser type, as different browsers have different interpretations of JavaScript2. Defines a variable for the selected row’s LastName value (conditionally, based on browser type)3. Returns this value to the “window that opened me” – and it’s textInputField1 JSF variable. Note

that this is the fully-qualified name (“form1:textinputField1”) JSF id of the input field

19

Creating and Utilizing Pop-Up Pages – Run ParentPage

20

(OPTIONAL) Modal Pop-Up Pages

You can modify the previous example to make the child page modal (meaning the user MUST close the pop-up, before continuing to work from the parent page) by doing the following:1. (from within the source of parentPage.jsp) find the function that invokes the childPage and:

Copy/paste the line current line that invokes the child page then comment out the original In the new line, change: window.open window.showModalDialog Add a line to value: textInputField1 with the returned value from the popup

2. (from within the source code of childPage.jsp) – find the function that returns, and: Comment out the existing return line

Add the two lines shown here

3. From Page Designer, select the link, and remove the URL Property4. Run the page on the server, and test the Modal Popup4. Run the page on the server, and test the Modal Popup

21

(Optional Lab) Another Popup Page Scenario

In your real life projects, you may need to pass parameters to pop-up pages.

In this example, you will do just that, using a session variable.

The steps begin on the next slide

In your real life projects, you may need to pass parameters to pop-up pages.

In this example, you will do just that, using a session variable.

The steps begin on the next slide

1. Click

a row a

nd pass

an Order

Amount v

alue to…

2. A popup page that opens showing all Orders greater than the value passed

from the clicked row in the parent page

3. Click a row in the popup page, and return a selected value to the parent page

22

1. Create a New Parent Page

Let’s create the pages you saw on the previous slide. In this example, you will pass parameters from a parent to a popup page using a session variable.

Create a new web page called parentPage2.jsp

Change the default header text. Here is an example of what you might want to say about the pages functionality

23

2. parentPage JSFHandler Code

Copy the code in the Notes section of the slide, and replace the boilerplate JSF Handler code. Note the following: The onConstructiononConstruction()() function

populates the ordersorders array. The getCustForOrderFuncgetCustForOrderFunc()

utilizes JSF Component tree API calls to determine which row of the data table you clicked. You add 1 to the row index since

Java arrays are 0 based. You then set a session variable to

be identified by “oamtoamt.” This session variable holds the

clicked row’s OrderAmount value The page is then forwarded to

“childPage2” which we will be creating shortly. childPage2 will open in a new

(popup) window

Save (Ctrl/SCtrl/S) your code

24

3. Design the Page

Drag the orders item onto the page. Display an existing record (read-

only) Columns to display (only check

these columns)– OrderIdOrderId– CustomerIdCustomerId– OrderAmountOrderAmount– OrderDateOrderDate

Drag the custName item onto the page underneath the orders array. From Options… do not add submit or

delete buttons to the page

Your page should look like this

25

3. Add Row Action Event to the Page

Select the dataTable in it’s entirety (click any column in the dataTable, then press the up arrow key twice). Then…

1. Go to the PropertiesProperties tab, select “Row actions.”2. Click: Add an action that’s performed when a row is clicked3. In the small configure window that pop’s up, select:

Clicking the row submits the form to the server. Parameters have to be set manually. Click: OK

1.1.

2.2.

3.3.

26

3. Finish the parentPage U.I. Development

A new column should now appear in the dataTable: Drag the getCustForOrderFunc()getCustForOrderFunc() onto the “chain link” located in the newly created

column.

We must now add functionality in order to get a pop-up page: Click anywhere in the form (the dotted line box most likely surrounding the dataTable and

custNamecustName input field) Select the Properties/All AttributesProperties/All Attributes tab. Find the targettarget attribute, and select: New WindowNew Window All Attributes

27

1. Create a new page Create a new Web Page and call it

childPage2.jsp

Add the header text seen in this image

Let’s examine the page This page contains a dataTable with two

columns. The Last_NameLast_Name column is a link which fires

a small piece of javascript code.

28

2. JSFHandler Code Copy the code in the Notes

section of the slide, and replace the boilerplate JSF Handler code.

Note the following: The onConstruction()

function retrieves the session variable passed to it by the parent page.

It then populates the custOrders array with a custom sql statement which retrieves the Last_name and Order_Amount for rows where:

Orders.Order_Amount Orders.Order_Amount > :ordAmt> :ordAmt

ordAmt is the value passed in from the parentPage

The statement then displays the rows returned in descending Order_Amount, within ascending Last_Name

SQL question Why order by 1, 3order by 1, 3

29

3. Design the Page Drag the custOrders item onto the page

Display an existing record (read-only) Columns to display: (only check these columns)

– Last_Name– Order_Amount

Select the Last_Name variable on the page From the Enhanced Faces Components drawer, double-click a

Do NOT specify a URL for this link

With the link and Last_Name variable selected Go to the QuickEdit tab Select “onclickonclick” Add the code in the notes section as shown below.

30

Run On Server

Run parentPage2 on Server. Notice you can click any row in the parent page The child page pops up displaying only rows with Order_Amount >= to the one you clicked. Clicking a Last_name closes the pop-up, and populates the CustName field on

parentPage2.

® IBM Software Group © 2006 IBM Corporation How to create Popup Pages using EGL/JSF This Learning Module shows how to utilize the RBDe tooling to create.

Documents

parent page data

parent page control

panel dialog component

paneldialog control

panel dialog control

parent page requirements

paneldialog component

page designer