How many of you ABAP program-
mers remember when business programming was dominated by client/server
computing? Come on! The early nineties wasn't all that long ago! It was
then that ABAP first made its mark, and many of you were gaining a mastery
of distributed computing techniques. Client/server, a model that could
distribute computing loads across the resources of your own enterprise,
has since yielded to web-based client/server models that leverage the
collaborative, standards-based medium provided by the Internet. Business
applications today aren't constrained within the boundaries of one company.
They can cut across multiple enterprises to serve all the organizations
that comprise a collaborative space.
What implications does this raise for ABAP
programmers? Are your current client/server programming skills doomed
to become obsolete? Absolutely not! Most ABAP programmers possess an invaluable
command of business logic. SAP environments the world over, now and forever
more, need that skill set. But I would suggest to you that it's time to
start thinking about expanding your skill set to include some web UI development
techniques. You can build applications using the same business logic you
are conversant in now, but start adding web UIs.
But how can an ABAP programmer who doesn't
necessarily have familiarity with web development tools and techniques
even begin to web-enable business applications and leverage common standards
like HTML, XML, and HTTP? The answer is the SAP Web Application Server.
This platform makes it easy for you. As of Release 6.10, the SAP Web Application
Server (the successor to the Basis system you all work with) supports
all these standards. The tools in the 6.10 Web Application Builder
(see Figure 1) make it easy, from a programming perspective,
for you to add a web UI to an ABAP
application - and in a manner that encapsulates business logic from the
|Dynamic Page editor
code editing features such as drag-and-drop Syntax
for access by web designers, with tools they commonly use to design
web UIs over a WebDAV interface
libraries for standards like HTML, WML, XHTML in all available versions
of tag definitions
of styles, icons, and images
for customer branding
overwriting of MIMEs
|Web Application Builder Tools - Making it Easy to Build Web
A Dynamic Page Editor
A key consideration for the development of a good web application (or
web UI) is how the pages will show up in the end user's browser window.
I like to think about pages from both the programmer's and the web designer's
point of view.
Typically, a web designer works with a
tool that is not integrated with SAP software and that supports WebDAV,
a distributed authoring and versioning protocol for the web. When a design
tool supports the WebDAV protocol, designers can use it as a WebDAV client,
which can check WebDAV content in and out of a WebDAV server. Because
the SAP Web Application Server supports the WebDAV interface, the content
of the web application development repository appears to WebDAV clients
as a virtual file system that can be viewed in file folders of other corresponding
The page editor of the Web Application
Builder was not designed to serve as a substitute for robust web
design tools, but rather to incorporate the use of these tools. Built-in
integration for these types of tools means that pages can travel back
and forth between the repository and the designer's desk. What the page
editor does provide is basic script-editing and HTML code-editing features,
such as drag-and-drop (see Figure 2). It also allows for syntax
checks and includes a "preview," which scans the static HTML
code and displays it in a preview window. Note that with the page editor:
- You can add parameters to your page and inspect properties, such
as its URL, and request the page in a web browser by pressing F8, just
as you can with ordinary ABAP programs.
- Flexible pages are parameterized, and the parameters are usually
linked to the ABAP dictionary, since page parameters are very often
referenced by SQL statements whose result rows populate dynamic web
- You can attach event handlers to your pages for the different points
in time when a page is initially loaded, when the layout is being processed,
or when the user issues a submit request.1
||Page Editor in the Web Application Builder
When designing the Web Application Builder, we felt that strong support
for a tag library would be absolutely essential. Typing HTML code is tedious
work, and you won't generally be able to rely on the web designer to provide
you with all the HTML code your application is going to need.
We therefore inserted standard tags for
HTML, WML, and XHTML (with support for multiple versions) in the development
repository (database tables), so you can drag-and-drop tags into the page
editor, eliminating the need to constantly browse the corresponding web
sites. Tag libraries also provide an abstraction mechanism for web UI
rendering, since complex HTML rendering can be hidden behind custom tags.
We will soon support custom tags for standard development tasks such as
SAP table rendering.
Testing and Debugging
Debugging and testing is particularly fast and easy with the Web Application
Builder. If you are comfortable with these facilities for your ABAP code,
you'll be comfortable with what we deliver to test and debug your script.
You can arbitrarily set breakpoints in the page editor. If the runtime
environment detects a breakpoint condition, a debugger window pops up
that transfers control to your application's logic.
All standard debug commands (setting watchpoints, examining the call stack,
etc.) are available.
Dynamic web pages may contain database content, icons, symbols, pictures,
and so on. To help you conveniently and effectively organize all these
elements, the Web Application Builder offers a MIME repository. The repository
contains a hierarchy of MIME-type objects such as JPGs, GIFs, and even
higher-order objects such as cascading stylesheets.
The repository is subdivided into application-specific
and application-independent folders. Each web application has its own
folder that you can substructure as you would any folder. If you drag
a MIME item and drop it into the page editor, the correct path name is
inserted at the drop position. A context menu allows you to preview or
upload the contents of the MIME repository.
During runtime, MIMEs are cached in the
Internet Communication Manager's (icman) cache to reduce database I/O.
There are times that you want to put a different face (or a variety of
pretty faces) onto an application - same logic, but a different look,
perhaps one that is tailored for a specific customer or vendor. In cases
like this, you'll want to be able to customize the appearance of the application
without actually changing the application logic. The Web Application Builder's
"theme editor" allows you to override any MIME object that is
referred by your web application.
With the editor, you have an application-specific
view of your local MIME hierarchy, so that you can decide which visual
elements should be substituted. Even application-independent MIME elements
can be overwritten, but changes will apply then to all dependent applications.
SAP Web Application Server Runtime Environment
The SAP Web Application Server, given its support for HTTP, enables
web browsers to directly request dynamic web pages that are fed
with data from SAP systems without the need to set up a separate
If you issue a URL to the SAP Web
Application server, the runtime environment will parse the URL and
find the web application and corresponding page that is rendered
in a dynamic fashion. The page may contain arbitrary HTML, XML or
WML content. The dynamic content parts are computed using server
The Web Application Builder is based on the ABAP Development Workbench.
Those of you who are familiar with the ABAP Development Workbench will
find that the Web Application Builder offers a familiar environment for
learning the ins and outs of a new set of tools and utilities, all to
help you quickly and easily build flexible web UIs for your applications.
Karl Kessler joined SAP
in 1992. He is the Product Manager of the ABAP Workbench and is responsible
for all rollout activities. You can reach him via e-mail at firstname.lastname@example.org.
The event handlers form the bridge to the business logic. If you develop
highly complex web applications, you can strictly separate the presentation
and the business logic using an associated application class. Only method
calls to objects of the application class should be used in the event
handler and the layout specification.