flex with sap abap webdynpro

8/3/2019 flex with sap abap webdynpro

1/27

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

2010 SAP AG

Integration of Adobe Flex withSAP Web Dynpro ABAP forABAPers

Applies to:

SAP NetWeaver 7.0 Enhancement Package 1 and higher Web Dynpro ABAP. For more information, visittheWeb Dynpro ABAP homepage.

Summary

This article illustrates the developing a basic Adobe Flex based component and integrating the Flexcomponent inside a SAP Web Dynpro application. The main objective is to create a simple Flex componentwith controls like Combo Boxes, Bar charts thereby understanding the data and control flow between theFlex 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/4developer.
https://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabap


2/27

Integration of Adobe Flex with SAP Web Dynpro ABAP for ABAPers


2010 SAP AG

Table of Contents

Introduction ................................................................................................................................................... 3Adobe Flex ................................................................................................................................................ 3

Prerequisites ................................................................................................................................................. 3Implementation ............................................................................................................................................. 3

Creating a Flex application. ....................................................................................................................... 3Developing the WebDynpro application. .................................................................................................................... 12Event handling between Flex and WebDynpro. ......................................................................................................... 17

Complete Flex Source Code. ................................................................................................................... 25Related Content .......................................................................................................................................... 26Disclaimer and Liability Notice ..................................................................................................................... 27


3/27



2010 SAP AG

Introduction

Adobe Flex

Adobe Flex is used for building Rich Internet Applications - Web Application that utilizes anintermediate layer to bypass traditional page refresh are called Rich Internet Applications and henceprovides 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'.


4/27



2010 SAP AG

Click Finish to complete the project creation. A new Flex project with a .mxml (Flex source) file is created and shown(If not double

click on the .mxml file under src folder of the Project from the Flex Navigatorwindow).

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.


5/27



2010 SAP AG

To better understand the Flex-SAP interoperability, we will create flex components such thatthere 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 flexproperties 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 Textproperty as AirlineCode.


6/27



2010 SAP AG

Goto to the Source mode, the MXML will contain a code like this

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 propertiesa. Label2 (Textproperty => 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)


7/27



2010 SAP AG

Now we are done with the design of the Flex Application. The next is to bind the data to thecreated controls.

Goto to the Source mode in the MXML editor,

(You can copy and paste the above code to get the same design)


8/27



2010 SAP AG

To bind the data to the controls and to do some presentation logic, ActionScript must be addedto 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).

]]>

The next step is to create Variable and Objects to handle the data flow from/to the SAPWebdynpro.

The syntax to create a variable or reference isvar : ;

To initialize the reference = new ();

The next step is to create three data sources that would supply data to the two combo boxesand 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;

Script Tag:


9/27



2010 SAP AG

Before creating references for the Arraycollection, the class has to be imported from thelibrary. 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 referencecreation 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 combobox.

Let us do the data binding for the bar chart later, first we will test the data flow from the SAPWebdynpro 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 theproject as mentioned earlier (For this demo I used Netweaver 7.01 ).
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/30bf8904-04a8-2b10-ca90-fc17f7a73355https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/30bf8904-04a8-2b10-ca90-fc17f7a73355


10/27



2010 SAP AG

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 IslandFramework.

Create a function initApp to register the component at the runtime.

publicfunction initApp():void

{

FlashIsland.register(this);

}

And map this function to the initialize event of the Application

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


11/27



2010 SAP AG

Thats it for the Flex now; let us develop the Webdynpro application.


12/27



2010 SAP AG

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 nodes1. 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.


13/27



2010 SAP AG

Select Flashisland and give ok.

Drag and drop both the nodes from the Component Controller-Context to the Context of theFLEX_FRAME.


14/27



2010 SAP AG

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 theROOTUIELEMENTCONTAINER and give the following values to its property (The value

for ID appears automatically after activating the object)


15/27



2010 SAP AG

Right click on the ROOTUIELEMENTCONTAINER and create two DATASOURCES With asingle 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 getvalue to the datasource from the Sflight Table.

WDDOINIT source code.
https://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8ded


16/27



2010 SAP AG

Go to the MAIN view and insert a ViewContainerUIElement this will be the container for theFLEX_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 objectand create a Webdynpro application.

Right click on the Webdynpro application and select test.

Now the combo box is populated with the data from SAP.


17/27



2010 SAP AG

Event handling between Flex and WebDynpro.

The next step is to populate the second combo box (Flight Connection Number) based on theselection 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) .

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 beaccessed 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 swffile 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.


18/27



2010 SAP AG

Click on the Binding button corresponding to the onAction property and fill the following datain the dialog box appear an select ok.

An action method named ONACTIONGETCONNID is created and will be fired by the flexcomponent.

Go to context of the view and create an attribute LVCARRID of type String (for mapping theflex variable containing the selected carrid).

Go to the layout of the FLEX_FRAME view, Right click on theROOTUIELEMENTCONTAINER and insert a property with the following values(Dont

forget to uncheck the readOnly).


19/27



2010 SAP AG

Go to the Action GETCONNID write the following code to get the connid corresponding tothe 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.
https://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8ded


20/27



2010 SAP AG

But if you notice the Airline Code also resets to the first item every time you change theselection. This is because the datasource is updated after the event is fired.

To handle this go to the Flex Builder, create a private variable selCarridIndexof type int tostore 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.

publicfunction 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.


21/27



2010 SAP AG

Now the Airline Code combo reset issue is resolved!

Bind the created Date variable selDate to the selectedDate property of the DateFieldflDate

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 theoccupied 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, occSeatrespectively, set thedataProvider to dsBarChartfor all the there


22/27



2010 SAP AG

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.

publicfunction 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() .

In the WebDynpro application go to the context node of the FLEX_FRAME view and addtwo 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.


23/27



2010 SAP AG

Right click on the ROOTUIELEMENTCONTAINER and create two PROPERTY1. GACPROPERTY_3:

1. name => selConnid (same as the label field variable give in the Flex applicationcase-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


24/27



2010 SAP AG

Right click on the ROOTUIELEMENTCONTAINER and insert an event. Give the name forthe 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 asgetseatdet and select ok.

Goto to the action method onactiongetseatdet and write the following code to get the seatdetails for the selected date, carrid and connid.

GETSEATDET source code

Save and activate the WebDynpro object and Test the application.


25/27



2010 SAP AG

The Bar chart displays the seat details for First class, Business class and Economy Classwhich 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


26/27



2010 SAP AG

Related Content

.Flex Help available athttp://livedocs.adobe.com/flex/3/html/

SAP Rich Islands for Adobe Flash

For more information, visit theWeb Dynpro ABAP homepage

Attached Files
http://livedocs.adobe.com/flex/3/html/http://livedocs.adobe.com/flex/3/html/http://livedocs.adobe.com/flex/3/html/http://wiki.sdn.sap.com/wiki/display/EmTech/SAP%20Rich%20Islands%20for%20Adobe%20Flashhttp://wiki.sdn.sap.com/wiki/display/EmTech/SAP%20Rich%20Islands%20for%20Adobe%20Flashhttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/701296bb-2d49-2d10-1d97-a2a1b77e8dedhttps://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://wiki.sdn.sap.com/wiki/display/EmTech/SAP%20Rich%20Islands%20for%20Adobe%20Flashhttp://livedocs.adobe.com/flex/3/html/


27/27


Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is notsupported 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 document,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 orcode sample, including any liability resulting from incompatibility between the content within this document and the materials andservices offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of thisdocument.

flex with sap abap webdynpro

Documents