Implementing Navigation on Pages

Copyright 2008, Oracle. All rights reserved.

 Objectives

After completing this lesson, you should be able to do the

following:
Implement command buttons and links
Create menus
Menu bar
Pop-up
Context
Use an ADF menu model
Define navigation panes
Use breadcrumbs
Define trains

15 - 2 Copyright 2008, Oracle. All rights reserved.

 Using ADF Faces Navigation Components

15 - 3 Copyright 2008, Oracle. All rights reserved.

 Performing Navigation

Control flow rules are defined in the task flow.

A component fires an action event to generate a String
outcome corresponding to the control case fromoutcome.
Event listener responds by executing navigation.

15 - 4 Copyright 2008, Oracle. All rights reserved.

 Using Buttons and Links

Command components:
Include af:commandButton and af:commandLink
Submit requests and fire action events when activated
Typically used for internal navigation
Go components:
Include af:goButton and af:goLink
Navigate directly without server-side actions
Are typically used for external navigation
Do not use control flow rules
Command and go components have the
same appearance.

15 - 5 Copyright 2008, Oracle. All rights reserved.

 Defining Access Keys

Use for input, command, and go components

Set component attributes:
accessKey (input, command, or go components):
<af:goLink text="Home" accessKey="h">
textAndAccessKey (command or go components):
<af:commandButton textAndAccessKey="&amp;Home"/>
labelAndAccessKey (input components):
<af:inputSelectDate value="Choose date"
labelAndAccessKey="D&amp;ate"/>
valueAndAccessKey (input components):
<af:outputLabel for="someid"
valueAndAccessKey="Select Dat&amp;e"/>
<af:inputText simple="true" id="someid"/>
Can define same access key for multiple components
15 - 6 Copyright 2008, Oracle. All rights reserved.
 Defining Tooltips

Use the shortDesc attribute:

<af:commandButton text="commandButton 1"

shortDesc="This is a command button"/>

Can also be defined as a UI Control Hint on EO or VO in

the model

15 - 8 Copyright 2008, Oracle. All rights reserved.

 Using Toolbars, Toolbar Buttons, and Toolboxes

Toolbars contain other components.

Toolbar buttons have special properties (if you use toolbar
buttons, always put them on a toolbar).
Toolboxes contain multiple toolbars.
You can stretch one component on a toolbar.
Overflow buttons are automatic.

Toolbox
Toolbar
Stretched component Overflow icon

15 - 9 Copyright 2008, Oracle. All rights reserved.

 Using Menus for Navigation

You can group menu bars and toolbars in a toolbox.

Menu bars contain menus, which provide the top-level
menu.
Menu items:
Provide the vertical (drop-down) selections
Like toolbar buttons, can:
Display differently when selected
Perform navigation

15 - 10 Copyright 2008, Oracle. All rights reserved.

 Creating Menus

15 - 11 Copyright 2008, Oracle. All rights reserved.

 Creating Pop-Up Menus

15 - 13 Copyright 2008, Oracle. All rights reserved.

 Creating Context Menus

To create a context menu, use the af:showPopupBehavior

operation.

15 - 14 Copyright 2008, Oracle. All rights reserved.

 Using a Navigation Pane

You can either:

Define navigation levels
explicitly
Or
Bind to XML Menu Model

<af:navigationPane hint="bar" id="barExample">

<af:commandNavigationItem text="Bar Item 1" partialSubmit="true"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem text="Bar Item 2" partialSubmit="true" selected="true"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem text="Bar Item 3" partialSubmit="true"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem text="Disabled Item" partialSubmit="true" disabled="true"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem text="Component Guide" immediate="true" action="guide"/>
</af:navigationPane>

15 - 16 Copyright 2008, Oracle. All rights reserved.

 Using Breadcrumbs

Breadcrumbs: af:breadCrumbs
Links: af:commandNavigationItem
You can:
Define breadcrumbs explicitly
Bind to XML Menu Model

15 - 17 Copyright 2008, Oracle. All rights reserved.

 Using Explicitly Defined Breadcrumbs

Use static values:

<af:breadCrumbs>
<af:commandNavigationItem text=Store/>
<af:commandNavigationItem text=Media/>
<af:commandNavigationItem text=Music/>
</af:breadCrumbs>

Can also use EL for dynamic values

15 - 18 Copyright 2008, Oracle. All rights reserved.
 Using XML Menu Model for Dynamic Navigation
Items

XML Menu Model:

Represents navigation for a page hierarchy in XML format
Contains the following elements:
menu Home
groupNode
itemNode Benefits Employee Data
sharedNode
Insurance Paid
Time Off

Health Dental

15 - 19 Copyright 2008, Oracle. All rights reserved.

 Creating an ADF Menu Model

Create the page hierarchy in one or more unbounded task

flows.
In the Application Navigator, right-click each task flow and
select Create ADF Menu Model.
Level 0 (root_menu) Home
Level 1 (home_menu)
Benefits Employee Data
Level 2 (benefits_menu)
Insurance Paid
Time Off
Level 3
(insurance_menu) Health Dental

15 - 20 Copyright 2008, Oracle. All rights reserved.

 Examining the ADF Menu Model

<?xml version="1.0" encoding="windows-1252" ?>

<menu xmlns="http://myfaces.apache.org/trinidad/menu">
<groupNode id="groupNode_Insurance" idref="itemNode_Dental"
label="Insurance">
<itemNode id="itemNode_Dental" label="Dental" action="adfMenu_Dental"
focusViewId="/Dental"/>
<itemNode id="itemNode_Health" label="Health" action="adfMenu_Health"
focusViewId="/Health"/>
</groupNode>
</menu>

15 - 22 Copyright 2008, Oracle. All rights reserved.

 Binding the Navigation Pane to an
XML Menu Model

Home

Benefits Employee Data

Insurance Paid Time Off Levels and Hints

0 tabs
1 buttons
Health Dental
2 bar
3 list

15 - 23 Copyright 2008, Oracle. All rights reserved.

 Binding Breadcrumbs to an XML Menu Model

To link breadcrumbs to the menu model:

Set Var and Value properties on the breadcrumbs
component
Add a navigation item to the nodeStamp facet and set its
properties just as for navigation panes item
Copy the breadcrumbs component to each page
Home

Benefits Employee Data

Insurance Paid
Time Off

Health Dental

15 - 25 Copyright 2008, Oracle. All rights reserved.

 Defining a Sequence of Steps

A train is a specialized type of task flow with linear steps:

Navigation items rendered by af:train
}

Navigation buttons rendered

by af:trainButtonBar

Creating the task flow for

a train

15 - 26 Copyright 2008, Oracle. All rights reserved.

 Creating a Train

<af:train value="#{controllerContext.currentViewPort.taskFlowContext.trainModel}"/>
<af:trainButtonBar
value="#{controllerContext.currentViewPort.taskFlowContext.trainModel}"/>
<af:outputText value="Train Stop 1"/>

15 - 28 Copyright 2008, Oracle. All rights reserved.

 Skipping a Train Stop

To skip a train stop, perform the following steps:

Set the skip property of train stop to true.
Typically set to expression that evaluates to true or
false, such as managed bean method or property.
If true, users cannot navigate to that train stop.

15 - 29 Copyright 2008, Oracle. All rights reserved.

 Summary

In this lesson, you should have learned how to:

Implement command buttons and links
Create menus
Menu bar
Pop-up
Context
Use an ADF menu model
Define navigation panes
Use breadcrumbs
Define trains

15 - 30 Copyright 2008, Oracle. All rights reserved.

 Practice 15 Overview:
Using ADF Faces Navigation Components

This practice covers the following topics:

Creating buttons and links to implement navigation
Adding breadcrumbs
Defining a train

15 - 31 Copyright 2008, Oracle. All rights reserved.