laxmikanth flex scribd

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


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


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


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.


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.


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.


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

Final design like this only.,


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;


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

}

]]>


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.


12/24

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


13/24


14/24

Process - 4

Call the Flex Project


15/24


16/24


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


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.


19/24


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


GACPROPERTY_2

Name - Maktx

Read Only - Checked


GACPROPERTY_3

Name - Maktl

Read Only - Checked


GACPROPERTY_4

Name - Groes

Read Only - Checked



21/24

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


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.


23/24

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

=>Create the webdynpro Application.

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


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

laxmikanth flex scribd

Documents