Professional Documents
Culture Documents
Working With Integration of Adobe Flex With SAP Webdynpro
Working With Integration of Adobe Flex With SAP Webdynpro
Working With Integration of Adobe Flex With SAP Webdynpro
Name Designation
Table of Contents
Flow Chart..................................................................................................... .2 Process 1..................................................................................................................................... .3 Creating Flex design Process Process 2.......................................................................................................................................9 Flex data binding Process Process 3......................................................................................................................................11 Create Webdynpro application Process 4. ................................................................................................................................ 14 Call the Flex Project
Start
Start
Add GACDATASOURCE
Add GACDATAEVENT
Stop
Stop
=>To add WDIslandLibrary.swc to the Library path, Select Add SWC. Browse to the select the
corresponding file. =>Confirm to finish. The Flex Project file is created.
=>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 mode in 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.
Label Label Material Number Text Input Id text1 Button Id btsubmit Label Get Details
In source code the MXML will contain a code like this only.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" " width="1262" height="968" color="#030705" themeColor="#0C14C6" textAlign="left" backgroundColor="#4C2B4B" borderStyle="outset" autoLayout="true" borderColor="#78A1F4">
=>Go to Design mode in the MXML Editor. Drag and drop Data Grid from the component window into to the design area. In source code the MXML will contain a code like this only.
<mx:DataGrid x="88" y="624"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid>
Change the Name Header Text Name And add more data grid field according if u want to more.
<mx:DataGrid width="625.75" height="279" id="dG" fontSize="15" fontWeight="normal" themeColor="#6E132F" y="253" borderStyle="inset" color="#100623" alternatingItemColors="[#A27777, #99526A]" borderColor="#2D080E" x="35.75" editable="false" enabled="true"> <mx:columns> <mx:DataGridColumn <mx:DataGridColumn <mx:DataGridColumn <mx:DataGridColumn <mx:DataGridColumn </mx:columns> headerText="S.No" dataField="{SINO}"/> headerText="Material No" dataField="{MATNR}"/> headerText="Material Description" dataField="{MAKTX}"/> headerText="Material Group" dataField="{MATKL}"/> headerText="Size/Dimensions" dataField="{GROES}"/>
</mx:DataGrid>
Process - 2
Bind the data to the controls Add below Import Files.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()" width="1262" height="968" color="#030705" themeColor="#0C14C6" textAlign="left" backgroundColor="#4C2B4B" borderStyle="outset" autoLayout="true" borderColor="#78A1F4"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import sap.FlashIsland; import mx.collections.ArrayCollection; ]]> </mx:Script>
When a property is the source of a data binding expression, Flex automatically copies the value of the source property to any 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]
// dATA bASE tABLE dECLARATION [Bindable] public var dsTable:ArrayCollection; //OUTPUT Variable Declaration [Bindable] public var SINO:String; [Bindable] public var MATNR:String; [Bindable] public var MAKTX:String;
[Bindable] public var MATKL:String; [Bindable] public var GROES:String; ]]> </mx:Script>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()" width="1262" height="968" color="#030705" themeColor="#0C14C6" textAlign="left" backgroundColor="#4C2B4B" borderStyle="outset" autoLayout="true" borderColor="#78A1F4">
Specify the Event field Name then only the data from that field will populate in the screen. Event also occurred. <mx:Script> <![CDATA[ public function Submit():void { matnrInput = text1.text; FlashIsland.fireEvent(this, "get"); } ]]>
</mx:Script> 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.
Drag and drop both the nodes from the Component Controller-Context to the Context of the FLEX_FRAME.
Process - 4
Call the Flex Project
Go to the layout of the FLEX_FRAME view and select the ROOTUIELEMENTCONTAINER and give 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
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.
1. Name - get =>Go to the MAIN view and insert a ViewContainerUIElement this will be the container for the
FLEX_FRAME view. =>Go to the window drag and drop the FLEX_FRAME view to the ViewContainerUIElement of the MAIN view.
=>Now Save the application and Activate the all object. =>Create the webdynpro Application.
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-25a49a7ae1357ae9 http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/10989ef6-968c-2b10-50a9-eb34a5267163