Modelling User Interfaces

Exercise

Chapter: Modelling View Compositions

Theme: Views, ViewSets

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

• Embed several views in view sets.
• Define the division of these view sets into rectangular areas by
selecting a particular layout (TLayouts, GridLayout).

1 Development Objectives

View compositions
The term view composition describes a set of all view assemblies that can be accessed
by navigation. A view assembly consists of normal Web Dynpro views and interface
views of Web Dynpro components within the browser window.

2 Result

In this exercise, you will develop a Web

Dynpro application, displaying three
areas (view areas) in a browser window.
You hereby use the views, which you
have created in the last exercise.
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
You have opened the WD01_Basics_ModellingUI project.
The structure this project is currently displayed in the Web Dynpro Explorer.

For your convenience, you can start

developing with predefined views.
Expand the node Exc_ModellingUI. .The
graphic on the left shows the predefined
project structure of this exercise.

StartView
The view context, inbound and
outbound plugs are predefined.
TableView
The view context, inbound and
outbound plugs are predefined.
TableDetailView
The view context, inbound and
outbound plugs are predefined.

StartView
The context mapping is
predefined.
TableView
The context mapping is
predefined.
TableDetailView
The context mapping is
predefined.
4 Overview: Developing

4-1 Create view sets and embed existing and empty views.
4-1-1 In the Window Exc_ModUI_Window, define view set
ViewSet_1 having a TLayout.
4-1-2 Embed the existing view StartView in the area Left of
ViewSet_1.
4-1-3 Embed new view set ViewSet_2 (GridLayout, one column, two
rows) in the Right area of the view set ViewSet_1.
4-1-4 Embed the existing view TableView in the upper row of
ViewSet_2 and embed the existing view TableDetailsView in
the lower row of ViewSet_2.
4-1-5 Embed an empty view in the lower row of the view set
ViewSet_2.
4-2 Create navigation links between the views as displayed above.
4-3 Create the Web Dynpro application WD01_Basics_ModelUI.

5 Overview: Building, Deploying, and Running

Deploy and run the Web Dynpro application.
6 Optional: Hide the DetailView

In this exercise, you will hide the detail

view.

6-1 Hide the DetailView

6-1-1 Define a new action ShowEmptyView (fires plug toEmptyView)
in the view TableView.
6-1-2 Define a new button in the table toolbar and assign the new
action to it.
6-2 Build, deploy and run the application.