lab15.pdf

Oracle Fusion Middleware 11g: Build Applications with ADF I A - 180

Practices for Lesson 15

So far you have created several pages that are part of task flows, and you have created control flows between them with outcomes that can be used for navigation. However, you have not implemented navigation on the pages, so there is no mechanism for moving from one activity to the next within task flows.

In this set of practices, you implement navigation on pages by creating buttons, links, breadcrumbs, and a train.

Modified By : Amr Abdo


Practice 15-1: Creating Buttons for Navigation In this practice, you create buttons on pages and set the Action property of the buttons to correspond to a from-outcome of a control flow rule in the task flow. Then when the user clicks the button, the navigation takes place. You create labels for the buttons as translatable strings in the Resource Bundle rather than as hard-coded values.

1) The ManageSupplierFlow task flow has a global control flow rule whose from-outcome is cancel. Add a Cancel button to the page in the task flow to implementthis global rule. Create the label for the button as a translatable string.

a) Open the ManageSupplierFlow task flow by double-clicking it in theApplication Navigator (the task flows are located under the Web Content > PageFlows > oracle > storefront > ui > flow node.)

b) Double-click the SupplierUpdate page to open it in the editor.c) In the Component Palette, ensure that ADF Faces is selected from the drop-down

list, and drag a Button to the page just inside top of the form in the editor.(You may find it easier to drag it to the Structure windowexpand af:form anddrag the button just above af:panelFormLayout.)

The page should look similar to the following:

Practice 15-1: Creating Buttons for Navigation (continued)


d) To define text for the button label and store it in a resource bundle, in the PropertyInspector click the arrow to the right of the Text property and select Select Text Resource from the context menu.

e) In the Select Text Resource dialog box:

i) Ensure that StorefrontUIBundle is the selected resource bundle.ii) Enter a Display Value of Cancel, which populates the Key value with

CANCEL.

iii) Enter a Description of Label for the Cancel button.

iv) Click Save and Select.



f) The label of the button changes to Cancel.Note: The label of the button may appear at design time as the EL expression#{storefrontuiBundle.CANCEL}.

g) Click the button and in the Property Inspector click the drop-down arrow next tothe Action property and select cancel from the drop-down list.

This ensures that the cancel control flow is executed when the user clicks the Cancel button.

h) To leave the form without entering the required fields, set the Immediateproperty to true on the Behavior panel of the Property Inspector.



2) The ManageSupplierFlow task flow has a control flow rule from SupplierUpdate tothe Save task flow return activity whose from-outcome is save. Follow a similar series of steps to add a Save button just to the right of the Cancel button on the SupplierUpdate page to implement this navigation. Create the label for the button as a new translatable string and select the save action. Do not change the default value of the Immediate property for this button.

3) Following a similar series of steps, add the following buttons for navigation, beingsure to use a text resource for the label of each:

Task Flow Page Button Label Button Action

ShoppingFlow ProductCatalog Search search

ShoppingFlow ProductDetails Search (use the existing text resource)

search

ShoppingFlow ProductDetails Shop shop

ShoppingCartFlow ShoppingCart Shop (use the existing text resource)

shop

ShoppingCartFlow ShoppingCart Checkout check out



4) Save your work.

5) Examine the resource bundle.

a) In the Application Navigator, expand StorefrontUI > Application Sources >oracle.storefront.ui.

b) Double-click StorefrontUIBundle.properties to open it in the editor.

c) The file should look similar to the following:

d) Close all editor windows.


Practice 15-2: Creating Links for Navigation In many cases you want the user to be able to click some text, such as a product number, to navigate to another page. In this practice, you create links that implement navigation.

1) The ShoppingFlow task flow has a control flow rule from ProductSearch toProductDetails whose from-outcome is detail. You want users to be able toclick the ProductName on the ProductSearch page to drill down to the details aboutthe products. Convert the ProductName on the ProductSearch page to a link thatimplements this navigation. Clicking the link should not select a row.

a) Open the ProductSearch page.b) Turn off automatic row selection on the table:

i) Select af:table in the Structure window or in the breadcrumbs at the bottom ofthe editor.

ii) Click Edit on the Property Inspector.

iii) In the Edit Table Columns dialog box, select NONE at the Row Selectioncheck box, and then click OK.

c) Change the ProductName to be a link that calls the ADF method that sets therow and then navigates to the detail page:

i) In the Structure window, expand the first af:column under af:table.

ii) Right-click af:outputText for ProductName in the Structure windowand select Surround With.

Practice 15-2: Creating Links for Navigation (continued)


iii) In the Surround With dialog box, select ADF Faces > Link and click OK.

iv) In the Property Inspector, remove the value in the Text property of theaf:commandLink and set the Action to detail.

d) If you run the page from the task flow at this point (see step (f) below for how todo that if you want to try), the link navigates to the detail page but alwaysdisplays details for the first product. The reason for this behavior is that when youdisabled row selection you also disabled row concurrency. Add a method calledsetCurrentRowWithKey that sets the row of the Product iterator to whateverthe current row is in the page.

i) In the Data Controls panel, expand FODProductAMDataControl >BrowseProduct > Operations.



ii) Drag the setCurrentRowWithKey operation to the af:commandLink ineither the Structure window or the editor, and select Bind Existing Link.

iii) Click Ok at this dailog had appears, then In the Confirm ComponentRebinding dialog box, select the Keep Current Value check boxes for thetext and action properties. Click OK.

e) The setCurrentRowWithKeyValue method uses an argument (ND or NamedData) to tell it which row is current. The collection model for the table knowswhich row is selected and maintains a property named rowKeyStr, which holdsthe key to the current row. Use this as an argument to setCurrentRowWithKey,which in turn resets the BrowseProductIterator to reflect the correct row:

i) Right-click anywhere in the ProductSearch page and select Go To PageDefinition, or click the Bindings tab of the page.



ii) In the Structure window, select bindings > setCurrentRowWithKey >rowKey.

iii) In the Property Inspector, set the NDValue property to #{row.rowKeyStr},and then click in any other field to apply this value, or press [Tab] or [Enter].(By changing field focus, the IDE accepts the value that you entered.)

f) Test the links in the ShoppingFlow task flow.

i) In the ShoppingFlow task flow, right-click the ProductCatalog view activityand select Run.

ii) Click Search.iii) On the search page, enter P% in the ProductName field and click

Search. Experiment with using the link.iv) On the detail page, click Search to return to the search page to try another

link.

v) On the ProductDetails page, click Shop to return to the ProductCatalog page.vi) When you have finished, close the browser and undeploy the application as

described in step 6(i) of Practice 2-4.

2) In the ShoppingFlow task flow, add a drill-down link from the ProductCatalog pageto the ProductDetails page.

a) Open the ProductCatalog page.b) Select the af:outputText of ProductName in the bottom table.

c) Copy the Value property #{row.ProductName} using [Ctrl] + [C].



d) Right-click the af:outputText and select Convert.

e) In the Convert Output Text dialog box, select ADF Faces > Link and click OK.

f) Accept the convert confirmation.

g) Paste the copied value into the Text property of the commandLink.

3) Coordinating the ProductCatalog and ProductDetails pages is made more complex bythe fact that the two pages use different iterators. The ProductDetails page uses thetop-level BrowseProduct iterator whereas the ProductCatalog uses theBrowseProduct1 iterator that is a detail of BrowseCategory > BrowseSupCategory.So you need to use the setCurrentRowWithKeyValue() method from theBrowseProduct data control to coordinate the pages.

a) In the Data Controls panel, expandFODProductAMDataControlBrowseProductOperations.



b) Drag setCurrentRowWithKeyValue to the af:commandLink you justconverted and select Bind Existing Link. Note: Be sure to select setCurrentRowWithKeyValue, and not just setCurrentRowWithKey.

c) Click Ok at this dailog had appears, then In the Confirm ComponentRebinding dialog box, select the text check box to retain its value and clickOK.

d) Select af:commandLink and set the Action property to detail.

4) The setCurrentRowWithKeyValue method uses an argument (ND or NamedData) to tell it which row is current. The argument for setting the current row ofProduct is ProductId.

When you created the Product table for this page, you excluded the ProductId becauseyou do not want to display it. Because it was excluded, it is not in the page bindings.Before you can use ProductId as an argument to thesetCurrentRowWithKeyValue method, you have to add it to the bindings.After you add it, you can set the NDValue property ofsetCurrentRowWithKeyValue.

a) Go to the Overview tab of the ProductCatalog page definition, or to theBindings tab of the page.



b) In the Bindings section, select the BrowseProduct1 binding and click Edit.

c) In the Attributes section of the Tree Binding Editor, shuttle the ProductId fromthe Available Attributes to the Display Attributes, and then click OK.

Note: This adds the attribute to the bindings, but it does not add it to the table in the page. It simply makes the attribute available to the page.



d) The setCurrentRowWithKeyValue method uses an argument (ND or NamedData) to tell it which row is current. The argument for setting the current row ofProduct is ProductId. In the Structure window, select bindings >setCurrentRowWithKeyValue > rowKey and set the NDValue property to#{row.ProductId}. Be sure to tab out of the field or click in another field sothat the value is saved.

e) Test the page by running it from the ShoppingFlow task flow (open the task flow,right-click the default activity, and select Run.) Remember that the Products tableis not yet coordinated with the Categories and Subcategories, so just scroll to thebottom table and try out the ProductName links, clicking Shop to return to theProductCatalog page.Note: If the bottom Products table shows no data, you can test the links afteryou coordinate the Products table with the Subcategories table in a laterpractice.

f) When you have finished, close the browser and undeploy the application asdescribed in step 6(i) of Practice 2-4.

5) On the ShowSuppliersFlow task flow, create a task flow call activity to invoke theManageSupplierFlow task flow, a control flow case named update fromBrowseSuppliers to ManageSupplierFlow, and a control flow case named done fromManageSupplierFlow to BrowseSuppliers. You want users to be able to click theSupplierId to be able to update the supplier. Convert the SupplierId on theBrowseSuppliers page to a link that implements this navigation. You do not need todisable row selection for this table.

a) Open the ShowSuppliersFlow task flow.b) From the Application Navigator, drag ManageSupplierFlow to the diagram to

create a task flow call activity.

c) Create a control flow case from BrowseSuppliers to ManageSupplierFlow andset its from-outcome to update.

d) Create a control flow case from ManageSupplierFlow to BrowseSuppliers andset its from-outcome to done.

e) Open the BrowseSuppliers page.



f) Change the SupplierId to be a link that navigates to the SupplierUpdate page:i) In the Structure window, expand the first af:column under af:table.ii) Right-click af:outputText for SupplierId in the Structure window and

select Surround With.iii) In the Surround With dialog box, select ADF Faces > Link and click OK.iv) In the Property Inspector, remove the value in the Text property of the

af:commandLink and set the Action to update.

v) Set the PartialSubmit property to true.g) Test the page by running BrowseSuppliers from the ShowSuppliersFlow task

flow. When you click a link, you should navigate to the supplier update page.However, the page does not yet commit any updates you may make for theselected supplier; you implement that in a later practice.

h) When you have finished, close the browser and undeploy the application asdescribed in step 6(i) of Practice 2-4.


Practice 15-3: Using Breadcrumbs In this practice, you add breadcrumb navigation to the ProductCatalog page. This application uses explicitly defined breadcrumbs, rather than those that are tied to the XML Menu Model. In this exercise, you define the breadcrumbs component and one navigation item. In the practice for the lesson titled Passing Values Between UI Elements, you add dynamic navigation items to this breadcrumbs component by using parameters.

1) Open the ProductCatalog page.2) Drag a Bread Crumbs component from the Component Palette to the Structure

window, just below the af:form component and above the af:commandButton. Itshould be the first component in the form.

3) Drag three Navigation Items to the af:breadCrumbs component on the page.4) Select the first af:commandNavigationItem and use a resource bundle to change its

Text property to Store.5) You will not be able to test the navigation until after you add the dynamic

breadcrumbs functionality in a later practice. For now, just leave the other twonavigation items as they are.


Practice 15-4: Defining a Sequence of Steps Another way to implement navigation is to use a Train component to manage the navigation for you. This is particularly useful when there is a set navigation path and order. This is the case with the CheckoutFlow.

In this practice, you define the CheckoutFlow task flow. Because checking out at the end of a shopping session is a series of steps, you implement this task flow as a train, and you add a train component to the first page in the train. In the later practice for the lesson titled Ensuring Reusability, you use a page template for the pages.

1) Invoke the New Gallery.

2) Select Web Tier > JSF > ADF Task Flow and click OK.3) In the Create Task Flow dialog box:

a) Enter a File Name of CheckoutFlow.b) To the Directory path, append \oracle\storefront\ui\flow.c) Ensure that Create as Bounded Task Flow is selected.d) Ensure that Create with Page Fragments is not selected.e) Select the Create Train check box.f) Click OK.

4) Create three View Activities on the CheckoutFlow, and notice that JDeveloper createsa navigation path as you create the activities:

Practice 15-4: Defining a Sequence of Steps (continued)


CheckoutShipping CheckoutPayment CheckoutConfirm

5) Add two task flow returns:

a) Name one task flow return SubmitOrder, and set the name of its outcome in theProperty Inspector to submit.

b) Name the other task flow return CancelOrder, and set the name of its outcomein the Property Inspector to cancel.

c) Add a wildcard control flow rule.

d) Add two control flow cases:

i) One named submit from CheckoutConfirm to SubmitOrder

ii) One named cancel from the wildcard to CancelOrder

6) Create the CheckoutShipping page:

a) Double-click the CheckoutShipping view activity to create the page. Be sure tocreate in the \oracle\storefront\ui\pages directory.

b) Add a form that displays the ShippingAddress information:i) Drag FODCheckoutAMDataControl > ShoppingCart1 >

ShippingAddress to the page (or onto to af:form in the Structure window)as an ADF Form and include the following attributes in order, deleting allother attributes:

Address1



Address2 City StateProvince PostalCode CountryId

ii) Dont include Navigation Controls or a Submit Button.

iii) Click OK to create the form.

7) Run the page from the task flow. It has no data on it because the shopping cartcontext has not been established. Also notice that there is currently no means ofnavigation. You fix these problems in the next steps.

Close the browser and undeploy the application as described in step 6(i) of Practice 2-4.

8) Establish the context for the shopping cart by calling the init() method defined inthe FODCheckoutAMDataControl application module. Add a reference to theinit() method and execute the method as part of the page load process. Thisinit() method retrieves the current username (now hard coded but when security isimplemented will be set programatically), sets the value in a named WHERE clause,and then reexecutes the query. The result is that the shopping cart is populated withdata from the current user.

To use the init() method, you define a reference for it in the page definition file.Next you add an invokeAction to the page definition executables. TheinvokeAction then executes when the page is loaded.

a) Open the Page Definition for the CheckoutShipping page (right-click anywhereon the page and select Go To Page Definition), or click the Bindings tab on thepage.

b) Click the Add icon (green plus sign) on the Bindings pane.c) In the Insert Item dialog box:

i) Select Generic Bindings from the drop-down list.ii) Select methodAction.iii) Click OK.



d) In the Create Action Binding dialog box:i) Select FODCheckoutAMDataControl. Notice that the Operation defaults to

init(). This is because the init() method is the only method in theapplication module.

ii) Click OK.

e) Now that you have a reference to the init() method, you can add it to theExecutables list:

i) Click Add in the Executables section.ii) Select Generic Bindings > invokeAction and click OK.iii) Set the Binds to init.iv) Set the id to invokeInit and click OK.v) In the Property Inspector, set the Refresh property to ifNeeded.

Note: By setting the Refresh property to ifNeeded, the framework refreshes the executable when it has not been refreshed to this point. For example, when you have an accessor hierarchy in which a detail is listed first in the page definition, the master could be refreshed twice (once for the detail and again for the master's iterator). Using ifNeeded avoids duplicate refreshes.

vi) Drag the invokeInit action so that it is first in the list of executables.

9) Add the ability to navigate to the next page. The Train component shows the usersrelative position in the train. It has train stops (small boxes) for each of the pages inthe train. The current position is highlighted with a slightly larger box. The Traincomponent can also be used for navigation. The user can click the previous or nexttrain stop to navigate to that page. Add a train component to the page:



a) In the page editor for the CheckoutShipping page, drag a Train component fromthe Component Palette just inside the top of the form, and select Create Train.

b) In the Bind Train dialog box, click OK to accept the default trainModel to bindto.

10) A train button bar displays Back and Next buttons to navigate to the next or previoustrain stop. Add a train button bar to the page:

a) Drag a Train Button Bar from the Component Palette to the Structure windowjust after the af:train.

b) In the Bind trainButtonBar dialog box, click OK to accept the defaulttrainModel to bind to.

Note: Be sure that the train button bar appears in the Structure window betweenthe train and the panel form layout. The Structure window should look like this (ifnot, drag components to rearrange them):

11) Add labels for the train stops: Shipping, Billing, and Confirmation.JDeveloper currently does not provide a way to use a text resource from a resourcebundle file, so you can just enter the text directly.

a) Open the CheckoutFlow task flow.b) Select the CheckoutShipping activity.c) In the Structure Panel, Right click on the Train-Stop under view-CheckoutShipping

and select Insert Inside Train-stop, then choose display-name, then at Proparty Inspector set Display Name to Shipping.

d) In a similar fashion, set the display-name for CheckoutPayment to Billingand for CheckoutConfirm to Confirmation.



12) To see all the train stops, all of the train stop view activities must be associated withpages, so you have to create the other pages. However, because you are going todelete them after testing the train, for now just create a temporary page for each withonly an output text item on it. Do not add any data binding. You can just create thepages in the default directory to separate them from the more permanent pages thatare in your \oracle\storefront\ui\pages directory.a) Double-click each view activity in turn (CheckoutPayment and

CheckoutConfirm) and click OK to accept the defaults in the Create JSF Pagedialog box.

b) When the page opens in the designer, drag an Output Text to the page.c) In the Property Inspector, change the Value of the Output Text item to reflect the

title of the pageCheckout Payment or Checkout Confirm. You do notneed to place that text in the resource bundle because you do not use it on thepermanent page that you create later. You use this Output Text value only to beable to determine which page appears at run time for the next step.

13) Run the CheckoutShipping page from the task flow to see the results. The navigationtrain and button bar appear, with labels for each train stop. You can use either theBilling link or the Next button to navigate to the payment page.

However, because you have added the train component and train button bar to only the first page, you cannot navigate to the other pages from the payment page. You take care of that problem when you create the real pages.

14) Close the browser and undeploy the application as described in step 6(i) of Practice2-4.

15) Delete the two temporary pages:

a) In the CheckoutFlow task flow, select the CheckoutPayment andCheckoutConfirm view activities and delete the value in their page property.



b) In the Application Navigator, multiselect the CheckoutConfirm and CheckoutPayment pages. Right-click and select Delete.


Practice 15-5: Simplifying and Enhancing a Task Flow When defining navigation and task flows, you may have noticed that the ShoppingFlow has several control flows with the same name whose target is the same activity. For example, there are two control flows named detail that have a target of ProductDetails. In this practice, you simplify the shopping task flow by defining a global control flow rule, and you also add calls to other task flows.

1) Simplify the ShoppingFlow task flow by defining a global rule.

a) Open the ShoppingFlow task flow.b) Drag a Wildcard Control Flow Rule from the Component Palette to the task

flow.

c) Select one of the search control flow cases and in the Property Palette change itsfrom-activity-id to the wildcard rule, selecting it from the drop-down list.

d) Delete the other search control flow rule. The diagram should now look similarto the following screenshot:

e) Select one of the detail control flow rules and in the Property Palette change itsfrom-activity-id to the wildcard rule, selecting it from the drop-down list.

Practice 15-5: Simplifying and Enhancing a Task Flow (continued)


f) Delete the other detail control flow rule. The diagram should now look similarto the following screenshot:

g) Select the shop control flow rule and in the Property Palette change its from-activity-id to the wildcard rule, selecting it from the drop-down list.

h) Rearrange the items on the diagram to look similar to the following screenshot:

2) Add three task flow call activities to the ShoppingFlow:

a) To call the checkout flow

b) To display the shopping cart

c) To add an item to the cart



d) From the Application Navigator, drag the CheckoutFlow to the ShoppingFlowtask flow diagram in the editor to create a task flow call activity.

e) Drag a Control Flow Case from the wildcard to CheckoutFlow and name theoutcome checkout.

f) From the Application Navigator, drag the ShoppingCartFlow to theShoppingFlow task flow diagram in the editor to create a task flow call activity.

g) In the Property Inspector, change the Activity id of the task flow call activity to AddShoppingCart. Do not change the id in the Task Flow Reference section.



h) Drag a Control Flow Case from the wildcard to AddShoppingCart and namethe outcome add.

i) From the Application Navigator, again drag the ShoppingCartFlow to theShoppingFlow task flow diagram in the editor to create a task flow call activity.

j) In the Property Inspector, change the Activity id of the task flow call activity to DisplayShoppingCart. Do not change the id in the Task Flow Reference section.

k) Drag a Control Flow Case from the wildcard to DisplayShoppingCart andname the outcome cart.

You later add logic to the application so that there is a difference between displaying the cart and adding an item to the cart.

l) Open ProductCatalog and to the right of the Search button, add a buttonnamed Show Cart that navigates to the DisplayShoppingCart activity.

i) Using the resource bundle, set the text property to Show Cart.

ii) Set the action to cart.

iii) Test the navigation by running the ProductCatalog page from theShoppingFlow task flow.

iv) When you have finished, close the browser and undeploy the application asdescribed in step 6(i) of Practice 2-4.

lab15.pdf

Documents

cancel button

button label

cancel control flow

managesupplierflow task

task flows

button changes

global control flow

text property