Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers

27 Pages·2010·1.15 MB·English

by  Karthikeyan Venkatesan

Integration of Adobe Flex with
SAP Web Dynpro ABAP – for
ABAPers
Applies to:
SAP NetWeaver 7.0 Enhancement Package 1 and higher – Web Dynpro ABAP. For more information, visit
the Web Dynpro ABAP homepage.
Summary
This article illustrates the developing a basic Adobe Flex based component and integrating the Flex
component inside a SAP Web Dynpro application. The main objective is to create a simple Flex component
with controls like Combo Boxes, Bar charts thereby understanding the data and control flow between the
Flex component and the Web Dynpro application.
Author: Karthikeyan Venkatesan
Company: Infosys Technologies Limited
Created on: 23 April 2010
Author Bio
Karthikeyan is working as a Software Engineer in Infosys Technologies Limited. He works as a ABAP/4
developer.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 1
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
Table of Contents
Introduction ................................................................................................................................................... 3
Adobe Flex ................................................................................................................................................ 3
Prerequisites ................................................................................................................................................. 3
Implementation ............................................................................................................................................. 3
Creating a Flex application. ....................................................................................................................... 3
Developing the WebDynpro application. .................................................................................................................... 12
Event handling between Flex and WebDynpro. ......................................................................................................... 17
Complete Flex Source Code. ................................................................................................................... 25
Related Content .......................................................................................................................................... 26
Disclaimer and Liability Notice ..................................................................................................................... 27
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 2
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
Introduction
Adobe Flex
Adobe Flex is used for building Rich Internet Applications - Web Application that utilizes an
intermediate layer to bypass traditional page refresh are called Rich Internet Applications and hence
provides very quick interactivity with the user.
Developers can use Flex Builder 3.0, an extremely easy-to-use development environment
Prerequisites
 The SAP Net Weaver 7.01 or higher should be available for development.
 Prior knowledge in developing SAP Web Dynpro application.
 The Flex Builder 3.0 should be installed on your computer and be available for development.
Implementation
Creating a Flex application.
 Open Adobe Flex Builder.
To create a new Adobe Flex project, select File->New->Flex Project.
 Give a valid Project name, set Application type as Web application and Application server type as
'None'.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 3
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers

 Click Finish to complete the project creation.
 A new Flex project with a <Project_name>.mxml (Flex source) file is created and shown(If not double
click on the <Project_name>.mxml file under src folder of the Project from the Flex Navigator
window).
1. The MXML editor in Flex Builder lets you work in either Source or Design mode
Source mode : Shows the source code.
Design mode : Shows the output screen layout.
2. To toggle between these two modes click on the Source/Design buttons on the top of the
editor.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 4
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers

 To better understand the Flex-SAP interoperability, we will create flex components such that
there is a bidirectional data transfers between SAP and Flex.
a. Two Combo Boxes to select Airline Code (CARRID) and Flight Connection
Number (CONNID), The list for these combo boxes will be populated at
runtime from SAP.
b. One DateField to select the date.
c. A Bar chart to show the seat vacancy details of the selected flight.
 Goto to Design mode in the MXML Editor. In Design mode, Components window and Flex
Properties will be displayed automatically(If not select from the Window menu).

 Drag and drop Combo Box from the component window into to the design area, in the flex
properties window give set the id property of the combo box to carridBox.
 Drag and drop a label to the left of the combo box and set the Text property as “Airline
Code”.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 5
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers

 Goto to the Source mode, the MXML will contain a code like this
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ComboBox x="365" y="41" id="carridBox"></mx:ComboBox>
<mx:Label x="255" y="43" text="Airline code"/>
</mx:Application>
The MXML file is a xml file, and you can see the tags for the created Combobox and label
controls, the properties of the controls are shown as the attributes of their respective tags.
 Similarly complete the screen with the following controls and properties
a. Label2 (Text property => „Flight connection number‟)
b. ComboBox2 (ID = „connidBox‟ )
c. Label3 (Text = „Flight Date‟)
d. DateField (ID = „flDate‟)
e. Button (ID =‟btSubmit‟, Label = „Get Booking Details‟)
f. BarChart (ID = „barchart1‟, Show data tips = „true‟)

(While creating the barchart, select OK to add a Series element)

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 6
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers

 Now we are done with the design of the Flex Application. The next is to bind the data to the
created controls.
 Goto to the Source mode in the MXML editor,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ComboBox id="carridBox" x="372" y="25" ></mx:ComboBox>
<mx:ComboBox id="connidBox" x="372" y="66" ></mx:ComboBox>
<mx:Label x="216" y="27" text="Airline Code"/>
<mx:Label x="216" y="68" text="Flight Connection Number"/>
<mx:Button id="btSubmit" label="Get Booking Details" x="372" y="126"/>

<mx:DateField id="flDate" width="160" x="372" y="96"/>
<mx:Label x="216" y="98" text="Flight Date"/>
<mx:BarChart x="244" y="156" id="barchart1" showDataTips="true">
<mx:series>
<mx:BarSeries displayName="Series 1" xField=""/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{barchart1}"/>
</mx:Application>

(You can copy and paste the above code to get the same design)
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 7
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
 To bind the data to the controls and to do some presentation logic, ActionScript must be added
to the code.
 The Syntax and the Class Library of the Action script is very much similar to that of Java
 Create a script tag to add ActionScript (inside the Application Tags).

Script Tag:

<mx:Script>
<?xml version="1.0" encoding="utf-8"?>
<![CDATA[
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
]]>

]]> </mx:Script>
</mx:Script>

<mx:ComboBox id="carridBox" x="372" y="25" ></mx:ComboBox>
<mx:ComboBox id="connidBox" x="372" y="66" ></mx:ComboBox>
<mx:Label x="216" y="27" text="Airline Code"/>
<mx:Label x="216" y="68" text="Flight Connection Number"/>
<mx:Button id="btSubmit" label="Get Booking Details" x="372" y="126"/>

<mx:DateField id="flDate" width="160" x="372" y="96"/>
<mx:Label x="216" y="98" text="Flight Date"/>
<mx:BarChart x="244" y="156" id="barchart1" showDataTips="true">
<mx:series>
<mx:BarSeries displayName="Series 1" xField=""/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{barchart1}"/>
</mx:Application>

 The next step is to create Variable and Objects to handle the data flow from/to the SAP
Webdynpro.
The syntax to create a variable or reference is
var <variable/reference name> : <data type/class name>;
To initialize the reference
<reference> = new <class name>();
 The next step is to create three data sources that would supply data to the two combo boxes
and the bar chart respectively.

import mx.collections.ArrayCollection;

[Bindable]
public var dsCarrid:ArrayCollection;
[Bindable]
public var dsConnid:ArrayCollection;
[Bindable]
public var dsBarChart:ArrayCollection;
[Bindable]
public var fldCarrid:String;
[Bindable]
public var fldConnid:String;

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 8
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
 Before creating references for the Arraycollection, the class has to be imported from the
library. This is done in the first line of the code.
 The created data sources has to be bind to the respective controls, so prefix the reference
creation statement with the [Bindable] metatag. Make the reference public to make it visible
to the external Island framework in SAP.
 Set the created data sources as the data providers for their respective controls.
 You can see an additional attribute called labelField is mapped with a String variables
fldCarrid, fldConnid.
 The Island framework converts an SAP internal table data into an Arraycollection of Objects
(Each row in the internal table as an Generic Object in the Array collection) with each column
as the field of the Object.
 So we specify the field name, so that the data from that field will be populated in the combo
box.
<mx:ComboBox id="carridBox" x="372" y="25" dataProvider="{dsCarrid}"
labelField="{fldCarrid}"> </mx:ComboBox>
<mx:ComboBox id="connidBox" x="372" y="66" dataProvider="{dsConnid}"
labelField="{fldConnid}"> </mx:ComboBox>
 Let us do the data binding for the bar chart later, first we will test the data flow from the SAP
Webdynpro to the two Combo Boxes.
 For SAP Netweaver 7.1 and above, Download the following files from the MIME repository in SAP
(path: public/bc/ur/nw7/flashislands)
1. WDIslandsLibrary30.swc
2. WDIslandsLibrary30-debug.swc
 Include the two SWC files in the Flex project using the following procedure:
1. Right click at the project name in Flex Navigator
2. Select ‘Properties’
3. Choose ‘Flex Build Path’
4. Select the tab ‘Library path’
5. Press ‘Add SWC’ and upload the two files
 For SAP Netweaver 7.01, Download the WDIslandLibrary.swc file and add the single SWC to the
project as mentioned earlier (For this demo I used Netweaver 7.01 ).
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 9
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers

 Anyways the code does not change based on the version of SWC files used.
 Go to the MXML source code and import the added flash island library inside the script tag.
import sap.FlashIsland;
 The flex component must register itself at the runtime to get the data from the Flash Island
Framework.
 Create a function initApp to register the component at the runtime.
public function initApp():void
{
FlashIsland.register(this);
}
And map this function to the initialize event of the Application
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="{initApp()}">
 Go to Project->Export Release Build and select finish in the windows Appeared.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 10