Step 2: Create a JSF Web Application

The tasks in this step are:

Add a Control to the Page Flow
Add a JSF Form for Submitting Search Queries
Add a JSF Page that Displays Query Results
Add a Link Back to the Search Form Page
Run the Web Application

Add a Control to the Page Flow

In this step you will add a control to the web application. The control is designed to return customer data in the form of an ArrayList of Customer objects. In a more real world scenario this control might call out to a database or a web service to retrieve the customer data. But for the sake of testing the JSF components, the control in this scenario simply returns a fixed ArrayList of Customer objects.

Select Window > Open Perspective > Page Flow. (For a description of the Page Flow perspective, see Page Flow Perspective.)
On the Page Flow Explorer tab, right-click on the Referenced Controls node and select Add Control.
In the Select Control dialog, select Existing Project Controls > CustomerControl - controls and click OK.
Click Ctrl-S to save your work.

You have just added four lines of code to the Page Flow controller class:

    import org.apache.beehive.controls.api.bean.Control;
    import controls.CustomerControl;
    
	...
    
    @Control
    private CustomerControl customerControl;

These lines declare the Customer control on the Page Flow, allowing you to call control methods.

Add a JSF Form and a NetUI Action for Submitting Search Queries

In this step you will add a JSF form (<h:form>) for submitting search queries on the customer data.

You will also add a new NetUI action (getCustomers) to the controller class. The JSF form will call this action through the form's attribute action. This action has a form bean parameter of type Customer: form beans are Java representations of HTML form data.

When a user submits data though the form, the following events occur:

A Customer object (= a form bean) is created based on the submitted data. (This is the responsibility of the JSF backing class.)
The Customer object form bean is passed to the getCustomers action. (The <h:form> tag passes the Customer object.)
The getCustomers action performs a search based on the properties of the Customer object.

On the Page Flow Explorer tab, double-click the node Pages > index.jsp to open the JSP's source code.
From the Design Palette, in the NetUI section, drag the Form icon into index.jsp's source code. Drop it directly before the </body> element.
In the Create Form wizard, to create a new action, click New.
In the New Action wizard, in the Action Template dropdown field, select Update Item Via Control.
Next to the Form Bean field, click Add.
In the Select a FormBean dialog, type Customer.
Under Matching Types, select Customer - businessObjects.
Click OK.
In the New Action dialog, click Next.
In the New Action dialog click Finish.
In the Create Form dialog click Next.
Confirm that all fields are checked.
Click Next.
In the Create Form dialog, order the fields in the following sequence:

id
first
last
address
    city
    state
    zip

Click Finish.
Press Ctrl-Shift-S to save your work.

You have just added the following form to the page index.jsp.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

    <h:form>
        ....
        <h:outputLabel value="Last:" for="backing_formBean1_last" />
        <h:inputText value="#{backing.formBean1.last}" id="backing_formBean1_last" />
        ...
        <h:commandButton action="getCustomers" value="getCustomers">
            <f:attribute name="submitFormBean" value="backing.formBean1" />
        </h:commandButton>
    </h:form>

The form works by constructing a Customer object from the search data entered by the user. The Customer object is constructed by loading the entered data into the backing bean's form bean: <h:inputText value="#{backing.formBean1.last}" id="backing_formBean1_last" />. Note that backing.formBean1 refers to a Customer object field on the backing bean.

The form, with the Customer object attached as an attribute, is then submitted to the NetUI action getCustomers.

The attached form bean is submitted as the action's method parameter:

    getCustomers(businessObjects.Customer form)

You have also added the following action to the controller file Controller.java.

	@Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "", actionOutputs = { @Jpf.ActionOutput(name = "getCustomersResult", type = java.util.ArrayList.class, typeHint = "java.util.ArrayList<businessObjects.Customer>") }) })
    public Forward getCustomers(businessObjects.Customer form) {
        Forward forward = new Forward("success");
        businessObjects.Customer criteria = form;
        java.util.ArrayList<businessObjects.Customer> getCustomersResult = customerControl.getCustomers(criteria);
        forward.addActionOutput("getCustomersResult", getCustomersResult);
        return forward;
    }

Notice that the action takes a Customer object parameter: this parameter is the form bean submitted by the form.

Add a JSF Page that Displays Query Results

In this step you will create a new JSF page and add JSF tags for displaying query results.

You will add a <h:dataTable> tag that renders an HTML table when appropriate data is passed to it. In this case, a java.util.ArrayList of Customer objects is passed to the <h:dataTable> tag. The tag iterates over the Customer objects rendering each object as a row in a standard HTML table.

Note that when you create a new JSF page, it automatically creates the page's backing Java bean.

On the Page Flow Editor view, place the cursor in the field labeled Quick Jump.

Press Ctrl-Space to bring up the content assistant dropdown.
Double-click getCustomers.

The getCustomers action will be given focus in the Page Flow Editor.
In the Page Flow Explorer tab, right-click the Pages node and select New JSF Page.
Name the page customers.jsp and press Enter.
In the Rename Compilation Unit dialog, click Continue.

At this point you've created both (1) the page customers.jsp and (2) the backing Java class customers.java. (To examine the backing class, right-click the page and select Open Backing File.)
Drag customers.jsp from the Page Flow Explorer view to the Page Flow Editor tab. Drop it directly on the unspecified node.
On the Add Page Inputs dialog, click OK.
On the Page Flow Explorer view (don't confuse this with the Page Flow Editor), double-click customers.jsp to open its source code.
On the Design Palette locate the JSP Variables section.
In the JSP Variables section open the node Page Variables > pageInput > getCustomersResult.
Drag getCustomersResult into the source view for customers.jsp. Drop it directly before the </body> tag.
In the Data Display Wizard, confirm that all fields are checked and click Finish.
Click Ctrl-Shift-S to save your work.

You have just added the following code to the customers.jsp file.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0" prefix="netui-data"%>
<netui-data:declarePageInput required="true" type="java.util.ArrayList<businessObjects.Customer>" name="getCustomersResult" />

<html>
    <head>
    </head>
    <f:view>
        <body>
           <f:verbatim><p>Beehive NetUI-JavaServer Faces Page - ${pageContext.request.requestURI}</p></f:verbatim>

    <h:dataTable value="#{pageInput.getCustomersResult}" var="item0" border="1">
        <h:column>
            <f:facet name="header">
                <h:outputLabel value="Last" />
            </f:facet>
            <h:outputText value="#{item0.last}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputLabel value="Address" />
            </f:facet>
            <h:panelGrid columns="2">
                <h:outputLabel value="State: " />
                <h:outputText value="#{item0.address.state}" />
                <h:outputLabel value="Zip: " />
                <h:outputText value="#{item0.address.zip}" />
                <h:outputLabel value="City: " />
                <h:outputText value="#{item0.address.city}" />
            </h:panelGrid>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputLabel value="First" />
            </f:facet>
            <h:outputText value="#{item0.first}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputLabel value="Id" />
            </f:facet>
            <h:outputText value="#{item0.id}" />
        </h:column>
    </h:dataTable>
    </body>
    </f:view>
</html>

Notice that the data table gets it's input data through the NetUI implicit object pageInput. This is one of the most common ways to integrate NetUI and JSF technologies. For information about integrating these technologies, see Integrating Java Server Faces into a Web Application.

You have also specified the navigational target of the getCustomers action:

	@Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "customers.faces", actionOutputs = { @Jpf.ActionOutput(name = "getCustomersResult", type = java.util.ArrayList.class, typeHint = "java.util.ArrayList") }) })
    public Forward getCustomers(businessObjects.Customer form) {
        Forward forward = new Forward("success");
        businessObjects.Customer criteria = form;
        java.util.ArrayList<businessObjects.Customer> getCustomersResult = customerControl.getCustomers(criteria);
        forward.addActionOutput("getCustomersResult", getCustomersResult);
        return forward;
    }

Notice that the action forwards to the customers.jsp page using the .faces file extension: path = "customers.faces".

Add a Link Back to the Search Form Page

In this step you will add a link on the results page that will navigate the user back to the search form page. The link you add will be a JSF link that directly raises a NetUI action.

On the Page Flow Editor view, click the customers.jsp node so that customers.jsp is displayed in the center pane of the view.
On the Page Flow Editor view, right-click in the right-hand side of the view (also called the "downstream" pane) and select New Action.
In the New Action dialog, in the Action Name field, enter showIndex.
In the Form Bean field, confirm that <none> is selected.
In the Forward To field, select index.jsp.
Click Finish.
Press Ctrl-Shift-S to save your work.

Run the Web Application

On the Page Flow Explorer view, click the Run on Server icon to deploy and run the Page Flow.
In the Run On Server view, click Finish.

Wait while the application compiles, the server starts, and the application is deployed.
Enter search criteria in the fields provided and click the getCustomers button.

Note: you can use partial First or Last names only as search criteria on the input form. Submit a blank form to retrieve all customers.