Web Dynpro For ABAP: IBM Global Business Services

IBM Global Business Services
Web Dynpro For ABAP

Introduction
IBM Corporation 2013
Session Overview
Web Dynpro is a programming model provided by SAP. Web Dynpro is
implemented in Java and ABAP. It is suited to generate standardized user
interfaces (UIs) using a declarative approach, resulting in a minimum time effort
to realize Web applications.
The advantages of using the Web Dynpro programming model (compared to
other established Web programming models) will be explained in this unit. In
this context, the basic architecture and functionality of Web Dynpro will be
summarized.
Topic Title | Jan-2007
Learning Objectives
After completing this unit, you will be able to:
Describe the declarative programming approach used to create Web
Dynpro applications.
Explain the benefits resulting from this metadata approach.
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
Why Another Technology for Building UIs?

If you invest in a UI today, you must be sure it will run on tomorrows technology.
If you build a UI framework today, you want to be sure it can take advantage of
tomorrows technology.
SAP UI History: From SAP GUI to Web Dynpro
Web dynpro for ABAP : Motivation

Web Dynpro UI definition
independent of client technology
As much abstract declaration as
possible
Different rendering engines for
different (future) UI technologies
without adapting application coding
What is Web Dynpro?

A Programming Model for User Interfaces
Defines a standard structure for user interface applications
Derived from the MVC (model-view-controller) design pattern
A Set of Tools for User Interface Design

Focus on graphical modelling
Code is generated from meta-model declarations
Integrated in SAP NetWeaverDeveloper Studio and the ABAP Workbench
A Runtime Environment for Applications

Framework running on SAP Web AS server offers common services
A Technology for Software Modularization

Components help structure applications and support pattern-based UIs
Web Dynpro Main Benefits

Deliver an Enterprise Quality Web
Development Environment
Enforce clear separation between UI logic and
business logic
Little coding, lots of design
Declarative UI development
Achieve Independence
run on multiple platforms - Browser, Smart
Client, Mobile Device,
Supports major platforms

Java (NetWeaver 04), ABAP (NetWeaver
04s)
Saves SAPs and customers investments

Conversion of classic ABAP Screens
Development Benefits
Web Dynpro offers the following advantages for application developers:
The use of declarative and graphical tools significantly reduces the
implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Stateful applications are supported that is, if the page is changed and the
required data remains intact so that you can access it at any time throughout
the entire application context.
Note that stateless applications are not possible.
Development Benefits Contd

Automatic data transport using data binding
Automatic input check
Automatic operation of the Web Dynpro application using the keyboard
User interface accessibility is supported
Full integration in the reliable ABAP development environment
10
Web Dynpro Programming Model
11
Meta-model Declarations and Custom Coding
Meta-model Declarations
Custom Coding
Guarantees common app. design
Guarantees universality
Good for graphical tool support
Good for data-driven, dynamic apps
Screen Layout and Nesting
Implementation of business rules
Navigation and Error Handling
Dynamic screen modifications
Data Flow
Access to services (files etc.)
Componentization ...
Portal eventing ...
12
Model View Controller (MVC) Approach

VIEW
Design approach for decoupling
presentation and application logic within a
Web Dynpro application
Highly structured Web application
Reusable application entities
Import of external models
Reuse of existing SAP functionality
Visualization of application data
Controller
Event handling
Application data update
Control flow definition
Model
Application data definition
Connection to business
functionality
13
Web Dynpro Component Architecture

SAP Web Dynpro uses principles of
MVC paradigm
Controller handle the user input
and steers the application
Views define the layout
Model holds and provide the
business logic
14
Web Dynpro Components

Web Dynpro Component contains
Windows
Views
UI elements
Layout
Controllers
Context Data
Eventing
Methods
Attributes
Component Interface
Interface Controller
Interface View
15
Web Dynpro Component Architecture : Internally Visible Web

Dynpro Entities
16
Web Dynpro Component Architecture : Externally Visible Web

Dynpro Entities
17
Web Dynpro Views and UI Elements
View
Is embedded into window
Defines the visible layout via
predefined UI elements
Dont contain any HTML or scripting
UI elements
Are the smallest UI building blocks
(button, input field,)
Available as provided UI element
libraries
Have properties which steer their
behavior
Can be nested with Container UI
elements
Are positioned in hierarchical structure
18
Defining View Layout
19
UI Element Categories
Various categories of UI element are supported
Each UI element object is represented as an abstract class that is independentof any

client presentation layer.
20
View and View Controller

View
Contains the UI element
Defines the Layout
UI elements mapped to Context
nodes
View Controller
Stores Data in Context
Methods access context data and
Model layer
Supply functions fill context nodes
Actions for event handling
21
Windows and Nested Views
22
A Window is a set of all possible views that

can make up a visible screen
A window can have zero or more views

embedded in it
A View can have ViewContainerUIElement.

This allows nesting views within a window
A ViewContainerUIelement can only display

one view at a time.
View Assembly
The Subset of views visible at any point of time is known as a View Assembly.
Navigation causes either specific views within a view area to be replaced, or it can
cause entire view combination within the window to be replaced
View Assembly 1
23
View Assembly 2
View Assembly 3
Context Mapping
Component Controller
Controller which is the backbone of the Web
Dynpro component
Has its own Context
Contains the logic for interaction with the
model (ABAP class, function modules,
BAPIs, Web Services)
Context Mapping
Nodes of Component Controller context can
be mapped to nodes of other contexts
Framework cares about data transport
(references)
24
Context Mapping
Context mapping allows a context node in

one controller to be supplied automatically
with data from a corresponding context
node in another controller.
When two controllers within the same

component share data through a mapig
relationship, it is known as Internal
Mapping.
The mapping between controller contexts

located in different Web Dynpro
components is known as External
Mapping.
25
Mapping Relationship between Component

Controller and View Controller
Data Binding
Context
Mapping
Data binding is the means by which data is

automatically transported from a view
controllers context to a UI element in its layout,
and visa versa.
The Web Dynpro framework then manages the
following two tasks:
The transport of data from the context
attribute to the UI element during the
screen rendering process
Repopulating the context attribute from the
UI element after data has been entered by
the user and the next server round trip is
initiated.
Data Binding
26
Concepts: Web Dynpro Application

Web Dynpro application is an entry point into a Web
Dynpro component and is the only Web Dynpro
entity that can be addressed via a URL.
In order to define a Web Dynpro application, you
must Specify :
Which interface view of the root component will be

used; the default views) in this interface view defines
the default view assembly.
The component to be invoked; this component is

then known as the root component
Which inbound plug will act as the entry point for the
nominated interface view (this inbound plug must be
of type Startup)
27
Session Summary
You should now be able to:
Describe the declarative programming approach used to create Web Dynpro
applications.
Explain the benefits resulting from this metadata approach.
List the most important elements that are part of a Web Dynpro application
and that can be defined declaratively
28

Web Dynpro For ABAP: IBM Global Business Services

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Dynpro For ABAP: IBM Global Business Services

Hochgeladen von

Copyright:

Verfügbare Formate

IBM Global Business Services