In the Applications Navigator, right-click Applications and choose New from the context menu.

In the Create Workspace dialog, rename the workspace Workspace1 to bc_jsp_1.
.(Notice that the directory name changes to match the new name.) Make sure that the "Add a New Empty Project" checkbox is selected, and click OK.

In the Create Project dialog, rename the project name Project1 to Model1 and click OK.

Save your work.

Select the Model1 node in the Navigator, and right-click to choose New to display the New Gallery.

In the New Gallery, open the Business Tier node, select the Business Components category and double-click the Business Components from Tables item.

In the Business Components Project dialog, select the connection that you created for the human resources (hr) schema, for example, HRconnection, and click OK.

The Create Business Components from Tables wizard appears. Click Next on the Welcome page to begin.

In the Entity Objects page, select the HR schema from the dropdown menu of available database schema objects, and select the Tables option as object types if it is not already selected.

Select the DEPARTMENTS and EMPLOYEES tables in the Available list and click the Move button to move those selections to the Selected list. Click Next to continue.

In the View Objects page, move Departments (HR.DEPARTMENTS) and Employees (HR.EMPLOYEES) to the Selected list. Click Next to continue.

In the Application Module page, make no changes and click Next.

Click Finish to create the business components in the Model1 project.

Choose Run or Make to compile, and save the project.

Notice that JDeveloper displays the compilation information at the bottom of the Messages window.

Select the bc_jsp_1 Application node in the Applications Navigator, right-click the folder and choose New Project.

In the New Gallery, in the Categories expand the General node, select Projects and choose Empty Project as the item.

In the Create Project dialog, rename the project name Project1 to Model1Client and click OK.

Save your work.

With the ModelClient1 project selected in the Applications Navigator, right-click and select New to create a JSP.

In the Categories tree, expand Web Tier and select JavaServer Pages (JSP). In the Items list, double-click JSP Page to open the Create JSP dialog.

Leave the Directory Name field unchanged to save your work in the directory where JDeveloper expects to find web application files. In the File Name field, enter browse.jsp as the name of the JSP file you want to generate and click OK.

You now have a JavaServer Page that is opened in the Visual Editor. A simple file named browse.jsp is generated and appears in your active project.

From the menu, choose View | Data Control to display the Data Control palette.

Select the DepartmentsView1 node in the Data Control Palette, and in the "Drag and Drop As" list, select the "Read-only Form" option.

Drag and Drop the DepartmentsView1 in the Design editor of the browse JSP.

Your JSP should look like this.

In the "Drag and Drop As" list, select the "Navigation Buttons" option.

Drag and Drop the Navigation Buttons inside the form.

The Navigation Buttons appear within the frame of the form.

Expand the DepartmentsView1 node in the Data Control Palette, select the EmployeesView3 node and in the "Drag and Drop As" list, select the "Read-only Table" option.

Drag and Drop the EmployeesView3 below the form.

Your JSP should look like this:

In the Applications Navigator, select the browse.jsp node.

Right-click and select the Run option from the context menu.

The JSP displays in the browser.

Experiment with the navigation buttons.

Close your browser.

Go back to the Design editor of the browse.jsp page.

Select the first cell of the new table, right-click and select Table | Insert Column from the context menu.

In the Data Control palette, expand the EmployeesView3 node, and open the Operations node.

Select the Operation setCurrentRowWithKey(value).

In the "Drag and Drop As" list, choose "Find Row Link".

Drag and Drop the "setCurrentRowWithKey(value)" operation in the lower row of the new column previously created.

Right-click on the Select label and choose Edit Tag from the context menu.

In the Text field, enter Edit, then click OK.

In the Data Control Palette, open the operations node at the bottom of the palette.

Select the Commit operation and in the "Drag and Drop As" list, choose the "Button with Form" option.

Drag and drop the Commit operation in the design editor at the bottom of the page.

Choose File | Save All to save all your work thus far.

You now have a simple, working JSP page (named browse.jsp) for browsing the Departments and Employees view objects. At that point Employees are synchronized with the Departments information being displayed. You have also prepared the next step so that you can call an Edit page of the selected employee and update the information. The browse page will allow you to commit the changes that were done in the Edit page.

Select the project Model1Client in the Applications Navigator, where you will create another JSP, right-click and choose New to open the New Gallery.

In the Categories tree, expand Web Tier (if necessary) and select JavaServer Pages (JSP).

In the Items list, double-click JSP Page to open the Create JSP dialog.

Leave the Directory Name field unchanged to save your work in the directory where JDeveloper expects to find web application files. In the File Name field, enter editEmp.jsp as the name of the JSP file you want to generate and click OK.

You now have another JSP page that is opened in the Design editor. A simple file named editEmp.jsp is generated and appears in your active project.

In the Data Control Palette, select the EmployeesView3.

In the "Drag and Drop As" list, choose "Input Form".

Drag and drop the EmployeesView3 in the Design editor of the editEmp JSP.

The JSP should look like this:

Click the Source tab and locate the <body> tag

Below the <body> tag add the following code to display error messages in the detail page:

<P>
  <c:forEach var="exception" items="${bindings.exceptionsList}">
   <c:out value="${exception.message}"/>
    <p>
     <c:forEach var="e1" items="${exception.details}">
      <c:out value="${e1.message}"/>
       <p>
        <c:forEach var="e2" items="${e1.details}">
         <c:out value="${e2.message}"/>
        </c:forEach>
       </p>
     </c:forEach>
    </p>
  </c:forEach>
</P>

Click on the Design tab to view the JSP.

Select the project Model1Client in the Applications Navigator, where you will create a Java Class, right-click and choose New to open the New Gallery.

In the New Gallery, expand the General node, select the Simple Files category and double click the Java Class Item.

In the Create Java Class dialog, enter MyLifeCycle in the Name field.

In the Extends field, click the Browse button to open the Class Browser.

Scroll down to the oracle node, and open successively the adf | controller | lifecycle nodes and select the PageLifeCycle Class, then click OK.

Click OK again to validate the creation of the Java Class.

Select the Source tab of the class MyLifeCycle.

Cut and paste the following import statements:

import oracle.adf.controller.lifecycle.LifecycleContext;

Cut and paste the following java code statements above the last } character:

public void onSetCurrentRowWithKey(LifecycleContext ctx)
   {
     super.invokeActionBinding(ctx, "setCurrentRowWithKey");
     ctx.setForwardPath("editEmp.jsp");
     ctx.setRedirect(true);
   }

   public void onSubmit(LifecycleContext ctx)
   {
     if (!this.hasErrors(ctx))
       {
         ctx.setForwardPath("browse.jsp");
         ctx.setRedirect(true);
       }
   }

In the Applications Navigator, select the browse.jsp node.

In the Structure pane, select the adf:uimodelreference node.

From the Menu, select View | Property Inspector to open the Property Inspector.

In the Property Inspector, select the lifecycle property.

In the lifecycle dialog, click the Browse button.

In the Class Browser, open the node mypackage2 and select the class MyLifeCycle , then OK.

The new property should appear in the Property Inspector.

In the Applications Navigator, select the editEmp.jsp node.

In the Structure pane, select the adf:uimodelreference node.

In the Property Inspector, select the lifecycle property.

In the lifecycle dialog, click the Browse button.

In the Class Browser, open the node mypackage2 and select the class MyLifeCycle , then OK.

The new property should appear in the Property Inspector.

Save your work.

Select the browse.jsp node in the Applications Navigator, right-click and select the Run option from the context menu.

Your browser should display the following master-detail information.

Experiment with the Navigation Buttons (Click Next for example).

Click on the Edit link for one of the Employees.

The editEmp is now displaying the Employee record.

Make some change in the employee's record. (for instance, update their salary) and click on the Submit button.

Note: If any of the input values has an error, then you should come back to input page.

In the case of no errors, the browse page should display the new value for the employee.

Click on the Commit button to validate the change in the database.