flex remoting to access data from sap using java classes ... · flex remoting to access data from...

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2009 SAP AG 1

Flex Remoting to Access Data

from SAP Using Java Classes and

lcds

Applies to:

SAP Net weaver, SAP Enterprise Connector, Flex Builder 3.0, Java and Adobe LC Data Services. For more information, visit the User Interface Technology homepage.

Summary

In this tutorial you can learn how the data transfer between Flex and SAP R/3 using Adobe LC Data Services and generating JAVA Classes using SAP Enterprise Connector.

Author: Naga Raju Meesala

Company: Robert Bosch Engineering and Business Solutions Ltd.

Created on: 02 December 2009

Author Bio

Naga Raju Meesala works as a SAP EP consultant in BOSCH Group. His main responsibilities are the Development of Webdynpro for Java components and integration with the SAP NetWeaver Portal and Rich Internet Application Development

https://www.sdn.sap.com/irj/sdn/nw-ui

Flex Remoting to Access Data from SAP Using Java Classes and lcds


© 2009 SAP AG 2

Table of Contents

Introduction ................................................................................................................................................... 3

Prerequisites: ................................................................................................................................................ 3

Scenario: ...................................................................................................................................................... 3

Generate the Java classes from RFC using SAP Enterprise Connector ......................................................... 3

Open the Adobe lcds server and place the generated proxy classes in appropriate directory ...................... 6

Modifying the Remoting-config.xml and place the jar files in lib directory ........................................................ 7

Create Flex Builder Project............................................................................................................................ 8

Creating the Data transfer Object in Flex Project ......................................................................................... 10

Write the MXML code to call the Remote object........................................................................................... 12

Related Content .......................................................................................................................................... 15

Disclaimer and Liability Notice ..................................................................................................................... 16



© 2009 SAP AG 3

Introduction

The easiest and convenient way to connect the flex application with SAP is web-services. Get the information via web services into flex is good when the data is less but if the data returning from the SAP in large content then the best way is Flex remoting , which establishes connection between the java classes and Flash player.

The steps involved are:

Expose the RFC as a Java classes (I am going to use SAP Enterprise connector)

Place the generated classes in Adobe LCDS Server directory.(lcds with tomcat)

Create the Flex Project (using Flex Builder 3.0), which will consume SAP Remote classes

Prerequisites:

Adobe LCDS with tomcat server is installed. (http://www.adobe.com/products/eula/livecycle/es/trial/eula_dataservices.html)

Adobe Flex builder 3.0 is installed.( http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3)

NWDS 2004s.

Scenario:

In this article I am going to retrieve the material details from SAP R/3 server using the RFC BAPI_MATERIAL_GETLIST and display the material list in Flex application.

Generate the Java classes from RFC using SAP Enterprise Connector

First I will create a simple Java project which will hold the generated proxies of the RFC. Open the java perspective and create a java project, named as MaterialList.

Open the context menu of the project MaterialList select new select Other Select the SAP Connectivity from the list and click on Next.

Provide the package name (raju.naga) and the Name as MaterialList and click next

The Next screen will ask you to provide SAP R/3 System details, provide the details and click next.

In the next screen select the function module bapi_material_getlist and click finish.

This wizard will generate the proxies of the RFC. Add the below jars in build path of your project.

aii_proxy_rt.jar

aii_util_misc.jar

sapjco.jar

SAPmdi.jar

Now the project looks like this

http://www.adobe.com/products/eula/livecycle/es/trial/eula_dataservices.html

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3



© 2009 SAP AG 4

Now, create a value object (Material) which will hold the material data under the package java.naga. Later we will use this object to transfer the data. In this class we are taking only material and description values.



© 2009 SAP AG 5

Now we will create another class, which is actually the remote class raju.naga.MaterialService exposed to

flex application. Create a default public constructor and create a method getMaterials and the return type is java.util.ArrayList, not contain any input parameters.

Below is the class implementation:

public class MaterialService {

public MaterialService() {

}

public ArrayList getMaterials(){

JCO.Client jcoclient =

JCO.createClient(

"Client",

"userName",

"password",

"language",

"hostname",

"system number");

try {

jcoclient.connect();

Bapi_Material_Getlist_Input input = new Bapi_Material_Getlist_Input();

BapimatramType_List idList=new BapimatramType_List();

BapimatramType idrange=new BapimatramType();

idrange.setSign("I");

idrange.setOption("CP");

idrange.setMatnr_Low("*");

idrange.setMatnr_High(" ");

idList.addBapimatramType(idrange);

input.setMatnrselection(idList);

MaterialList_PortType myproxy = new MaterialList_PortType();

myproxy.messageSpecifier.setJcoClient(jcoclient);

Bapi_Material_Getlist_Output output =

myproxy.bapi_Material_Getlist(input);

BapimatlstType_List list=output.get_as_listMatnrlist();

int listsize=list.size();

Material material=null;

ArrayList matList=new ArrayList();

for (int i = 0; i < listsize; i++) {

BapimatlstType elem = list.getBapimatlstType(i);

material=new Material();

material.setMaterial(elem.getMaterial());

material.setDescription(elem.getMatl_Desc());

matList.add(material);

}

return matList;

} catch (SystemFaultException e) {

return null;

} catch (ApplicationFaultException e) {

return null;

}finally{

jcoclient.disconnect();

}

}



© 2009 SAP AG 6

}

By this the generation of proxies is finished. i.e. the connectivity between java and SAP is done.

Open the Adobe lcds server and place the generated proxy classes in appropriate directory

Firstly open the lcds server folder in the path, driver:\lcds\tomcat\webapps and create a new directory matlist Now we have to create a project structure, to do this we will copy the existing project folders into our matlist folder.

Step1: go to folder webapps/lcds; copy the WEB-INF and META-INF folders and paste in matlist folder.

Step2: Now the structure is ready to place our class files developed in the above step.

Navigate to your NWDS workspace copy the package folder; in this case raju is the folder name.

Step3: Paste this folder into matlist/WEB-INF/classes directory. And then delete all the .java files, but not mandatory.



© 2009 SAP AG 7

Modifying the Remoting-config.xml and place the jar files in lib directory

Now navigate to the folder matlist\WEB-INF\flex and modify Remoting-config.xml

Add the destination tag before the service close tag, the xml file look like below.

<?xml version="1.0" encoding="UTF-8"?>

<service id="remoting-service"

class="flex.messaging.services.RemotingService">

<adapters>

<adapter-definition id="java-object"

class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>

</adapters>

<default-channels>

<channel ref="my-amf"/>

</default-channels>

<destination id="MaterialService">

<properties>

<source>raju.naga.MaterialService</source>

<scope>application</scope>

</properties>

</destination>

</service>

The destination id (MaterialService) will be used in flex application to call the raju.naga.MaterialService class.

Copy the aii_proxy_rt.jar,aii_util_misc.jar,sapjco.jar,SAPmdi.jar jar files into matlist\WEB-INF\lib directory.

All our Adobe life cycle data services settings are done. Now start the lcds server.



© 2009 SAP AG 8

Create Flex Builder Project

Open the Flex builder to create the project.

Step1: Create a new Flex Project

Name it as SDN_Flex_MatList, and select the radio button web application , select the application servertype as J2ee and check the Remote object access service

Click Next

Step2: Define the server settings to our server folder matlist as shown below



© 2009 SAP AG 9

Click Next and Finish and leave the default settings.

The Flex Project is created successfully.



© 2009 SAP AG 10

Creating the Data transfer Object in Flex Project

Now, let’s create the value object which is identical to material object identical to the value object in the java class raju.naga.Material.

Create a new folder in src

And name the folder as vo

Create an ActionScript Class file in vo folder

Name it as Material



© 2009 SAP AG 11

And Click Finish

Add the metadata tag [RemoteClass(alias="raju.naga.Material")] , which will identify the server side value object.

Add the metadata tag [Bindable] before the class declaration, so that all the attributes in the class are bindable to the UI Elements.

And define the attributes material and description.



© 2009 SAP AG 12

The class implementation looks like this

package vo

{

[RemoteClass(alias="raju.naga.Material")]

[Bindable]

public class Material

{

public var material:String="";

public var description:String="";

public function Material()

{

}

}

}

Write the MXML code to call the Remote object

Remote Object MXML tag is used to call the Remote Objects from the Server side.

<mx:RemoteObject id="matSrv"

destination="MaterialService"

showBusyCursor="true">

<mx:method name="getMaterials"

result="resultMaterial(event)"/>

</mx:RemoteObject>

Remote object property id is used to identify the RemoObject instance , provide

the destination property to which we defined in the server side remoting-

config.xml.

resultMaterial() method will handle the returned result.

Add the Script block to call the remote object method.

Define the method init() in script block which will call at the initialization

of the component. In init method call the service method.

private function init():void{

matSrv.getMaterials() as ArrayCollection

}

Add the creationcomplete property in application tag

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

creationComplete="init()">

Define the public bindable variable matls of type array collection, later we will

bind this to data grid.

[Bindable]public var matls:ArrayCollection;

Implement the resultHandler event as shown below

private function resultMaterial(event:ResultEvent):void{

var resultList:ArrayCollection=event.result as ArrayCollection;



© 2009 SAP AG 13

matls=new ArrayCollection();

var resultSize:Number=resultList.length;

for(var i:Number=0;i<resultSize;i++){

var tempMat:Material=resultList.getItemAt(i) as Material;

matls.addItem(tempMat);

}

}

And add the import statement.

import vo.Material;

import mx.rpc.events.ResultEvent;

import mx.collections.ArrayCollection;

Write the MXMl tag to create the data grid with two columns and provide the matlist

as data provider.

<mx:DataGrid id="materialGrid" dataProvider="{matls}"

dragEnabled="true"

width="400" themeColor="#515A11"

alternatingItemColors="[#ECE51F, #F5F368]"

x="10" y="117">

<mx:columns>

<mx:DataGridColumn headerText="Material" dataField="material"/>

<mx:DataGridColumn headerText="Description" dataField="description"/>

</mx:columns>

</mx:DataGrid>

So the Application is ready to run. Simply run the application

The output will be displayed the material list in data grid.



© 2009 SAP AG 15

Related Content

Engaging User Interfaces with Adobe Flex

Adobe Live cycle Data services guide

Flex WIKI

For more information, visit the User Interface Technology homepage.

http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/7130

http://livedocs.adobe.com/livecycle/8.2/programLC/programmer/lcds/index.html

http://wiki.sdn.sap.com/wiki/display/EmTech/Adobe+Flex

https://www.sdn.sap.com/irj/sdn/nw-ui



© 2009 SAP AG 16

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.

flex remoting to access data from sap using java classes ... · flex remoting to access data from...

Documents