This article appeared in the Jan Feb Mar 2006 issue of SAP Insider and appears here with
■ ■
permission from the publisher, Wellesley Information Services (WIS), www.WISpubs.com.
Web Dynpro — Not Just Regular Feature
for Java Developers Under
Anymore Development
One of the standout features of SAP
NetWeaver is its support for open tech-
nology and user interfaces that are
browser-based, model-driven, device-
independent, and accessible — in short,
everything today’s Web applications
require. SAP NetWeaver’s UI technology,
Web Dynpro, is a first-class approach
to building application content designed
to run in SAP NetWeaver Portal.
And because Web Dynpro is language-
independent by design, it’s not just for
Java developers. Those application devel-
opers who are fluent in ABAP and have
mastered Web enablement through BSPs
will now be able to build Web Dynpro
applications in a familiar development
environment with substantial support for
efficient, reliable development that they
can reuse and — best of all — that
requires minimal coding.
Some Background on
Web Dynpro
From the very beginning, the Web
Dynpro metamodel was designed in a
programming-language-neutral way. Web
Dynpro uses the model-view-controller
(MVC) approach to Web interface
development (see sidebar at top of next
page), so that a Web Dynpro component
and all its pieces have the same seman-
tics whether they are written in ABAP
or Java. The very first version of the Web
Dynpro development environment to be
delivered was for Java-based projects.
It included strong tool support from
SAP NetWeaver Developer Studio
based on the powerful, open-source
tooling platform Eclipse. The resulting
customer projects typically target SAP
NetWeaver Application Server Java as
the runtime environment.
But what if your team has strong
ABAP skills and a background in BSP
programming? Or perhaps the backend
services you would like to address are Karl Kessler, SAP AG
not fully exposed as the Web services or
remote function modules required for
Java model binding? Or what if, from a
performance point of view, you cannot the same metamodel as its cousin Web
afford a decoupling of UI logic executed Dynpro Java, and their views, models, and
on the server and the underlying business controllers share the same semantics —
logic? What if you already have working so there is no need for developers to
ABAP software maintenance in place learn a new UI paradigm. The main
but cannot quickly set up a development differences between Web Dynpro Java
infrastructure for Java? In all these and ABAP are simple ones designed to
cases, Web Dynpro ABAP can help. make it easy for developers to transition
between traditional ABAP projects and
Web Dynpro applications:
This article takes you on a quick tour ■
The Web Dynpro ABAP design-time
through the tools of Web Dynpro ABAP
environment is embedded directly in the
and walks you through a simple flight
ABAP Workbench. (For a look at how
report example to highlight new and
the tools are similar in functionality, see
updated tools in the familiar ABAP
the sidebar at bottom of next page.)
environment.
Web Dynpro artifacts (components,
views, models, etc.) are listed just like
any other of your ABAP-based projects
Web Dynpro ABAP is part of
and BSP applications. ABAP developers
SAP NetWeaver 2004s, which is the
can access all projects in the same
foundation for the shipment of the
way and in a familiar environment.
mySAP Business Suite, most promi-
nently mySAP ERP 2005. As its name ■
ABAP developers won’t find
suggests, Web Dynpro ABAP uses exactly any surprises in the development
Subscribe today. Visit www.SAPinsider.com.
 A Brief Guide to Web Dynpro Terminology for ABAP Developers
Web Dynpro strictly follows the model-view-controller (MVC)
paradigm, meaning that any application you design with Web
Dynpro cleanly separates the layout and the interaction code
from the business data.* In this widespread UI-development
paradigm, the component consists of three basic parts:
■
Model — The model indicates the business data to be
manipulated and corresponds to the global data and
tables of the module pool.
■
View — The layout information is all held in the view,
which corresponds roughly to fields and subscreens in the
traditional dynpro model.
■
Controller — The controller manages the interaction of
the interface. This corresponds to the flow logic in the
classical dynpro model.
* For an overview of MVC, see my article in the April-June 2003 issue of SAP Insider, as well as the article by Dr. Peter Tillert in the October-December 2003 issue, entitled
“How to Streamline User Interfaces: Web Dynpro Makes Software Reuse a Reality” (www.SAPinsider.com).
Some other Web Dynpro terms include:
■
Context — The context is technically a hierarchy of vari-
ables related to the user interface. ABAP developers can
think of the context as being similar to the field list,
while the dynpro fields are similar to the view. The field
transport then automatically copies the values from the
program to the user interface and vice versa. Likewise,
variables of the Web Dynpro context are copied back and
forth to corresponding Web Dynpro view fields.
■
Service controller — A service controller is a controller
that encapsulates a service call. In the example we walk
through in this article, this is a simple BAPI call.
■
Component — A component is a modular unit with
various interfaces (both programmatic and UI-oriented).

infrastructure, either. The correction

and transport system keeps track of
all changes, versions them, and helps
propagate the Web Dynpro application
from development to production —
just as you would do with any BSP
or dynpro-based applications.

■
The execution platform is the ABAP
server, rather than the Java server.
This ABAP server produces applica-
tion content ready to be seamlessly
integrated into the SAP NetWeaver
Portal. Features like portal eventing Figure 1 The Final Flight Search Interface, Automatically Generated and
can be used between applications Viewed in the Browser
written in ABAP and in Java or
generated by Visual Composer.

The story of Web Dynpro ABAP

Similar Functions, Different Tools
sounds simple: it’s easy and efficient Here is a quick look at the tools used for various designing tasks with dynpro
to create a modern Web UI with very and their corresponding tools when using the Web Dynpro model.
little coding and in a familiar ABAP Tool Aspect Dynpro Web Dynpro
development environment. As with Web
Layout Screen Painter View Designer
Dynpro for Java, however, while creating
Field List Editor Context Editor
the UI is simple, the Web Dynpro tools
within the ABAP Workbench are highly Outline of Object Browser Web Dynpro Explorer
sophisticated. This article takes you on program/component
a quick tour through the tools to show- Event code ABAP Editor ABAP Editor
case their capabilities, walking through
Navigation Implicit in code Navigation Modeler
a simple flight report example that
touches all major editors (see the result Data flow Implicit in code Data Modeler
in Figure 1). We created this same

Subscribe today. Visit www.SAPinsider.com.

interface with Web Dynpro Java in a
previous column.1 As with Web Dynpro
Java, you might be surprised by how
little coding is required.
1
See “Under Development: Your ‘Easy Way In’ to Web
Dynpro Development: New Design-Time Tools Now
Available with SAP Web Application Server 6.30” in
the April-June 2003 issue of SAP Insider
(www.SAPinsider.com).
Figure 2 Launching the ABAP Development Workbench in
SAP NetWeaver 2004s
Figure 3 Viewing the Newly Created Web Dynpro Component
New Workbench Tools for Web ■
Web Dynpro Wizard
Dynpro ABAP
■
New updates to editing code in the
This article will introduce new or
ABAP Workbench
updated tools that SAP has added to the
familiar ABAP environment, including: Let’s jump directly into our example,
beginning with the ABAP Development
■
Web Dynpro Explorer
Workbench (transaction SE80). In
■
Web Dynpro Designer Figure 2, you can see that the dropdown
box now includes a new category for
Web Dynpro Component/Interfaces.
Here’s where our work starts.
The Web Dynpro Component
You can think of a Web Dynpro component
as a modular unit with various interfaces
(both programmatic and UI-oriented).
To start the process, name your new
component (z_bapiflight in our example).
Once you enter this component name, a
dialog pops up to actually begin creating
the Web Dynpro component in the Web
Dynpro Explorer. Here, you’ll be asked to
fill in the typical correction and trans-
port information. In our result, shown
in Figure 3, the outline of the newly
created Web Dynpro component is on
the left and some dependency informa-
tion is on the right.
One of the outstanding features of
the Web Dynpro model is its ability to
have data attached on various levels
(e.g., the view and the controller). This
is much like the classic dynpro, which
had a similar feature based on field lists
and dynpro fields; a field transport then
automatically copied the values from
the program to the UI and vice versa.
Web Dynpro follows this tradition,
but in a much more fine-grained way.
This is the context, which is technically
a hierarchy of variables related to parts
of the user interface. You can attach a
context to a view on the view level and
to a component on the component level,
which is not necessarily visualized. Once
you have defined the contexts at the
various levels, you can then graphically
map context nodes in the Context Editor
and the information flows automatically
— you will see this in our example.
Subscribe today. Visit www.SAPinsider.com.
Web Dynpro View and Designer
A view contains all visual controls, such
Web Dynpro
as buttons, labels, and fields. From the Designer
outline menu, we create a new view,
which can be edited in the Web Dynpro
Designer (see Figure 4). The Web
Dynpro Designer is a WYSIWYG tool
that immediately renders what you have
changed so far. On the left you see a rich
palette of graphical controls at your
disposal, grouped by category. You simply
Control
drag and drop controls into your layout. Palette
On the upper right, the control is incre-
mentally built, and below you find the
usual list of properties for that control.

Web Dynpro Wizard

Now that the view is complete, we need
to manage how these controls function —
Figure 4 A View of the Web Dynpro Designer
in this case, we’ll focus on a key control
in our interface, the “Search Flights”
button (the Get List function). At the
controller level, we could start to main-
tain the layout manually, but there is a
much faster method: the Web Dynpro
Wizard. This wizard helps you derive a lot
of properties for input fields and output
fields automatically. Launch the wizard
from the context menu of the Web Dynpro
Explorer and a dialog pops up asking
you for the specification of a service
controller. In our example, this is a simple
BAPI call, but it could be a simple func-
tion module or a Web service call as well.

The wizard guides you through a

series of steps (see Figure 5) where you
first select a controller that should
contain the service call (I simply used
the component controller), then you
specify a service type (function module),
then the name of the function module
or BAPI to be called, and finally the
parameters of the BAPI that should be
reflected in the context.
The final result of the wizard is the
context for the service call triggered by
the Get List button, as shown in Figure 6.
The context hierarchy on the right side
contains the DESTINATION_FROM and
DESTINATION_TO fields, which will
Figure 5 The Web Dynpro Wizard for Generating the Service Call
serve as search criteria, and the
FLIGHT_LIST as the result table.
Defining the Graphical Layout
of the Interface
Now that we have created the context
for the service call, let’s quickly specify
the graphical layout of our application
(see Figure 7), including mapping the
controller to the view. In Figure 7, you
see how the controller context and the
view context are mapped. The Web
Dynpro runtime will transport the search
fields (in our example, DESTINATION_
FROM and DESTINATION_TO) from
the view to the BAPI call, execute the
BAPI, and place the result table back in
the view context again so that the Web
Dynpro rendering can produce the
output page in the browser.
Once you’ve defined the mapping,
you can derive a container form that
renders all the fields plus their labels
derived from the BAPI definition simply

Subscribe today. Visit www.SAPinsider.com.


Figure 6 The Controller Context for the Service Call Invoked by the Search
Flights Button, Generated from the Web Dynpro Wizard
Figure 7 Mapping the Controller and View Contexts
by selecting a context node for DESTI-
NATION_FROM and selecting the
relevant fields.
To launch the BAPI from the user
interface, we need to add a button,
associate an action with the button,
and place the BAPI call inside. The
code is then presented in the brand-new
ABAP Editor, which is full of features
that make it worthy of its own “Under
Development” column (see sidebar on
next page).
But, as I mentioned above, Web
Dynpro is not the place to dive into
code. Of course, you probably won’t
get away with no coding, but the Web
Dynpro development environment is
designed to capitalize on reuse and
Subscribe today. Visit www.SAPinsider.com.
keep manual coding to a minimum. So
instead, we’ll focus here on the last step,
where we add a table to the layout and
specify its binding. The result is shown
in Figure 8 on the next page.
Launch the Application
We’re almost done. What is missing is
the proper embedding of the view in the
component’s window (see Figure 9)
and the creation of a starting point
for the application. Once you test your
application, data flows from the input
fields to the BAPI call, and the results
of the BAPI call are immediately and
automatically sent back to the table
control, which is finally rendered in the
browser, as shown back in Figure 1.
This step completes our quick tour.
Although the application was a simple
example, it touched on the important
areas of the Web Dynpro tools set inside
the ABAP Workbench.
More Advanced Features of
Web Dynpro ABAP
Web Dynpro has much more to offer
than simple input/output handling. Maybe
you saw the rich palette of controls in
the view layer back in Figure 4. Besides
offering nice features such as predefined
business graphics and embedded Microsoft
Office applications, Web Dynpro hosts a
complete form design environment based
on Adobe Designer. Here you can define
interactive forms that exchange contex-
tual data with Web Dynpro controls as
if they were properly built in. During
runtime the Adobe formula is then
processed in the Web Dynpro context.
Features like context mapping are
applicable here as well.
Other features also ease development
and make for richer interfaces. For
example, you can take advantage of
personalization features that allow an
end user to customize the order of
columns that are displayed — and hide
columns that are not needed — in a
large table. In addition, portal integration
(e.g., portal eventing), definition and
reuse of Web Dynpro components, and the
Web Dynpro ALV, which has similar
capabilities as its counterpart in the
ABAP controls world,2 are also now
available with Web Dynpro ABAP.
For more information, please visit
www.sdn.sap.com
Web Application
Server
ABAP to view tutorials about
Web Dynpro ABAP’s additional features.

Summary
Web Dynpro ABAP is a strong model-
driven tooling environment based on
the classical ABAP infrastructure. The
focus of Web Dynpro ABAP is not just
on getting interfaces ready for use as
iViews or for browser-based access.
2
Beyond the Web Dynpro controls layer, Web Dynpro Figure 8 The Final Layout of the Flight List Interface with Table Binding and
ALV offers a lot of prebuilt functions for filtering, Object Properties
sorting, and totaling similar to the classic ALV.

The New ABAP Editor with Web Dynpro ABAP

A complete discussion of the new ABAP
Editor is certainly beyond the scope of
this article, but here is a list of some of
its more outstanding features:
■
Coloring and highlighting that reflects
the ABAP syntax.
■
Source code compression that allows
you to fold and unfold a syntactical
structure, such as method…endmethod.
For example, you can expand or
collapse a “while loop” so you can
hide the code inside the loop.
■
Macros, which mean less typing for
developers. For example, you can
generate “if-then-else” constructs to
save development time and effort.
■
Code snippets, which allow developers New ABAP Editor
to cut and later paste some lines of
code. For example, you can reuse a
A future “Under Development” column will cover the
sort function later on that you don’t currently need.
ABAP Editor in more detail. For more on the new ABAP
■
A lot of personalization extras, including color assign- Editor, please see www.sdn.sap.com
Web Application
ments, indentation rules, etc. Server
ABAP.

Subscribe today. Visit www.SAPinsider.com.

It’s also on making it easier for devel-
opers to create these interfaces, whether
it’s functionally, with a familiar develop-
ment environment, or technically,
with final Web application interfaces
Figure 9 Web Dynpro Builder
that can integrate with and run in
SAP NetWeaver Portal.
The best news of all for ABAP devel-
opers is that you’ll be typing in less code
Subscribe today. Visit www.SAPinsider.com.
and making better use of the applica-
tions you’ve already built: coding is
reduced to a minimum in Web Dynpro
applications, and reuse is a key part of
the Web Dynpro strategy.
If you currently develop applica-
tions based on BSP, you should look at
whether Web Dynpro offers additional
choices and more abstraction than
low-level HTML code.
For more information, please
visit www.sdn.sap.com
Web
Application Server
ABAP or
help.sap.com (and search for Web
Dynpro ABAP).
Karl Kessler joined SAP in 1992. He is the
Product Manager of the SAP NetWeaver
foundation, which includes SAP NetWeaver
Application Server, Web Dynpro, ABAP
Workbench, and SAP NetWeaver
Developer Studio, and is responsible for
all rollout activities. You can reach him
via email at karl.kessler@sap.com.