The most recent release of SAP Web Application Server (Web AS) is a major
milestone, both for SAP’s development and runtime environment for
Java and J2EE and for its robust technology stack for SAP applications.
With Release 6.30, developers will find a number of enhancements to our
Web AS offering, and one especially anticipated highlight — the
integration of Web Dynpro technology.
To match its innovative technology, Web Dynpro
is accompanied by powerful tools for developers.
These tools directly reflect the Web Dynpro
philosophy, so developers will find that the
tools can help lead them, step by step, through
successful Web Dynpro design and significantly
speed up the learning curve for this new technology.
This article provides a preview of the design-time
tools for Web Dynpro that come along with the
6.30 delivery and are now available in the
Web AS 6.30 developer’s edition (including the CRM and Flight Data demos
described here). So if you haven’t had the opportunity for some
hands-on testing of Release 6.30, you soon will!
How the Web Dynpro Philosophy Has
Shaped These Design-Time Tools
Web Dynpro tools were first presented to SAP customers and partners at
SAP TechEd 2002. Since then, you’ve likely encountered plenty of
information and resources1 on the Web Dynpro
approach, the Model-View-Controller programming model, the use of the
Eclipse open-source development environment, and the SAP NetWeaver Developer
Studio (formerly referred to as “SAP Java IDE”). But to understand
why the Web Dynpro design-time tools are constructed as they are —
and why they are absolutely essential to successful development for the
Web Dynpro runtime — a quick sketch of the Web Dynpro philosophy
Web Dynpro offers a new programming model
for Web user interface design and implementation
on top of the SAP Web AS J2EE stack. Just as
the Web Dynpro runtime is seamlessly integrated
with SAP’s J2EE engine, the design-time environment for
Web Dynpro applications is tightly integrated in SAP’s NetWeaver
Developer Studio and development infrastructure.
As of Release 6.30, SAP NetWeaver
Developer Studio is based on Eclipse.2 The
various Web Dynpro development tools follow
the basic principles of all Eclipse plug-ins,
but are extended to offer a very rich graphical
user interface experience with built-in modeling
support. This is critical, because when you
design a Web Dynpro application, you are moving
away from code-based programming and the “quick
and dirty” web design that often
leads to unclear or confusing navigation flows.
Instead, in a Web Dynpro design you leverage
models, not just for designing layout, but
also for handling navigation, and even for
binding data to underlying business models.
Code is only added at a very late phase in
the Web application design — a new
mindset for Java developers or ABAP developers who have worked with BSPs.
The result is an approach to Web application design that lends itself
easily to reuse and modification.
What may be most unfamiliar to ABAP developers,
and perhaps even to Java developers, is the
adherence to the Model-View-Controller (MVC)
principle.3 With Web Dynpro, each Web
user interface is roughly divided into three layers, each of which can
be developed and modified independently:
- Presentation (the view)
- Interaction (the controller)
- Business data (the model)
The design tools included in Web AS 6.30 take
their cues directly from this model. Each tool
ensures that these layers remain separate within
each project, so you can easily access an individual
layer when it comes time for modifications,
without necessarily affecting the entire project.
An Overview of Your Project: Eclipse Workbench,
Web Dynpro Explorer, and SAP NetWeaver Developer Studio
Like all SAP plug-ins for Eclipse, Web Dynpro
tools can communicate with SAP’s development infrastructure. In the developer’s edition
of Web AS 6.30, source files are stored in the Eclipse Workspace folder
and deployed from Eclipse directly to the locally running J2EE engine.
To allow you to start right in, with the developer’s
edition both designtime (IDE) and runtime
(J2EE engine) are residing on your local
When you start to develop your first Web Dynpro
application (or want to familiarize yourself
with an existing one), first open the Web Dynpro
perspective from the Eclipse Workbench. In
the Workspace (see Figure 1), you can view all project information,
like a component in your application, in diagram form.
||Eclipse Workbench: Viewing Your Project in Diagram Form
Any Web Dynpro applications stored in the
Eclipse Workspace can be viewed in the Web
Dynpro Explorer (see Figure
2). Eclipse itself does not offer much support for presenting
logical hierarchies like these, so the SAP NetWeaver Developer Studio
framework provides this level of abstraction.
You could also inspect a physical file hierarchy,
but at this point that could be confusing.
Because the Web Dynpro is so model-driven,
a lot of Java code is generated automatically
for you as you start to add components (e.g.,
Web Dynpro views) to your project.
||Web Dynpro Explorer
Every Web Dynpro application consists of a Dictionary
and a Web Dynpro part, as highlighted in Figure 2. When you select
the Dictionary, you will see the common data types (field formats,
input validations) that are used at different points in your application
to enhance consistency.
The Web Dynpro consists of three categories:
Applications, Components, and Models. Once you select
an application, the Web Dynpro Explorer window opens and allows you to
launch applications directly on the J2EE engine (see Figure 3).
Under Applications, you can select, edit, run, and deploy the
Web Dynpro application directly from the browser. Under Components
you find all the reusable elements of a Web Dynpro application. A Web
Dynpro component hosts all the Web Dynpro views and controllers. Models
offers access to the underlying business data and business models. For
example, in Figure 3, you can see that the business model is derived from
BAPI methods (Bapi_Sflight_Getlist_Input, etc.).
||Web Dynpro Explorer Connected to the Java IDE
of the Web Dynpro Application
If you’re an ABAP developer, you can
think of the Web Dynpro
part of your application as a collection of Web Dynpro controls, such
as labels and fields, that form a group similar to an ABAP subscreen.
The overall structure of a Web Dynpro component is made visible in the
Application Modeler (see Figure 4), which, as its name
suggests, defines the model for a Web Dynpro application.
||A Flight Data Example in the Application Modeler
The Application Modeler presents the various
Web Dynpro views in the component’s main window (under Component/Windows/Main).
Web Dynpro views are depicted as simple rectangles. The modeler shows
the Web Dynpro views that make up the application — and the relationships
between the different views — without actually displaying the view
Web Dynpro views can be organized as “viewsets”
using layout containers such as the grid containers or so-called T layouts
that are common in web user interfaces. From any view in Figure 4, you
can drill down to obtain further details in the View Designer (see next
Figure 4 shows a very simple example. Of course,
it is possible to display more than one Web
Dynpro view in a particular pane in the browser.
For any given area, the Application Modeler
can help clarify which views are available
for display. It also models how one view will
trigger another, with “plugs” that are used to connect
views. Every view has an inbound and an outbound plug. You can easily
connect the outbound plug of one view with the inbound plug of a second
Let’s have a look at another, more complex
example: a Customer Interaction Center (CIC). This example is also part
of the demo in the SAP Web Application Server 6.30 developer edition,
so you’ll be able to test it out for yourself as well.
As mentioned earlier, Web Dynpro is very model-driven.
In this case, an employee is working in a call
center. When a customer call comes in, the
agent needs to find the customer’s record in
the customer database. In the Application Modeler, the application models
each step (see Figure 5). The agent enters search criteria
in the search view BusinessPartnerSearch and triggers the list
display of the customer contacts (SelectContactPersonFor...).
By selecting a contact, the ContactDetail view is triggered.
From here, the agent can display the orders, and for each order can drill
down to the OEM details (ProductDetail). The agent is then ready
to switch to a new viewset that contains a view to document the phone
call (ContactDetail) and a view with the history for that customer
(CustomerHistory), before moving on to the next call.
||A CIC Example in the Application Modeler
This example demonstrates the power of Web
Dynpro. Only the changed views are rendered
in the browser for a flicker-free web user
interface. The flow of control is made visible
in the Application Modeler, making the overall
application modular for easier customizing,
without the need to write code. Changing the
layout of your web application is simplified;
developers with a purely Java background are
often impressed that changing the layout can
be as easy as rearranging the existing views!
Relationships Among Views
While the Application Modeler focuses on the views and their relationships,
the View Designer is a WYSIWYG tool that edits view details. For instance,
for the detailed look shown in Figure 6, you can drill
down directly from the view of the Flight Data demo shown back in Figure
To reach the View Designer, open a Context
menu from within the application’s model. The list of Web Dynpro
controls (labels, fields, tables, radiobutton groups, etc.) that make
up your view is conveniently listed. The views layout is displayed in
the layout pane that allows you to select individual controls with the
mouse. A rich palette helps you to select controls and drag and drop them
in the layout to the outline view. Alternatively, the Context
menu can provide a structural view of the layout, if you prefer.
Controller and Context Editor: User
Web Dynpro offers a multilevel controller
concept. Every Web Dynpro view has its own
associated view controller that handles all
user interactions on a particular view (i.e.,
clicking a button, adding a keyword to a search
field, etc.). Any code that spans multiple
views is implemented in custom controllers
that belong to a specific Web Dynpro component.
Each controller manages its own context, which
is structured hierarchically. You define the
controller’s context in the Context Editor
In Web Dynpro terminology, the context
hierarchy of a controller consists of model
nodes. Model nodes that belong to different
controllers can be mapped. This allows data
to be transferred between the controllers automatically.
For example, going back to our Flight Data
demo, if you have a scenario with a selection
page (to select the flight) and a detail page
(displaying flight details), you can map the
model nodes accordingly. This means that with
some mouse clicks, and without a single line
of code, you can take a value that was entered
on a selection page and set it to be transferred
automatically to your detail page.
Web Dynpro tools are a comprehensive set of highly graphical development
tools tightly integrated in SAP NetWeaver Developer Studio. Web Dynpro
tools offer a model-driven approach to Web applications where development
is done in a declarative way for each layer of your web application.
For more information on Web Dynpro, available as part of SAP Web Application
Server, visit www.sap.com/netweaver.
1 For example,
see Franz-Josef Fritz’s article
“Web Dynpro Is Just Around the Corner — Will It Revolutionize
Your Web UI Development and Runtime Environments?” in
this issue of SAP Insider, as well
as my articles “Build More Powerful
Web Applications in Less Time with BSP Extensions and the MVC Model,” (January/February
2003 SAP Professional Journal, www.SAPpro.com)
and “SAP’s Strategy Toward an Integrated, Full-Featured Java
Development Environment” (January-March
2003 SAP Insider, www.SAPinsider.com).
2 See my discussion
of Eclipse and the Java IDE environment in “SAP’s Strategy Toward an Integrated, Full-Featured Java
Development Environment” in the January-March
2003 SAP Insider (www.SAPinsider.com).
3 This article
just touches on the MVC philosophy and the
different layers of the MVC approach. For
more information, see my article, “Faster Development and Greater Flexibility for Your Web
Applications? Two New Enhancements to the BSP Model Pave the Way” in SAP Insider (October-December 2002), www.SAPinsider.com,
and “Build More Powerful Web Applications in Less Time with BSP
Extensions and the MVC Model” in SAP Professional Journal
(January/February 2003), www.SAPpro.com.
Karl Kessler joined SAP in 1992. He is the Product Manager of the ABAP
Workbench and the SAP NetWeaver Developer Studio and is responsible for
all rollout activities. You can reach him via email at firstname.lastname@example.org.