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:
In this step you will create a new JSP and place it within the navigation scheme of your Page Flow. This JSP will be displayed when the getCustomers() action is called.
@Jpf.Forward(name = "success", path = ""
).Note:Much like a Java method, a page can declare the name
and type of data it expects to receive via the NetUI declarePageInput tag.
Page flow actions pass the expected data to the page by way of action
outputs. An
action output is added to a Forward object in the method of the action. Corresponding
action output annotations declare the name and type of the data being passed,
as shown in the following code snippet:
@Jpf.Action( ... actionOutputs = { @Jpf.ActionOutput( name="getCustomersResult", type = model.Customer[].class) } ... ) public Forward getCustomers() {
If the Action passes something other than the data expected by the page a runtime exception will be thrown.
The Page Flow Editor depicts action outputs with a small rectangular icon on the arrow representing a forward.
If the forward destination is unspecified, as in the case above, creating a new page as the destination via the Page Flow Explorer will automatically add matching page input declarations to the page.
<netui-data:declarePageInput name="getCustomersResult" type="model.Customer[]" required="true" />
If you ever need to edit the action output/page input declarations, right-click the arrow that passes between the Action and the JSP page and select Edit Action Outputs. The editor that appears allows you to edit both the action output annotations and the page input tags to ensure that they match.
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.
You have just added the following data grid to the customers.jsp page.
<netui-data:dataGrid name="getCustomersResultGrid" dataSource="pageInput.getCustomersResult"> <netui-data:configurePager disableDefaultPager="true" /> <netui-data:header> <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:header> <netui-data:rows> <netui-data:anchorCell value="Edit" action="getCustomerById"> <netui:parameter name="id" value="${container.item.id}" /> </netui-data:anchorCell> <netui-data:spanCell value="${container.item.id}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.firstName}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.lastName}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.companyName}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.city}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.state}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.zip}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.phone}"> </netui-data:spanCell> <netui-data:spanCell value="${container.item.email}"> </netui-data:spanCell> </netui-data:rows> </netui-data:dataGrid>
Click one of the following arrows to navigate through the tutorial: