Flex With Sap Abap Webdynpro

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 2010 SAP AG
SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1
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
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'.
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.
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.
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)
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)
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:
<?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: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;
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 ).
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.
Thats it for the Flex now; let us develop the Webdynpro application.
Developing the WebDynpro application.
Create a Webdynpro application with two views in it. 1. One for the display and the second acts a frame for the flex component.
Go to the component controller and create two nodes 1. For the both nodes (CONNID, CARRID) set the cardinality as 0n. 2. And for the two attributes (DSCARRID, DSCONNID) set the Type as string.
Go to the layout of the view created for the flex component (FLEX _FRAME in my case), right click on ROOTUIELEMENTCONTAINER and select Swap Root Element.
Select Flashisland and give ok.
Drag and drop both the nodes from the Component Controller-Context to the Context of the FLEX_FRAME.
Right click on the Webdynpro Object and select Create->Mime Object->Import
Browse to the Flex project location and select the SWF file from the bin-release folder.
Go to the layout of the FLEX_FRAME view and select the ROOTUIELEMENTCONTAINER and give the following values to its property (The value for ID appears automatically after activating the object)
Right click on the ROOTUIELEMENTCONTAINER and create two DATASOURCES With a single PROPERTY each as shown below.
The properties of the DATASOURCES and their PROPERTY are given bellow. 1. GACDATASOURCE: 1. dataSource => FLEX_FRAME.CARRID (Bind from the View-Context). 2. name => dsCarrid (same as the reference name give in the Flex application case-sensitive). 2. GACPROPERTY: 1. name => fldCarrid(same as the label field variable give in the Flex application case-sensitive). 2. readOnly => checked. 3. value => FLEX_FRAME.CARRID.DSCARRID 3. GACDATASOURCE_1: 1. dataSource => FLEX_FRAME.CONNID 2. name => dsConnid 4. GACPROPERTY_1: 1. name => fldConnid. 2. readOnly => checked. 3. value => FLEX_FRAME.CARRID.DSCONNID Go to the WDDOINIT method of the component controller and write the following code to get value to the datasource from the Sflight Table.
WDDOINIT source code.
Go to the MAIN view and insert a ViewContainerUIElement this will be the container for the FLEX_FRAME view, To do this go to the window drag and drop the FLEX_FRAME view to the ViewContainerUIElement of the MAIN view.
Select OK in the appearing dialog box, Thats it we are done with it now activate the object and create a Webdynpro application. Right click on the Webdynpro application and select test.
Now the combo box is populated with the data from SAP.
Event handling between Flex and WebDynpro.
The next step is to populate the second combo box (Flight Connection Number) based on the selection of the first combo box (Airline code). This requires a SAP Webdynpro Action to be triggered based on a Flex event. Go back to the Flex Builder and create a function carridChange()map it to the change event of the combo box (carridBox) .
<mx:ComboBox id="carridBox" x="372" y="25" dataProvider="{dsCarrid}" labelField="{fldCarrid}" change="{carridChange()}"> </mx:ComboBox>
Inside the function to fire an SAP Event use the following statement.
FlashIsland.fireEvent(this, "carridChange"); Where carridChange is the name of the SAP event (which we create later).
Before firing the event we need to store the selected carrid into a public variable to be accessed from the Webdynpro application.
public function carridChange():void { selCarrid = carridBox.selectedLabel; FlashIsland.fireEvent(this, "carridChange");
Where selCarrid is a Bindable public String variable. Save the flex code and select Project->Export Release Build to create a release build version. In the created WebDynpro application right click on the swf file and select Upload/Download=>Upload and Replace.
Browse to the Flex project location and select the SWF file from the bin-release folder. Now the SWF is updated, go to the layout of the FLEX_FRAME view, Right click on the ROOTUIELEMENTCONTAINER and insert an event. Give the name for the event as the same which we gave in the flex application carridChange.
Click on the Binding button corresponding to the onAction property and fill the following data in the dialog box appear an select ok.
An action method named ONACTIONGETCONNID is created and will be fired by the flex component. Go to context of the view and create an attribute LVCARRID of type String (for mapping the flex variable containing the selected carrid).
Go to the layout of the FLEX_FRAME view, Right click on the ROOTUIELEMENTCONTAINER and insert a property with the following values(Dont forget to uncheck the readOnly).
Go to the Action GETCONNID write the following code to get the connid corresponding to the selected carrid. GETCONNID source code Save and activate the Webdynpro object. Right click and Test the WebDynpro application now. Select any Airline Code the Flight Connection Number will be populated automatically.
But if you notice the Airline Code also resets to the first item every time you change the selection. This is because the datasource is updated after the event is fired. To handle this go to the Flex Builder, create a private variable selCarridIndex of type int to store the index of selected item so that it can be restored after the datasource update. Add the following line
selCarridIndex = carridBox.selectedIndex;
in the carridChange() function before firing the event. In the initApp function add a EventListener
FlashIsland.addEventListener(FlashIsland.EVENT_END_UPDATE,setBoxes);
So that the function setBoxes will be called after the Flash Island updates the datasources. Create a function setBoxes to restore the selectedIndex after the update.
public function setBoxes(event:Event):void { carridBox.selectedIndex = selCarridIndex; }
Save the flex code and select Project->Export Release Build to create a release build version. Update the SWF file in the WebDynpro application as said in the line 50. Right click and Test the WebDynpro application now.
Now the Airline Code combo reset issue is resolved! Bind the created Date variable selDate to the selectedDate property of the DateField flDate
<mx:DateField id="flDate" width="160" selectedDate="{selDate}" x="372" y="96"/>
The next step is to create Data binding for the Bar chart. 1. The Bar chart must have three Sets of Bars one for each Class Type (Economy, Business and First class). 2. Each one of it must show two bars comparing the Max seats available and the occupied seats in the respective class. 3. Create a VerticalAxis with a categoryField mapped to a String variable classType . 4. Create two BarSeries and set xField as maxSeat, occSeat respectively, set the dataProvider to dsBarChart for all the there
<mx:BarChart x="148.5" y="174" id="barchart1" height="315" width="573" showDataTips="true" > <mx:verticalAxis> <mx:CategoryAxis categoryField="{classType}" dataProvider="{dsBarChart}" /> </mx:verticalAxis> <mx:series> <mx:BarSeries xField="{maxSeat}" displayName="MAX SEAT" dataProvider="{dsBarChart}"/> <mx:BarSeries xField="{occSeat}" displayName="OCCUPIED SEAT" dataProvider="{dsBarChart}"/> </mx:series> </mx:BarChart>
Create a function Submit to fire the SAP event getSeats, which will fetch the Seat details. Before firing the event store the selected carrid, connid and date in their respective public variable to be read by the Webdynpro.
public function
Submit():void selCarrid = carridBox.selectedLabel.toString(); selConnid = connidBox.selectedLabel.toString(); selDate = flDate.selectedDate; selConnidIndex = connidBox.selectedIndex; FlashIsland.fireEvent(this, "getSeats");
Modify the function setBoxes as bellow to maintain the selected connid value after firing the event.
public function setBoxes(event:Event):void { carridBox.selectedIndex = selCarridIndex; connidBox.selectedIndex = selConnidIndex; }
To the click event of the button btSubmit map the function Submit() .
<mx:Button id="btSubmit" label="Get Booking Details" click="{Submit()}" x="372" y="126"/>
In the WebDynpro application go to the context node of the FLEX_FRAME view and add two attributes LVCONNID of type String and LVDATE of type Date. Create a node FLEX_DATA with cardinality 0..n. To that node add three attributes CLASSTYPE, MAXSEAT and OCCSEAT of type String.
Right click on the ROOTUIELEMENTCONTAINER and create two PROPERTY 1. GACPROPERTY_3: 1. name => selConnid (same as the label field variable give in the Flex application case-sensitive). 2. readOnly => unchecked. 3. value => FLEX_FRAME. LVCONNID 2. GACPROPERTY_4: 1. name => selDate. 2. readOnly => unchecked. 3. value => FLEX_FRAME. LVDATE Create a DATASOURCE with following PROPERTY as shown below. 1. GACDATASOURCE_2: 1. dataSource => FLEX_FRAME.FLEX_DATA (Bind from the View-Context). 2. name => dsBarChart (same as the reference name give in the Flex application case-sensitive). 2. GACPROPERTY_5: 1. name => classType (same as the label field variable give in the Flex application case-sensitive). 2. readOnly => checked. 3. value => FLEX_FRAME. FLEX_DATA.CLASSTYPE 3. GACPROPERTY_6: 1. name => maxSeat. 2. readOnly => checked. 3. value => FLEX_FRAME. FLEX_DATA.MAXSEAT 4. GACPROPERTY_7: 1. name => occSeat. 2. readOnly => checked. 3. value => FLEX_FRAME. FLEX_DATA.OCCSEAT
Right click on the ROOTUIELEMENTCONTAINER and insert an event. Give the name for the event as the same which we gave in the flex application getSeats. Click on the Binding button corresponding to the onAction property give the Action as getseatdet and select ok. Goto to the action method onactiongetseatdet and write the following code to get the seat details for the selected date, carrid and connid.
GETSEATDET source code Save and activate the WebDynpro object and Test the application.
The Bar chart displays the seat details for First class, Business class and Economy Class which rich graphics, when you move the mouse over the bars tooltip is displayed automatically with the seat information.
Complete Flex Source Code.
PFB the complete Flex source code of the application.
WordPad Document
Complete Flex Source code
Related Content
.Flex Help available at http://livedocs.adobe.com/flex/3/html/ SAP Rich Islands for Adobe Flash For more information, visit the Web Dynpro ABAP homepage Attached Files
Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this do cument, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the conte nt of this document.

Flex With Sap Abap Webdynpro

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flex With Sap Abap Webdynpro

Uploaded by

Copyright:

Available Formats

Integration of Adobe Flex with SAP Web Dynpro ABAP for ABAPers

Company: Infosys Technologies Limited Created on: 23 April 2010

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 3

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 4

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 5

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

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 6

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 7

To initialize the reference

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 8

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 9

Go to Project->Export Release Build and select finish in the windows Appeared.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 10

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 11

Developing the WebDynpro application.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 12

Select Flashisland and give ok.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 13

Right click on the Webdynpro Object and select Create->Mime Object->Import

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 14

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 15

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 16

Event handling between Flex and WebDynpro.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 17

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 18

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 19

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 20

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 21

public function setBoxes(event:Event):void { carridBox.selectedIndex = selCarridIndex; connidBox.selectedIndex = selConnidIndex; }

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 22

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 23

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 24

PFB the complete Flex source code of the application.

Complete Flex Source code

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 25