Skip to Content

ABAP Webservice Consumption in Adobe Flex

Overview:
In this document ABAP webservice for Sales Order header information to be fetched is consumed in Adobe Flex component which run’s in Webdynpro Application.Basically Webservice & Adobe Flex component belongs to different domain namespace.So here comes the usage of Crossdomain XML file to be created in server where Webservice resides.
Content:
Webservice Creation.
Adobe Flex component creation.
CrossDomain XML file Usage.
Webdynpro Component creation.
Output.
Webservice Creation:
1.Remote enabled Function module is created which will fetch VBAK information based on Sales Doc.no.
FM.jpg
2.Create webservice from the Function module as below
/wp-content/uploads/2013/02/webs2_190272.jpg
/wp-content/uploads/2013/02/webs3_190273.jpg
Click continue after maintaining Profile value as Low,then the webservice creation will be completed.
/wp-content/uploads/2013/02/webs4_190274.jpg
3.Get the WSDL document information for the created Webservice in SOAMANAGER tcode.Select
  Single Service Adminstration link .
/wp-content/uploads/2013/02/webs6_190278.jpg
   Click on Display selected Binding’s WSDL URL,it will display the WSDL document for the created Webservice.
/wp-content/uploads/2013/02/webs7_190279.jpg
Adobe Flex Component Creation:
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 “WDIslandlibrary.swc” &
   “WDIslandlibrary-debug.swc”  to local desktop to be used in Adobe Flex as libraries .
/wp-content/uploads/2013/02/flx1_190286.jpg

2.Create an Adobe Flex component using Flash Builder,i had used 4.5 version with 3.6 SDK.
/wp-content/uploads/2013/02/flx2_190287.jpg
3.Add downloaded SWC files into Adobe Flex component.
/wp-content/uploads/2013/02/flx3_190288.jpg
4.Create the UI elements in the Flex component.Input field for Sales Doc.no,Button to fetch VBAK info from
   Webservice .
/wp-content/uploads/2013/02/flx4_190289.jpg
Webservice call is triggered by making use of Service call for Button UI as below
/wp-content/uploads/2013/02/flx5_190290.jpg
Provide WSDL document URL of the created Webservice.
WSDL doc. URL is as below

   http://XXXXXX:8022/sap/bc/srt/wsdl/bndg_E27DDAC22D8BB6F19C00005056A70020/wsdl11/allinone/ws_policy/document?sap-client=811

I wil be passing User name & Password credentials along with the WSDL document using parameters sap-user&sap-password ,since this Webservice is      used for only fetching purposes but not any updation. Now the WSDL document URL will be 

   http://XXXXXX:8022/sap/bc/srt/wsdl/bndg_E27DDAC22D8BB6F19C00005056A70020/wsdl11/allinone/ws_policy/document?sap-client=811&sap-   user=xxxx&sap-password=*****

/wp-content/uploads/2013/02/flx7_190291.jpg

A method will get’s created in Adobe Flex as below
/wp-content/uploads/2013/02/flx8_190295.jpg
Create the Form UI Layout to display the VBAK info. in the output by binding with Webservice output structure.
/wp-content/uploads/2013/02/flx9_190296.jpg
Now release the Adobe Flex project for SWF file which will be used in Webdynpro Application.
/wp-content/uploads/2013/02/flx10_190297.jpg
I had attached the MXML source code of Flex Project just for reference,webservice  related class & method
will be created in SRC folder under “service.document” .
Crossdomain XML file:
Here in this scenario Webservice & Adobe Flex application belong to different domain’s so it requires
Crossdomain XML file creation in Webservice system.
1.Create an XML file in local desktop with below information
/wp-content/uploads/2013/02/xml_190307.jpg
2.Logon to server which webservice is exist ,create a BSP which holds the XML file which we created.
/wp-content/uploads/2013/02/bsp1_190308.jpg
/wp-content/uploads/2013/02/bsp2_190309.jpg
3.Now make the deafult service point to BSP which inturn has Crossdomain XML files,placed at server root directory.
   Goto SICF tocde,double click on default_host node.
/wp-content/uploads/2013/02/icf1_190310.jpg
   Click the Default Service tab ,select the BSP and save the setting now default host will point to Crossdomain XML BSP.
/wp-content/uploads/2013/02/icf2_190311.jpg
Change the System Profile parameter “is/HTTP/default_root_hdl” value from J2EE to ABAP.
/wp-content/uploads/2013/02/rz11_190312.jpg/wp-content/uploads/2013/02/rz11_1_190316.jpg
Webdynpro Component Creation:
1.Logon to other server where Adobe Flex component is to be run .
   Create a webdynpro component and import the SWF file of Adobe Flex as MIME object.
/wp-content/uploads/2013/02/wd3_190317.jpg
2.In the view V_ADOBE the Flex file need to be integrated as below.
   Select the “ROOTUIELEMENT” container,right click & select  Swap Root Element.
/wp-content/uploads/2013/02/wd1_190318.jpg
From the Menu select “FlashIsland”.
/wp-content/uploads/2013/02/wd2_190319.jpg
3.Maintain the SWF file name in the properties of FlashIsland.
/wp-content/uploads/2013/02/wd4_190320.jpg
4.Create the application and test it.
Output:
Below is the output displayed in Flex component,by consuming Webservice .
/wp-content/uploads/2013/02/output_190321.jpg
4 Comments
You must be Logged on to comment or reply to a post.