Adobe Flex Integration with Web Dynpro ABAP

Adobe Flex Integration with Web Dynpro ABAP

Applies to: SAP Net Weaver – Web Dynpro for ABAP. For more information, visit the Web Dynpro ABAP homepage.

Summary This article illustrates the development of basic Adobe Flex component with Pie graph chart and its integration in Webdynpro-ABAP component. Author:

Nandi Kishore Chikkavarapu

Company: Infosys Technologies Created on: 20 August 2011

Author Bio Nandi Kishore is working with Infosys Technologies Limited. He has good knowledge on ABAP, Web Dynpro ABAP, Adobe Flex & Workflows.

SAP COMMUNITY NETWORK © 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BA - boc.sap.com | UAC - uac.sap.com 1


Table of Contents Applies to: ........................................................................................................................................................... 1 SAP Net Weaver – Web Dynpro for ABAP. For more information, visit the Web Dynpro ABAP homepage. .... 1 Summary............................................................................................................................................................. 1 Author Bio ........................................................................................................................................................... 1 Table of Contents ............................................................................................................................................... 2 Basic Overview ................................................................................................................................................... 3 Flex Component Development ........................................................................................................................... 3 Web Dynpro Component Development ............................................................................................................ 10 Result ............................................................................................................................................................. 18 Related Content ................................................................................................................................................ 19 SAP Rich Islands for Adobe Flash ................................................................................................................... 19 Disclaimer and Liability Notice .......................................................................................................................... 20




Basic Overview For integration purpose database “YADOBE” created in SAP R/3 with fields „Month‟, „Year‟, „Expense‟ & ‟Profit‟ in a month .So in Adobe Flex Pie charts “Profits” in each “Month” will be displayed from data of R/3 table YADOBE.

Flex Component Development 1. Download Flash Island library‟s from SAP system to local desktop. So go to “SE80” select “MIME Repository” navigate to folder “FlashIsland” in below path Folder‟s SAP->PUBLIC->BC->UR->nw7->FlashIsland folder then download files “WDIslandlibrary30.swc” & “WDIslandlibrary30-debug.swc” to local desktop to be used in Adobe Flex as libraries




2. Open Adobe Flex Builder

3. Create new Flex Project




4. Give a name to the Flex Project here given as “Flex_piechart” and click “Next”.

5. Add downloaded SWC file “WDIslandlibrary30.swc” & “WDIslandlibrary30-debug.swc” by clicking “Add SWC” button since these files need to be added for Adobe Flex to support integration with Flash Island framework of Webdynpro..




6. Click “Finish” after adding flash island file.




7. Now the Project gets created.

8. Select the “Source” tab and implement the below code for pie chart.
// this library supports pie charts // control usage

import sap.FlashIsland;

// very important library for // integrating Adobe Flex with SAP // Flash Island

// register Flash Island to integrate with Flex using init_register function which we have initialized in the beginning of application. public function init_register():void { FlashIsland.register(this); }




// create variables as Bindable public, which can be used in Webdynpro ABAP component [Bindable] public var ds_table:ArrayCollection; // ds_table behaves like internal table // which we will populate data with // table YADOBE in SAP having two // fields Month&Profit [Bindable] public var fld_month:String;

// fld_month behaves like a field in // table ds_table for month based on // integration with webdynpro-ABAP // component

[Bindable] public var fld_profit:String;

// fld_profit behaves like field in table // ds_table for profit field based on // integration with webdynpro-ABAP // component “ds_table” contains data in webdynpro component it will be filled with data of field „MONTH‟ & „PROFIT‟ from YADOBE table in “WDDOINIT” method of component view

]]>

“fld_profit” contains data of

“fld_month” contains data of Month field of table YADOBE it behaves like field in table ds_table.




9. Click the “Design” tab and the screen will be displayed as below.

10. Now release the Adobe Flex Project.




11. Click “Finish” button.

Web Dynpro Component Development 1. Logon to SAP and go to “SE80”

Create a WebDynpro component as shown. Select WebDynpro Comp. /Intf and give a name to the component.




2. Give the component name and press EnterKey .Click “YES” on the pop upscreen

3. Create “ViewUIElement Container” in main view.

4. Apart from Main view create another View to be used for integration with Flex. Here it is view “Flex”. And right click “ROOTUIELEMENTCONTAINER” and select “Swap Root Element” then select “FlashIsland” UI element




5. Now “RootUiElementContainer” will support for Adobe Flex integration.And it will look like below.

6. Import the “.SWF” file from “bin-release” folder of released Flex Project “Flex_piechart” as a MIME object .

7. Now the Flash file got imported to Webdynpro component.




8. Give the properties for Flash Island RootUIElementContainer in “Flex” view.

9. Create node in View “Flex” having attribute Month & Profit from table YADOBE.




10. Implement the below code in “WDDOINIT” method to fetch data from YADOBE table. method WDDOINIT . DATA DATA DATA DATA * *

lo_nd_n_table TYPE REF TO if_wd_context_node. lo_el_n_table TYPE REF TO if_wd_context_element. ls_n_table TYPE wd_this->Element_n_table. itab TYPE wd_this->Elements_n_table.

navigate from to via lead selection lo_nd_n_table = wd_context->get_child_node( name = wd_this->wdctx_n_table ). get element via lead selection lo_el_n_table = lo_nd_n_table->get_element( ). select t_month t_profit from yadobe INTO CORRESPONDING FIELDS OF TABLE itab.

* *

CALL METHOD LO_ND_N_TABLE->BIND_TABLE EXPORTING NEW_ITEMS = itab SET_INITIAL_ELEMENTS = ABAP_TRUE INDEX = . endmethod.

11. Create Datasources (i.e it behaves like a table to integrate with datasource property in Adobe Flex components).In our Adobe Flex component data source is “ds_table”.




12. Give the name for datasource as “ds_table” (name‟s should be same as in Adobe Flex name‟s here it

is ds_table same name in Adobe Flex & also in Webdynpro component) and bind with node “N_TABLE” which is having data.

13. Create Property‟s for the data source i.e fields for datasource .Here we need to create two properties or fields i.e Month & Profit

14. Give the Property name as “fld_month” and bind it with “Month” attribute of node “N_TABLE”.




15. Create another property for datasource “ds_table” for Profit field “fld_profit” and bind it with Profit attribute of node “N_TABLE”.

16. Now in Window embed the view “Flex” inside ViewUIElementContainer U.I element of View “Main”.




17. Now Save and Activate the entire component, then create an application to Run the component




Result Below is the Pie Chart Adobe Flex U.I which is integrated with Web Dynpro ABAP




Related Content SAP Rich Islands for Adobe Flash Adobe Wiki Web Dynpro ABAP Home page




Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.



Adobe Flex Integration with Web Dynpro ABAP

Adobe Flex Integration with Web Dynpro ABAP

Suggest Documents

NET310 FUNDAMENTALS OF ABAP WEB DYNPRO - grbs

abap dictionary used in web dynpro application - annals of faculty ...

Modalities to Implement the Multilinguality in Web DYNPRO ABAP

Web Dynpro for ABAP Tips and Tricks V07 - Zbalai.com

Setting Application Parameters in ABAP Web Dynpro - Nicx.co.uk

Creating a Web Dynpro Application Accessing ABAP Functions

Modalities to Implement the Multilinguality in Web DYNPRO ABAP

web dynpro abap the comprehensive guide pdf - Google Drive

Solution for Monitoring the Flows through Web Dynpro ABAP Interfaces

Solution for Monitoring the Flows through Web Dynpro ABAP Interfaces

web dynpro abap the comprehensive guide pdf - Google Drive

Simple Example for Using ALV in Web Dynpro for ABAP

pdf-14104\sap-web-dynpro-for-abap-interview-questions ... - Google

Web Dynpro

Flex Integration with J2EE

Accessing Data with Flex - Adobe

Getting started with Adobe Flex

Dynamic Web-based Maps using Adobe Flex

Web Dynpro Controllers

Adobe® Flex® 4 Tutorials

Using Flex - Adobe

Pentesting Adobe Flex Applications

Using Adobe® Flex® 4

Using Adobe® Flex® 4