Introduction to

Web Dynpro
Objectives
• Explain the significance of Web Dynpro
along with the Web Dynpro architecture.

• Describe the advantages of Web Dynpro.

• List and describe the basic and important components

of Web Dynpro.

• Develop a simple Web Dynpro application program

by making use of the Web Dynpro components,
User Interface, and context programming.

Copyright © 2014 Accenture All rights reserved. 2

Agenda
 Introduction

 Web Dynpro Advantages

 Web Dynpro Architecture

 Web Dynpro Components

 View
 Component Controller
 Window
 Application

 Web Dynpro Performance guidelines

Copyright © 2014 Accenture All rights reserved. 3

User's Perspective:
Processing Web Dynpro
URL to access
the Web Dynpro
application

Processing
Web Dynpro
application

Copyright © 2014 Accenture All rights reserved. 4

Application Scenarios with Web Dynpro

Application
Web browser SAP GUI
Client

Presentation Layer
Web Dynpro BSP Dynpro

Business Layer ABAP XSLT / ST

Functions Classes Web Services

Open SQL Native SQL

Persistence Layer
Database Interface

Database
(AS ABAP Schema)

Copyright © 2014 Accenture All rights reserved. 5

Introduction
Web Dynpro for ABAP

• SAP standard UI technology for developing Web applications

in the ABAP environment

• Consists of a runtime environment and a graphical development

environment

• Supports ABAP, and JAVA

• Support reuse of components

• Involves little coding and lot of design

• Web Dynpro framework is based on Model View Controller (MVC)

architecture

Copyright © 2014 Accenture All rights reserved. 6

Web Dynpro Feature

Advantages

• Strict separation between the layout and business data.

• Re-use and better maintainability through reusability.

• Automatic input checks.

• Automatic data transport, using data binding.

• WYSIWYG (What You See Is What You Get) view editor.

Copyright © 2014 Accenture All rights reserved. 7

Web Dynpro Component Architecture

Model

• Forms the interface to the back end of the system

• Enables Web Dynpro application access to data

View

• Representation of data in the browser

Controller

• Formats the model data to be displayed in the view

• Process entries made by the user

Copyright © 2014 Accenture All rights reserved. 8

Web Dynpro Component Architecture

Model View Controller (MVC)

Model

Controller

View

Copyright © 2014 Accenture All rights reserved. 9

Web Dynpro Components
Access via Transaction SE80

View

Component Controller

Window

Application

Copyright © 2014 Accenture All rights reserved. 10

Web Dynpro Components

View

• View Layout

• Context View

• Actions

• Methods

• Properties

• Attributes

Copyright © 2014 Accenture All rights reserved. 11

Web Dynpro Components: View
View Layout

Context Menus
View
Designer
UI elements
hierarchy

UI Element
Library

UI elements
properties

Copyright © 2014 Accenture All rights reserved. 12

Web Dynpro Components: View

View Layout: Adding UI element

• By right-clicking on the ROOTUIELEMENTCONTAINER

• By dragging and dropping

Copyright © 2014 Accenture All rights reserved. 13

Web Dynpro Components: View

View Layout: Customizing UI element property

Layout Properties

Copyright © 2014 Accenture All rights reserved. 14

Web Dynpro Components: View

Context View: Define context binding

Drag and drop

Copyright © 2014 Accenture All rights reserved. 15

Web Dynpro Components: View

Context View: Define context binding

Layout Properties

Copyright © 2014 Accenture All rights reserved. 16

Web Dynpro Components: View

Action: Creating Events

Layout Properties

Copyright © 2014 Accenture All rights reserved. 17

Web Dynpro Components: View

Methods: Hook methods

Method Name Applicable To Function
WDDOINIT Component Initialization method of controller
Controller and View
Controller
WDDOPOSTPROCESSING Component Prepare output
Controller
WDDOBEFORENAVIGATION Component Error handling before navigation through
Controller application

WDDOAPPLICATIONSTATECHANGE Component Handling for suspending and resuming an

Controller application
WDDOBEFOREACTION View Controller Method for validation of user input

WDDOMODIFYVIEW View Controller Method for modifying the view before

rendering (refresh)
WDDOEXIT Component Cleanup method of controller
Controller and View
Controller
Copyright © 2014 Accenture All rights reserved. 18
Web Dynpro Components: View

Properties

Copyright © 2014 Accenture All rights reserved. 19

Web Dynpro Components: View

Properties

Framework controlled

• Controlled by the framework

When visible

• Limited to its visibility

Copyright © 2014 Accenture All rights reserved. 20

Web Dynpro Components: View

Attributes

Copyright © 2014 Accenture All rights reserved. 21

Web Dynpro Components: View
Attributes

WD_CONTEXT

• Reference to a controller interface

WD_THIS

• Self-reference to local controller interface

WD_COMP_CONTROLLER

• Reference variable of IG_ COMPONENTCONTROLLER

type
Copyright © 2014 Accenture All rights reserved. 22
Exercise 1

View
Overview: Build a simple webdynpro
Design layout view
application:
Create events
Data binding
Define methods

Refer to attached file for detailed

instructions.

Duration 30 minutes

Copyright © 2014 Accenture All rights reserved. 23

Web Dynpro Components
Access via Transaction SE80

View

Component Controller

Window

Application

Copyright © 2014 Accenture All rights reserved. 24

Web Dynpro Components
Component Controller
• Create Attribute

Copyright © 2014 Accenture All rights reserved. 25

Web Dynpro Components
Component Controller
• Create Node

Copyright © 2014 Accenture All rights reserved. 26

Web Dynpro Components

Component Controller

• 1. . .1 Exactly one context element is instantiated

• 0. . .1 Maximum one context element is instantiated

• 0. . .n Zero or more context elements are instantiated

• 1. . .n One or more context elements are instantiated

Copyright © 2014 Accenture All rights reserved. 27

Web Dynpro Components
Component Controller
• Create using the wizard

Copyright © 2014 Accenture All rights reserved. 28

Web Dynpro Components

Component Controller
• Create using the wizard

Copyright © 2014 Accenture All rights reserved. 29

Web Dynpro Components

Component Controller
• Create using the wizard

Copyright © 2014 Accenture All rights reserved. 30

Exercise 2

Create attribute
Overview: Modify previous exercise and
create context views
Create node

Refer to attached file for

detailed instructions.

Duration 30 minutes

Copyright © 2014 Accenture All rights reserved. 31

Web Dynpro Components
Access via Transaction SE80

View

Component Controller

Window

Application

Copyright © 2014 Accenture All rights reserved. 32

Web Dynpro Components

Window
• An entity into which we embed all the views
that will be used to construct the screen
for the end user

Copyright © 2014 Accenture All rights reserved. 33

Web Dynpro Components

Window
• By using Inbound plugs and Outbound plugs,
we define the navigation between views or windows

Copyright © 2014 Accenture All rights reserved. 34

Web Dynpro Components
Access via Transaction SE80

View

Component Controller

Window

Application

Copyright © 2014 Accenture All rights reserved. 35

Web Dynpro Components

Application
• After developing a Web Dynpro component,
we need to provide the users with access
to its functionality

Copyright © 2014 Accenture All rights reserved. 36

 Web Dynpro Components: View

Application
• To run the application, we can use the Execute button
or we can copy and past the URL into the browser

Copyright © 2014 Accenture All rights reserved. 37

Exercise 3

Create inbound plug

Overview: Modify previous program,
define navigation of views Create outbound plug
using inbound and outbound
plug Create Web Dynpro Application

Refer to attached file for

detailed instructions.

Duration 30 minutes

Copyright © 2014 Accenture All rights reserved. 38

 WDA Performance Guidelines

Do’s and Don’ts: Web Dynpro Components and Context

Do’s Don’ts
Do delete all Web Dynpro component Do not write the entire application
instances as soon as they are no longer source code in Web Dynpro
needed. To do that, use components.
IF_WD_COMPONENT_USAGE=>DEL
ETE_COMPONENT.

Do use dynamic navigation or dynamic Do not create a Web Dynpro

component usages only if it is component for one single view only.
absolutely necessary.

Do set the lifetime of a view to when Do not put all your data into the context.
visible, if the view is displayed only
once in an application.

Copyright © 2014 Accenture All rights reserved. 39

WDA Performance Guidelines
Do’s and Don’ts: Web Dynpro Components and Context
Do’s Don’ts
Do write your application source code Do not create deep-nested contexts.
in ABAP OO (Object Orientation)
classes.

Do use Web Dynpro components only Do not use dynamic attributes

for managing the views and context. (IF_WD_CONTEXT_NODE_INFO-
>ADD_ATTRIBUTE).

Do group together as many views that Do not create long context mapping
belong to one application part as chains.
possible.
Do put only the data required for the UI Do not create a mega context for all
element binding into the context. data belonging to one application.

Copyright © 2014 Accenture All rights reserved. 40

WDA Performance Guidelines

Do’s and Don’ts: Web Dynpro Components and Context

Do’s
Do put only the data required for
the UI element binding into the
context
Do use the assistance class or
other ABAP OO classes for the data
exchange
Do use singleton nodes if nestings
(master detail) as necessary
Do use data with context structure for
BIND_TABLEUpdate the context only if
the data actually has to be updated

Copyright © 2014 Accenture All rights reserved. 41

WDA Performance Guidelines

Do’s and Don’ts: Web Dynpro UI Elements

Do’s Don’ts
Do create application screen that fit into Do not use container scrolling
a typical browser window. (scrollingMode<>none)
Do use the scrolling features of Table, Do not use the scrolling function of the
Multipane and RowRepeater browser window
Do use a Table with either Avoid deep nestings of Containers,
TreeByKeyTableColumn or Groups, and TabStrips.
TreeBYNestingTableColumn
Do modify your UI elements only if they Do not insert any Transparent
really have to be changed Container UI elements into Container
UI elements, for example, Groups.

Copyright © 2014 Accenture All rights reserved. 42

WDA Performance Guidelines

Do’s and Don’ts: Web Dynpro UI Elements

Don’ts
Do not use dynamic UI element
programming and/or multiple
components for repeating layouts.
Modify UI elements only if they really
have to be changed
Do not use the UI element tree
Avoid deep nestings of Containers,
Groups, and TabStrips.
Do not insert any Transparent
Container UI elements into Container
UI elements, for example, Groups.

Copyright © 2014 Accenture All rights reserved. 43

 Summary
Web Dynpro is SAP’s standard UI technology for developing business applications
with Web-based user interfaces.

Advantages of the Web Dynpro application include:

• Minimum coding maximum design

• Separate layout and logic
• Support Web services and data binding
• Support reuse of components
• Run on multiple platforms

SAP Web Dynpro is based on original MVC design for decoupling presentation
and application logic.

Windows, Views, UI elements, Layouts, and Controllers form the basic components
of a Web Dynpro application.

Copyright © 2014 Accenture All rights reserved. 44

Summary
Data binding is the means by which data is automatically transported from a
view controller’s context to a UI element in its layout.

The different types of Controllers include:

• Component Controller,
• Custom Controller,
• Configuration Controller,
• View Controller
• Windows Controller
Specific iViews should be created in order to run a Web Dynpro ABAP application
within SAP enterprise portal.

All WDA components, applications, and parts of the component are integrated parts of
the standard correction and transport system (CTS).

The standard ABAP lifecycle concepts fully apply to all Web Dynpro-based applications.

Copyright © 2014 Accenture All rights reserved. 45

Introduction to
Web Dynpro