Previous Next vertical dots separating previous/next from contents/index/pdf

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.

The tasks in this step are:

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.

  1. On the Page Flow Editor tab, click on the getCustomers action icon to center the node.
  2. 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 pageInput implicit 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.
                    actionOutputs = { @Jpf.ActionOutput(  name="getCustomersResult", type = model.Customer[].class) }
        public Forward getCustomers() {
    A page input declares the data type that a JSP page expects to receive. The following JSP tag is declaring that it expects Customer[] data from the pageInput.getCustomerResult implicit object.
        <netui-data:declarePageInput name="getCustomersResult" type="model.Customer[]" required="true" />
    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.
  3. 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.

  1. On the Page Flow Editor tab, right-click customers.jsp and select Open to open its source code.
  2. 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.

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

  4. On the Data Grid dialog, click the Columns tab.

  5. Reorder the columns listed to match the following sequence:
       First Name
       Last Name
       Company Name

  6. 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.
  7. 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.)

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

  9. 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.

  10. In the Display Text field, enter Edit.

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

  12. 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.

  13. 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.
  14. On the Data Grid dialog, click the Parameters tab.

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

  16. Select the id property and click OK.

  17. On the Data Grid dialog, click OK.

  18. Press Ctrl-Shift-S to save your work.

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

	<netui-data:dataGrid name="getCustomersResultGrid"
		<netui-data:configurePager disableDefaultPager="true" />
			<netui-data:headerCell headerText="Edit" />
			<netui-data:headerCell headerText="Id" />
			<netui-data:headerCell headerText="First Name" />
			<netui-data:headerCell headerText="Last Name" />
			<netui-data:headerCell headerText="Company Name" />
			<netui-data:headerCell headerText="City" />
			<netui-data:headerCell headerText="State" />
			<netui-data:headerCell headerText="Zip" />
			<netui-data:headerCell headerText="Phone" />
			<netui-data:headerCell headerText="Email" />
			<netui-data:anchorCell value="Edit" action="getCustomerById">
				<netui:parameter name="id" value="${}" />
			<netui-data:spanCell value="${}">
			<netui-data:spanCell value="${container.item.firstName}">
			<netui-data:spanCell value="${container.item.lastName}">
			<netui-data:spanCell value="${container.item.companyName}">
			<netui-data:spanCell value="${}">
			<netui-data:spanCell value="${container.item.state}">
			<netui-data:spanCell value="${}">
			<netui-data:spanCell value="${}">
			<netui-data:spanCell value="${}">

To Run the Page Flow

  1. On the Page Flow Explorer tab, click the server icon to deploy and run the Page Flow.

  2. In the Run on Server dialog, confirm that BEA WebLogic v10.0 Server is selected, and click Finish.

    Wait a minute for the server to start and the EAR to deploy.
    You will see a browser tab appear, displaying a grid of customer data.
  3. Close the browser tab for http://localhost:7001/customerCare/customerManagement/CustomerManagementController.jpf.

Click one of the following arrows to navigate through the tutorial:


Skip navigation bar   Back to Top