Create the UI elements in Catalyst.

The following screenshot demonstrates how I built and organized the components in my Catalyst project. For this component, I'm going to need a background, a header, a close button, and a handle to resize the button. I was able to name these components what I wanted by changing their names in the Library panel. Because Catalyst doesn't really let you know the type of components on the stage, it helps to rename these as you build each one.

Import and tweak the Catalyst components in Flash Builder.

After importing the Catalyst project into Flash Builder I made some changes to the following components:

TitleWindowBG.mxml

 
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
	<s:Rect height="100%" radiusY="10" width="100%" radiusX="10" alpha="0.75">
		<s:fill>
			<s:SolidColor color="#000000"/>
		</s:fill>
	</s:Rect>
</s:Group>

With this component I set the height and width of the rectangle to 100%. Currently Catalyst only lets you specify height and widths as fixed numbers.

TitleWindowCloseButton.mxml

 
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
 
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:Rect height="21" radiusY="5" width="21" radiusX="5">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#7f0000" alpha="1.0" ratio="0"/>
				<s:GradientEntry color="#ff0000" alpha="1.0" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:RichText
		id="labelElement"
		x="7" y="6"
		color="#ffffff"
		text="(Label)"
		fontSize="12" fontFamily="Arial" fontWeight="bold"
		width="8" height="12"/>
 
</s:Skin>
 

I cleaned out some transistion stuff that wasn't necassary.

TitleWindowHeader.mxml

 
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:Rect height="28" radiusY="5" left="0" right="0" radiusX="5">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff0000" alpha="1.0" ratio="0"/>
				<s:GradientEntry color="#7f0000" alpha="1.0" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:RichText
		id="labelElement"
		y="8"
		height="14"
		color="#ffffff"
		text="(Label)"
		fontSize="14" fontFamily="Arial" fontWeight="bold"
		left="5" right="20"  />
</s:Skin>

I set the left and right properties of the Rect and RichText so it would change size with our eventual component.

TitleWindowResizeHandle.mxml

 
<?xml version="1.0" encoding="utf-8"?>
<s:Skin
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	height="100%"
	width="100%">
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:Group y="22" rotation="-45" height="100%" width="100%">
 
		<s:Rect height="5" radiusY="3" width="31" radiusX="3" alpha="0.5">
			<s:fill>
				<s:SolidColor color="0xFFFFFF"/>
			</s:fill>
		</s:Rect>
		<s:Rect y="8" height="5" radiusX="3" width="18" x="7" radiusY="3" alpha="0.5">
			<s:fill>
				<s:SolidColor color="0xFFFFFF"/>
			</s:fill>
		</s:Rect>
		<s:Rect y="16" height="5" radiusX="3" width="5" x="14" radiusY="3" alpha="0.5">
			<s:fill>
				<s:SolidColor color="0xFFFFFF"/>
			</s:fill>
		</s:Rect>
	</s:Group>
	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:SolidColor color="#ffffff" alpha="0"/>
		</s:fill>
	</s:Rect>
</s:Skin>

With this component I set the height and width of the artwork Group to 100% and added a transparent Rect to help catch mouse events better.

Create a SparkTitleWindow class that extends SkinnableContainer.

For our custom component we create two public bindable properties "title" and "isResizable" so a developer can easier implement the component. We also declare a "close" event that uses the standard CloseEvent object. For the dragging and resizing functionality, we create start and stop methods that start/stop a Timer that keeps track of the mouse position.

 
package com.tmg.components
{
	import flash.events.TimerEvent;
	import flash.geom.Point;
	import flash.utils.Timer;
 
	import mx.core.UIComponent;
	import mx.events.CloseEvent;
 
	import spark.components.SkinnableContainer;
	[Event(name="close", type="mx.events.CloseEvent")]
	public class SparkTitleWindow extends SkinnableContainer
	{
		private static const DRAG_INTERVAL:Number = 1;
		[Bindable]
		public var title:String = "";
		[Bindable]
		public var isResizable:Boolean = true;
		//drag props
		private var _dragTimer:Timer = new Timer(DRAG_INTERVAL);
		private var _dragInitPoint:Point;
		private var _dragHandle:UIComponent;
		//resize props
		private var _resizeTimer:Timer = new Timer(DRAG_INTERVAL);
		private var _resizeInitPoint:Point;
		private var _resizeHandle:UIComponent;
		public function SparkTitleWindow()
		{
			super();
		}
 
		public function closeWindow():void{
			dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
		}
		//drag methods/handlers
		public function startWindowDrag(dragHandle:UIComponent):void{
			this._dragHandle = dragHandle;
			_dragInitPoint = new Point(_dragHandle.mouseX, _dragHandle.mouseY);
			_dragTimer.addEventListener(TimerEvent.TIMER, onDragTimerTick, false, 0, true);
			_dragTimer.start();
		}
		public function stopWindowDrag():void{
			_dragTimer.stop();
			_dragTimer.removeEventListener(TimerEvent.TIMER, onDragTimerTick);
		}
		private function onDragTimerTick(event:TimerEvent):void{
			var currentMousePoint:Point = new Point(_dragHandle.mouseX, _dragHandle.mouseY);
			var gPoint:Point = _dragHandle.localToGlobal(currentMousePoint);
			var lPoint:Point = this.parent.globalToLocal(gPoint);
			this.x = lPoint.x - _dragInitPoint.x;
			this.y = lPoint.y - _dragInitPoint.y;
 
		}
		//resize methods/handlers
		public function startWindowResize(resizeHandle:UIComponent):void{
			this._resizeHandle = resizeHandle;
			_resizeInitPoint = new Point(_resizeHandle.mouseX, _resizeHandle.mouseY);
			_resizeTimer.addEventListener(TimerEvent.TIMER, onResizeTimerTick, false, 0, true);
			_resizeTimer.start();
		}
		public function stopWindowResize():void{
			_resizeTimer.stop();
			_resizeTimer.removeEventListener(TimerEvent.TIMER, onResizeTimerTick);
		}
		private function onResizeTimerTick(event:TimerEvent):void{
			var currentMousePoint:Point = new Point(_resizeHandle.mouseX, _resizeHandle.mouseY);
			var gPoint:Point = _resizeHandle.localToGlobal(currentMousePoint);
			var lPoint:Point = this.parent.globalToLocal(gPoint);
			var newWidth:Number = this.width + lPoint.x - (this.width + this.x) + (_resizeHandle.width/2);
			var newHeight:Number = this.height + lPoint.y - (this.height + this.y) + (_resizeHandle.height/2);
			if(newWidth > this.minWidth){
				this.width = newWidth;
			}
			if(newHeight > this.minHeight){
				this.height = newHeight;
			}
		}
	}
}

Create SparkTitleWindow SparkSkin.

The last step before implementation is create our SparkSkin mxml component for our window. This where we incorporate the components we created in Catalyst. Note the Group component "contentGroup." Because our host component is a SkinnableContainer it is required to have this Group object. This is where the contents of our new container will go.

 
<?xml version="1.0" encoding="utf-8"?>
<s:Skin
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/halo"
	width="100%"
	height="100%"
	xmlns:components="components.*"
	>
	<fx:Script>
		<![CDATA[
			import components.TitleWindowResizeHandle;
		]]>
	</fx:Script>
	<fx:Metadata>
		[HostComponent("com.tmg.components.SparkTitleWindow")]
	</fx:Metadata>
 
	<s:states>
		<mx:State name="normal"/>
	</s:states>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<components:TitleWindowBG
		id="windowBG"
		width="100%" height="100%"/>
	<s:Button
		id="windowHeader"
		left="5" top="5" right="5"
		skinClass="components.TitleWindowHeader"
		label="{hostComponent.title}"
		mouseDown="{ hostComponent.startWindowDrag(windowHeader) }"
		mouseUp="{ hostComponent.stopWindowDrag() }"/>
	<s:Button
		id="closeButton"
		label="X"
		buttonMode="true"
		skinClass="components.TitleWindowCloseButton"
		right="7" top="8"
		click="{ hostComponent.closeWindow()}"/>
	<s:Group
		id="contentGroup"
		clipAndEnableScrolling="true"
		top="{windowHeader.y + windowHeader.height + 10}"
		left="5" right="5" bottom="5"
		color="#ffffff">
	</s:Group>
	<s:Button
		id="resizeButton"
		right="2" bottom="2"
		mouseDown="{ hostComponent.startWindowResize(resizeButton)}"
		mouseUp="{ hostComponent.stopWindowResize()}"
		visible="{ hostComponent.isResizable }"
		skinClass="components.TitleWindowResizeHandle"/>
 
</s:Skin>
 

Also note how we are able to access our newley written public properties and methods via the "hostComponent" property.

Implement new component.

With our new container written and skin created, we can now implement this new window component.

 
<components:SparkTitleWindow
		id="myWindow"
		skinClass="com.tmg.skins.SparkTitleWindowSkin"
		title="My Title Window"
		x="200" y="50"
		width="300" height="300"
		close="{myWindow.visible=false}">
		<components:layout>
			<s:VerticalLayout/>
		</components:layout>
		<mx:Label text="These are the contents of my window:"/>
		<s:TextInput
			width="100%"
			color="#000000"
			text="A text input..."/>
		<s:TextArea
			width="100%"
			text="A textarea..."
			color="#000000"/>
		<s:Button label="A Button" color="#000000"/>
	</components:SparkTitleWindow>

Summary

There you have it, a brand new container that can be dragged and/or resized. If you don't want to use Catalyst to edit the look and feel of you new component, you could declare style properties in the SparkTitleWindow class and in your skin component bind to these properties. An example of this can be found in my previous Spark post where we create an IconButton.

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.