5. Adding Navigation and Enhancing the User Interface

Purpose

This tutorial covers linking up the pages to complete the page navigation and also includes making enhancements to the user interface.

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

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.

Back to Topic List

Scenario

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.

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. Implementing a Page Flow

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.

 

1.1. Adding the Edit Action to launch a new page

To add an edit action to the Submit link, perform the following steps:

  1. Open browseCustomers in the visual editor, add a new Link.

    Hover to see image

    Using the Property Inspector, enter Edit Customer as the value for the Text property. Select the Action property and, and using the dropdown list, select editCustomer.

    Hover to see image

    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 adfc-config.xml file.

    Hover to see image

  2. Test the page by selecting the browseCustomers, right-click and select Run from the context menu.

    Hover to see image

  3. In the browser, select a customer by clicking on the row you want to edit, and click Edit Customers.

    Hover to see image

  4. Notice the new page has returned the CustomerId that you selected on the browseCustomers page.

    Hover to see image

    When you are done, close the browser.

Back to Topic

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 from the dropdown list. (If the Component Palette is not visible select View | Component Palette.)

    Hover to see image

  2. Select and drag the Link onto the page immediately to the right of the Edit Customer link.

    Hover to see image

  3. Select the link you just created.

    In the Property Inspector, set the Text property to Show Orders. Select the Action property, and using the dropdown list, select browseOrders. As before, the text for the Action property must match that which you entered for the navigation control in the page flow diagram.

    Hover to see image

    Click Save All Save All button or select File | Save All to save your work.

  4. Run the browseCustomers page to test the changes.

    Find and select CustomerId 101 (you can re-order the CustomerId by clicking on the column header or as in this example, filter on 101 by entering 101 and hitting the return key)

    Click Show Orders.

    Hover to see image

    Hover to see image

  5. When you are done, close the browser.

Back to Topic

Back to Topic List

2. Adding a Radio Group

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 it 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.

    Hover to see image

  2. Select the Gender field in the visual editor. Right-click and select Delete.

    This will delete the text field for Gender.

    Hover to see image

  3. 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.

    Hover to see image

  4. This opens the List Binding Editor. Select Fixed List.

    Hover to see image

  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.

    Hover to see image

  6. The editCustomers page now includes a single radio icon.

    Hover to see image

  7. Test the page by running the editCustomers page. You should see Gender displayed as a radio button group.

    Hover to see image

    When you are done, close the browser.

Back to Topic List

3. Adding a Checkbox

A checkbox restricts a user to a simple boolean choice. The Marital Status field in the editCustomers page indicates a boolean state of member or not a member, so itis 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 Marital_status field in the visual editor. Right-click and select Delete.

    Hover to see image

  2. From the Data Control Palette select and 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.

    Hover to see image

  3. This opens the Boolean Binding Editor.

    Hover to see image

    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 Unmarried respectively, then click OK.

  4. Click Save All Save All button 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.

    Hover to see image

    When you are done, close the browser.

Back to Topic List

4. Adding a Drop Down List

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 and thus subject to mistyping and unvalid values, 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 select and 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.

    Hover to see image

  2. This invokes the List Binding Editor. Select Fixed List.

    Hover to see image

  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:

    A: Below 30,000
    B: 30,000 - 49,999
    C: 50,000 - 69,999
    D: 70,000 - 89,999
    E: 90,000 - 109,999
    F: 110,000 - 129,999
    G: 130,000 - 149,999
    H: 150,000 - 169,999
    I: 170,000 - 189,999
    J: 190,000 - 249,999
    K: 250,000 - 299,999
    L: 300,000 and above

    Click OK.

    Note: If you are working through these notes online, you can use the above list, using Copy and Paste.

  4. Test the application by running the editCustomers page. You should see IncomeLevel displayed as a drop list.

    Hover to see image

    When you are done, close the browser.

 

Back to Topic List

5. Adding Create, Commit and Rollback buttons

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.

  2. To make the buttons line up lets drop a PanelGroup Layout component onto the footer facet first and place the buttons there

    Hover to see image

  3. Place the existing Submit button inside the Panel Group Layout

    Hover to see image

  4. From the Data Control Palette select and expand CustomersView1. Expand the Operations node which appears as a child of CustomerView1. Select the Create operation.

    Hover to see image

  5. Drag the Create operation onto the page in front of the Submit button. Select ADF Button from the context menu when prompted.

    Hover to see image

  6. Return to the Data Control Palette collapse CustomersView1 and expand the Operations node which appears at the same level as CustomersView1.

    Hover to see image

  7. Select and drag the Commit operation onto the page, just after the Submit button. Select ADF Button from the context menu when prompted.

    Hover to see image

  8. Repeat this step for the Rollback button placing it after the Commit Button.

    Click Save All Save All button to save your work.

  9. 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.

    Hover to see image

  10. 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.

    Hover to see image

    When you are done, close the browser.

 

Back to Topic List

6. Enabling Return Navigation

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 adfc-config.xml file, the page flow diagram. (Open the ViewController node in the Application tree and find the file there. )

    Verify you have cancel and commit navigation flows from the editCustomer page back to the browseCustomers page.

    Hover to see image

  2. Return to the editCustomers page in the visual editor. Ensure that ADF Faces is selected in the dropdown list of the Component Palette.

    Hover to see image

  3. Select and drag the Button onto the page immediately next to the Rollback button.

    Hover to see image

  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.

    Hover to see image

  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. Assign the Action Cancel to the Cancel button in a similar manner.

    Hover to see image

  6. Test the application by running the browseCustomers page from the page flow diagram.

    Select a customer and click Edit Customers. Change the name of an employee and press Cancel. You return to the customers page and no changes have been committed.

    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.

    Hover to see image

    When you are done, close the browser.

Back to Topic List

7. Making a Field non-editable (Optional)

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.

    Hover to see image

  2. Double-click on the Customers Entity Object to display the Entity Object Editor.

    Hover to see image

  3. Expand the attributes tree and select CustomerId

    Hover to see image

  4. Set the Updatable field to While New, click OK.

    Hover to see image

    Click Save All Save All button 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.

    Hover to see image

  6. Click Create to add a new customer record. Note that the CustomerID is editable for a new record.

    Hover to see image

    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.

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 ,,,,,,,,,,,,,,,