Flex - Day2

CONTENT

Communicating with Server
Value objects
Data binding
Data structures

1. Communicating with server

Cont.

We use HTTPSERVICE in Flex applications to communicate with server using .

1. Request:

You have to send a request GET / POST (Default is GET) parameter to use : method

2. send () :

When you wish to retrieve data from server, you must send a request for that data.

Cont.

  <mx:HTTPService 
            id="sampleRequest" 
            url="../group-stats/4"
            method = "POST"
            fault="sampleRequestFaultHandler(event)"
            result="sampleRequestResultHandler(event)"
            resultFormat="e4x"
             />
    
    var params:Object = new Object();
    params['name'] = "Girish";
    sampleRequest.send(params);

    protected function sampleRequestFaultHandler(event:FaultEvent):void
    {
	Alert.show("Service Failed");
    }
			
    protected function sampleRequestResultHandler(event:ResultEvent):void
    {
	var rawResult:XML = XML(event.result);
	Alert.show("Result : "+rawResult);
    }

Cont.

After a HTTPSERVICE is sent , Result event is dispatched when the request is success or Fault event is dispatched when request failed.

How to access data from Result event

    protected function sampleRequestResultHandler(event:ResultEvent):void
    {
	var rawResult:XML = XML(event.result);
	Alert.show("Result : "+rawResult);
    }

var rawResult:XML = XML(sampleRequest.lastResult);
Alert.show("Result : "+rawResult);

Not used often - confusing and clumsy.

Method 2:

Method 1:

The returned data is available in the result property of the event. you can access it by event.result

Fault event

protected function sampleRequestFaultHandler(event:FaultEvent):void
{
	var faultMessage : String = String(event.message);
	Alert.show("Message : "+faultMessage );
}

Fault event is dispatched when there is a failure in connection level, server level or application level while returning the result.

How do we store the data received from Back-end?

package valueObjects
{
    public class Sports
    {
   	 public var sportsName:String;
   	 public var numOfPlayers:Number;
   	 public function Sports(name:String,players:Number)
   	 {
   		 this.sportsName = name;
   		 this.numOfPlayers = players;
   		 
   	 }
    }
}
var football:Sports = new Sports("Football",11);
var cricket:Sports = new Sports("Cricket",11);

ValueObjects are used to store and retrieve data.
ValueObjects are typed objects with some properties.



var football:Sports = new Sports("Football",11);
var cricket:Sports = new Sports("Cricket",11);


<s:HGroup width="100%" height="100%" verticalAlign="center" horizontalAlign="middle">
    <s:Label text="{football.sportsName}"/>
    <s:Label text="{football.numOfPlayers}"/>
</s:HGroup>
<s:HGroup width="100%" height="100%" verticalAlign="center" horizontalAlign="middle">
    <s:Label text="{cricket.sportsName}"/>
    <s:Label text="{cricket.numOfPlayers}"/>
</s:HGroup>


football = new Sports("Tennis",2);
cricket = new Sports("Hockey",11);

package valueObjects
{
    [Bindable]
    public class Sports
    {
   	 public var sportsName:String;
   	 public var numOfPlayers:Number;
   	 public function Sports(name:String,players:Number)
   	 {
   		 this.sportsName = name;
   		 this.numOfPlayers = players;
   		 
   	 }
    }
}

Data binding

Flex enables data binding on complex objects by manipulating the source code during compilation to allow objects to dispatch events.

Arrays cannot be used in data binding directly, as they cannot dispatch events that cause the user interface to update.

Array is fortunate to have two distinct proxies available which can dispatch events, the ArrayList and the ArrayCollection.

Proxying

var sportsAC : ArrayCollection = new ArrayCollection();

sportsAC.addItem(football);
sportsAC.addItem(cricket);

var sportsAL : Array = new ArrayList();

sportsAL.addItem(football);
sportsAL.addItem(cricket);