Working with Integration of Adobe Flex with SAP Webdynpro

Name Designation

: Laxmikanth Karunamoorthy : SAP ABAP Webdynpro Developer

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

Flow Chart FLEX WEBDYNPRO

Start

Start

Create New Flex Project

Create one more view for Flex

Design the Screen

Add GACDATASOURCE

In Source Code, Add imported Files

Add GACDATA PROPERTY

Add Corresponding Initialization Code

Add GACDATAEVENT

Add Data Binding Source Code

Create webdynpro Application

Save and Activate

Save and Activate

Build the Path

Stop

Stop

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.

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

Flex properties window set the id property.

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>

Final design like this only.,

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]

[Bindable (event = eventname)]

Make the reference public to make it visible to the external Island framework in SAP.

=> SO we specify the Event name.

<mx:Script> <![CDATA[ //Input Declaration [Bindable] public var matnrInput:String;

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

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

public function initApp():void { FlashIsland.register(this); }

And include this function to the initialize event of the Application

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

In Datagrid- to change the datafield name.

<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}"/>

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

=>Right Click the ROUTEELEMENTCONTAINER and insert DATA_SOURCE

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.

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

=>Right Click on the GACDATASOURCE and add INSERT EVENT.

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

=>Right click on the Webdynpro application and select test.

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