GRC
HR
SCM
CRM
BI


Article

 

Faster Development and Greater Flexibility for Your Web Applications? Two New Enhancements to the BSP Model Pave the Way

by Karl Kessler | SAPinsider

October 1, 2002

by Karl Kessler, SAP AG SAPinsider - 2002 (Volume 3), October (Issue 4)
 

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

In 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:

Separation of concerns
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.

Automatic 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.

Reuse
BSP pages offer limited reuse capabilities via page fragments.

Style and branding
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.

Browser independence
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 Flexibility

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.

<%@page language="abap"%>


href="../../sap/public/bc/bsp/styles/sapbsp.css">
Flight display






<% loop at flights into flight.%>
<% data: str type char10.
write flight-fldate to str. %>





<% endloop.%>
CarridConnidFldate
<%=flight-carrid%><%=flight-connid%><%=str%>


Listing 1 Code for a Standard BSP Page

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>



table = "<%= flights %>" />


Listing 2 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 BSP Editor.

Figure 1 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 more tags.)

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.

TIP: Most 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 Workbench.2

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 parts:

  • 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 different views.

  • 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:

Figure 2 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 case.
Figure 3 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:

  1. Create a BSP application (e.g., zflightdemo).

  2. Create a subordinate View containing the layout for this BSP application (e.g., flights.htm).

  3. Create a subordinate Controller for this BSP application (e.g., flights.do).

  4. Create an associated controller class (e.g., DO_REQUEST).

  5. 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).

Conclusion

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 http://help.sap.com, 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.


1 For 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.

2 Occasionally, 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 karl.kessler@sap.com.

An email has been sent to:






More from SAPinsider



COMMENTS

Please log in to post a comment.

No comments have been submitted on this article. Be the first to comment!


SAPinsider
FAQ