Step 3: Create a Data Grid

In this step you will add a data grid to your application. A
data grid is a set of JSP tags that are designed to render data as an HTML table.
This is especially useful for rendering database data: the data grid renders
the database fields as columns of the table and it renders the database records
as rows of the table.

Create a JSP Page to Display the Customer List

In this step you will create a new JSP page and place it within the navigation
scheme of your Page Flow: when the getCustomers() action is called, the user
is navigated to this JSP page.

On the Page Flow Editor tab, click on the getCustomers
action icon to center the node.

Right-click on the unspecified node and select New
JSP Page.

The unspecified node means that the action getCustomers does not forward to
any specified JSP page or other action. Your page flow will compile if it
contains unspecified nodes, but, at runtime, if the getCustomers action is
ever called, an exception will be thrown. (In terms of the source code, an
unspecified node depicts an empty string in the path attribute of a Forward
object: @Jpf.Forward(name = "success", path = ""
).

Note: Data is passed from an Action to a JSP page through
the pageInputimplicit object.
An implicit object is a location within a Page Flow where you can read
and (oftentimes) write data for the purpose of passing the data around
within the Page Flow.

The pageInput implicit object is the standard
location for passing data from an Action to a JSP page.

An Action writes data to the pageInput implicit
object by declaring an action output. The following action
is declaring that it writes Customer[] data to the pageInput.getCustomerResult
implicit object.

Note that if the Action passes something other than the expected data type,
then a runtime exception will be thrown.

If you ever need to edit the properties of an action output/page input, right-click
the arrow that passes between the Action and the JSP page and select Edit
Action Output.

Right-click on the new JSP and select Rename (if necessary),
rename the JSP to customers.jsp, and press
the Enter key.

To Create a Grid to Display the Customer List

In this task, you will add a set of JSP tags (<netui-data:dataGrid>,
<netui-data:rows>, etc.) that are specially designed to render Java objects
as an HTML table.

On the Page Flow Editor tab, right-click customers.jsp
and select Open to open its source code.

On the JSP Data Palette, in the Page Inputs section,
locate the getCustomersResult icon.
Drag the getCustomersResult icon onto the source code for
customers.jsp, dropping it directly before the </netui:body>
tag.

From the Choose a wizard dialog, select Data Grid
and press OK.

On the Data Grid dialog, click the Columns
tab.

Reorder the columns listed to match the following sequence:

Id
First Name
Last Name
Company Name
City
State
Zip
Phone
Email

Click the New button and position the new column (named
Newcolumn0 by default) at the top of the list.

The next few tasks define an "Edit" link for each row of the table.
These links take you to a editing page, where you can update the fields for
a given row.

Change the Header Text of the new column from Newcolumn0
to Edit. (You can change the text by clicking
inside the cell you wish to edit.)

Set the Render As column to Text
Anchor. (This makes the text into linking text instead of
plain text.)

Set the Content Source column to Static.

By setting this dropdown to Static you are
signaling your intent to display the same content in the column for each row,
for example, a static image. When you set it to Data
you are signaling your intent to display dynamic content in the column, typically
some display text based on the data in the row, for example, the ID of the
row.

Notice that when you set the dropdown to Data,
fields appear in the lower part of the wizard to help you format the dynamic
display text. If you set the dropdown to Static,
those fields disappear.

In the Display Text field, enter Edit.

Click the New button (next to the Anchor Action
field).

On the New Action dialog, from the Action Template
dropdown list, choose Get Item for Edit Via Control.

This New Action wizard helps construct different actions for typical scenarios.
Note the different options available for creating new actions. Choosing 'Simple'
helps you set up a simple navigational action. Choosing 'Control Method Call'
helps you set up a control-calling action.

From the Control Method dropdown list, confirm that the method
getCustomerById(Integer) is selected.
Click Next.

On the New Action dialog, on the Input Mapping
page, click the Finish button.

A new action called getCustomerById is created
in the Page Flow controller file.

On the Data Grid dialog, click the Parameters
tab.

Click the Select button (on the Parameters
tab, not the Columns tab).

Select the id property and click OK.

On the Data Grid dialog, click OK.

Press Ctrl-Shift-S to save your work.

You have just added the following data grid to the customers.jsp page.