When the Business Server Pages (BSP) model, a powerful technique to implement
web applications and web UIs, was first introduced on the SAP Web Application
Server platform, many customers embraced this new technology. Business
Server Pages offer an easy, direct approach to bringing classic SAP content
(such as results from function module calls and SAP tables) into web applications.
Even better, the BSP runtime is tightly
integrated in the traditional ABAP runtime platform, so many familiar
Workbench tools - such as the Object Navigator, the Editor, and the Debugger
- can be reused for web development. The typical ABAP programmer, with
just a little understanding of HTML, can learn enough in a one-day workshop
to develop web applications from scratch.
This technology has continued to evolve,
and SAP has more recently delivered a fully J2EE-compliant Web Application
Server (Web AS) that runs both a Java and an ABAP technology stack. SAP
has announced a new user interface strategy, the Web Dynpro, for
the next version of the Web AS. The Web Dynpro offers a model-driven,
platform-independent web UI on top of both the Java and the ABAP stack
in Web AS 6.30.1
What does the coming of the Web Dynpro
mean for the ABAP developer? First, keep your BSP skills sharp. The BSP
runtime is one of the target platforms for the Web Dynpro. Second, as
you develop web applications and UIs, you can now start incorporating
the guiding principles behind the Web Dynpro. Programming techniques that
both abstract from the classical BSP programming model, yet also provide
the reusability and abstraction of the Web Dynpro design paradigm, will
be in high demand.
Fortunately, the current release of the
SAP Web AS (6.20) brings two major enhancements to the BSP model to help
developers create UIs that follow the lead of the Web Dynpro model, and
speed up development efforts as well:
- BSP Extensions, new tag libraries from SAP that leverage common
UI programming tasks for more compact and efficient code.
- Support for the Model View Controller (MVC) pattern, right
inside the ABAP Workbench. MVC is an approach to development that adds
a level of abstraction to your code to increase reusability and maintainability.
These advanced programming techniques will serve you well in your current
and future web applications and UIs. However, before introducing these
two new features, a quick review of the standard BSP programming model
might be helpful.
Some Background on BSP Programming
the BSP programming model, web applications
typically consist of dynamic HTML pages. Each
dynamic HTML page includes static HTML code
and a scripting portion written in ABAP. The
ABAP code controls how dynamic content (e.g.,
internal tables resulting from function module
calls) is merged into the page. When the dynamic
page is requested in the browser, the ABAP
runtime executes the script portion and constructs
the HTML page, which is then sent to the browser.
For an individual page, the standard BSP
model has no technical limitations - it simply combines standard HTML
with plain ABAP programming. When applications become more complex, though,
there are a few disadvantages:
BSP pages allow you to insert ABAP code
anywhere in the static HTML code. The application
code, the business logic, and the presentation
data are free to mix together - an arrangement
that is error-prone and difficult to debug.
data type conversion
If you output an ABAP
field in the dynamic HTML page, you will find
no standard way for performing the data type
conversions (e.g., for date, time, or currency
handling) needed in complex web applications.
BSP pages offer limited reuse capabilities via page fragments.
Although BSP pages support cascading style sheets (CSS), BSP applications
do not have a way to enforce a consistent look and feel across multiple
pages of complex applications.
Anyone who has written a nontrivial web application will face portability
problems with plain BSP pages.
To summarize, the BSP programming model
is an ideal approach if the web page design is carried out by HTML experts
using external web design tools. The primary task of the ABAP programmer
is then to connect this design with efficient business logic. BSP Extensions
and the MVC approach will help you create the web UIs you need more quickly
and efficiently, lead to greater flexibility and reuse, and reduce your
development efforts considerably.
New BSP Extensions: Shorter Code, Faster Development, and Greater
To introduce one of the clearest benefits of BSP Extensions, consider
the code in Listing 1: a straightforward, plain BSP solution that
renders an internal table of flight information in a BSP page.
With BSP Extensions, one of the most noticeable
benefits is that you can dramatically reduce the size of your code. To
view the very same internal table in a BSP page, you can incorporate the
BSP Extension htmlb into your page, and cut the number of lines
of code in half, as in Listing 2.
A BSP Extension is actually a collection
of predefined tags (like a tag library in JSP) that encapsulate common
elements, such as a table. In Listing 2, the tag, part
of the BSP Extension htmlb, executes a couple of tasks automatically:
it renders the data contained in an internal ABAP table, preserving the
proper data type formats, and it offers automatic scrolling support, which
is not implemented in the plain BSP example. The syntax is pure XML with
a reference to the data source. Hence, layout is cleanly separated from
any business logic. The layout is presented in a declarative, design-oriented
fashion. And BSP Extensions are not built-in components of the underlying
BSP runtime. Like the name suggests, BSP Extensions are developed on top
of a generic framework, for even greater flexibility and reuse.
<% loop at flights into flight.%>
<% data: str type char10.
write flight-fldate to str. %>
||Code for a Standard BSP Page
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
||Code for BSP Page Using BSP Extensions
In Figure 1, you can see the Tag
Browser on the left, and the BSP Editor on the right with the table view
code from Listing 2. From the Tag Browser, you can inspect the htmlb
BSP Extension. The htmlb extension (which stands for "HTML
business") consists of tags like that encapsulate
common user interfaces. These predefined tags provide for basic UI elements
(buttons, edit fields, radio buttons, and check boxes), as well as more
sophisticated elements (table views and tree views). A couple of "layout"
tags help structure and organize your pages (e.g., grid layout). For easy
development of BSP pages, you can drag and drop tag definitions into the
||The Tag Browser and the BSP Editor
The tag, highlighted
in Figure 1, allows web users to view a calendar, for example, to choose
a date for a flight. Each tag has its own attributes, and in this case,
attributes like onDayClick allow you to define an action when a day is
clicked. (Some tags also have inner tags, so that a tag like ,
which is a collection of different list box items, may contain one or
The htmlb library is defined as
a set of UI elements, so each one includes associated, specific events.
Events are all handled in the OnInputProcessing event that is attached
to your BSP page. You can find thorough documentation of each tag by simply
double-clicking the tag itself. You can even combine different BSP Extensions
by changing the prefix.
UI needs are addressed in the standard
htmlb extension, so you can use them
right away. Customizing is generally
not needed, although it is possible in
The Model View Controller (MVC) Design Paradigm
There are many books out there that explain the philosophy of designing
flexible web UIs, and the Model View Controller (MVC) is one method that
has been covered extensively. MVC is not a technology, but simply an approach
to design that separates the UI of an application into three distinct
- The Model encapsulates the actual business data and business
functionality. It serves as the data source for any kind of visualization.
- The View visualizes the application data using a graphical
representation. The same application data can be made visible in different
ways (for example, a table can be represented using a grid view or a
chart view). If the application data is changed, then all dependent
views typically need to be updated. As a result, the model is the unique
point where application data is updated before it is propagated to the
- The Controller manages interactions between the end user on
the one hand and the model and view on the other. The Controller is
responsible for handling user events, for updating the application data,
and for handling navigation requests.
The MVC design pattern helps to better
separate concerns when working with complex user interfaces and raises
the degree of reuse and maintenance in a typical application. For example,
if another View is added, the Model generally need not be changed.
MVC in Business Server Pages
New features in Web AS 6.20 provide the technology to help apply
these principles to your BSP applications. In Business Server Pages, the
Model should always be represented by the associated application class
that encapsulates all business data and business logic. To separate the
Controller and the View part of zflightdemo, shown in Figure
2, traditional BSP pages (as containers for both event handlers and
the HTML layout) are split into two pieces:
||The Code for a View in a BSP Application
- All event and navigation logic of a BSP application is present in
a Controller. The Controller has an associated controller class. To
display data, you must overwrite methods of the controller class.
- The Views themselves are represented by BSP pages that have no event
logic attached, as you can see in the view code (flights.htm)
in Figure 2 - the very same table rendering specified in Listing 1.
The view pages simply consist of HTML layout specifications, preferably
with predefined tags from the htmlb BSP Extension, as in this
||The Controller Code in a BSP Application
Figure 3 depicts the structure of
a BSP application that follows the MVC principle and its controller code
in the Class Builder. With the Workbench tools, implementation is straightforward
and each layer is clearly marked:
- Create a BSP application (e.g., zflightdemo).
- Create a subordinate View containing the layout for this BSP application
- Create a subordinate Controller for this BSP application (e.g., flights.do).
- Create an associated controller class (e.g., DO_REQUEST).
- Overwrite the method DO_REQUEST to initialize the data to
be displayed, and call the corresponding View (see Figure 3).
The MVC approach in BSP pages also supports
nested Views. In other words, if a Controller calls a View, that View
in turn might have attached a Controller again that calls another View.
Your web application is then made of several building blocks whose HTML
layout is presented as a whole in the browser.
For more details and documentation on the
process of creating Views and Controllers for BSP applications, visit
SAP help at http://help.sap.com
and see SAP Web Application Server 6.20 and search under Web
Application Builder for BSPs --> Model View Controller (MVC).
With BSP Extensions and the support of MVC design paradigm, by means
of views and controller classes easily visible and manageable from your
Workbench screen, your web UIs are faster to develop, easier to maintain,
and more flexible when it comes to customization. The BSP platform provides
a robust environment that will conform to the upcoming Web Dynpro technology.
As you continue to develop BSP pages, enhance them with BSP Extensions
- and even combine them with MVC structure for maximum benefit. These
advanced techniques allow you to plan for smooth sailing for your web
applications and user interfaces.
To get started using BSP Extensions, see
and under SAP Web Application Server 6.20, search for ABAP
Workbench: Tools -->New Features in Release 6.20.
For more on the upcoming release of the
Web Application Server 6.30 and its Web Dynpro, visit www.sap.com/technology.
a basic introduction to the Web Dynpro, see
the white paper "Web
Dynpro: Professional Web-Based User Interfaces" at www.sap.com/solutions/technology/brochures.asp.
self-defined BSP Extensions might be in order, and the Workbench provides
an editor for power users who require custom tags. For details, see the
documentation for implementation of custom tags at http://help.sap.com
-->SAP Web Application Server 6.20 and search under Web
Application Builder for BSPs --> Defining Your
Own BSP Extension.
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 email at firstname.lastname@example.org.