Navigation

Solution
Chapter:

Navigation

Theme:

Specifying the Navigation Schema

At the end of this Exercise, you are able to:

Create additional views for a Web Dynpro component.
Navigate between different views of a Web Dynpro
component.
Create Actions.

Developing, Step-by-Step

4-1

Add a new view, having the name ResultView, to the predefined window
Exc_Navigation_Window of the Web Dynpro component
Exc_Navigation_Component.
In the Web Dynpro Explorer:
Expand the nodes
WD01_Basics_Navigation / Web Dynpro /
Web Dynpro Components /
Exc_Navigation.
Expand the nodes Window /
Exc_Navigation
Select the node Views and open the context
menu.
Choose Create View.

In the wizard, enter:

View Name ResultView
Package
com.sap.training.wd.
basics.navigation
Choose Finish.

The SAP NetWeaver Developer Studio

automatically inserts the new view to the
substructure Views.

To insert the new view to the window,

select the node Exc_Navigation_Window,
open the context menu, and choose Open
Navigation Modeler,(or double-click on the
node Exc_Navigation_Window)
Choose the button for Embed View from the
palette (on the left of the screen).
Position the cursor within the diagram pane
and drag a rectangle area to the required
size.
In the wizard that appears, select the Embed
existing View option and choose Next.
Select ResultView from the list and choose
Finish.

Successful result:
The diagram pane displays two areas
representing the two views. In this case, the
first view, StartView, is displayed as the
active view:
When the Web Dynpro application is
launched, the active view is always
accessed.

4-2

Redefine the text property of the default TextView element on the view
ResultView.
Double-click on the new node ResultView.
Select the Outline View and change the
properties of the TextView UI element to
property
design
text

4-3

value
header2
Congratulation !

Create an exit point for the view StartView and an entry point for the view
ResultView using an outbound plug and an inbound plug, respectively.
In the Navigation Modeler:
Choose Create Outbound Plug from the
context menu of the view StartView. Enter
a name for your outbound plug, such as
ToResultView, and choose Finish.
Choose Create Inbound Plug from the
context menu of the view ResultView. Enter
a name for your inbound plug, such as
FromStartView. Leave the default settings
for the event handler unchanged and choose
Finish.
Save the new project data by choosing Save All Metadata from the toolbar.

4-4

Specify the navigation flow from the view StartView to the view ResultView
using a navigation link.
To create a link for navigation from the
first (active) View to the second view,
select the icon Create Link from the palette
(on the left of the screen). Draw a line from
the outbound plug of the view StartView to
the inbound plug of the view the
ResultView.
You have defined the navigation schema between the two views in the Web
Dynpro application. An event handler with the name onPlug<Name of Plug>
has been generated automatically for the inbound plug.
In the next step, you will move on to defining appropriate actions for
navigation.
Save the new project data by choosing Save All Metadata from the toolbar.

4-5

Create an action to navigate between the views.

To launch the View Designer, double-click
the node StartView in the project structure
or in the Data Modeler view.
Choose the Actions tab.
Choose the pushbutton New.
A wizard appears, helping you to create a
new Action.
Enter the name ShowResultView for this
new action, leave the Event handler option
unchanged. Assign the plug ToResultView
as a Fire plug and choose Finish..
Save the new project data by choosing Save All Metadata from the toolbar.

Successful result:

You have created the action ShowResultView. The implementation of the

navigation was automatically inserted to the associated event handlers.
To check the generated source code for the event handler
onActionShowResultView(), choose the tab Implementation of the view StartView.
The event handler contains the single line
wdThis.wdFirePlug<Name_of_Outbound_Plug>().
To trigger navigation from the view StartView to the view ResultView using the
outbound plug ToResultView, the application calls the outbound plug method
wdFirePlugToResultView(). The predefined private variable wdThis is used for
this method call. The variable wdThis is always required whenever you need to
make method calls to the view controller.
4-6

Add a button to the view StartView. Bind the action defined in step 4-5 to this
button.
In the Outline view of the view StartView,
select the root element
RootUIElementContainer and choose Insert
Child from the context menu.
Choose button
Assign the following property values to this
new elements:
property
id
text
onAction

value
btn_toResultView
Go!
ShowResultView

Choose Finish.
Save the new project data by choosing Save All Metadata from the toolbar.

4-7 Create a Web Dynpro application WD01_Basics_Navigation.

In the Web Dynpro Explorer, expand the node WD01_Basics_Navigation.
Expand the node Web Dynpro and open the context menu for Applications.
To open the wizard, choose Create Application.
In the wizard, enter:
Name:
WD01_Basics_Navigation
Package:
com.sap.training.wd.basics.navigation
Accept the other suggested values and choose Next.
Select Use existing component and choose Next.
Enter
Web Dynpro Component
Interface View
Startup Plug
and choose Finish.

Exc_Navigation
Exc_Navigation_WindowInterfaceView
Default

Successful result:
The generated Web Dynpro application
object completes your project structure.
You can now deploy your project and start
your Web Dynpro application.
WD01_Basics_Navigation enables you to
address the Web application as a whole,
when you launch this complete application
in the next step.

Building, Deploying, and Running, Step-by-Step

Deploy and run the Web Dynpro Application.
In the Web Dynpro Explorer:
Expand the nodes WD01_Basics_Navigation / Web Dynpro / Applications.
Open the context menu for WD01_Basics_Navigation.
To deploy and run the application, choose Deploy new Archive and Run
Successful result:
The Developer Studio launches the Web
browser and chooses the active view
StartView.
You can navigate to the view ResultView
by clicking on the Go! button.