# How Do I: Make a JSP Page that Submits Data to a Page Flow?

The following topic describes two ways to create a JSP page that submits data to a page flow. The first way writes the necessary code automatically using the Form Wizard, the second way explains how to write the necessary code manually.

## How Data Submission Works in Page Flows

Submitting data from a JSP page to a page flow is a two-step process. First, the data is loaded into an new instance of a Form Bean, second, the Form Bean instance is passed as a parameter to an Page Flow method. The data can then be handled by the method as your application requires.

The following diagram shows how the submitted data moves from a JSP page to a Page Flow method.

## Using the Form Wizard to Create a JSP, Form Bean, and Method

The following instructions assume that you have a JSP page and a Page Flow file (JPF file) residing in the same folder.

To create a JSP, Form Bean and method, such that the JSP page submits user data to the method, complete the following steps.

1. Display your JSP page in Design View.
2. From the Palette tab, in the section marked Netui, drag and drop the Form icon into Design View.

3. On the Form Wizard dialog, in the section labeled Create New Method, in the field Action name, enter the name of the method you wish to handle the submitted data.

4. Click the New... button.

5. In the New Form Bean dialog, enter the names and data types of the user input fields.
6. Click OK.
7. In the New Form dialog, click Create.

## Manually Creating a JSP, Form Bean, and Method

To manually create a JSP that submits data to a Page Flow method, complete the following steps.

Create a Form Bean

Create a method to handle the submitted data

Create a <netui:form> that points to the method

Create input elements databound to the Form Bean

### Create a Form Bean

When submitting data, the Form Bean acts as a intermediary between the JSP page and the method that handles the submitted data: the data submitted is loaded into a new instance of the Form Bean, and then this instance is passed to the handling method. The Form Bean you create should meet the following requirements.

1. On the Page Flow file, the Form Bean should be a static inner class that extends com.bea.wlw.netui.pageflow.FormData.

public static class NewAction1Form extends FormData

2. The Form Bean should include fields corresponding to the user input fields. If the JSP is to included an input field field1, then the Form Bean should include a declaration of field1, along with getter and setter method for this field.

        public static class NewAction1Form extends FormData
        {
            private String field1;

            public void setField1(String field1)
            {
                this.field1 = field1;
            }

            public String getField1()
            {
                return this.field1;
            }
        }

### Create a method to handle the submitted data

On the Page Flow file, the method that handles the submitted data must take a Form Bean instance as a parameter.

        /**
         * @jpf:action
         * @jpf:forward name="success" path="next.jsp"
         */
        protected Forward newAction1(NewAction1Form form)
        {
            //
            // Process submitted data here.
            //

            return new Forward("success");
        }

### Create a <netui:form> that points to the method

On the JSP page, the <netui:form> should include an action attribute that points to the method that will handle the submitted data.

<netui:form action="MyAction">

### Create input elements databound to the Form Bean

On the JSP page, each input element should be be databound to a field in the Form Bean. To databind an input element to a Form Bean field, use the databinding expression {actionForm...}. The following <netui:textBox> input element is databound to the field1 field in the Form Bean.

            <netui:form action="MyAction">
                <netui:textBox dataSource="{actionForm.field1}"/>
                <netui:button type="submit"/>
            </netui:form>

When a user submits data, the value he enters into the <netui:textBox> will be loaded into the field1 field of the Form Bean.

Related Topics

Using Data Binding in Page Flows