8/2/2019 Laxmikanth Flex Scribd
1/24
Working with Integration of Adobe Flex with SAP Webdynpro
Name : Laxmikanth Karunamoorthy
Designation : SAP - ABAP Developer
Table of Contents
Flow Chart..................................................................................................... .2
8/2/2019 Laxmikanth Flex Scribd
2/24
Process 1..................................................................................................................................... .3
Creating Flex design ProcessProcess 2.......................................................................................................................................9
Flex data binding Process
Process 3......................................................................................................................................11Create Webdynpro application
Process 4................................................................................................................................. 14
Call the Flex Project
8/2/2019 Laxmikanth Flex Scribd
3/24
Flow Chart
FLEX WEBDYNPRO
Start
Create New Flex Pro ect
Design the Screen
In Source Code, Addimported Files
Add CorrespondingInitialization Code
Add Data BindingSource Code
Save and Activate
Build the Path
Stop
Start
Create one more viewfor Flex
Add
GACDATASOURCE
Add GACDATAPROPERTY
Add GACDATAEVENT
Create webdynproA lication
Save and Activate
Stop
8/2/2019 Laxmikanth Flex Scribd
4/24
Process - 1
Creating Flex component
=>Open Adobe Flex Builder
Select File > New - Flex Project for creating a new Flex Project.
=>Give the valid Project Name. If enable default Location means it will store default flex folder.
=>select Application type as Web Application.
=>Click Next button for further process.
8/2/2019 Laxmikanth Flex Scribd
5/24
=>To addWDIslandLibrary.swc to the Library path, Select Add SWC.
Browse to the select the
corresponding file.
=>Confirm to finish. The Flex Project file is created.
8/2/2019 Laxmikanth Flex Scribd
6/24
=>Flex Builder have two mode. Lets you work in either Source or Design mode.=> Source mode shows the source code and Design mode shows the output screen layout.
=>Go to Design modein the MXML Editor. In Design mode, Components window and Flex
Properties will be displayed automatically.
=>Drag and drop Label, Text Input and Button from the component window into to the design area.
Flex properties window set the idproperty.
8/2/2019 Laxmikanth Flex Scribd
7/24
Label
Label Material Number
Text Input
Id text1
Button
Id btsubmitLabel Get Details
In source code the MXML will contain a code like this only.
8/2/2019 Laxmikanth Flex Scribd
8/24
Final design like this only.,
8/2/2019 Laxmikanth Flex Scribd
9/24
Process - 2
Bind the data to the controls
Add below Import Files.
import mx.controls.dataGridClasses.DataGridColumn;import sap.FlashIsland;
import mx.collections.ArrayCollection;]]>
When a property is the source of a data binding expression, Flex automatically copies the value of the source property toany destination property when the source property changes. To signal to Flex to perform the copy, you must use the
[Bindable] metadata tag to register the property with Flex, and the source property must dispatch an event.
The[Bindable] metadata tag has the following syntax:
[Bindable]
[Bindable (event = eventname)]
Make the reference public to make it visible to the external Island framework in SAP.
=> SO we specify the Event name.
//Input Declaration
[Bindable]publicvar matnrInput:String;
// dATA bASE tABLE dECLARATION
[Bindable]
publicvar dsTable:ArrayCollection;
//OUTPUT Variable Declaration
[Bindable]publicvar SINO:String;[Bindable]
publicvar MATNR:String;[Bindable]
publicvar MAKTX:String;
8/2/2019 Laxmikanth Flex Scribd
10/24
[Bindable]publicvar MATKL:String;[Bindable]
publicvar GROES:String; ]]>
Create a function initApp to register the component at the runtime.publicfunction initApp():void
{
FlashIsland.register(this);
}
And include this function to the initialize event of the Application
In Datagrid- to change the datafield name.
Specify the Event field Name then only the data from that field will populate in the screen. Event alsooccurred.
publicfunction Submit():void{
matnrInput = text1.text;
FlashIsland.fireEvent(this, "get");
}
]]>
8/2/2019 Laxmikanth Flex Scribd
11/24
Now all the flex design and source code part is complete.
Release the Build (Goto Project- Export Release Build)
Process - 3
Develop a Webdynpro application
Create a Webdynpro application with two views in it.
One for the display and the second acts a frame for the flex component.
Goto the Component Controller to create Node called Outputtable.
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.
8/2/2019 Laxmikanth Flex Scribd
12/24
Drag and drop both the nodes from the Component Controller-Context to the Context of theFLEX_FRAME.
8/2/2019 Laxmikanth Flex Scribd
13/24
8/2/2019 Laxmikanth Flex Scribd
14/24
Process - 4
Call the Flex Project
8/2/2019 Laxmikanth Flex Scribd
15/24
8/2/2019 Laxmikanth Flex Scribd
16/24
8/2/2019 Laxmikanth Flex Scribd
17/24
Go to the layout of the FLEX_FRAME view and select the ROOTUIELEMENTCONTAINER andgive the following values to its property.
The Property of the ROUTEELEMENTCONTAINER are given below
1. Swf File XXX . swf
2. Width - 1300px
3. Height - 800px
=>Right Click the ROUTEELEMENTCONTAINER and insert DATA_SOURCE
8/2/2019 Laxmikanth Flex Scribd
18/24
The Property of the GACDATASOURCE are given below
1 . DataSource Name of the datasource
2. Name - dsTable
=>Right Click the GACDATASOURCE and insert the five property one by one.
8/2/2019 Laxmikanth Flex Scribd
19/24
8/2/2019 Laxmikanth Flex Scribd
20/24
The Property of the GACPROPERTY are given below
GACPROPERTY
Name - Sno
Read Only - Checked
Value - FLEX_FRAME.OUTPUTTABLE
GACPROPERTY_1
Name - Matnr
Read Only - Checked
Value - FLEX_FRAME.OUTPUTTABLE
GACPROPERTY_2
Name - Maktx
Read Only - Checked
Value - FLEX_FRAME.OUTPUTTABLE
GACPROPERTY_3
Name - Maktl
Read Only - Checked
Value - FLEX_FRAME.OUTPUTTABLE
GACPROPERTY_4
Name - Groes
Read Only - Checked
Value - FLEX_FRAME.OUTPUTTABLE
8/2/2019 Laxmikanth Flex Scribd
21/24
=>Right Click on the GACDATASOURCE and add INSERT EVENT.
8/2/2019 Laxmikanth Flex Scribd
22/24
The Properties of the EVENT are given below
1. Name - get
=>Go to the MAIN view and insert a ViewContainerUIElement this will be the container for theFLEX_FRAME view.
=>Go to the window drag and drop the FLEX_FRAME view to the ViewContainerUIElement of the
MAIN view.
8/2/2019 Laxmikanth Flex Scribd
23/24
=>Now Save the application and Activate the all object.
=>Create the webdynpro Application.
=>Right click on the Webdynpro application and select test.
8/2/2019 Laxmikanth Flex Scribd
24/24
Final Output
Reference
http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/e0765c3d-2f49-2d10-3db3-ad81bca0cd63
http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/e088d6c0-a38c-2910-25a4-9a7ae1357ae9
http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/10989ef6-968c-2b10-50a9-eb34a5267163
http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/e0765c3d-2f49-2d10-3db3-ad81bca0cd63http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/e088d6c0-a38c-2910-25a4-9a7ae1357ae9http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/e088d6c0-a38c-2910-25a4-9a7ae1357ae9http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/10989ef6-968c-2b10-50a9-eb34a5267163http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/e0765c3d-2f49-2d10-3db3-ad81bca0cd63http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/e088d6c0-a38c-2910-25a4-9a7ae1357ae9http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/e088d6c0-a38c-2910-25a4-9a7ae1357ae9http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/10989ef6-968c-2b10-50a9-eb34a5267163