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
Although you have built some of the pages in the application
and you have designed the page flow, the pages are as yet independent of one
another. Now you implement the page flow that you designed earlier by adding
actions to the pages that have the same names as the navigate cases in the page
flow diagram. The navigation cases tell the application where to navigate when
an event by that name is raised on a page. You also add the functionality to
create, and edit customers and to commit or rollback the customers data. You
will also enhance the user interface by changing some of the text input fields
to check boxes, radio buttons and drop down lists.
Now that the basic functionality of the pages that you
have built is in place, you can concentrate your effort on making the interfaces
better for the users. You will want to add some extra functionality for committing
and rolling back data. Also, adding some GUI controls will make the data entry
task easier. In addition you would like to make the CustomerID field non editable
in all cases except when a new customer is being added since the CustomerID
is the key for customer data and it should not be changed for existing customers.
In this application, the browseCustomers page serves
as the starting point for users, who select the row they want to edit from that
page. The editCustomers page is used both for editing and for inserting rows.
In this section of the tutorial, you add buttons to
the browseCustomers page that raise events corresponding to the navigation case
that you already created in the page flow diagram.
To add an edit action to the Edit button, perform the following
steps:
1.
Open browseCustomers in the visual editor, select the
Submit button.
Using the Property Inspector, enter Edit Customers
as the value for the Text property. Select the Action property and,and using the dropdown list, select editCustomers.
Note: You can just type the Action property value into the field, however
it is important to note that the text in the Action property must match
the text for the From Outcome property for the Navigation
Case in the faces-config.xml file.
2.
Test the page by selecting the browseCustomers,
right-click and select Run from the context menu.
3.
In the browser, use the radio group to select a customer,
and click Edit Customers.
4.
Notice the new page has returned the CustomerId that
you selected on the browseCustomers page.
1.2. Adding Show Orders button to launch
a master detail page
The Show Orders button on the page will call the browseCustomerOrders
page, showing the orders for the selected customer. To add a button with navigation
properties, perform the following steps:
1.
Ensure you have browseCustomers page open in the visual
editor. Switch to the Component Palette tab and select
ADF Faces Core from the dropdown list. (If the Component
Palette is not visible select View | Component Palette.)
2.
Select and drag the CommandButton onto
the page immediately next to the Delete button.
3.
Select the button you have just created.
In the Property Inspector, set the Text property to Show Orders.
Select the Action property, and using the dropdown list, select customerOrders.
As before, the text for the Action property must match that which you
entered for the navigation control in the page flow diagram.
Click Save All
or select File | Save All to save your work.
4.
Run the browseCustomers
page to test the changes.
Find and select CustomerId 101 (remember you can
re-order the CustomerId by clicking on the column header)
A radio group restricts the user to a finite set of
values that can be entered into a field, preventing any data errors. The Gender
field in the editCustomers page accepts only the values M and F, so is an ideal
candidate to convert to a radio button group.
To change the Gender field to a radio button group,
perform the following steps:
1.
Open the editCustomers
page in the visual editor.
2.
Select the Gender field
in the visual editor. Right-click and select Delete.
This will delete the text field for Gender.
3.
A quick reminder that each item you select in the Visual
Page editor is also selected in the Structure window. Select DateOfBirth
in the visual page editor; this highlights it in the Structure window.
Return to the Data Control Palette select and expand CustomersView1.
Select Gender, drag it onto the Structure window
and drop it below the DateOfBirth. Select Single Selections
| ADF Select One Radio from the context menu when prompted.
4.
This opens the List Binding Editor. Select
Fixed List.
5.
Select Gender as the Base Data Source
Attribute.
Input M and F on separate lines under
Set of Values. Select Selection Required from the "No
Selection" Item: droplist.
Click OK.
6.
The editCustomers page now includes a single radio icon.
7.
Test the page by running the editCustomers page. You
should see Gender displayed as a radio button group.
A checkbox restricts a user to a simple boolean choice.
The MaritalStatus field in the editCustomers page indicates a boolean state of
married or not married (single), so is an ideal candidate to convert to a check
box.
To change the MaritalStatus field to a check box, perform the following steps:
1.
Return to the editCustomers
page in the visual editor.
Select the MaritalStatus field in the visual editor.
Right-click and select Delete.
2.
From the Data Control Palette selectand
expand CustomersView1. Select MaritalStatus, drag onto
the Structure window and drop it just below the Gender radio item. Select
Single Selections | ADF Select Boolean Checkbox
from the context menu when prompted.
3.
This opens the Boolean Binding Editor.
4.
For Data Collection ensure that CustomersView1
is selected and MaritalStatus is selected for Attribute.
For the selected State Value and Unselected State Value, add married
and single and respectively, then click OK.
Click Save All
or select File | Save All to save your work.
5.
Test the page by running the editCustomers page and
note the Marital Status of the selected customer.
A drop down list is useful when a user has a list of
possible values to select from. In the case of IncomeLevel, there is a defined
set of possible values. As the values are cumbersome to type, it would be ideal
to select or update from a drop down list of values. In this case you create
a list based on hard coded values.
To change the IncomeLevel field to a drop down list, perform the following
steps:
1.
Return to the editCustomers
page in the visual editor. Delete the IncomeLevel field
in the visual editor as you did for each of the previous two fields.
From the Data Control Palette selectand expand
CustomersView1, select IncomeLevel and drag
onto the Structure window. Drop it just after the MaritalStatus and
select Single Selections | ADF Select One Choice
when prompted.
2.
This invokes the List Binding Editor. Select
Fixed List.
3.
Select IncomeLevel as the Base Data
Source Attribute.
Select Selection Required from the "No Selection"
Item: droplist.
For Set of Values input the following on separate lines:
When you created the editCustomers page, you did not
create any of the default buttons. In this part of the exercise you will now
add further buttons to enhance the functionality of the page, in particular
a Create button. For completeness you add Commit and Rollback buttons as you
did in the previous section.
To add a Create button to the page, perform the following
steps:
1.
Return to the editCustomers
page in the visual editor.
From the Data Control Palette select andexpand
CustomersView1. Expand the Operations node which
appears as a child of CustomerView1. Select the Create operation.
2.
Drag the Create operation onto the page in front of the
Submit button. Select ADF Command Button from the context
menu when prompted.
3.
Return to the Data Control Palette collapse CustomersView1
and expand the Operations node which appears at the
same level as CustomersView1.
4.
Select and drag the Commit operation
onto the page, just after the Submit button. Select ADF Command
Button from the context menu when prompted.
5.
Repeat this step for the Rollback button placing it after
the Commit Button.
Click Save All
to save your work.
6.
Your users prefer "Apply Changes" to "Submit",
so change the text of the Submit button. To do this, select the Submit
button and change the Text property to Apply Changes
in the Property Inspector.
7.
Test the application by running the editCustomers page.
Change the name of an employee and click Rollback to
undo the change.
Create a new customer, click Apply Changes to submit
the change to the database. Click Commit to update
the record in the database.
You have now enhanced the editCustomers page by adding
new controls and buttons. Once the user has finished using this screen, you
want them to be able to navigate back to the browseCustomers page. This can
be done by adding a Cancel button and also by adding a navigation action to
the Commit button so that it commits and then navigates back.
To enable navigation back to the browseCustomers page,
perform the following steps:
1.
From earlier sections in this workshop, you may recall
that the value for the Action property for a button must match the text
in the Navigation Cases in the page flow.
Open up the faces-config.xml file, the page flow diagram. (Right-click
ViewController and select Open
JSF Navigation from the context menu. )
Verify you have cancel and commit
navigation flows from the editCustomer page back to the browseCustomers
page.
2.
Return to the editCustomers
page in the visual editor. Ensure that ADF Faces Core
is selected in the dropdown list of the Component Palette.
3.
Select and drag the Command Button
onto the page immediately next to the Rollback button.
4.
Ensure the new button is selected. In the Property Inspector,
enter Cancel as the value for the Text property.
Select the Action property and choose cancel from
the dropdown list.
5.
Select the Commit button in the visual
editor and verify that the value for the Action property in the Property
Inspector matches your navigation flow. The values in the dropdown list
is the value from the navigation flow. In order to commit the data and
return to the browseCustomers page, you must select the flow value.
6.
Test the application by running the browseCustomers
page from the page flow diagram.
Select a customer and click EditCustomers. Change
the name of an employee and press Cancel. You return
to the customers page and no changes have been made.
Edit a customer again, this time click Apply Changes
and then click Commit. The data is committed and control
is returned to the customers page.
You may have noticed that when you edit a customer,
the CustomerID is editable. Generally speaking, you only want this field editable
for new records. This can be set within the model of our application and the
user interface will automatically reflect this.
To make CustomerID editable only for new records, perform the following steps:
1.
In the OrderEntry application you have been
working on expand the Model project so you can see
the Entity Objects.
2.
Double-click on the Customers Entity
Object to display the Entity Object Editor.
3.
Expand the attributes tree and select CustomerId
4.
Set the Updatable field to While New,
click OK.
Click Save All
or select File | Save All to save your work.
5.
Test the application by running the browseCustomers
page.
Select a customer and then click Edit Customers.
In the editCustomers page, note that the CustomerID field is non editable.
6.
Click Create to add a new customer record.
Note that the CustomerID is editable for a new record.
When you are done, close the browser.
Summary
In this section of the tutorial, you enhanced the user interface.
You learned how to link up actions to navigation events
as well as how to enhance the user interface using controls such as check boxes,
radio groups and drop down lists.
You have now also completed building a small web application
that allows you to edit, update and commit changes to the database. You can
also navigate easily between pages, passing parameters for particular records
selected.
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.)
or select File | Save All to save your work.