Flex Web Dynpro

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

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.

https://www.sdn.sap.com/irj/sdn/nw-wdabap

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


© 2010 SAP AG 2

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



© 2010 SAP AG 3

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



© 2010 SAP AG 4

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.



© 2010 SAP AG 5

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



© 2010 SAP AG 6

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)



© 2010 SAP AG 7

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,



<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)



© 2010 SAP AG 8

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



<mx:Script>

<![CDATA[

]]>

</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;

Script Tag:

<mx:Script>

<![CDATA[

]]>

</mx:Script>



© 2010 SAP AG 9

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

https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/30bf8904-04a8-2b10-ca90-fc17f7a73355



© 2010 SAP AG 10

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.



© 2010 SAP AG 11

That‟s it for the Flex now; let us develop the Webdynpro application.



© 2010 SAP AG 12

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 0…n.

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.



© 2010 SAP AG 13

Select Flashisland and give ok.

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

FLEX_FRAME.



© 2010 SAP AG 14

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)



© 2010 SAP AG 15

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.


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.

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



© 2010 SAP AG 16

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, That‟s 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.



© 2010 SAP AG 17

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



© 2010 SAP AG 18

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(Don’t

forget to uncheck the readOnly).



© 2010 SAP AG 19

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.




© 2010 SAP AG 20

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.



© 2010 SAP AG 21

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>



© 2010 SAP AG 22

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.



© 2010 SAP AG 23

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


3. value => FLEX_FRAME. FLEX_DATA.CLASSTYPE

3. GACPROPERTY_6:

1. name => maxSeat.


3. value => FLEX_FRAME. FLEX_DATA.MAXSEAT

4. GACPROPERTY_7:

1. name => occSeat.


3. value => FLEX_FRAME. FLEX_DATA.OCCSEAT



© 2010 SAP AG 24

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.



© 2010 SAP AG 25

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



© 2010 SAP AG 26

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

http://livedocs.adobe.com/flex/3/html/

http://wiki.sdn.sap.com/wiki/display/EmTech/SAP%20Rich%20Islands%20for%20Adobe%20Flash

https://www.sdn.sap.com/irj/sdn/nw-wdabap




© 2010 SAP AG 27

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 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 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 content of this

document.

Flex Web Dynpro

Documents

Transcript of Flex Web Dynpro