Skip to Content

<body>

I got an opportunity to attended the RIA Hacker’s Night which took place in Bangalore SAP TechEd this year. The session actually motivated me to try my hands on the Adobe Flex technologies. The blog SAP Teched 2008, Banglore “Hacker’s Night”  (https://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/12111) highlights the wonderful experience I had in the session.

Over this weekend I managed to create my first Adobe Air application using Adobe Flex Builder 3. Thought I would share some of my learning experiences.

The Flex video training materials  (http://www.adobe.com/devnet/flex/videotraining/) were really good to give me a start into the technology. Then it was great deal of googling that helped to study the concepts in a much faster way.

Recently I had read a blog Viewing your Servers status with Visual Composer’  (https://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/12293)<br />I thought I would use the same web service(http://<host>:port+13/?wsdl) as mentioned in the blog to create my first RIA using Flex.</p><p><br />The plan was to create a desktop based RIA to be executed in Adobe AIR environment to retrieve the server status and display it in a Data Grid.</p><p><br />So here are the steps I followed…<br />Step 1) Create a new Flex Project and give the Project Name ‘ServerStatus’. Select the Application Type as Desktop Application and click on Finish

!https://weblogs.sdn.sap.com/weblogs/images/251832868/1.JPG|height=453|alt=|width=621|src=https://weblogs.sdn.sap.com/weblogs/images/251832868/1.JPG|border=0

Step 2) Consume the Server status web service using Result types and their Usages:

1) Object:

By setting the result format as Object, the data returned is in the form of object proxy. Now what is this object proxy? Flex uses object proxy to wrap anonymous object. In our case the result would be an ArrayCollection embedding these object proxies.

In the debug mode the result would look like:

The code in our function to handle the object result format would look like:

(Bindable)private var serverData:ArrayCollection;  

    private function dataHandler(event:ResultEvent):void{

        serverData = new ArrayCollection(event.result.source);

    }

The bindable variable ‘serverData’ would be bound to the Datagrid UI element for the final data display.

2) E4X:

E4X is ECMAScript for XML. E4X allows us to have faster access and query of the XML data. ActionScript 3 adheres to ECMAScript for XML (E4X) specification.

More information on E4X: http://en.wikipedia.org/wiki/E4X  (http://en.wikipedia.org/wiki/E4X)

In the debug mode, result would look like:

The code in our function to handle E4X result type would be:

(Bindable)private var serverData:XMLList;

    private function dataHandler(event:ResultEvent):void{

        serverData = event.result..process.item;

    }

3) XML:

Here the data is retrieved as array of XMLNode, which represent the legacy XML object that was present in ActionScript2.0

In the debug mode, result would look like:

The child node of the “process” node would contain the “item” node array.

 !https://weblogs.sdn.sap.com/weblogs/images/251832868/4_2.JPG|height=392|alt=|width=395|src=https://weblogs.sdn.sap.com/weblogs/images/251832868/4_2.JPG|border=0!

The code in our function to handle XMl result type would be:

(Bindable)private var serverData:XMLList;

    private function dataHandler(event:ResultEvent):void{

        var xmlData:XML = XML(event.result);

        var xmlNode:XML = xmlData.process[0];

        serverData = xmlNode.item;

    }

Step 3) Binding the DataGrid data provider

Finally bind the variable serverData to the DataGrid element by placing it within the curly braces:

<mx:DataGrid dataProvider=”“></p><p><br />Complete Code for ServerStatus.mxml:</p><p><br /><textarea cols=”65″ rows=”5″><?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”
http://www.adobe.com/2006/mxml” layout=”absolute” borderColor=”#A6A6A6″ backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#474646, #A5A2A2]”
          creationComplete=”serverStatus.GetProcessList.send()”
          width=”100%”
          height=”100%”>
<mx:Script>
     <![CDATA[
          import mx.controls.dataGridClasses.DataGridColumn;
          import mx.utils.ObjectUtil;
          import mx.collections.ArrayCollection;
          import mx.rpc.events.ResultEvent;
          import mx.controls.Alert;
          
          
           (Bindable)private var serverData:XMLList; //For resultType E4X and XML
          //[Bindable]private var serverData:ArrayCollection; //For resultType Object
          private function resultHandler(event:ResultEvent):void{
               
               /* For resultFormat type e4x */
               serverData = event.result..process.item;

               /* For resultFormat type xml */
               //var xmlData:XML = XML(event.result);
               //var xmlNode:XML = xmlData.process[0];
              //serverData = xmlNode.item;
              
               /* For resultFormat type object */
              //serverData = (ArrayCollection)(serverStatus.GetProcessList.lastResult);
              //-OR-//
              //serverData = new ArrayCollection(event.result.source);
              
          }
     ]]>
</mx:Script>

<mx:WebService id=”serverStatus”
     wsdl=”http://localhost:50013/?wsdl
     useProxy=”false”>
     <mx:operation name=”GetProcessList”      
          fault=”Alert.show(event.fault.faultString), ‘Error'”
          resultFormat=”e4x”
          result=”resultHandler(event)”>
     </mx:operation>
</mx:WebService>

<mx:DataGrid dataProvider=”“

             width=”100%”

             height=”355″ x=”0″ y=”0″>

Step 4) Running the application.

To create an Air application click on File->Export->Release Build

Enter the Air file name as ServerStatus.air and click Next

The next screen would ask for a digital certificate. Select an existing certificate or create a new certificate and then click Finish

Double click on ServerStatus.air file to install and execute the application using Adobe AIR on any target system.

!https://weblogs.sdn.sap.com/weblogs/images/251832868/5.JPG|height=133|alt=|width=545|src=https://weblogs.sdn.sap.com/weblogs/images/251832868/5.JPG|border=0!</body>

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member
    I am a seasoned Flex/AIR Adobe developer (Already a few deployed applications under my belt), developing web apps for the past 9 years. I can say there is nothing like Flex currently in the market.

    I look forwardx to learning how Flex works with SAP

    (0) 
    1. Former Member Post author
      Adobe AIR download is available for Windows, MAC and Linux(only Beta Version).
      I accessed the Server Status web service available in SAP Netweaver 7.01 ABAP Trial version.
      The web service is also available in SAP Netweaver EP systems and SAP PI.
      The OS where these servers are installed is does not make a difference.
      (0) 

Leave a Reply