Laxmikanth Flex Saptechnical

7/31/2019 Laxmikanth Flex Saptechnical

1/24

Working with Integration of Adobe Flex with SAP Webdynpro

Name : Laxmikanth Karunamoorthy

Designation : SAP ABAP Webdynpro Developer

7/31/2019 Laxmikanth Flex Saptechnical

2/24

Table of Contents

Flow Chart..................................................................................................... .2Process 1..................................................................................................................................... .3

Creating Flex design ProcessProcess 2.......................................................................................................................................9

Flex data binding ProcessProcess 3......................................................................................................................................11

Create Webdynpro applicationProcess4. ................................................................................................................................ 14

Call the Flex Project

7/31/2019 Laxmikanth Flex Saptechnical

3/24

Flow Chart

FLEX WEBDYNPRO

Start

Create New Flex

Design the Screen

In Source Code, Addimported Files

Add CorrespondingInitialization Code

Add Data Binding

Source Code

Save and Activate

Build the Path

Stop

Start

Create one more viewfor Flex

AddGACDATASOURCE

Add GACDATAPROPERTY

Add GACDATAEVENT

Create webdynpro

A lication

Save and Activate

Stop

7/31/2019 Laxmikanth Flex Saptechnical

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.

7/31/2019 Laxmikanth Flex Saptechnical

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.

7/31/2019 Laxmikanth Flex Saptechnical

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

7/31/2019 Laxmikanth Flex Saptechnical

7/24

LabelLabelMaterial Number

Text InputIdtext1

ButtonIdbtsubmitLabelGet Details

In source code the MXML will contain a code like this only.

7/31/2019 Laxmikanth Flex Saptechnical

8/24

Final design like this only.,

7/31/2019 Laxmikanth Flex Saptechnical

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.

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

7/31/2019 Laxmikanth Flex Saptechnical

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

}

]]>

7/31/2019 Laxmikanth Flex Saptechnical

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.

7/31/2019 Laxmikanth Flex Saptechnical

12/24

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

7/31/2019 Laxmikanth Flex Saptechnical

13/24

7/31/2019 Laxmikanth Flex Saptechnical

14/24

Process - 4

Call the Flex Project

7/31/2019 Laxmikanth Flex Saptechnical

15/24

7/31/2019 Laxmikanth Flex Saptechnical

16/24

7/31/2019 Laxmikanth Flex Saptechnical

17/24

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 - 1300px3. Height - 800px

=>Right Click the ROUTEELEMENTCONTAINER and insert DATA_SOURCE

7/31/2019 Laxmikanth Flex Saptechnical

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.

7/31/2019 Laxmikanth Flex Saptechnical

19/24

7/31/2019 Laxmikanth Flex Saptechnical

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

7/31/2019 Laxmikanth Flex Saptechnical

21/24

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

7/31/2019 Laxmikanth Flex Saptechnical

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 the

FLEX_FRAME view.

=>Go to the window drag and drop the FLEX_FRAME view to the ViewContainerUIElement of the

MAIN view.

7/31/2019 Laxmikanth Flex Saptechnical

23/24

=>Now Save the application and Activate the all object.

=>Create the webdynpro Application.

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

7/31/2019 Laxmikanth Flex Saptechnical

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