Quality Reads

Sunday, February 24, 2008

Full Open Source Flex 3 SDK Released

The full source for the Flex 3 SDK was just released on Adobe's new open source wiki. Check it out if you're so inclined: http://opensource.adobe.com/wiki/display/flexsdk/

There were two surprises on the website:
  1. You can view Actionscript source for the AIR specific classes in Flex
  2. There's a section on Flex 4 (codename Gumbo) with some bug details

PS - Flex 3 and AIR 1.0 have just shipped. I think the post script topped the actual post...

Wednesday, February 13, 2008

Synchronous Service Calls in AS3

Tired of dealing with an asynchronous services in Flex? Here's a solution that can be helpful in certain situations.

Start off with a simple user interface bound to a Cairngorm-style ModelLocator Singleton:

<mx:Grid dataProvider="{ModelLocator.getInstance().myDP}"/>
<mx:Button label="Click here" click="dispatchEvent(new Event('getDP'))" />

Then Create a Controller Class that listens for the click event and calls a service:

class SimpleController{

function SimpleController(){
Application.application.AboveViewHere.addEventListener('getDP', onGetDP );

private function onGetDP ( e:Event ):void{
var dpService:DPService= new DPService();
ModelLocator.getInstance().myDP= dpService.getDP();//binds ArrayCollection reference from service to ModelLocator

Finally here's the service Class:

public class DPService(){

function DPService(){}

private var data:ArrayCollection;
public function getDP(){
var loader:URLLoader = new URLLoader();
loader.addEventListener("complete", onComplete);
loader.load(new URLRequest("someURL.aSweetExtension"));

data = new ArrayCollection();//create the ArrayCollection reference here

return data;//return the reference to the controller

private function onComplete( e:Event ):void{//get called when the service returns
var loader:URLLoader = e.target as URLLoader;
//loop over returned data and populate ArrayCollection
for each( var xml:XML in loader.data.items ){
data.addItem( xml.someProperty );//add data to ArrayCollection
//no need to return anything or dispatch an Event

Using this approach, you don't need to handle services asynchronously because of intelligent object reference management. We created the reference to the resulting data in the call to "getDP", Flex's data binding system will take care of the rest for us. This is a handy approach if you're binding the data directly to the UI since it can greatly simplify your controllers. In a situation where there's an error with the service, you can localize your error handling to one function in the controller in most situations.

Happy coding.


PS - I'm using Singleton's here for simplicity of the example. I don't suggest using them this way in an actual application. Proper MVC architecture wasn't within the scope of this article. Check out PureMVC, if you interested in learning more about Flex/AS3 architecture.