GRC
HR
SCM
CRM
BI


Article

 

Use Flash Technology for Richer UI Capabilities in Your Web Dynpro ABAP Applications

by Karl Kessler | SAPinsider

April 1, 2009

As of enhancement package 1 for SAP NetWeaver 7.0, developers can integrate Flash into their ABAP applications. This opens up some really cool possibilities for developers.
 

With the introduction of its enhancement package strategy,1 SAP is now rolling out new content and innovative, simplified scenarios for SAP ERP — through easy-to-learn Web front ends — via enhancement packages. In the process, Web Dynpro ABAP has become the primary user interface (UI) technology (see sidebar) for SAP customers, with its:

  • Feature-rich set of controls, including layout containers and table handling

  • Easy-to-use ABAP Workbench tools

  • More accurate development capabilities, courtesy of the ABAP Debugger

  • Support for PDF forms, which developers can embed directly into their Web Dynpro applications — and then use Adobe Designer (from within the ABAP Workbench) to maintain the forms and link them to the appropriate Web Dynpro context variables

  • Ease of transporting applications to the production environment

And now, you can add support for Adobe Flash technology to the list. As of enhancement package 1 for SAP NetWeaver 7.0, the basis for SAP Business Suite 7 software, developers can integrate Flash into their ABAP applications.

This opens up some really cool possibilities for developers; just think of how innovative data visualizations, dynamic UIs, and video elements could give your enterprise applications an even more engaging look and feel. Flash offers sophisticated rendering capabilities combined with interactive behavior; when end users intuitively click a mouse or trigger a keyboard event, Flash responds. The technology’s multimedia enablement pushes the user’s experience far beyond the traditional transactional request and response cycle of user interaction.

So, what’s the best use of Flash content in your Web Dynpro ABAP applications?

 

Why Integrate Flash Technology into Web Dynpro?

If you access the Internet, you’ve experienced Adobe Flash. The Adobe Flash player is available on almost any PC. It runs on multiple platforms and provides sophisticated user interaction capabilities.

The idea behind integrating Flash technology into Web Dynpro ABAP is not to replace standard controls (fields, buttons, and tables, for example) with their Flash counterparts. Rather, Flash content can add rich Web scenarios that go far beyond the transactional capabilities of Web Dynpro applications.

Consider your company’s talent management needs. All of the usual talent-related data, such as personnel numbers, salaries, and position histories, are managed using state-of-the-art Web Dynpro technology. But when it comes to more advanced features, such as incorporating performance management, reward planning, and career development capabilities (see Figure 1), you might need more specialized controls — for example, the ability to easily drag and drop names from one field of the talent grid to another to re-assign an employee to an appropriate talent group, such as Performing, Achieving, or High Flyer. Another highlight is the ability to open contextual business cards, revealing more details on a particular employee.

 

Figure 1
A talent review dashboard, the result of embedding Flash content into SAP’s existing talent management functionality

For this new class of rich, dynamic Web applications, integrating Adobe Flash technology makes the most sense. This becomes even more apparent if you compare the user interface paradigm of Flash controls — in which user interactions are carried out locally (since the Flash player is a browser plug-in that behaves like a local application) — to Web Dynpro events, which typically trigger a method call on the back end, requiring a full round trip. Due to the latency times involved in round trips, you cannot design a user interface that responds in real time to keyboard and mouse actions that a user triggers. Parts of the screen need to be refreshed immediately as you type or move the mouse, and this can only be achieved with a program running locally like the Flash control does.

 

Flash content can add rich Web scenarios that go far beyond the transactional capabilities of Web Dynpro applications.

Important Design Recommendations

The integration of Flash technology into Web Dynpro ABAP gives you almost unlimited flexibility and freedom to include Flash components in your SAP applications. But bear in mind some design guidelines when starting your projects:

  • It is not a good idea to use Flash controls if there is a solid alternative available with native Web Dynpro controls. Although the Flash integration is robust (you can even debug Flash components with the Flex Debugger from within a Web Dynpro application), it requires a thorough understanding of both development environments.

  • Native Web Dynpro applications inherit all standard SAP product features, such as translatability. In principle, you can achieve the same effect on the Flash side, but you more or less have to program this by hand.

  • Flash integration is not intended to browse through large data sets, since efficient paging is currently not implemented.

In general, you will get the most benefit out of Flash integration if you limit the use of Flash to where it is well suited: within rich Internet applications that require sophisticated user interaction that cannot be easily modeled with a standard set of Web controls (see Figure 2).

 

If you want applications that provide…

Then use…

Robust standard controls, such as fields, buttons, and tables

Web Dynpro ABAP

The ability to page large data sets

Web Dynpro ABAP

Sophisticated user interaction that cannot be easily modeled with a standard set of Web controls

Adobe Flash

The ability to render screen changes in real time Adobe Flash
The ability to embed multimedia content, such as movies Adobe Flash
Figure 2
A decision matrix for when to use Web Dynpro ABAP or Adobe Flash

Combining the Best of Both Worlds: An Architectural Overview

Merging the proven robustness of the Web Dynpro program model (which is apparent if you look at the enhancement package adoption numbers2) with the sophistication of Flash content requires a sound architectural approach to bring the best of both worlds together.

Figure 3 depicts the principal architecture and flow of control when Adobe Flash is integrated with Web Dynpro ABAP. The Web Dynpro design time and run time introduce the term Flash Islands, the technical UI elements that make it possible to use Adobe Flash within the Web Dynpro framework.

 

Figure 3
The architecture of Adobe Flash integration into Web Dynpro via “Flash Islands”

The Browser Client Side: Adobe Flash

On the left side of Figure 3, you see a Flash component that is loaded into the Adobe Flash player when a user views a certain Web page (containing the Flash component) in the browser window. All user interaction with the Flash component is carried out locally.

From a design perspective, the Flash component is developed as a Flex control in Adobe Flex Builder. The Flex Builder compiles its design-time artifacts into the executable Flash component. To ensure that the Flash component will communicate with Web Dynpro’s user interface elements, SAP’s Web Dynpro Flash Island library (WDIslandLibrary.swc in Figure 3) needs to be linked to the Flex control. This library allows developers to expose certain properties and data sources of the Flex control so that they can be mapped to current Web Dynpro context variables.

In addition, a Flash component can trigger an event — a user clicks a name in the talent grid, for example, to see detailed information — that the Web Dynpro run time can handle. Of course you can also trigger events inside the Flash component that are not visible to the Web Dynpro application — changing the layout theme between list, detailed list, and thumbnail views, for example. In this case, you must specify event handlers in the Flex control that respond to these events in a completely local fashion so that they do not trigger a server round trip.

The SAP NetWeaver Application Server Side: Web Dynpro ABAP

On the right side of Figure 3, the Web Dynpro run time takes care of the proper execution of the Flash technology within the application. From a design-time perspective, you need to embed the compiled Flash component into your Web Dynpro application. This is fairly simple. You create a suitable container — a Flash Island — in Web Dynpro and insert the Flash component into it. Think of a Flash Island as simply an SAP wrapper for a Flash component.

To enable the communication between standard Web Dynpro user interface elements, you need to expose the Flash component’s data sources, properties, and events in the Web Dynpro Builder and map them to ordinary Web Dynpro context variables and actions. The names of the Web Dynpro context variables and actions are identical to the names exposed in the Flex control. The mapping of the Web Dynpro context variables and event parameters3 allows for straightforward communication between the surrounding Web Dynpro component and the embedded Flash Island.

 

NOTE!
Web Dynpro’s design-time and run-time environments can handle Flash Islands on both the ABAP and the Java stack.

How to Integrate Flash Technology into Web Dynpro

To make things more tangible, let’s examine the important steps of developing your first Web Dynpro Flash Island project. Here, we’ll build a simple reporting application that includes a Flash bar chart.

Step #1: Develop a Flash Component with Adobe Flex Builder

As I noted earlier, you can develop Flash components with Adobe Flex Builder, a development tool based on Eclipse (see sidebar). Adobe provides trial versions of Flex Builder that you can install quickly. You can install Flex Builder as an additional plug-in of your SAP NetWeaver Developer Studio, or you may want to fully install Flex Builder including Eclipse.

Flex Builder takes advantage of all Eclipse features, including source code coloring, WYSIWYG editing, property sheets, and more. Flex offers a rich collection of charting capabilities that you might like to use in your Web Dynpro applications to enhance their expressiveness.

 

Figure 4 shows Flex Builder 3. The Flex Navigator pane outlines a Flex application called “MyFirstApp,” which we’ll build in this example. Flex offers many sample projects that you can import to quickly become familiar with the Flex tooling.

 

Figure 4
Adobe Flex Builder project overview

Flex applications are written in MXML, which uses XML syntax to describe the control tree with embedded Action Script code. The Flash application is based on a Web Dynpro Flash Island library, which is specified in the project’s properties (see Figure 5).

 

Figure 5
Specifying the library path within MyFirstApp’s project properties

Our Flash application’s Flex component — the bar chart — must register itself at initialization so that data and event communication can take place. Figure 6 shows the bar chart in design mode and in source mode. You can work in either mode, and all changes to one mode are reflected simultaneously in the other mode.

 

Figure 6
MyFirstApp, complete with its Flash bar chart, displayed in both design mode and source mode

Designing a Flash component is straightforward. You drag user interface elements from the palette (see the lower left pane in the design mode side of Figure 6) and drop them in the WYSIWYG area. While you maintain the control tree and its properties, the corresponding MXML code is created automatically, as shown in the source mode. Additionally, you need to expose data sources and properties by defining public variables and tagging them with the meta-attribute “Bindable.”

If a local event occurs, you need to communicate this event to the Web Dynpro Flash Island library so that the Web Dynpro run time on the server side can be properly notified with the next server round trip. Finally, you compile the complete Flex application, which results in an executable SWF file that the Flash player can run.

Step #2: Embed the Flash Component in the Web Dynpro Application

On the ABAP side, things are fairly simple. A typical way to consume a Flash component is to create a Web Dynpro component with a suitable window-view hierarchy. Figure 7 shows the outline of a typical Web Dynpro component with a main view (MAIN) that contains two embedded views: one to display data in a standard table (TABLEVIEW) and one to host the Flash component (CHARTVIEW). The Flash component has already been uploaded and is displayed in the MIMEs subfolder. When the Web Dynpro application is executed, it is downloaded from the application server into the browser’s cache.

 

Figure 7
The Web Dynpro window hierarchy

To supply the Flash component with values from the Web Dynpro application, you need to create a suitable Web Dynpro context using the names that you exposed in the definition of the Flash component (see Figure 8). In our example, to properly label our bar chart, we use company names on the category (vertical) axis and statistical data, such as on-time delivery (OTD) and rolled throughput yield (RTY), as corresponding bars.

 

Figure 8
Setting up Web Dynpro context to populate our Flash bar chart

Figure 9 shows how the embedded Flash Island acts as a reserved area for the Flash component. All of the component’s exposed data sources, properties, and events are displayed in the control tree (see the right side of Figure 9). You must maintain this control tree manually; at this time, the property and method names from the uploaded SWF file are not automatically derived.

 

Figure 9
An embedded Flash Island viewed within Web Dynpro Explorer

Step #3: Enjoy the Results

Once you activate all these artifacts, the corresponding application will look similar to the one shown in Figure 10. A standard Web Dynpro table at the top contains the statistical data listed by company, and the Flash component at the bottom displays the respective bars in the chart.

These bars are also dynamic: If a value within the Web Dynpro table changes, the bar chart can adjust to reflect this new value. And if a user selects a bar, the corresponding table line entry is highlighted (in effect handling a Flash event within the Web Dynpro application).

 

Figure 10
The complete Web Dynpro application containing a Flash Island, all viewed in a browser

Summary

With the release of SAP NetWeaver 7.0, enhancement package 1, developers can now embed Flash technology into their Web Dynpro ABAP applications. This opens up exciting new possibilities for application UIs that are rich, dynamic, and user-friendly.

Web Dynpro ABAP is still the design environment of choice for fields, buttons, tables, and other standard ABAP elements. But for rich Web applications that could benefit from sophisticated user interaction and UI elements, Flash integration offers many benefits.

You can find detailed sample code for Flash integration on the SAP Community Network (http://sdn.sap.com ? SAP NetWeaver Capabilities ? Development and Composition ? ABAP) and in the online learning maps for the Ramp-Up Knowledge Transfer (RKT) of SAP NetWeaver 7.01 (http://service.sap.com/rkt ? SAP NetWeaver 7.01).

I’d also recommend watching the eLearning video by Thomas Jung that’s available at https://wiki.sdn.sap.com/wiki/display/EmTech/SAP+Rich+Islands+for+Adobe+Flash. Here you can see a demo of how to embed Flash Islands into your Web Dynpro ABAP applications.

 

Additional Resources

  • “Web Dynpro Know-How That Every Developer Needs to Enhance SAP Solutions,” an Under Development column by Karl Kessler (SAP Insider, April-June 2008, www.SAPinsideronline.com)

  • Web Dynpro for ABAP by Ulli Hoffmann (SAP PRESS, http://store.sapinsider.wispubs.com)

  • “Use the Enhancement Package for SAP ERP strategy to develop and enhance Web Dynpro ABAP applications” by Karl Kessler (SAP Professional Journal, September/October 2008, www.SAPpro.com)

  • “Innovation Without Disruption: A Deep Dive into SAP’s Enhancement Package Strategy for SAP ERP,” an Under Development column by Thomas Weiss and Christian Oehler (SAP Insider, January-March 2009, www.SAPinsideronline.com)

 

Karl Kessler (karl.kessler@sap.com) joined SAP in 1992. He is the Product Manager of the SAP NetWeaver foundation — which includes SAP NetWeaver Application Server, Web Dynpro, ABAP Workbench, and SAP NetWeaver Developer Studio — and is responsible for all rollout activities. Currently, Karl’s focus is on how SAP NetWeaver powers SAP ERP and SAP Business Suite software.

1 Please see “Innovation Without Disruption: A Deep Dive into SAP’s Enhancement Package Strategy for SAP ERP” by Thomas Weiss and Christian Oehler in the January-March 2009 issue of SAP Insider (www.SAPinsideronline.com). [back]

2 Enhancement package 3 is now available and has received good reviews from customers. Enhancement package 4 (part of SAP Business Suite 7) recently entered ramp-up; please see https://service.sap.com/erp-ehp for details about what functionality is included in each package. [back]

3 For a more detailed explanation of this mapping, you can view an eLearning demo at http://blip.tv/file/1417778. [back]

 

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