Internet applications have evolved from what were simple HTML pages that run on Web browsers to the ones built today using the latest Web 2.0 patterns that run on different clients’ platforms. HTML, in its latest version 5, is still being extensively used and has tested to be an effective language for building user interfaces (UIs), but it has some limitations around media integration. Some of the limitations of HTML have been addressed by Java script, applets, and ActiveX, but those aren’t enough to meet the increasing demand for usability of Internet applications.

To address such demands, an application that meets the requirements without compromising performance and quality is necessary. Rich Internet application (RIA) frameworks, which are a set of languages and tools that enable you to develop rich UIs for Web applications, is designed to meet these requirements.

Adobe Flash Islands is one tool that you can use to develop such RIA frameworks. I’ll explain how Flash Islands works and integrates with Web Dynpro ABAP and then discuss how you can set up Flash Islands in three steps. Flash Islands for Web Dynpro ABAP is available for SAP NetWeaver 7.0, SAP enhancement package 1 and later.

Adobe Flash Islands Overview

Although Web Dynpro has many out-of-the-box UI elements for Web application development, it is still a server-side-rendered framework and does not provide the same functionality of RIAs. The Web Dynpro framework is designed to mask the rendering engine from the developers. However, this also means developers are left with very little choice in influencing the way Web Dynpro UI elements are rendered in the client. Flash Islands is designed to integrate with client side plug-ins to provide a desktop application-like user experience.

Flash Islands technology allows seamless integration of standalone Flex components into the Web Dynpro framework. This is accomplished by three main components:

• Flash Islands container element provided in the Web Dynpro UI library for embedding Flex components within Web Dynpro views
• A native library, WDIslandLibrary30.swc, that is referenced within Flex applications
• A native library, FlashIslandLibImpl30.swf, available within SAP NetWeaver that acts as the bridge between the Web Dynpro framework and the Flex application

The above-mentioned libraries are available in both ABAP and Java stacks at the following paths:

• ABAP: MIME repository> SAP > BC > UR > nw7 > FlashIslands
• Java: <sapmnt>usrsapce1j00j2eeclusterappssap.comtc~wd~dispwdaservlet_jspwebdynproresourcessap.comtc~wd~dispwdarootglobalactiveComp

Both ABAP- and Java-based Web Dynpro applications can embed Flash Islands. I’m using a Web Dynpro ABAP application as an example. However, the procedure is essentially the same for Web Dynpro Java.

The diagram in Figure 1 depicts the Web Dynpro architecture and how to integrate Flash Islands within it. Every Web Dynpro view has a root element container and this typically is a transparent UI container (i.e., it acts as the root container for all Web Dynpro UI elements).

Figure 1

Web Dynpro ABAP architecture and Flash Islands integration

However, in the case of embedding a Flash application, the root element is swapped into a Flash Island container. The Flex application, which is loaded in the MIME Repository as an .swf file, is referenced as the source. When the rendering engine renders a view of the browser, it places a container for the Flex application and loads the .swf file.

To understand this, consider an example in which you build a Web Dynpro ABAP application based on the flight model. For a selected airline, the Web Dynpro displays the available connections using a Flex DataGrid control embedded in the Web Dynpro application using Flash Islands. When the user selects a connection within the data grid, the system provides more information about the connection using Web Dynpro UI elements. Although this is hardly a real-life example, this simple example makes it easier to understand the two-way communication.

When to Use Flash Islands

Although Flash Islands can be used for building RIAs in the SAP landscape, you need to analyze when to use Flash Island integration and when to use out-of-the-box Web Dynpro UI elements. Some factors that favor use of Flash Islands are:

• If the UI requires a desktop-application-like feel with emphasis on real estate and flicker-free data updates, Flash Islands is an option to consider. For example, think of the call center applications in SAP Customer Relationship Management (SAP CRM) in which the customer representative needs to toggle between different screens to access answers for customer queries.
• If you want to integrate third-party Flex components with SAP applications, Flash Islands is an option. For example, a company can outsource the UI development to third parties and integrate them as Flex components in their SAP Web Dynpro applications. All data manipulation and database handling happen in the Web Dynpro application, whereas the UI rendering happens within the Flex application.
• IT departments can de-couple design and development work wherein designers can come up with reusable skins for Flex, while developers can focus on the application logic
• Developers can reuse open source components such as Dashboard (https://www.adobe.com/devnet/flex/samples/dashboard/) and BirdEye (https://code.google.com/p/birdeye/) in their programs where required

Before moving ahead with Flash Islands, be sure to consider the following:

• Web Dynpro ABAP and Flex programming are different skills. Although there are exceptions, normally IT departments have different teams of ABAP and Flex programmers. Different teams not only increase the IT investment, but can also increase complexity in the development process around communication and software logistics.
• When the UI requires out-of-the box controls available in Web Dynpro (such as tables, text boxes, and Floor Plan Manager) use them

• Flex applications run on Flash browser plug-ins that need to be installed in client systems. Because rendering happens locally, there is some impact on the client’s system resources. Although this is not a huge factor, it is still worth considering.

Process for Using Flash Islands

Figure 2 shows the various integration points within the Web Dynpro framework and Flash Islands at a high level. The Flex application uses the Flash Islands library to register itself with the Web Dynpro framework. It receives data from the Web Dynpro application through the bindable variables. It also sends data to the Web Dynpro application through the fireEvent method. The Web Dynpro application uses the Flash Islands UI container to embed the Flex application. It then uses the DataSources and GACProperty elements to pass data to the Flex application. It uses the GACEvent to receive events that are raised by the Flex application. It also uses GACEventParameter to receive the event parameter value from the Flex application.

Figure 2

Interaction between the Flex application and Web Dynpro ABAP using Flash Islands

Here are the three steps to set up and use Flash Islands with your SAP system.

Step 1. Build the Flex Application

First, using Flash Builder, build the Flex application that contains a DataGrid with four columns for Carrier ID, Connection ID, From City, and To City. The Flash Islands library (WDIslandLibrary30.swc) is referenced in the Flex project (Figure 3).

Figure 3

Include Flash Islands libraries in the Flex project

The Flash Islands library provides two main methods to accomplish the integration between Flex framework and Web Dynpro framework:

• register: The system normally calls this method during the initialization event of the Flex application. The system uses this method to announce its presence and availability to the Web Dynpro ABAP framework.
• fireEvent: This method triggers events from the Flex application that are received by the Web Dynpro application for further processing. It can also pass parameters to the triggered event.

Figure 4 shows how to use these methods in the Flex application:

1. Import the Flash Islands library, which exposes the methods for Flex Integration with Web Dynpro
2. Declare [Bindable] variables, the values for which are passed from the Web Dynpro application
3. Register the Flex application with the hosting Web Dynpro ABAP application. This is an important step without which the Web Dynpro framework is not able to communicate with the Flex application through Flash Islands.
4. Method fireEvent triggers the event back to the Web Dynpro ABAP application. Note that the event parameters are also passed to the Web Dynpro application.
5. The Web Dynpro application (through Flash Islands) passes the public variable dSource as DataGrid’s data provider. Note that dSource is passed as a multi-row array from the Web Dynpro application.

Figure 4

Code snippet from a Flex application using Flash Islands

After you build the application, compile and export the .swf file (in our example, SFlightDemo.swf) by selecting Project > Export Release Build. The exported file is embedded in the Web Dynpro ABAP application as described in step 2.

Step 2. Build the Web Dynpro ABAP

In the back-end SAP ERP Central Component (SAP ECC) system, using ABAP Workbench (transaction SE80), create a Web Dynpro ABAP application. In my example, I created ZDT_WEBINAR_FLEX_DEMO. To embed the Flex component in the Web Dynpro application, import the SFlightDemo.swf file from the file system into the MIME Repository by selecting ZDT_WEBINAR_FLEX_DEMO > MIMEs. Right-click MIMEs and select Import MIME Objects.

I created two views: one named Main to display the flight connection information using standard Web Dynpro UI elements, and the other named Flex to display the list of connections using the Flex DataGrid control (Figure 5):

1. Create Web Dynpro UI elements to display the connection details
2. Create a View Container element for embedding the Flex View
3. Swap the ROOTUIELEMENTCONTAINER to Flash Islands by right-clicking it and choosing Swap Root Element from the context menu
4. Provide the source for the .swf file that is available in the MIME Repository
5. The Flex view is embedded in the view container of the main view in the default window of the Web Dynpro application

Figure 5

Main and Flex view design

I also created context variables in the component controller and mapped them to the context variables for the Main and Flex views (Figure 6). The initial values for the context variables are populated in the WDDOINIT method of the component controller. The Main view consists of a drop-down list from which the user chooses an airline, a display area for connection information, and an empty view container element for embedding the Flex view. When the user chooses an airline, the system executes the action method associated with the drop-down control and populates values for the context variable FLEXVARIABLES. The Flex view has the Flex application embedded through the Source parameter:

1. Context node for list of connections to be bound to GACDataSources
2. Context node for GACProperty/Bindable variables in the Flex application

Figure 6

Context variables created in the Component Controller for transferring values between Main and Flex views

I also swapped the root element container in Figure 5 to a Flash Islands container by right- clicking ROOTUIELEMENTCONTAINER and choosing Swap Root Element from the context menu to embed the imported Flex application.

Now that the Flex application is embedded, you need to enable data communication between Web Dynpro and the Flex application. This is achieved by four different components that are children of the Flash Islands container as shown in Figure 7:

1. When the Flex component raises an event, the system executes the GetFlightInfo_Unique method
2. Event parameters are passed from the Flex component
3. The Property value is bound to the context node. Any change to the context value is passed to the Flex component.

Figure 7

Data exchange between Web Dynpro and the Flex component

• GACDataSource: This component is bound to a context node in the Web Dynpro application. You use it to trigger a set function within the Flex application. This is useful if you want to trigger a function within the Flex application based on certain changes to the context variables in the Web Dynpro. You can also use GACDataSource to pass complex data types — such as multi-line (internal table) context nodes — to the embedded Flex application. There are differences in how internal tables in ABAP are handled when compared to arrays in Flex, but with the Flash Islands library it is seamless to the developer. In my example, GACDataSource is bound the context node FLEXVARIABLES, which is an internal table containing a list of connections.
• GACProperty: This component is also bound to a context node in the Web Dynpro application. You use it to set values for bindable variables in the Flex application. A change in the context in Web Dynpro triggers a change in the variable’s value in the Flex application. You can also use GACProperty to bind individual fields of an internal table to corresponding fields in the Flex application when used with the GACDataSources component. In my example, I use GACProperty to pass values from the four internal table columns — CONNID, CARRID, CITYFROM, and CITYTO — to the Flex application by binding the corresponding attributes from the FLEXVARAIBLES node.
• GACEvent: This component receives events that are triggered from the Flex application using the fireEvent method. It is bound to an action method for further event handling within Web Dynpro. In my example, the event raised from the Flex application is selectedFlight and it is bound to the Web Dynpro action method GETFLIGHTINFO_UNIQUE.
• GACEventParameter: This component can only exist as a child of the GACEvent component. It receives parameters of the invoked event. After the system invokes the event from the Flex application, the parameters passed are received in GACEventParameter. The system then makes it available to the action method attached to the GACEvent using parameter WDEVENT, which is an instance of class CL_WD_CUSTOM_EVENT. Figure 8 shows the code snippet for receiving the event parameters within the method GETFLIGHTINFO_UNIQUE. On execution, this method populates values in the context variable FLIGHTINFO.

Figure 8

Receive the parameters of the event raised from the Flex application

Step 3. Run the Web Dynpro Application

As a last step, activate and run the Web Dynpro application. The output should look as shown in Figure 9.

Figure 9

Web Dynpro application output with the Flex component embedded in it

When you choose an Airline ID, it triggers a context change for variable FLEXVARIABLES and the system passes the list of connections to the Flex application using the GACDataSource and GACProperty components. The system populates the data grid in the Flex application with the data. When the user clicks a Connection ID, it triggers event selectedFlight in the Web Dynpro application. This, in turn, executes the GETFLIGHTINFO_UNIQUE method. This method populates the context variable FLIGHTINFO with data pertaining to the selected connection, which in turn renders the data to the screen using standard Web Dynpro components.

By combining the components detailed above, developers can integrate Web Dynpro ABAP and Flex applications without having to deal with any scripting or data manipulation.

Krishnakumar Ramamoorthy

Krishnakumar (KK) Ramamoorthy is a specialist leader from Deloitte Consulting LLP, working with the SAP technology practice. He has more than 12 years of experience in SAP implementations with a strong focus on application development. He has presented at SAP TechEd and ASUG chapter meetings on topics around application integration and user interface development.

You may contact the author at kramamoorthy@deloitte.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.