Quick start: Embedding an Adobe Rich Island into an SAP Web Dynpro application

SAP developers can use Rich Islands for Adobe Flash to enhance the usability, interactivity, and aesthetics of their Web Dynpro applications. Flex developers can partner with SAP experts to expand their business into the large enterprise market.

To make the most of this tutorial, set aside one hour to:

• Install SAP and Adobe Flex Builder, and import the application files for the Adobe Rich Island and the Web Dynpro sample application
• Interact with the Wagon Assembly Line sample application (see Figure 1)
• Understand how to build similar applications by watching short video highlights

This is neither an in-depth tutorial on Web Dynpro application development nor an in-depth tutorial on creating Flex applications. The goal of this tutorial is to get you up and running quickly with a working sample application and to provide you with code, video, and resources that you can explore to deepen your understanding of the technologies involved.

As the tutorial progresses, you will also be introduced to the SAP Rich Islands libraries which enable you to tie Rich Islands, built with the Adobe Flash Platform, to Web Dynpro components.

Follow the instructions in this section to set up your development environment.

Download the SAP installer and login

SAP developers can download preview releases with a valid Service Marketplace ID from the SAP Developer Network.

Flex or SAP developers without a valid Service Marketplace ID can follow the steps in this section to download and install the SAP NetWeaver 7.01 ABAP Trial Version software.

1. Download the SAP NetWeaver 7.01 ABAP trial version.

   You will be asked to log into the SAP Community Network. If you do not already have a username and password, create one.

2. Follow the directions to install the application.
3. Go to Start > Programs > SAP NetWeaver 7.01 ABAP Trial Version > NSP >Start Application Server to ensure that the SAP NetWeaver Application Server has been started.

   Note: The Application Server has been successfully started when the window turns green and displays the text, "Press any key to continue…"

4. Select Start > Programs > SAP Front End > SAP Logon to open the SAP Logon 710 program.
5. Ensure that NSP local is selected and click the Log On button. This opens the NetWeaver login page, shown in Figure 2.

6. Enter BCUSER in the User input field.
7. Enter minisap in the Password field.
8. Press Enter to log in.

Download and install Flex Builder 3

SAP developers who do not have Flex Builder installed can follow the steps in this section to download and install the software.

Note: If you have the Eclipse-based NetWeaver Developer's Studio, you will want to download the Flex Builder plug-in version, rather than the standalone version. The Plug-in version installs Flex Builder as an Eclipse plug-in.

1. Get a trial version of either the standard or plug-in version of Flex Builder 3 Professional.
2. Follow the instructions to download the installer to your computer.
3. Double-click the installer to begin the installation wizard and follow the instructions.

Note: View this video for an introduction to the Flex Builder tool and interface (7:22).

Import the Rich Island project files into Flex Builder

Both SAP and Flex developers should follow the steps in this section to import the Flex Builder project files. The imported files include all of the MXML and ActionScript code to build the Rich Islands interface and non-SAP functionality.

Note: SAP developers may want to check out the following resources to gain a better understanding of the MXML and ActionScript programming languages.

• Video: Understanding MXML (4:07)
• Tutorial: Coding with MXML and ActionScript
• Slide deck: ActionScript 3.0 Primer

1. In Flex Builder, choose File > Import > Flex Project.
2. Select Archive file.
3. Locate the SAP_RI_FASTTRACK.zip sample file that you were asked to download at the beginning of this tutorial.
4. Click Finish.

   You should see the ShopFloorBins project in the Navigator panel of Flex Builder.

5. In the Navigator panel, right-click on ShopFloorBins.mxml and select Set as Default Application.
6. Download the WDIslandLibrary.swc file.
7. Save the file to a location on your computer.
8. Extract the contents of the downloaded ZIP file to the same folder.

   Note: The WDIslandLibrary.swc file is one of the SAP libraries that you need to develop Rich Islands. The SAP NetWeaver 7.01 ABAP Trial Version software that you installed above does not contain this file by default. For more information about this library, refer to the videos later in this tutorial and visit this blog.

9. In Flex Builder, select Project > Properties > Flex Build Path > Library Path tab.
10. Click the Add SWC button (see Figure 3).

11. Click the Browse button and navigate to the WDIslandLibray.swc Rich Islands library that you just downloaded.
12. Select the file and click Open.
13. Click OK.

    You should see the WDIslandLibrary.swc resource added to the project (see Figure 4).

Note: To learn more about creating and using Flex Builder workspaces and projects, watch this video (7:04).

Create a release build of the Rich Island

SAP and Flex developers should follow the steps in this section to generate a release build of the Wagon Assembly Line SWF file for later import into the Web Dynpro component.

1. In Flex Builder, open ShopFloorBins.mxml from the src folder.
2. Select File > Export > Release Build.
3. Ensure that the ShopFloorBins/bin-release folder is selected for the Export to folder option.
4. Click Finish.
5. Expand the ShopFloorBins/bin-release folder to verify that the ShopFloorBins.SWF file has been compiled and placed in this folder.

Import the SAP project nuggets

Flex and SAP developers should follow the steps in this section to import the SAP nuggets for the Web Dynpro component.

1. Return to SAP.
2. On the Home screen, run transaction code SE38.
3. On the primary SE38 screen, enter the program name ZSAPLINK into the Program input box and click Execute.

   Note: If you do not have the ZSAPLINK program installed, please follow these instructions to do so. A number of plug-ins are also required for ZSAPLINK and must be installed before importing the NUGG_SAP_RI_FASTTRACK nugget. The plug-ins are available on Google Code.

4. Ensure the Nugget tab is selected.
5. Verify that the Import Nugget radio button is selected (see Figure 5).

6. For the Nugget File Name, browse to where you saved the SAP_RI_FASTTRACK.nugg file.
7. Click Open.
8. Click Execute.
9. Go to the Home screen.
10. Open the Object Navigator.
11. Activate all items.
12. Ensure your Web Dynpro component is displayed by right-clicking on the uppermost folder and selecting Other Functions > Rebuild Object List.

Import the Rich Island into the Web Dynpro component

Flex and SAP developers should follow the steps in this section to import the Rich Island release-build SWF into the NetWeaver Mime Repository so that it can be added to the Web Dynpro component.

Flex developers can watch the videos later in this tutorial for more details regarding creating Web Dynpro components.

1. Right-click on the Z_SHOP_FLOOR_BINS component and choose Create > Mime Object > Import (see Figure 6).

2. Select the ShopFloorBins.SWF file from the C:\<Flex Builder workspace>\ShopFloorBins\release-bin directory.
3. Save the Mime Object with the default document settings (see Figure 7).

The Flex Component is now displayed within the MIME folder of the Web Dynpro Component and transported with the Web Dynpro development object.

4. Activate the addition by right-clicking on the Z_SHOP_FLOOR_BINS component and selecting Activate.
5. Right-click on Z_SHOP_FLOOR_BINS and choose Create > Web Dynpro Application.

   Note: Creating the application generates a URL from where you can test your application.

6. Press F8 or click the Text/Execute button to launch the application in your default web browser.

   You should see the Wagon Shop Floor Assembly Line sample application displayed in the browser (see Figure 8).

Follow the steps in this section to interact with the Wagon Assembly Line sample application you have just built in your local development environment.

Alternatively, you can watch the video, Seeing the working application (2:28).

1. Watch the application animate.

   Note that the clock animates every six seconds and that the quantities in the colored bins and the SAP table UI element (in the upper left corner) decrement as well. This shows that the inventory is being depleted as the wagons are being assembled.

   The clock shows the number of minutes until the assembly line shuts down based on the available inventory. Note that axels and wheels deplete at a faster rate because the assembly line needs two axels and four wheels for each wagon.

   The colored bins change from green to yellow to red as the inventory falls below defined thresholds.

2. In the SAP table UI element, change a quantity value to a value greater than 0 and observe the change in the application.

   You should see the clock and bins adjust their amounts appropriately according to the bin quantity you manipulated. The bins stay green as long as there is more than 5 minutes worth of inventory in the bin. At 5 minutes or less, the bins turn yellow.

3. Change the text value in any of the colored bins to 0.

   You should see the bin you changed turns red. You should also see the timer reset to 00:00.

SAP and Flex developers should refer the video resources in this section to gain a technical overview of how Adobe Flex and SAP Web Dynpro technologies are implemented to create Adobe Rich Islands.

The following videos focus on the important points for integrating data and events between Adobe Flex applications and Web Dynpro components. They will not answer all of your questions about Flex and Web Dynpro development. Follow the additional resources links for more information about Flex and Web Dynpro development.

Understand the difference between the different Adobe technologies

Flash and Flex components combine to compile a SWF file that is integrated into the Web Dynpro component created in NetWeaver ABAP (see Figure 9). Compare the design and animation features of Adobe Flash with the business and data-oriented features of Adobe Flex, and see how both can be used to create RIAs.

Video: Understand the difference between Adobe Flash, Flex, Flash Player, and Adobe AIR (5:30)

Create a Web Dynpro component in NetWeaver ABAP

Flex developers should watch this video to learn how to create a Web Dynpro component in NetWeaver ABAP.

Video: Creating your first Web Dynpro component (2:33)

Implement the Rich Islands libraries in NetWeaver ABAP and Flex Builder

Flex and SAP developers should review Figure 10 to understand the role of the Rich Islands libraries created by SAP. Note that there are two libraries: one is a SWC file that is integrated into the Flex Builder project and the other is a SWF file that exists in NetWeaver. You use the two libraries together to register the Flex application as a Rich Island and to integrate it into the Web Dynpro component.

Watch the following video to better understand these libraries and how to implement them.

Video: Understanding the SAP Rich Islands libraries (5:07)

Note: For more information about these libraries, visit the SAP Community Network blog.

Map data between the Web Dynpro component and the Rich Island

Flex and SAP developers should watch these two videos to learn how to create data in the Web Dynpro component and map it to ActionScript variables in the Flex application.

Video: Mapping simple data between Flex and Web Dynpro (9:25)

Video: Passing complex data from Web Dynpro to Flex (9:25)

Note: Flex developers who want to learn more about ABAP should review the ABAP Help pages.

Dispatch an event in the Rich Island and handle it in the Web Dynpro component

Flex and SAP developers should watch this video to learn how to create an event and event listener in the Web Dynpro component and dispatch it from the Flex application.

Video: Dispatching and handling events (3:33)

Note: SAP developers who want to learn more about creating and handling events within Flex should watch these videos:

• Handling user events (6:22)
• Adding EventListeners with ActionScript (5:21)
• Creating custom events (5:59)
• Creating custom event classes (23:06)

Handle Web Dynpro data loaded asynchronously into the Rich Island

SAP developers should watch this video to understand the asynchronous nature of ActionScript.

Video: Asynchronous data handling (2:23)

Note: SAP developers who want to learn more about setters and getters can review the Defining properties as getters and setters section in the Flex documentation.

Troubleshoot your Rich Island code

SAP and Flex developers should watch the following video to understand how to debug your Web Dynpro application and troubleshoot your Rich Island code.

Video: Debugging and troubleshooting (3:45)

Where to go from here

SAP developer who would like to learn more about building Flex applications should explore the following resources:

• Flex for SAP developers
• Flex in a Week video training

SAP and Flex developers can practice how to build Rich Islands by following the tutorials on the SAP Rich Islands wiki:

• SAP Rich Islands for Adobe Flash