Place the cursor over this icon to load and view all
the screenshots for this tutorial. (Caution: Because this action loads all screenshots
simultaneously, response time may be slow depending on your Internet connection.)
Note: Alternatively, you can place the cursor
over each individual icon in the following steps to load and view only the screenshot
associated with that step.
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.
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.
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, right-click and select Open JSF Navigation.
2.
This opens the faces-config.xml page
flow diagram. In the page flow diagram, double-click the /browseCustomers
data page. (This page does not yet exist.)
3.
The Create JSF JSP wizard opens; if you are presented
with the Welcome screen, click Next.
4.
Accept the proposed page name browseCustomers.jsp.
Let the other options on that page default, click Next.
5.
Accept the defaults on the Component Binding page, click
Next.
6.
Ensure you have the ADF Faces libraries in the Select
Libraries list on the Tag Libraries page, click Next.
7.
Accept the defaults on the HTML Options page, click Next.
8.
Click Finish to create the page and
invoke a blank JSP in the visual editor.
9.
JDeveloper and Oracle ADF make it easy to add data-aware
components to a page. Two tabs should appear to the right of the blank
page. The Components tab shows all of the non-data bound components
i.e. visual components, while the Data Controls tab shows all of the
ADF-data bound components.
Switch to the Data Controls tab. (If this palette is not visible,
select View | Data Control Palette from the main menu
bar.)
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.
10.
Select CustomersView1 and drag it onto
the page. You will be presented with a menu of choices. Select Tables
| ADF Read-only Table.
11.
On the Edit Table Columns dialog, check Enable Selection and
Enable Sorting. (Do not close the editor yet)
12.
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.
Click OK.
13.
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.
14.
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.
15.
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.
16.
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.
When you drag items from the data Control palette, the data bindings
are added here.
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 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.
2.
Find the Delete operation and drag it
onto the page next to the submit button. Select ADF Command
Button from the context menu that appears.
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 button.
4.
Run the page, to test the changes, just as you did earlier.
Select a record and delete it. Rollback the change.
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 JSP 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 (faces-config.xml) and double-click the
/editCustomers icon.
Accept editCustomer.jsp as the page name.
Accept all other defaults offered by the wizard.
2.
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.
3.
Check the Include Submit Button and
Click OK to accept all the form fields.
4.
Notice how the layout for for this page is quite different
from the previous one you created. You can see that the same data control
dragged onto a page, can be displayed in a variety of forms.
5.
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.
Because of the way you constructed the business model, the application module takes care of master-detail coordination.
You may remember that when 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 JSP 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 (faces-config.xml) and double-click the
/browseCustomerOrders icon.
Accept /browseCustomerOrders.jsp as the page name.
Accept all other defaults offered by the wizard.
2.
In the Components Palette, click the Data
Controls palette.
Expand CustomerOrdersBusinessServicesDataControl,
expand CustomersView1 and OrdersView1.
Select OrderItemsView1 and drag it onto the page.
Select Master-Details | ADF Master Form, Detail Table
from the context menu.
3.
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 the text in the Visual Editor is updated.
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.
4.
In the master, Orders, section, you do not need to display
all the columns.
Delete the SalesRepId.
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.
5.
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.
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.
6.
Repeat this step for both instances of ProductId in the
Orders Items, setting the property Rendered to False
in each case. Your page should now look like the screen shot below.
7.
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.
8.
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.
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
= 102" 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.
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.
Bookmark
Place the cursor over this icon to load and view all
the screenshots for this tutorial. (Caution: Because this action loads all screenshots
simultaneously, response time may be slow depending on your Internet connection.)
to save your work.