4. Creating Pages

Purpose

This tutorial covers creating web pages that display the business components you created in earlier tutorials.

Time to Complete

Approximately 30 minutes

Topics

This tutorial covers the following topics:

 

Viewing Screenshots

Show all images

Place the cursor over this icon or hit Alt-a (Alt-Shift-a on Firefox) to load and view all the screenshots for this tutorial. Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

There are a number of approaches to application development. You may know the whole flow of your application and have the database schema in place, so your requirement is to build the pages for the flow. You might decide to build each of the business services for the pages as required, or you may build them all first and then put the pages together. This is the approach taken in this tutorial.

With the database schema in place, you built the page flow of the application and, knowing what the pages would look like, you built the business components. As you start building the pages, it is very likely that you need to adjust pieces along the way.

In this section you build a few of the pages to complete the application. The tutorial guides you through the creation of the pages. In this tutorial you run and test each page individually; you connect the pages in the next tutorial.

Back to Topic List

Scenario

You have the full page flow of your application built. You know your client would like to see a few pages, so you decide to build the pages that enable querying the customer's table, editing customer details, and querying the orders for a customer.

Back to Topic List

Prerequisites

Before starting this tutorial, you should:

  1. Have complied with prerequisites stated in previous hands-on tutorials.

  2. Have completed the previous hands-on tutorials in this tutorial.

Back to Topic List

1. Building a Data Bound Web Page for Browsing

In the preceding sections of this tutorial you built both the page flow and the business services to support this application. In this section you are going to add the various pages, binding them to the data as you go.

In this first section, you build a web page that is used to query data from a database table. To build a databound web page for browsing, perform the following steps:

  1. In the Applications Navigator of the OrderEntry application that you have been working on, select the ViewController project, expand it and find the adfc-config.xml file in teh Web Content/WEB-INF node .

    Hover to see image

  2. This opens the adfc-config.xml page flow diagram. In the page flow diagram, double-click the /browseCustomers data page. (This page does not yet exist.)

    Hover to see image

    Accept the proposed page name browseCustomers.jspx. Let the other options on that page default, click OK.

    Hover to see image

  3. Click OK to create the page and invoke a blank page in the visual editor.

    Hover to see image

  4. JDeveloper and Oracle ADF make it easy to add data-aware components to a page. Note the ADF Faces tab appearing at the right of the blank page. The Common Components, Layout and Operations tabs show all of the non-data bound components i.e. visual components, while the Data Controls tab, located at the bottom of the Application Navigator shows all of the ADF-data bound components.

    Switch to the Data Controls tab. (If this palette is not visible, click on Show Minimized items bar at the bottom of the Application Navigator.

    Hover to see image

    You can see the application module displayed in the Data Control Palette. Expand the CustomerOrdersBusinessServicesDataControl. Expand the CustomersView1 node. Notice the items displayed are those selected when you built the view object.

    Hover to see image

  5. First we will prepare the page for the table by placing a PanelBox on the page. It will make it easier in subsequent steps and it adds some organization to the page.

    Hover to see image

    Hover to see image

  6. Next select CustomersView1 and drag it onto the PanelBox. You will be presented with a menu of choices. Select Tables | ADF Read-only Table.

    Hover to see image

  7. On the Edit Table Columns dialog, check Row Selection and Sorting. (Do not close the editor yet)

    Hover to see image

  8. You are creating a browse and query page and so do not need to display all of the columns from the view object on the page, although you will need all of the columns for the edit page.

    Shift-Click (or Ctrl-Click to select individual columns) to select all the columns except CustomerId, CustFirstName, CustLastName, and CustEmail and click Delete delete.

    Click OK.

    Hover to see image

  9. Next set Width to 100% in the Style section in the Property Inspector so that the table takes up all available screen width.

    Hover to see image

  10. The Panel box has the default name. Change it to "Customers" in the Property Inspector.

    Hover to see image

    To test the page that you have built, you can run it from the Applications Navigator or from the page itself. In this case go back to the page flow diagram. Notice the incomplete (exclamation) icon is no longer displayed on the /browseCustomers data page.

    Right-click the browseCustomers page on the diagram and select Run from the context menu to launch an internal server that runs your page.

    Hover to see image

  11. The read-only web page runs in a browser and queries the Customers table. Notice that the labels are those that you specified for the entity object and the view object in a previous tutorial, and that the sort order is according to the ORDER BY clause that you set for the view object in that tutorial.

    Hover to see image

  12. You can reorder the records by clicking on the column labels. An icon displays to indicate which column is driving the ordering and whether this is ascending or descending. Ensure you can navigate to the last record and back again. Close the browser when you are done.

    Hover to see image

  13. If you have time, take a look at what happened when you created the page. Go back to JDeveloper and in the Applications Navigator, expand ViewController | Application Sources. There are a number of packages available.

    Select view.pageDefs.

    Expand this and select browseCustomersPageDef.xml.

    In the Structure window below, select executables | CustomersView1Iterator. The row iterator sends the current row to individual control bindings to display current data. Iterator bindings can specify the number of rows to display in a web page. Notice that if you select CustomersView1Iterator, and look at the Property Inspector, you can see the number of records returned by the value set for the RangeSize .

    Now expand bindings | CustomersView1. Here you'll see all the attribute names for the columns in the View Object you created.

    Hover to see image

    When you drag items from the data Control palette, the data bindings are added here.

Back to Topic List

2. Adding Delete, Commit and Rollback Buttons to your Page

Most applications require that the user be given the opportunity to confirm a delete action before a row is permanently deleted. In this tutorial you do not have time to create a separate page. All you will do is add a delete, commit and rollback button (or link as the case is here) to the page.

To add operations buttons to the page, perform the following steps:

  1. Return to the visual editor for the browseCustomers page. Expand the CustomersView1 node in the Data Control Palette. Expand Operations directly below the OrdersView1.

    Hover to see image

  2. Find the Delete operation and drag it onto the Panel box, in the area labeled Toolbar. Select ADF Link from the context menu that appears.

    Hover to see image

  3. In the data control palette, collapse the CustomersView1 node. There is an Operations node at the same level as CustomersView1. Expand this node to expose the Commit and Rollback operations. Drag each operation onto the page, alongside the Delete link and change the Text of the Rollback link in the Property Inspector to be Cancel.

    Hover to see image

  4. If you'd like to have some more space between the links than what gets added by default, find the Spacer layout component and drag it in between the links.

    Hover to see image

  5. Run the page, to test the changes, just as you did earlier.

    Select a record and delete it. Rollback the change.

    In the next tutorial you create new records.

    Hover to see image

    When you are done, close the browser.

  6. Click Save All Save All button to save your work.

Back to Topic List

3. Building a Data Bound Web Page for Editing Data

The page you have just built only allows you to browse and delete customers. In this section you create a web page that allows you to create new records or update existing records. To build a web page for updating a customer, perform the following steps:

  1. Create a Page that corresponds to the editCustomers icon on the page flow diagram.

    Do this just as you did for the browseCustomers page:

    Invoke the page flow diagram ( adfc-config.xml) and double-click the editCustomers icon or right click on the icon:

    Hover to see image

    Accept editCustomer.jspx as the page name.

    Accept all other defaults offered by the wizard.

    Hover to see image

  2. In a fashion similar to how you created a customer list in section 1 of this page, drag a PanelBox onto the page and change the Text attribute to say 'Edit Customer'.

  3. In the Components Palette, click the Data Controls palette.

    Expand CustomerOrdersBusinessServicesDataControl, select CustomersView1 and drag it onto the page. Select Forms | ADF Form... from the context menu.

    Hover to see image

  4. Check the Include Submit Button and Click OK to accept all the form fields.

    Hover to see image

  5. The layout for for this page is quite different from the previous one you created, illustrating the point that the same data control dragged onto a page, can be displayed in a variety of forms.

    Hover to see image

  6. In the next section you add navigation and enhance the page UI, so you'll test the page thoroughly then. In the meantime, just run the page to ensure it works.

    To run the page, perform the steps you did when you tested the browseCustomers page, by selecting the editCustomers page, right-click and select Run from the context menu.

    When you are done, close the browser.

    Hover to see image

Back to Topic List

4. Building a Master-Detail Web Page

Because of the way you constructed the business model, the application module takes care of master-detail coordination.

You may remember that when you used the wizard to create view objects, you included the foreign key associations that became the view links between the view objects. View links are similar to relations in Forms. When you built the application module you brought each view object into the data model via the view link as a child of the previous view object. In other words, the Orders view object in the application module is a child of Customers. This means that only the orders for a selected customer are shown. Similarly, the OrderItems view object in the application module is a child of Orders, so only the order items for a selected order are shown.

Because the application module performs the master-detail coordination, there is nothing special needed to construct a master-detail web page. To build a web page showing a customer with associated orders, perform the following steps:

  1. Create a Page that corresponds to the browseCustomerOrders icon on the page flow diagram.

    Do this just as you did for the browseCustomers page:

    Invoke the page flow diagram (adfc-config.xml) and double-click the /browseCustomerOrders icon.

    Accept browseCustomerOrders.jspx as the page name.

    Accept all other defaults offered by the wizard.

    Hover to see image

  2. Add a panel box and change the Text attribute to say 'Customer Orders'

  3. In the Components Palette, click the Data Controls palette.

    In the Data Controls palette, expand CustomerOrdersBusinessServicesDataControl, then expand CustomersView1 and theOrdersView1.

    Select OrderItemsView1 and drag it onto the page. Select Master-Details | ADF Master Form, Detail Table from the context menu.

    Hover to see image

  4. In this step you change the titles of each of the sections to Orders and Order Items.

    Using the Property Inspector, select the text property OrdersView1 and replace the text with Orders. Change the title OrderItemsView1 to Order Items for the detail records. Notice that the text in the Visual Editor is updated when you do so.

    Hover to see image

    Note: If you are unable to select the Property Inspector for the text property easily, go to the Structure window and select the af:panelHeader for each of the headers. You can then select and change the text property in the Property Inspector.

  5. In the master, Orders, section, you do not need to display all the columns.

    Delete the SalesRepId.

    Hover to see image

    Ensure you delete the label and the data from the page. As you select the SalesRepId column, look at the link in the Structure window, you should have af:inputText selected. You can delete items from the editor or from the Structure window, whichever you find easier.

  6. There are some columns that you need not display in the detail section of this page. They are still required for the join syntax, so do not delete them.

    In the Order Items details section, select the column OrderId and, using the Property Inspector, set the property Rendered to False.

    Hover to see image

    As earlier in the tutorial, be sure to select the full column and not just the column header. You can verify this by noting the selection in the Structure window.

  7. Repeat this step for both instances of ProductId in the Order Items, setting the property Rendered to False in each case. Your page should now look like the screen shot below.

    Hover to see image

  8. If you have time, move the ProductName column next to the LineItemId.

    Select the ProductName column. Notice this highlights the column in the Structure window. Using the Structure window drag the ProductName column upwards to below the LineItemId column.

    Hover to see image

  9. Run the page to test it, just as you tested the other pages earlier; right-click the browseCustomerOrders page and select Run from the context menu.

    Hover to see image

    If you see only the labels, it is because you are displaying a customer who has no orders. If this happens you can run the page for a specific CustomerId. To do this, return to the CustomersView in the OrderEntry | Model project. Double-click CustomersView to invoke the Properties dialog. Add " Customers.CUSTOMER_ID = 109" to the Where Clause of the SQL Statement. This will not be necessary when you call the browseCustomerOrders from the browseCustomers page in the next tutorial. Be sure to remove the restriction when you have finished testing your page.

    When you are done, close the browser.

  10. Click Save All Save All button to save your work.

Back to Topic List

Summary

In this tutorial you have built some of the web pages in the application and added data-aware components to them. Because of the data model that you constructed in a previous tutorial, it was easy to build a master-detail web page. However, the pages have limited functionality at this point. In the next tutorial you integrate them into the page flow and add to the UI.

Back to Topic List

Hide all images Place the cursor over this icon or press Shift-Alt-h to hide all screenshots. Click the icon to show a navigation bar.

false ,,,,,,,,,,,,,,,