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 

 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?

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);

Cont.