Faster Development for Web Applications

Feature Article | January 7, 2003 by admin

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.

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

Codes for BSP-Pages

Codes for BSP-Pages

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.
A BSP Extension is actually a collection of predefined tags (like a tag library in JSP) that encapsulate common elements, such as a table. The <tableView> 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.

The Tag Browser and the BSP Editor

The Tag Browser and the BSP Editor

From the Tag Browser, you can inspect the htmlb BSP Extension. The htmlb extension (which stands for “HTML business”) consists of tags like “dateNavigator” 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.

The “dateNavigator” tag 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 “listBox”, which is a collection of different list box items, may contain one or more “listBoxItem” 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.

The Model View Controller (MVC) Design Paradigm

Tip

Tip

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

The Code for a View in a BSP Application

The Code for a View in a BSP Application

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 traditional BSP pages (as containers for both event handlers and the HTML layout) are split into two pieces:

  • 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. The view pages simply consist of HTML layout specifications, preferably with predefined tags from the htmlb BSP Extension, as in this case.

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.

Source: SAP Insider

Karl Kessler

Karl Kessler

Tags: ,

Leave a Reply