RPC Services

The client and server communication and interactions are taken care by the Adobe Flex while creating client/server based applications. It provides an exclusive range of service and library package to handle the client-server data called RPC Services. Adobe Flex offers a fair amount of control on to server side data. With the help of Flex RPC services, we can define user actions to be executed on server side. These Adobe Flex RPC Services can also be integrated with any server-side technologies.

One of Flex RPC Service provide inbuilt support for compressed binary data to be transferred over the wire and is pretty fast. Below are the core RPC Services provided by the Adobe Flex,

RPC Service    -  Description

HttpService        <mx:HTTPService> tag is used to represent an HTTPService object in an MXML file. When you make a call to HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned.You can also use the HTTP HEAD, OPTIONS, TRACE, and DELETE methods.

WebService        The <mx:WebService> tag is used to get access to the operations of SOAP-compliant web services.

RemoteObject  The <mx:RemoteObject> tag is used to represent an HTTPService object in an MXML file. This tag gives you access to the methods of Java objects using Action Message Format (AMF) encoding.

We're going to discuss HTTP Service in detail. We'll use an XML source file placed at server and access it at client side via HTTP Service

Items.xml

<items>

   <item name="Book" description="History of France"></item>

   <item name="Pen" description="Parker Pen"></item>

   <item name="Pencil" description="Stationary"></item>

<items>

HTTPService Declaration

Now declare a HTTPService and pass it url of the above file

<fx:Declarations>

   <mx:HTTPService id="itemRequest"

   url="http://www.tutorialspoint.com/flex/Items.xml" />

</fx:Declarations>

RPC Call

Make a call to itemRequest.send() method and bind values from lastResult object of itemRequest webservice to Flex UI component.

...

itemRequest.send();

...

<mx:DataGrid id="dgItems" height="80%" width="75%"

   dataProvider="{itemRequest.lastResult.items.item}">

   <mx:columns>

      <mx:DataGridColumn headerText="Name" dataField="name"/>

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

   </mx:columns>

</mx:DataGrid>

RPC Service Call Example

Now Let us follow the following steps to test RPC services in a Flex application:

Step       Description

1              Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.

2              Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.

3              Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified MXML file src/com.tutorialspoint/HelloWorld.mxml.

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:mx="library://ns.adobe.com/flex/mx"

   minWidth="500" minHeight="500" creationComplete="init(event)">

   <fx:Style source="/com/tutorialspoint/client/Style.css"/>

   <fx:Script>

      <![CDATA[

         import mx.events.FlexEvent;

         import mx.rpc.events.FaultEvent;

         import mx.rpc.events.ResultEvent;

         protected function init(event:FlexEvent):void

         {

            itemRequest.send();                                                         

         }                    

      ]]>

   </fx:Script>

   <fx:Declarations>

      <mx:HTTPService id="itemRequest"

      url="http://www.tutorialspoint.com/flex/Items.xml" />

   </fx:Declarations>

   <s:BorderContainer width="630" height="480" id="mainContainer"

      styleName="container">

      <s:VGroup width="100%" height="100%" gap="10"

         horizontalAlign="center" verticalAlign="middle">

         <s:Label id="lblHeader" text="RPC Service Demonstration"

            fontSize="40" color="0x777777" styleName="heading"/>

         <s:Panel id="parentPanel" title="Using RPC Services" 

            width="500" height="200" >

            <s:layout>

               <s:VerticalLayout  gap="10"

                  verticalAlign="middle" horizontalAlign="center"/>

            </s:layout>

            <mx:DataGrid id="dgItems" height="80%" width="75%"

               dataProvider="{itemRequest.lastResult.items.item}">

               <mx:columns>

                  <mx:DataGridColumn headerText="Name"

                     dataField="name"/>

                  <mx:DataGridColumn headerText="Description"

                     dataField="description"/>

               </mx:columns>

            </mx:DataGrid>

         </s:Panel>

      </s:VGroup>              

   </s:BorderContainer>

</s:Application>