The Morphic Group

With all the hoopla that is going on with the Flash Platform... probably the biggest news comes from Flash Builder 4 (Flex) with Data Services. The new wizards that can introspect your data service and help you create code to build effortlessly (well at least it is a good start). You may use whatever flavor server-side technology you want - from Blaze DS, Cold Fusion, and PHP. This last technology is the focus of my little article. I also talk little bit about the work flow with Flash Catalyst and Flash Builder.

ZEND Framework

First, I will briefly go over how to create a php data service using the wizard provided in Flash Builder. You first need to set up your project as you would for any service (Properties > Flex Server). Once you have configure your php service Class and Package name, you are prompted to use Zend framework. The big hook here is the AMF support which also helps to introspect objects. I will say that the Zend framework has a lot of powerful features and is well know in the php community. The framework's size is 17 MB and needs to be uploaded to your web site whether you like it or not. You can't skip this step. This cause a couple of concerns. What if you Zend installed locally? What if in the future a new version of Zend is released won't this upload be a bit dated at some point?

From this point on your can get auto generated value objects, configure return types, bind to components just to name a few features. Here is a few great tutorials that illustrate these features and more with Zend:

• Data-centric Adobe Flash Builder development with the Zend Framework
• Building a data-centric application using Flash Catalyst beta and Flash Builder 4 beta
• Lee Brimelow's Flash Builder 4 beta and Flash Catalyst beta video tutorial

AMFPHP

For the rest of this article, I will take a slightly different path as far as creating a PHP service. I will discuss how to implement a Flex project using PHP with AMFPHP (About a little over 700 KB).

To illustrate this process, I will run through a simple example application – “CelebrationEvent”, a check list utility. The premise is to distribute a list of items needed for a party or celebration for a group of friends. In this application, users will log in and sign up for items to be in charge of bringing to the event.

For this application, I went through the whole cycle from design to development with Illustrator CS3, Adobe Flash Catalyst, and Adobe Flash Builder 4.  I do have some comments on this work flow (trial and error) but my focus here is the actual service creation itself.

Here is a screen shot of the work at beginning stage:

Setup Process

Since there is no data service wizard, there is a manual setup process involved. In other words, create a remote object.

Note: Download AMFPHP if you haven't already done so already. Get familiar with folder structure and Setup. For “CelebrationEvent”, I'm using MySQL database with “phpMyAdmin”

Create Database and Tables Structure

For this application I created the EventCelebration database with these tables:

• EventList – check list items for the event

• Users – User list

• EventListToUser – relationship of user to check list.

Create the backend service – PHP/AMFPHP

• Update globals.php under AMFPHP folder root

  • Change "DB_HOST", "DB_USER", "DB_PASS" and "DB_NAME" to the corresponding database setting for host address, database privilage user , password and database name ("EventCelebration")

• The Service Class: CelebrationEventService.php

  • Class has four methods – createUser(), loginUser(), getList(), and signUpForItem()

  • You would add this class file under the “services” folder of your AMF Folder

• Value Objects: User.php and EventItem.php

  • Note: Make sure you reference the data type mapped to the corresponding actionscript value objects “explicitType”.

  • You would add these class files under “services/vo/[folder package structure]

  • Example folder: “services/vo/com/themorphicgroup/celebrateEvent”

  • See Sample Code Below

Create objects and calls in your project - Flex

• RemoteObject with handlers

  • With the way that the project was imported into Flash Builder, I decided to create actionscript to create the remoteObject instead of MXML reference.

  • See Sample Code Below

• Value Objects: User.as and EventItem

  • Note: Great feature in Flash Builder 4… you can now create your private variables and create you getters and setters via right click, Source, Generate Getter/Setter. Very cool.

  • Make sure that you add metadata to map these objects to the corresponding PHP objects.

  • See Sample Code Below

...
 
import mx.rpc.remoting.RemoteObject;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
 
...
 
public static var RESULT:String = "result";
public static var FAULT:String = "fault"; 
 
private var _eventList:Object;
private var _service:RemoteObject;
 
....
 
public function createRemoteObject():void {
	_service = new RemoteObject();
 
	_service.endpoint = "http://www.themorphicgroup.com/CelebrationEventList/service/gateway.php";
	_service.source="CelebrationEventService";
	_service.destination = "amfphp"; 
 
	_service.showBusyCursor=true;
 
	_service.getList.addEventListener(RESULT, getListResultHandler);
	_service.loginUser.addEventListener(RESULT, loginUserResultHandler);
	_service.createUser.addEventListener(RESULT, createUserResultHandler);
	_service.signUpForItem.addEventListener(RESULT, signUpForItemResultHandler);
 
	_service.addEventListener(FAULT, faultHandler);
}
 
public function getListResultHandler(event:ResultEvent):void {
	_eventList = event.result;
 
	var dataProvider:ArrayCollection = new ArrayCollection(event.result as Array);
 
	list1.dataProvider = dataProvider;
}
 
private function loginUserResultHandler(event:ResultEvent):void {
	_currentUser = event.result as User;
 
	if(event.result != null){
		currentState='List';
		_service.getList();
	}else{
		mx.controls.Alert.show("Login Failed");
	}
	inpName.text = "";
	inpEmail.text = "";
	inpPassword.text = "";
}
 
private function createUserResultHandler(event:ResultEvent):void {
	if(event.result != null){
		var user:User = User(event.result as User);
	}else{
		mx.controls.Alert.show("User Creation Failed");
	}
 
	if(user != null){
		_service.loginUser(user.email, user.password);
	}else{
		mx.controls.Alert.show("User Creation Failed");
	}
 
}
 
private function signUpForItemResultHandler(event:ResultEvent):void {
	if(event.result){
		mx.controls.Alert.show("Signed up for item");
	}else{
		mx.controls.Alert.show("Item could not be Signed up");
	}
}
 
public function faultHandler (event:FaultEvent):void {
	mx.controls.Alert.show("Error");
}

...
package com.themorphicgroup.celebrateEvent
{
	[RemoteClass(alias="com.themorphicgroup.celebrateEvent.User")]
	public class User
	{
		private var _id:String;
		private var _fullName:String;
    	        private var _email:String;
		private var _password:String;
 
		public function User(){}
 
		public function get fullName():String
		{
			return _fullName;
		}
 
		public function set fullName(v:String):void
		{
			_fullName = v;
		}
 
		public function get id():String
		{
			return _id;
		}
 
		public function set id(v:String):void
		{
			_id = v;
		}
 
    	        public function get email():String
    	       {
    		       return _email;
    	       }
 
    	       public function set email(v:String):void
    	       {
    		      _email = v;
    	       }
 
		public function get password():String
		{
			return _password;
		}
 
		public function set password(v:String):void
		{
			_password = v;
		}
 
	}
}

You can find the working application here "CelebrationEvent". I am still adding more features and fixing some issues but the setup is the same. Check it out.

Array to ArrayCollection

Just something to point out... One question comes to mind when working with AMFPHP and Flex... How to convert arrays in php to ArrayCollection for Flex/Actionscript? I found the best idea for me was to convert the array within the result call.

...

var dataProvider:ArrayCollection = new ArrayCollection(event.result as Array);

…

For more on this subject check out this blog from Wade Arnald - AMFPHP ArrayCollection

Conclusion

I can't praise Adobe enough with the improvement of the debugging process. Now you have a network monitor where you can see the data packet and inspect the request and response. You can set conditional breakpoints ..  Check out this video blog by Jun Heider (thanks Seth)

The path from Illustrator file to Flash Catalyst to Flash Builder was pretty straight forward. I did have a few weird moments in Flash Catalyst.

• I don't have Illustrator CS 4. So I couldn't edit any text or assets in Flash Catalyst. It would be nice to be able to have this functionality but I understand the push to most recent version of Adobe products.

• In Flash Catalyst, I wanted to change every component name to a logical naming convention. That didn't go so well. You can select the component in the library but there is no preview and no selection on the stage.

• Within Flash Catalyst, make sure you copy from the last state that you created when creating new states. I made some mistakes in a few tests assuming that I could copy through states. Not a good idea.

• The code that is generated when you import your Catalyst project to Flash Builder 4 is impressive but still bulky. A developer would still have a intense chore to wire it up the application properly. And with that … try to use a design pattern or established framework with what is given? One big Main class. I'm still scratching my head on what to do on that issue.

With all these criticisms I do understand that this is beta software... I will say that Flash Catalyst is a great tool to start putting the pieces together. In fact, I don't think I could start a Flex 4 (with Spark component) project without Flash Catalyst at the start. I have a lot of hope in the evolution of the Flash Platform.

Tags: adobe, Adobe Catalyst, Adobe Flash Builder 4, Flex
Posted in ActionScript, Adobe Catalyst, Flex, PHP, Technology

This entry was posted on Thursday, June 25th, 2009 at 2:45 pm and is filed under ActionScript, Adobe Catalyst, Flex, PHP, Technology. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.