Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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'.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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”.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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)
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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,
<?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)
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<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>
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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 ).
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 11
That‟s it for the Flex now; let us develop the Webdynpro application.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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)
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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‟.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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).
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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>
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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).
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
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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
Integration of Adobe Flex with SAP Web Dynpro ABAP – for ABAPers
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 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.