Lesson 6: Add data to the page

In this exercise, you will add data from the database included with this tutorial onto the web page that you created in the previous exercise.

About this task

This task has the following parts:

You add fields to the Page Data view, associating those fields with the web page.
You place fields from the Page Data view onto the related web page.
You add a variable (in this case, an array of records) to an EGL JSF handler, which you can think of as the code that stands behind the runtime process. The JSF handler is an example of page code because it can do any of these tasks:
- Assign data values for submission to the JSP file. Those values are ultimately displayed on the web page.
- Manipulate the data returned from the user or from a called program.
- Forward control to another JSP file.

In this lesson you will also use the EGL content assist feature, a tool that you can use to complete programming statements without having to type the entire statement.

Add a record array to the Page Data view and the JSF Handler

About this task

Procedure

If the allcustomers.jsp file is not open, open it by double-clicking it in the Enterprise Explorer view.
Find the Page Data view, which is usually at the bottom left of the workbench. You can reveal the Page Data view by using the tabs, but if you can't find it, click Window > Show View > Page Data.
Find the Palette view, which is usually at the right side of the workbench. If you cannot find that view, click Window > Show View > Basic > Palette.
In the Palette view, click the EGL drawer to open it.
Drag the New Variable icon from the Palette view to the allcustomers.jsp page in the editor.
The Create a New EGL Data Variable window opens.
Under Type Selection, click Record.
Under Record Type, click Customer.
In this way, you select the Record part on which each of the array elements will be based.
In the Enter the name of the field field, type this text:
```
customers
```
Under Array Properties, select the Array check box.
Leave the Size field blank.
Clear the Add controls to display the EGL element on the web page check box.

The Create a New EGL Data Variable window looks like this:
Click OK.
Nothing appears on the JSP where you dragged the variable. The reason is that EGL created the variable in a separate file, called the JSF Handler, which contains code to respond to events in the JSP.

An item representing the new variable appears in the Page Data view under JSF Handler > Data.
Expand JSF Handler > Data and then expand customers - Customer[].
There are 12 icons beneath customers, representing the 12 fields in this database record.

Results

The Page Data view looks like this:

Page Data view with customers array variable visible

By adding entries to the Page Data view, you have also added an array of records to the JSF handler. In the next section, you will create the related fields on the web page.

Display the data on the web page

About this task

Data that is listed in the Page Data view can be added to the web page.

Procedure

From the Page Data view, drag the customers - Customer[] array variable onto the file allcustomers.jsp, releasing it below the List of All Customers text, in the blank lines you added in the previous exercise.

The Insert List Control window opens. This window lists all of the fields in the database record. You can use this window to choose which fields to display on the page.
Under Data control to create, leave the default value, a Multi-Column Data Table.
Under Create controls for, click Displaying an existing record (read-only).

With this option selected, the data on the page is displayed in read-only output fields. If you choose Updating an existing record, the fields on the page are input fields that you are able to type into, and beneath the fields will be buttons for you to bind actions to. You'll create this type of field on another page. For our purposes, the Creating a new record option is the same as Updating an existing record except that the default buttons are different.
Under Columns to display, click the None button.
You have deselected all of the fields.
Select the check boxes next to these fields:
- CUSTOMERID
- FIRSTNAME
- LASTNAME
The Insert List Control window looks like this:
Click Finish.
A data table is created on your page with three columns for the three fields you selected in the Insert List Control window.
Save the page.

Results

The page looks like this example:
Current appearance of page

The columns in the data table have headings based on the names of the fields in the database. You can change these headings by clicking them, opening the Properties view, and changing the Value field.

The three text fields in the data table, which appear as {CUSTOMERID}, {FIRSTNAME}, and {LASTNAME}, represent the places where the database information will appear on the page.

Call a function from the EGL library

About this task

The next step is to add code to this page that calls a function in the CustomerLibrary.egl library. That function reads the data from the database and makes it available to the page.

Procedure

Right-click anywhere in the free-form area of the file allcustomers.jsp.
From the popup menu, click Edit Page Code.

The allcustomers.egl file opens in the editor. This file holds a JSF Handler part. In the next steps, you add code to this JSF Handler that retrieves data from the database and puts it on the page.
In the allcustomers.egl file, find the line customers Customer[0];

This is the line of code that defines the record variable you created to display on the page. You also need to define a record to store the success or failure code of the SQL call.
On a blank line immediately after the line customers Customer[0];, add the following code, exactly as written:
```
status StatusRec;
```
Notice the wavy red line under StatusRec, indicating that the type is not known to the handler. You need to add an import statement that tells the handler where to find the StatusRec record definition. You can do this automatically by right-clicking the blank space in the editor window and clicking Organize Imports.

The keyboard shortcut for this feature is Ctrl+Shift+O. EGL checks all files visible to it, locates the necessary information, and adds an import statement at the top of the file.

Now you have the record to be retrieved from the database and the SQL status record. The final step in adding the data to your page is to pass these two variables to the function that accesses the database. This function, named GetCustomerListAll(), was created by the Data Access Application wizard in a previous lesson.

Note the lines within braces that follow the handler declaration. These lines assign values to properties of the JSF Handler. In EGL, properties are name-value pairs that modify how a part behaves. Most types of EGL parts have one or more properties, and each kind of part can have different properties. In this case, the JSF Handler has four properties defined:

onConstructionFunction = onConstruction

The onConstructionFunction property specifies a function in the JSF Handler that runs the first time the web page (JSP) associated with the JSF Handler is displayed in a browser. In this case, the property specifies a function named onConstruction, which is created by default in the JSF Handler. You will not be working with this function in this tutorial.

onPreRenderFunction = onPreRender

The onPreRenderFunction property specifies a function in the JSF Handler that runs each time the associated JSP is displayed in the browser, including when the user refreshes the page or returns to the page after viewing another page. In this case, the property specifies a function named onConstruction, which is created by default in the JSF Handler. In the next few steps, you'll add code to this function to retrieve current data from the database each time the page loads.

view = "allcustomers.jsp"

The view property specifies the web page associated with the JSF Handler. By default, the web page and the JSF Handler have the same name, minus the file extensions.

viewRootVar = viewRoot

You use the viewRoot variable to get access to the JSF component tree. You will not use the viewRoot variable in this tutorial. For more about JSF components and the viewRoot variable, see .
Add the code to call the GetCustomerListAll() library function to the onPreRender() function. This function retrieves the customer data from the database. In this case, try using the content assist tool in the EGL editor:
1. Place the cursor on a blank line between function onPreRender() and end.
2. Type the following code:
```
cust
```
3. Press Ctrl+Spacebar.
  The code completion window opens with all of the available EGL commands and resources beginning with cust.
4. From the content assist window, select the CustomerLib library either by highlighting it with the keyboard and pressing Enter or by double-clicking it with the mouse.
  
  Now the new line of code reads CustomerLib.
5. Type a period after CustomerLib.
6. Press Ctrl+Spacebar again.
  The code completion window opens again.
7. From the code completion window, select the GetCustomerListAll(customerArray Customer[], status StatusRec) function either by highlighting it and pressing Enter or by double-clicking it with the mouse.
  Be careful not to select the function GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec).
  
  Now the new line of code reads CustomerLib.GetCustomerListAll(customerArray, status) and the customerArray argument is highlighted.
8. Change the default customerArray argument in the new line of code to the name of your record variable: customers.
9. End the line of code with a semicolon.
Finally, the new line of code reads:
```
CustomerLib.GetCustomerListAll(customers, status);
```
Also note that there is a new import statement near the top of the file that reads import eglderbydb.access.CustomerLib; This line imports the library so you do not need to write out the complete path to the library in your code and instead can refer to it directly.
The content assist added this import statement automatically. If you had not used the content assist or the Organize Imports feature to create this import statement, you would have to specify the explicit location of the library, qualifying the library name with the following names: eglderbydb.access.CustomerLib.
Save the file.

Results

The allcustomers.egl file now looks like the following example:
Code for the allcustomers.egl file

If you see any errors marked by red X symbols in the editor, make sure your code matches the code in this file: Completed allcustomers.egl file after lesson 6.

Test the page

About this task

Now the page is ready to be run on the server. Follow these steps to test it and see how the database data appears on the page.

Before proceeding, take the following precautions:

Save both the allcustomers.egl and allcustomers.jsp files if you have not already done so, then close both files.
Make sure your application server is started and synchronized.

Procedure

In the Enterprise Explorer view, right-click the EGLWeb project and then click Generate.
In the Enterprise Explorer view, right-click the allcustomers.jsp file, not the allcustomers.egl file.
From the popup menu, click Run As > Run on Server.

As in the previous lesson, the web page opens in a web browser inside the workbench. This time, the dynamic data appears on the page. If you do not see the dynamic data, click the refresh icon next to the address bar. The page looks like this:

Results

In the next lesson, you will create a detail page to show all the fields in an individual customer record.