Modelling User Interfaces

Contents:
z Basic terminology
z Modelling User Interfaces

© SAP AG 2004, Modeling UI / 1

 Modelling User Interfaces: Objectives

After completing this lesson, you will be able to:

z Understand the basic terminology.
z Model User Interfaces.

© SAP AG 2004, Modeling UI / 2

 Basic Terminology: Topic Objectives

After completing this topic, you will be able to:

z Understand the basic terminology.

© SAP AG 2004, Modeling UI / 3

 Web Dynpro Applications

Web Dynpro Applications can be addressed via URL in a Browser.

A Web Dynpro Application displays a Component (via Interface View).
Root Components can aggregate additional Web Dynpro Components.

Web Dynpro Web Dynpro Runtime

Client
(JavaScript) Web Dynpro
Web Dynpro
Application
URL Application
Interface
View
Web Dynpro
Root Component

Web Dynpro Web Dynpro

Component A Component B

© SAP AG 2004, Modeling UI / 4

„ Web Dynpro Zoom In: 10 x 10 x

Web Dynpro can be separated in a client side part and a server side part, the Web Dynpro Runtime. The
Web Dynpro Runtime on the server side is the container for Web Dynpro Applications.
 Basic Terminology

Component
Interface View

Window

View Set

View Area

ViewContainer
Element

© SAP AG 2004, Modeling UI / 5

„ Basic Terms
Window
Represents a Browser Window inside a Web Dynpro Component. Contains a View-Composition.
Component Interface View
Visual representation of a Web Dynpro Component for external embedders on View level. There is a 1:1 relation
between internal Windows and Component Interface Views for external usage.
View Set
Predefined Layout for a set of multiple Views (e.g. T-Layouts, Grid-Layout). Contains View Areas also called cells.
Can be nested.
View Area
Rectangular area inside a View Set. Also called cell. Width and Heigth can be set at designtime.
ViewContainerUI Element
Special UI-element used for embedding Views and inner View Sets. Utilizes additional layouting mechanisms inside
a View layout (Matrix-, Grid-, Row-Layout).
 Basic Terminology: Topic Summary

You should now be able to:

z Understand the basic terminology.

© SAP AG 2004, Modeling UI / 6

 Modelling User Interfaces: Topic Objectives

After completing this topic, you will be able to:

z Model User Interfaces.

© SAP AG 2004, Modeling UI / 7

 Modelling User Interfaces

Outer View View

Set
Embedded
View Set

ViewCotainer-
UIElement
Inner View Set

View Area Component

Interface View

EmptyView
© SAP AG 2004, Modeling UI / 8

„ Modeling User Interfaces

Web Dynpro User Interfaces can be visually structured using views placed in different types of view
containers
y Window:
Inside a component a window contains the view composition. A window groups together multiple views
and view sets. A window always contains one or more views, which are connected by navigation links
y Views:
A view belongs to a component and contains a structured set of UI elements
A view can only be displayed by the browser if it has been embedded in a window.
y View Set / View Area:
A view set is based on a certain layout for structuring the contained view areas. views are embedded
into these view areas.
y ViewContainer UI Element:
Element
Special UI element for directly embedding one view into another
y Component Interface Views:
Outer visual representation of a component. Can be used by an embedder (component window, view)
like a conventional view
 The Quiz Application

© SAP AG 2004, Modeling UI / 9

„ The Quiz demo application

You can find the Quiz demo application under the installation path of the SAP NetWeaver Developer
Studio, for example, C:\Program Files\SAP\JDT\eclipse\examples.
The In a short quiz application you are familiarized with some main concepts of Web Dynpro-based
application development.
The following aspects of the Web Dynpro programming model are covered:
• Creating a Web Dynpro application with multiple views and a navigation structure
• Working with actions and event handlers (action event handlers, inbound plug event
handlers) that you declare yourself
• Reading contents from the property resource bundles and storing them in a Web Dynpro
context (value nodes, value node elements)
• Dividing data between view controllers and component controllers using context mapping
• Manipulating UI element attributes at runtime using data binding
 View Set

Layouting a View Set Embedding Views

Window View Set
View Set
View Area
Welcome View
Top
View Area Top

Question View Answer View

Empty View QuestionMark

View Area Left View Area Right View

Empty View

View Area Left View Area Right

T-Layout
A View Web Dynpro View

© SAP AG 2004, Modeling UI / 10

„ View Set
A view set provides a visual frame with predefined subsections into which you can embed your views at
design time.
Using view sets is particularly advantageous when you design, implement, or display the user interface of
a Web Dynpro application:
y Structured option to display more than one view in a screen
y Efficient support when designing user interfaces
y Possibility of using the predefined areas to make changes to the layout at a later stage
y Reuse of views within a Web Dynpro window
At runtime, only one view can be displayed within a view area. The default view, which is initially displayed,
is the Welcome view in the view area top and the default view for the remaining two view areas is the
empty view
 View Assemblies

View Assemblies are different combinations of views

inside a view set

Top Welcome View Top Welcome View Top Welcome View

Question Question Answer

View QuestionMark View View
Empty View View
Empty View

Left Right Left Right Left Right

1 - Start/End Application 2 - Display Question 3 - Display Answer

© SAP AG 2004, Modeling UI / 11

„ View Assemblies
The assignment of views and empty views to the three view areas top, left, and right specifies all possible
view assemblies – that is, the possible combinations of views that can be displayed in the window at the
same time. In this example, the following view assembly is the default view assembly:
View area top: Welcome, View area left: Empty view, View area right: Empty view
By specifying the possible views in a view area, you determine in this example that there is a maximum of
six different view assemblies at runtime
 Example: View Assemblies and Navigation

The transition from one view assembly to another is

done via Navigation Links

View Area View Area

Welcome View Welcome View
Top Top

Question View
QuestionMark
Empty View View

Empty View

View Area Left View Area Right View Area Left View Area Right

1 - Start Application 2 - Display First Question

© SAP AG 2004, Modeling UI / 12

„ Example: View Assemblies and Navigation

A navigation link is the association between an outbound plug belonging to view A and an inbound plug
of the target view B. You can assign multiple navigation links to one individual outbound plug. An
outbound plug defines an event that can trigger a change of one view assembly to another.
 View Composition

The set of view assemblies which can be reached via

navigation links is called View Composition
View Set

View Area
Welcome View
Top

Question View Answer View

QuestionMark
Empty View View

Empty View

View Area Left View Area Right

outbound plug inbound plug navigation link

© SAP AG 2004, Modeling UI / 13

„ View Composition
The view composition comprises all view assemblies that can be accessed by navigation. The change from
one view assembly to another is established by specifying one or more navigation links.
The Welcome view is associated with the Question view and QuestionMark view. The Question view is
associated with the Answer view and QuestionMark view, whereas the Answer view is associated with the
Welcome view and the two empty views.
This view composition enables you to access three of the six possible view assemblies using navigation
links:
View Area Top: Welcome Welcome Welcome
View Area Left: Empty View Question Question

View Area Right: Empty View QuestionMark Answer

 Visually Embedding Web Dynpro Components

A Web Dynpro component can be embedded into a view assembly by

using its visual Interface called Component Interface View

Web Dynpro component Embedder Web Dynpro component

Inner
Window
Window Embedder
Embedder
View Set EmbedderViewSet Window
Window Inner
Inner
View Area cell[1,1]

View ControlPanel

Component
Interface View Form
View View
InnerCompUsage.
InnerInterfaceView

View Area cell[2,1] Component

Usage

© SAP AG 2004, Modeling UI / 14

 Embedding Components

Component usage

Component
Interface
Controller
Component
Web Dynpro Interface
Controller
Component A
Web Dynpro
Component B

Parent component embeds

child component

Child component

© SAP AG 2004, Modeling UI / 15

„ Embedding Components
Components can be embedded by declaring a Component Usage. A component can be used in several
instances by its embedder.
„ Component Interface Controller:
Controller interaction (eventing, navigation, context mapping, method calls) is done via a Component
Interface Controller.
 Modelling User Interfaces: Topic Summary

You should now be able to:

z Model User Interfaces.

© SAP AG 2004, Modeling UI / 16

 Modelling User Interfaces: Summary

You should now be able to:

z Understand the basic terminology.
z Model User Interfaces.

© SAP AG 2004, Modeling UI / 17