Writing the Flex code

Value Object. The PHP AlphaData object will map to this AlphaDataFlex object. Notice my use of the RemoteClass Metadata tag. This tells Flex what server side object this maps to.

Also I have used setter and getter functions for the firstName property. When some crazy upper and lower case characters are returned for the firstName from the PHP object, my setter and getter methods in the Flex code will deal with that.

Value Object

package VO
{
[RemoteClass(alias="AlphaData")]
public class AlphaDataFlex
{
private var _firstName : String;
public var lastName : String;
public var someInt : int;

public function AlphaDataFlex()
{
}

public function set firstName(value : String) : void
{
var firstChar : String = value.charAt(0);
var remainder : String = value.substring(1);

_firstName = firstChar.toUpperCase() +
remainder.toLowerCase();
}

public function get firstName() : String
{
return _firstName;
}
}
}

Next is my main mxml file. I have had to remove a forward slash from the Application tag so that the code would display properly. I've demonstrated some interesting concepts in this sample code.

  • The first button does a remote procedure call and returns a simple string. This string is then displayed in an Alert box
  • The second button is a little bit more complex because it returns an Object which gets mapped to the AlphaDataFlex object (described above).
  • The third button creates a Remote Object in Action Script, and the data returned is an Array of PHP AlphaData objects. amfphp converts this to an Action Script Array containing AlphaDataFlex objects (the VO I created in Flex above). I create an ArrayCollection from the Array in the result handler and bind it to the dataGrid component.

Main MXML file

<?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="955" minHeight="600">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
 
  <fx:Script>
    <![CDATA[
      import VO.AlphaDataFlex;
 
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import mx.rpc.remoting.RemoteObject;
 
      [Bindable]
      private var myArrayCollection : ArrayCollection;
 
      //-------------------------------------------------
      //-- RPC result handlers
      //-------------------------------------------------
      protected function method1_resultHandler(event:ResultEvent):void
      {
        var myData : String = event.result as String;
        Alert.show(myData, "data from PHP simple_call method");	
      }
 
      protected function object_call_resultHandler(event:ResultEvent):void
      {
        var myData : AlphaDataFlex = event.result as AlphaDataFlex;
        Alert.show(myData.firstName + " " + myData.lastName, 
                   "Information returned from Alpha RPC");
      }
 
      protected function array_object_resultHandler(event:ResultEvent):void
      {
      var myData : Array = event.result as Array;
      myArrayCollection = new ArrayCollection(myData);
      }
 
      //-------------------------------------------------
      //-- Button Clicks
      //-------------------------------------------------
      protected function simple_call_clickHandler(event:MouseEvent):void
      {
        rpc1.simple_call();				
      }
 
      protected function single_object_clickHandler(event:MouseEvent):void
      {
        rpc1.object_call();				
      }			
 
      protected function array_call_clickHandler(event:MouseEvent):void
      {
        //--I'll do something different.  
        //--Create a RemoteObject with ActionScript.
        var rpc2 : mx.rpc.remoting.RemoteObject;
        rpc2 = new mx.rpc.remoting.RemoteObject();
        rpc2.destination = 'amfphp';
        rpc2.source = 'Alpha';
 
        //--here are a couple of alternatives.
        //--first one is nice and basic.
        //--remember array_call is a PHP method in our Alpha object.
        rpc2.array_call.addEventListener(ResultEvent.RESULT, 
                                         array_object_resultHandler);
        rpc2.array_call();
 
        //--second technique would be necessary if your PHP method
        //--had shared the same name to a built in ActionScript method
        //--and you need to distinguish between the two. 
        //rpc2.getOperation('array_call').addEventListener(ResultEvent.RESULT, 
                                                    array_object_resultHandler);
        //rpc2.getOperation('array_call').send();
      }
 
    ]]>
  </fx:Script>
 
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
      <s:RemoteObject id="rpc1"
                      destination="amfphp"
                      source="Alpha">
        <s:method name="simple_call"
                  result="method1_resultHandler(event)" />
        <s:method name="object_call"
                  result="object_call_resultHandler(event)" />
      </s:RemoteObject>
  </fx:Declarations>
 
  <s:HGroup width="100%" height="50" verticalAlign="middle">
    <s:Button label="Test basic String RPC call"
              click="simple_call_clickHandler(event)"/>
    <s:Button label="Test simple RPC Object call" 
              click="single_object_clickHandler(event)"/>
    <s:Button label="Array Call" 
              click="array_call_clickHandler(event)"/>
  </s:HGroup>
 
  <s:DataGrid requestedRowCount="4"
              dataProvider="{myArrayCollection}"
              width="300">
    <s:columns>
      <s:ArrayList>
        <s:GridColumn dataField="firstName" headerText="First Name" />
        <s:GridColumn dataField="lastName" headerText="Last Name" />
        <s:GridColumn dataField="someInt" headerText="Some Int" />
      </s:ArrayList>
    </s:columns>
    <s:typicalItem>
      <!-- The typical item is used to work out the initial size of each
           column...  -->
        <fx:Object dataField1="Sample Data" 
                   dataField2="Sample Data" 
                   dataField3="Sample Data" />
    </s:typicalItem>
  </s:DataGrid>
 
</s:Application>
Flash Builder Content Assist Tool

Something to consider.

If I use FlashBuilder Data Services, the actual PHP methods that I could call would display in the content assist tool. In my examples here I am demonstrating the use of RemoteObject, and currently this means that the PHP methods available to me are not displayed in the content assist tool. I still need to figure out if or how I can add them in. I think it has something to do with Operations.

I have not demonstrated the use of AsyncToken or CallResponder. Using these objects is necessary where you are concerned about synchronizing your event results. I.e. with the example code above, if the user clicked on the button multiple times in rapid succession before the call came back then you wouldn't actually know from which button click the event result was being called for. I will write a tutorial for this soon...

Tags: 

Comments

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.