Here is the sample code I showed in the presentation. Rt-click and select View Source for the source.

http://www2.themorphicgroup.com/blog/flashcamp2009/singleton/Singleton_Complete.html
source

http://www2.themorphicgroup.com/blog/flashcamp2009/observer/Observer_Complete.html
source

http://www2.themorphicgroup.com/blog/flashcamp2009/event/Event_Complete.html
source

Should be a good time. If you are in St. Louis and have any interest in Flash, Flex, or Catalyst think about coming.

Tickets still available.

www.flashcampstlouis.com

However, this has proven to be problematic for Flex developers for a variety of reasons. The first reason is that because Flex/Flash is a presentation tier technology a great deal of testing requires user interaction. Another problem is that Flex/Flash is a client-side technology and therefore data saving and retrieval is an asynchronous process. In this post, I'm going to cover on how to handle the latter with FlexUnit 4.

With the first implementation of FlexUnit, a programmer could handle an asynchronous test by using a combination of timers and the built in addSync method of FlexUnit. Here's an example pulled from this blog post:

private var _timer:Timer;
 
override public function tearDown():void {
    _timer.stop();
    _timer = null;
}
 
public function testTimer():void {
    _timer = new Timer(3000, 1);
    _timer.addEventListener(TimerEvent.TIMER, incrementCount);
    _timer.addEventListener(TimerEvent.TIMER_COMPLETE, addAsync(verifyCount, 3500));
    _timer.start();
}

As you may have noticed, this code is a bit confusing. Basically what is happening is that FlexUnit is being told to wait 3.5 seconds before checking to see if "verifyCount" has been invoked. While this code works, it's a bit clunky and not very intuitive. You have to create a timer, add event listeners for the timer, and then actually tell the timer to run. This may seem to be a trivial complaint, but when you have to write a series of tests with dependencies on previously written async tests this can get pretty tedious pretty quickly.

With Flex Unit 4 asynch test functions have been streamlined to look something like this:

 
[Test(async,timeout="3000")]
public function UserRegistration():void{
 
	Async.handleEvent(this, _service, ServiceEvent.USER_REGISTERED, onUserRegistered);
	_service.registerUser(_testEmailStr);
 
}
 
private function onUserRegistered(event:ServiceEvent, param2:*):void{
	_testUser = UserVO.fromObject(event.data);
	Assert.assertNotNull(_testUser);
	Assert.assertTrue(_testUser.email == _testEmailStr);
 
}

In this example, we have a test function called "UserRegistration." This function will test if my async call to the server to register a user has worked. Notice the the "Async.handleEvent" line of code. In this line we are telling Flex Unit 4 to listen for an event that "_service" will be broadcasting. This line of code also tells FlexUnit to invoke the handler function "onUserRegistered" if "_service" does broadcast this event. The meta tag line above the declaration for UserRegistration also specifies that this test function should issue a failure notification if the function takes longer than 3 seconds to complete.

As for the actual "onUserRegistered" handler, we run an assertion to make sure the new VO got parsed correctly. Once that is done, we also make sure the properties of the new VO were set correctly.

For more information about FlexUnit 4 be sure to checkout Digital Primate's FlexUnit in 360 seconds post as well as O'Reilly's post. If you would like FlexUnit 4 to be directly integrated with your copy of Flash Builder today check this link out as well.

What you will need:

- A webserver or hosting account that can run PHP
- A Facebook account
- The Facebook Developer app installed in your Facebook account
- If your Flash app needs to load xml or images from your hosted domain, access to your crossdomain xml file at hosted domain

Part 1 Setup your Flash Application on your Server

1. Create a directory on your web server for all of your files. For TMG, I created a directory "facebook" and inside that folder I created another folder "portfolio."

2. Upload your Flash app swf and its supporting files. In my case, since my app was built with Flex this consisted of my images and xml assets folder, the generated HTML file, and the compiled swf for my app.

3. Create a "tab" folder. In the "portfolio" folder I previously created, I added a "tab" folder. We need this folder for when a user makes your Facebook app into a tab. When an app is made into a tab, Facebook will want a different set of files to use. This is because developers sometimes want their apps to look or behave differently if their app is implemented as a tab.

4. Copy the files Facebook should use when your application gets implemented as a tab. In my case, I just copied the same files from the "portfolio" directory into the "tab" directory.

Part 2 Setup your Application in Facebook

1. Click on the "Developer" app button under the "Applications" button in your Facebook control bar at the bottom of the page.

2. Click "Set Up New Application" in the upper right of the Developer page.

3. Type in your Application name, accept the Facebook Terms, and click "Save Changes."

4. You will now be taken to the "Basic" tab of your application. In this tab, you can edit the Application Name, Description, Icon/Logo, Developer Contact Email, and auxilary URLs for your app. For our interactive portfolio, we just updated our description and icon/logo. When done, click "Save Changes."

5. Next click on "Authentication" on the left. Be sure to check "Users" and "Facebook Pages." For the Post-Authorize and Post-Remove Callback URLs, enter the following:
http://www2.themorphicgroup.com/{the directory your swf is hosted at on your sever}/index.php

For the TMG portfolio app it is:

http://www2.themorphicgroup.com/facebook/portfolio/index.php

Click "Save Changes" when you are done.

6. To setup our tab configuration, click "Profiles" in the left menu. Enter in your Tab Name and tab URL. For example, we entered "TMG Portfolio" as the tab name and "tab/tab.php" for the "Tab URL." The "Tab URL" field basically tells Facebook where to find the files to use for the tab. Click "Save Changes."

7. Click "Canvas" on the menu to the left. Enter your "Canvas Page URL" (ex: "tmgportfolio".) Next, enter the "Canvas Callback URL" for your app. This should be the full URL path to where your Flash app resides. For the TMG Portfolio app it is:

http://www2.themorphicgroup.com/facebook/portfolio/

8. Make sure "IFrame" is selected for "Render Method" and then click "Save Changes."

Part 3 Setup the PHP on your Server

1. Click "Back to My Applications" at the top of the Developer UI.

2. Click "Download the Client Library" link at the bottom of the Developer UI. Once download, extract the files and then upload them to your Flash app's web directory. For the TMG app this directory was:
/facebook/portfolio/

3. Click on the "example code" link three quarters of the way down the page. Follow Step 2: Create an "index.php" File in the "Quick Creation Guide" popup.

4. Modify the index.php file for your Flash app. For TMG Portfolio app this is the only PHP I had:

<?php
// Copyright 2007 Facebook Corp. All Rights Reserved.
//
// Application: The Morphic Group Portfolio
// File: 'index.php'
// This is a sample skeleton for your application.
//

require_once 'facebook.php';

$appapikey = '#########################';
$appsecret = '##########################';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

?>

After the PHP block, I cut and pasted in the HTML for my Flash app that was generated by Flex. Note: I removed the api key and secret for privacy reason.

5. Create your tab.php file. This will be the PHP that will be used to render the tab version of your applicaiton. For our application, this is only one line:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www2.themorphicgroup.com/facebook/portfolio/TMG_FB_Portfolio.swf' imgsrc='http://www2.themorphicgroup.com/facebook/portfolio/fbSplash.jpg' width='600' height='570' />

FBML is a markup language that Facebook uses to render apps. In this example note that we specify an "imgsrc" attribute in addition to the "swfsrc" attribute. The image specified is used as a splash graphic of sorts, because a Flash swf in a tab is not activated until a user clicks on it.

Part 4 Test and Implement Application

1. Click on the link under "Step 3: Test Your Application" in the "Quick Creation Guide" popup, or you can go to your canvas URL directly (ex: http://apps.facebook.com/tmgportfolio.)

2. You should now see your application running in Facebook.

3. Go back to your application's page in "My Applications" and click on "View Application Profile" in the menu on the right.

4. Once on the application's profile page, click "More" in the menu to the left. You should see an option "Add to my Page." After clicking, you will be asked what page you would like this to be added to.

5. After selecting the appropriate page, your application should now be visible as a tab.

There you have it. If all went well and I didn't miss anything in this tutorial, you should now have a cooler Facebook page. If there is anything I missed, or if you run into any issues that aren't covered here, please leave a comment and I'll update this blog post.

I found a decent work around. I added a non-breaking space to the end of each string and that was enough of a change to get copy, paste, and delete to show up in my context menu. The unicode character for a non-breaking space is 00A0. The syntax looks like this "\u00A0".

elementContextMenu = new ContextMenu();
elementContextMenu.hideBuiltInItems();
 
var cutItem:ContextMenuItem = new ContextMenuItem("Cut\u00A0");
var copyItem:ContextMenuItem = new ContextMenuItem("Copy\u00A0");
var pasteItem:ContextMenuItem = new ContextMenuItem("Paste\u00A0");
 
cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onCutItem);
copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onCopyItem);
pasteItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onPasteItem);
 
elementContextMenu.customItems.push(cutItem);
elementContextMenu.customItems.push(copyItem);
elementContextMenu.customItems.push(pasteItem);
 
Application.application.contextMenu = elementContextMenu;

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.

With these limitations, it seems like Catalyst is limited to prototyping. Subsequently the burden of converting a design to a functioning application and implementing design revisions still predominately rests on the shoulders of the developer.

After working with Catalyst and Flash Builder for the past couple of days, I think I have a process in place that keeps Catalyst involved in the course of a production cycle. With these tips and tricks, you should be able to frequently reimport a Catalyst project and have your Flash Builder project update without having to worry about the aforementioned pitfalls of code getting lost/overwritten.

Keep your Catalyst project flat.

What do I mean by "flat?" When I first started working with Catalyst, I created complex components within complex components. For example, I would create a screen component. Then inside that screen component, I would create a panel component. Inside that panel component I would create a button. This may seem natural and a great way to organize your UI elements, but because you currently cannot declare what the "id" attribute of a component is in Catalyst there isn't a way for you to do something like put a click handler on your button without going into that panel component and adding it in the code with Flash Builder. This, as I mentioned earlier, voids your warranty with Catalyst. So how can you avoid this situation?

Keep all of your components on the root layer of your project.

Avoid having components embedded in components.

If you do this, when you import your Catalyst project into Flash Builder you'll be able pick and choose what components you want to use and where you will want to use them.

Think in terms of skins and not components.

When I say "skin," I do not mean a Spark Skin in the strictest sense. This is because Catalyst can only declare a component as being a Button, TextInput, DataList, or a Custom Component. Hopefully, Adobe will add this feature in a future beta. In the meantime, I tend to create custom components to act as backgrounds and other parts for my Flash Builder components. (I will demonstrate how to execute this later in the post.)

Be sure to give good names to your Catalyst components.

As you build custom components, be sure to go into the library panel for your project in Catalyst and change the names to something more meaningful than "CustomComponent1."

Don't touch the components from Catalyst after importing them into Flash Builder.

By default, Catalyst puts all of your custom components in a "components" directory. If you select "code" from the view options in the upper right, you can see this directory structure. When you create a new Flex project from your Catalyst fxp file or import it into an existing Flex project, you will also see this folder. Do not touch or modify the code of the components in this directory. If you do, do so at your own risk. Just keep in mind that all of your code in this components directory will get overwritten with a later import.

Note: I tried changing this folder structure in code view of Catalyst, but it seems to break the design view of Catalyst.

Implement Catalyst custom components as "skins."

Here's a mxml component I created in Flash Builder called MyPanel.mxml that uses two custom components I created in Catalyst:

 
<s:Group
     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.*">
 
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
     <components:MyCatalystPanelBG id="myPanelBG"/>
     <components:MyCatalystHeaderBG id="myPanelHeaderBG" left="5" top="5"/>
</s:Group>
 

By using BasicLayout I can overlap these elements and position them exactly where I want. To add the actual contents of this panel (like buttons, textinputs, lists, etc...) I just add them after the two custom Catalyst components like so:

 
<s:Group
     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.*">
 
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
 
     <components:MyCatalystPanelBG id="myPanelBG"/>
     <components:MyCatalystHeaderBG id="myPanelHeaderBG" left="5" top="5"/>
 
     <s:TextInput
          id="searchTextInput"
          right="7"
          text="Enter search criteria here"
          y="7"
     />
     <s:List
          id="itemsList"
          width="100%" height="100%"
          top="40"
          left="10"
          right="10"
          bottom="10"
 
          />
 
</s:Group>
 

The beauty with this approach is that if something changes in the Catalyst project, I can import it again without having to worry about losing the business code I have written in Flash Builder.

Use mxmlContent to make skins automatically resize.

You may have noticed in Catalyst you can only declare the height and width of elements as fixed numbers and not percentages. This may be suitable when creating a prototype, but a good Flex app needs to be able to resize as browser height and widths change. The solution? With the new Spark Group component there is a property called "mxmlContent" that is an array of all of the visible children of the component. How do we use this? Let's say the mxml for the component MyCatalystPanelBG looks like this:

 
<s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:components="components.*">
     <s:Rect y="0.5" height="700" radiusX="10" width="238" x="0.5" radiusY="10" d:userLabel="PanelBG">
          <s:stroke>
               <s:SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="4" color="#808080"/>
          </s:stroke>
          <s:fill>
               <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#ffffff" alpha="1.0" ratio="0"/>
                    <s:GradientEntry color="#d8d8d8" alpha="1.0" ratio="1"/>
               </s:LinearGradient>
          </s:fill>
     </s:Rect>
</s:Group>
 

We can make this background scale with our panel component by doing the following:

Add a "creationComplete" handler in MyPanel.mxml.

 
<s:Group
     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.*"
     creationComplete="onCC()">
 
          <fx:Script>
          <![CDATA[
               import spark.primitives.Rect;
               private function onCC():void{
                    var r:Rect = myPanelBG.mxmlContent[0] as Rect;
                    r.top = 0;
                    r.left = 0;
                    r.right=0;
                    r.bottom=0;
               }
           ]]>
     </fx:Script>
 

Also be sure to set the height and width of the "myPanelBG" to 100%.

 
<components:MyCatalystPanelBG id="myPanelBG" width="100%" height="100%"/>
 

The mxmlContent property is nice in that you don't have to worry about looping through sub children like you do with "getChildAt(i)" to get to what you want. This line of code basically says "get the first content item which is a rectangle element and set its right, top, bottom, and left properties to 0."

NOTE: This hack is very dependent that the order of elements don't change in your Catalyst components. Whenever updating these components you may need to check to see if the structure has changed in these components. You could do something like have a loop that goes through all of the items in mxmlContent and changes these properties on any Rects.

To bind strings to text items in a Catalyst custom component, use BindUtil.

Let's say you have a RichText component inside your header "skin:"

 
<s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
     <s:Rect y="0.5" height="23" radiusX="5" width="737" x="0.5" radiusY="5" d:userLabel="Header BG">
          <s:fill>
               <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#bf0000" alpha="1.0" ratio="0"/>
                    <s:GradientEntry color="#7f0000" alpha="1.0" ratio="1"/>
               </s:LinearGradient>
          </s:fill>
          <s:stroke>
               <s:SolidColorStroke color="#7f0000" caps="none" joints="miter" miterLimit="4" weight="1"/>
          </s:stroke>
     </s:Rect>
     <s:RichText y="5" color="#ffffff" x="7" fontSize="17" fontFamily="Arial" fontWeight="bold" d:userLabel="Title"/>
</s:Group>
 

To bind the RichText component to a property in MyPanel.mxml do the following.

Add a title variable to MyPanel.mxml:

 
public var title:String = "My Panel Title"
 

In the creation complete handler add the following:

 
BindingUtils.bindProperty(myPanelHeaderBG.mxmlContent[1], "text", this, "title");
 

In this scenario, the RichText component is the second item hence the "mxmlContent[1]." That's all you need.

To manage your Catalyst component's state bind it to your Flash Builder component's state.

Let's say you want your "skin" component to have it's state mirror your component that you've written in Flash Builder. To do this all you have to do is this:

 
<components:MyCatalystPanelBG id="myPanelBG" currentState="{this.currentState}"/>
 

Note: You need to be sure that you've created all of the necessary states in Catalyst for your skin.

Make your bitmap artwork in Catalyst custom components

This will make managing and swapping out bitmaps much easier as your app's design evolves.

Summary

That should basically do it. A lot of what I have prescribed in here is a bit of a hack until Adobe expands Catalyst's abilities beyond prototyping. However, in the meantime this is still a workable solution to leverage Catalysts abilities in your production phase of your project.

One solution is to put the icon in your button skin, but this would require you to build multiple skins for multiple icons.

Another solution is to use an Image component as a button. However, let's say we want to have different icons used for different rollover states. We could definitely use MouseEvent event listeners to switch the source property of the Image component. Unfortunately, transparent pixels in an image have been known to cause problems with MouseEvents firing properly. To avoid these type of pitfalls, we are going to create our own custom component by doing the following:

package com.tmg.components
{
	import spark.components.Button;
 
	//icons
	[Style(name="iconUp",type="*")]
	[Style(name="iconOver",type="*")]
	[Style(name="iconDown",type="*")]
	[Style(name="iconDisabled",type="*")]
	//paddings
	[Style(name="paddingLeft",type="Number")]
	[Style(name="paddingRight",type="Number")]
	[Style(name="paddingTop",type="Number")]
	[Style(name="paddingBottom",type="Number")]
	public class IconButton extends Button
	{
		public function IconButton()
		{
			super();
		}
	}
}

 
<s:SparkSkin
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/halo"
	currentStateChanging="onCurrentStateChanging(event)"
	>
	<fx:Metadata>
		[HostComponent("com.freckle.oceania.client.view.components.IconButton")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import mx.events.StateChangeEvent;
 
			private function onCurrentStateChanging(event:StateChangeEvent):void{
				switch(event.newState){
					case "up":
						setIcon("iconUp");
						break;
					case "over":
						setIcon("iconOver");
						break;
					case "down":
						setIcon("iconDown");
						break;
					case "disabled":
						setIcon("iconDisabled");
						break;
				}
			}
			private function setIcon(type:String):void{
				if(hostComponent.getStyle(type) != null){
					icon.source = hostComponent.getStyle(type);
				}
			}
 
		]]>
	</fx:Script>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states> 
 
 	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
        <s:stroke>
            <s:SolidColorStroke id="outline" weight="1"/>
        </s:stroke>
        <s:fill>
        	<mx:LinearGradient>
        		<mx:GradientEntry color="#ffffff" ratio="0"/>
        		<mx:GradientEntry color="#cccccc" ratio="1"/>
        	</mx:LinearGradient>
        </s:fill>
    </s:Rect>
 	<s:Group
 		horizontalCenter="0"
 		verticalCenter="0"
 		>
 		<s:layout>
 			<s:HorizontalLayout
 				paddingBottom="{ hostComponent.getStyle('paddingBottom')}"
 				paddingTop="{ hostComponent.getStyle('paddingTop')}"
 				paddingLeft="{ hostComponent.getStyle('paddingLeft')}"
 				paddingRight="{ hostComponent.getStyle('paddingRight')}" />
 		</s:layout>
 		<mx:Image
	    	id="icon"
	    	source="{hostComponent.getStyle('iconUp')}"
	    	verticalCenter="0"
	    	alpha="{(this.currentState == 'up')?.5:1}"
	    	/>
	    <s:SimpleText
	    	text="{hostComponent.label}"
	    	verticalCenter="0"
	    	includeInLayout="{( hostComponent.label != '' )}"
	    	visible="{( hostComponent.label != '' )}"/>
 	</s:Group>
 
</s:SparkSkin>
 

One of the first things you may notice is the Metadata tag declaring the Hostcomponent. This is important because it lets this skin component know what kind of component will be using this skin. Note the SimpleText component's text property is set to the hostComponent's label property.

Another key element to this piece of code is the event handler for when the state changes. As you may have guessed from the contents of the states tag, the hostComponent changes the state of this skin for the different button mouse states. By listening to this event, we can change the current source of the icon image component.

This brings us to our last step...

<components:IconButton
		width="100%"
		iconUp="assets/images/icons/toolbar/arrow_out.png"
		iconDisabled="assets/images/icons/toolbar/arrow_out_disabled.png"
		fontFamily="Times"
		fontWeight="bold"
		skinClass="com.tmg.skins.IconButtonSkin"
		paddingLeft="5"
		paddingTop="5"
		paddingRight="5"
		paddingBottom="5"
		/>
 

When implementing your own skins, be sure to set the skinClass property. In this implementation we just set the iconUp and iconDisabled properties. Because of how we wrote the set icon method in our skin, the skin will only use the icons that have been declared. As for the label, we have also coded the skin to not show the text component if the label text is empty, but in this case we do have a label.

So there you have it, a brand new component that uses the new MXML 2009 Spark architecture for skinning. With this new approach, we can break out our UI code into it's own file/component. A benefit of this new method is that we don't have much code in the actual component class. By using component skins, we can not only define the look via MXML but we can also add some logic/code. For example, it would be really easy to add a method that spins the icon on rollover or to change the text of label when disabled.

For more information about this, check out: https://xd.adobe.com/#/videos/video/165

Let's walk though a solution for building a Flash ad (in AS 3.0) with a clickTag. Note: In most cases, ad companies and developers are required to use AS 2.0. There are plenty of great articles that discuss this implementation. There is an adobe article that is widely used Designer's Guide: Building Macromedia Flash Banners with Tracking Capabilities. This article will not discuss this how to create ads with clickTags using AS 2.0 .

The ad manager will also want to prevent the click-through target from being blocked by any
popup blockers. This usually the case with certain web browsers like IE 7.0+. Note: At this
time there is a new Flash player version out (version 11). I don't know if this issue is fixed.

So we have three requirements …

• Get a reference to the clickTag variable

• Build your web ad with AS 3.0

• Handle the issue with the Popup Blockers

Here is an example of code for satisfying these requirements.

html embed parameter
...
<param name="FlashVars" value="clickTag=http://www.adserver.com/target.php?track=1123" />
...

actionscript code

package
{

import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLRequest;

public class Main extends MovieClip
{
  private var paramList:Object;
  public var clickTag:String = ""; 

  function Main()
  {
    paramList = this.root.loaderInfo.parameters;

    if(paramList["clickTag"] != null)
    {
        clickTag = paramList["clickTag"];
    }

    clickTagBtn.addEventListener(MouseEvent.CLICK, onClick);

  } 

  function onClick( event:MouseEvent ):void
  {
    if( clickTag != ""  )
    {
      var req:URLRequest = new URLRequest(clickTag);

      if ( !ExternalInterface.available )
      {
        navigateToURL(req, "_blank");
      }
      else
      {
        var strUserAgent:String =
          String(ExternalInterface.call(
		"function() {return navigator.userAgent;}"
		)).toLowerCase();

        if ( strUserAgent.indexOf("firefox") != -1 )
        {
          ExternalInterface.call( "window.open", req.url, "_blank" );
        }
        else
        {
          if( strUserAgent.indexOf("msie") != -1 &&
            uint(strUserAgent.substr(strUserAgent.indexOf("msie") + 5, 3)) >= 7 )
          {
            ExternalInterface.call("window.open", req.url, "_top");
          }
          else
          {
            navigateToURL(req, "_top");
          }
        }
      }
    }

  }

}

}

I am assuming that you are using Flash CS 3 or greater and that Main is your document class for your fla project.

First I need to get the get the value of the clickTag.

• Reference the loaderInfo.parameters as an Object and then reference the key value of clickTag.

• The character's case is very important. Letter case is important, otherwise you won't be able to reference this value.

The key to handling the issue with popup blockers is to use a little javascript, with the help of External interface.

• If ExternalInterface is not available, use NavigateToUrl directly.

• Get the userAgent (browser) information via javascript. I use this info to handle browser different quirks.

• Call the javascript method window.open to open the link specified by the clickTag value. It is absolutely necessary to enable AllowScripting for “sameDomain” or “always” . Otherwise a security sandbox error will display.

This solution should get you out of most jams in regards to ClickTag functionality using AS 3.0 .

To demonstrate the paginated sorting, I wrote up the following example that uses hard-coded data:
PaginatedDataGridExample
Source View

Click on the column headers to sort the data and see that the sorting is applied across the entire data set.

Pagination

The PaginatedDataGrid class uses the entireDataProvider property as input to contain the entire data set. The normal dataProvider property represents the data for each page. The bulk of the work is done by the populatePage() method:

protected function populatePage(pageNum:int):void {
	if (_entireDataProvider == null) {
		return;
	}
	var start:int = pageNum * pageSize;
	var end:int = start + pageSize;
	end = Math.min(_entireCollection.length, end);
	_pageDataProvider.splice(0);
	for (var i:int = start; i < end; i++) {
		_pageDataProvider.push(_entireCollection.getItemAt(i));
	}
	super.dataProvider = _pageDataProvider;
	// apply sorting that was lost due to dataProvider change
	if (_savedSortDirection != null) {
		sortIndex = _savedSortIndex;
		sortDirection = _savedSortDirection;
	}
}

The properties page, pageCount, isFirstPage, and isLastPage are used by the application to navigate the PaginatedDataGrid:

Sorting

We know from the Flex docs that the DataGrid dispatches the DataGridEvent.HEADER_RELEASE event. This event is dispatched by the mouseUpHandler() method in DataGridHeader and the event is cancelable. The PaginatedDataGrid listens for this event and handles it with the following method:

protected function headerReleaseHandler(event:DataGridEvent):void {
	event.preventDefault();
	sortByColumn(event.columnIndex);
}

The sortByColumn() method was largely copied from the sortByColumn() method from DataGrid. It determines how to sort and applies the sort information. It uses mx_internal properties so we had to import and use that namespace:

import mx.events.DataGridEvent;

use namespace mx_internal;

The significant modifications to sortByColumn() are in the following lines:

// save sort information to be applied when dataProvider changes
_savedSortIndex = sortIndex;
_savedSortDirection = sortDirection;

 _entireCollection.sort = s;
 _entireCollection.refresh();
populatePage(page);

Note that the sort is applied to _entireCollection which is an ArrayCollection and whose source data is entireDataProvider. The current page is then repopulated with the newly sorted data.

What if I'm using web services?

If you want to modify PaginatedDataGrid to work with web services, you will not need a good chunk of the code starting with entireDataProvider. I would start by editing the page setter function which is the entry point of data population. If you're using sorting, you'll have to grab that data from sortIndex/sortDirection and pass them as parameters to the service (reformatted as necessary). If the feature requires additional filtering then you would create methods to set that information and then pass it along when requesting data for a page. This is a bit abstract I know. If you're comfortable with web services, then with this example you should have all the tools you'll need.

Final Thoughts

The more I read Flex source, the more I cry. Just kidding. I'm actually happy to find that between protected and mx_internal properties and methods, I'm able to customize (and fix) the code for my specific requirements.

One of the biggest issues that I have run into is making a font available for use in both a .css file and in a TextFormat object. It is difficult for me to reference a font that is embedded in a .css file from an AS3 code line that is setting the properties of a new TextFormat object, for instance. This solution also works with both projects that use the mx.core.* framework (a Flex Project) and also pure AS3 projects. This solution works with BitmapFonts like the ones you might find on http://www.fontsforflash.com/.

The solution involves making a Fonts.as class that embeds the font definitions and registers them with the global Font object.  This enables referencing of fonts by name from anywhere within your application - CSS, AS3, or MXML files.  I like to make a Flex Library project to hold all the font information.  This allows me to use the same embed code for multiple project - and if desired - make the font.swc into an RSL for runtime sharing between multiple SWFs on your Web site.  You could potentially also achieve runtime loaded font definitions with this method - but that is a story for a different day.

PART 1 - Make the font Flex Library Project project

Step 1 – Open Flex Builder and make a new Flex Library Project. Name the project font.

Step 2 – Add font assets. I prefer to create a src/assets/fonts/ directory to hold my assets. The font assets can be either
A) .TTF file
B). SWF file by following the instructions from the docs found here: http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_09.html

Step 3 – Create a new .as file in your /src directory named Fonts.as

Step 4 - Add this code to Fonts.as

package
{
	import flash.text.Font;
	import flash.text.TextFormat;
 
	/**
	 *  This class sets up the fonts for the application.
	 */
	public class Fonts
	{
	// Embed a TTF file
        [Embed(source='assets/fonts/BOOTLE__.TTF', fontName='BOOTLE', mimeType='application/x-font')] // http://famousfonts.smackbomb.com/fonts/thebeatles.php
        private static var BOOTLE:Class;
 
        [Embed(source='assets/fonts/squealer.TTF', fontName='Squealer', mimeType='application/x-font')] // http://famousfonts.smackbomb.com/fonts/acdc.php
        private static var Squealer:Class;
 
        // Embed a font located inside a SWF file
        [Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light')]
        private static var FrutigerLT45Light:Class;
 
	[Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light', fontWeight='bold')]
        private static var FrutigerLT45LightBold:Class;
 
	[Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light', fontStyle='italic')]
        private static var FrutigerLT45LightItalic:Class;
 
	[Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light', fontWeight='bold', fontStyle='italic')]
        private static var FrutigerLT45LightBoldItalic:Class;
 
		/**
		 * Constuctor
		 */
		public function Fonts()
		{
			// Register the font with the global Font manager class
			Font.registerFont(BOOTLE);
			Font.registerFont(Squealer);
			Font.registerFont(FrutigerLT45Light);
			Font.registerFont(FrutigerLT45LightBold);
			Font.registerFont(FrutigerLT45LightItalic);
			Font.registerFont(FrutigerLT45LightBoldItalic);
		}
 
		/**
		 * A utility function
		 *
		 * @param font	A font object
		 * @return 	A sting of the font name combined with the font style
		 */
		public static function getUniqueFontName(font:Font):String
		{
            		return font.fontName + ":" + font.fontStyle;
		}
		// A convienent place to declare TextFormat objects that will be used in multiple location
		public static var textFormat1:TextFormat = new TextFormat("Squealer", 12, 0x000000);
		public static var textFormat2:TextFormat = new TextFormat("BOOTLE", 12, 0x000000);
		public static var textFormat3:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000);
		public static var textFormat3Bold:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000, true);
		public static var textFormat3Italic:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000, null, true);
		public static var textFormat3BoldItalic:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000, true, true);
 
	}
}

PART 2 – Make a project(s) that will use the font Flex Library Project

- AS3 PROJECT –
Step 1 - Create a new ActionScript Project  (File --> New --> ActionScript Project)

• Name the project AS3FontTest
• Click Next button
• Click Library Path tab
• Click Add Project button
• Select font and click OK
• Click Finish button

Step 2 - Add this code to the AS3FontTest.as file

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.AntiAliasType;
	import flash.text.GridFitType;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	// Use meta-data to set the height and width of the SWF
	[SWF(width="200", height="200")]
 
	/**
	 *  Class used to test embeded font
	 */
	public class AS3FontTest extends Sprite
	{
		private var tf:TextField;
		private var yPos:int = 0;
 
		/**
		 * Constructor
		 */
		public function AS3FontTest()
		{
			// Set some SWF paramaters
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			// Draw the text
			draw(Fonts.textFormat1); // Use the static instance of a TextFormat object from the Fonts.as class
			draw(Fonts.textFormat2);
			draw(Fonts.textFormat3);
			draw(Fonts.textFormat3Bold);
			draw(Fonts.textFormat3Italic);
			draw(Fonts.textFormat3BoldItalic);
		}
 
		/**
		 * Method used to draw the UI bits and attach them to the screen
		 */
		private function draw(textFormat:TextFormat):void
		{
			tf = new TextField();
			tf.defaultTextFormat = textFormat;
			tf.embedFonts = true;
			tf.antiAliasType = AntiAliasType.ADVANCED; // Set this to what looks best for your font
			tf.thickness = 0; // Set this to what looks best for your font
			tf.sharpness = 0; // Set this to what looks best for your font
			tf.gridFitType = GridFitType.SUBPIXEL; // Set this to what looks best for your font
			tf.x = 10;
			tf.y = 10 + yPos;
			tf.width = 180;
			tf.text = "ABC123";
 
			// Add the created TextField to the stage
			addChild(tf);
 
			yPos += 18;
		}
	}
}

Step 3 - Run the project and you should see the embedded font(s) as expected

- FLEX PROJECT –
Step 1 - Create a new Flex Project (File --> New --> ActionScript Project)

• Name the project FlexFontTest
• Click Next button
• Click Library Path tab
• Click Add Project button
• Select font and click OK
• Click Finish button

Step 2 - Make a new directory /src/assets/styles

Step 3 -  Make a new CSS file in that directory named styles.css
Step 4 -  Add this code to styles.css

/* CSS file */
.bootle {
    fontFamily: "BOOTLE";
    font-size:12;
    color: #000000;
}
.squealer {
    fontFamily: "Squealer";
    font-size:12;
    color: #000000;
}
.frutiger {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    color: #000000;
}
.frutigerBold {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    font-weight:bold;
    color: #000000;
}
.frutigerItalic {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    font-style:italic;
    color: #000000;
}
.frutigerBoldItalic {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    font-weight:bold;
    font-style:italic;
    color: #000000;
}

Step 5 -  Add this code to the FlexFontText.mxml file that was created when you made the project

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="created()">
	<mx:Script>
		<![CDATA[
			private function created():void
			{
				// Instantiate the Fonts class
				new Fonts();
 
				// Reference the embeded font name by it's string name
				var tf:TextField = new TextField();
				tf.defaultTextFormat = new TextFormat("Frutiger LT 45 Light", 12, 0x000000);
				tf.embedFonts = true;
				tf.antiAliasType = AntiAliasType.ADVANCED;
				tf.text = "ABC 123";
 
				fontHolder.addChild(tf);
			}
		]]>
	</mx:Script>
 
	<mx:Style source="/assets/styles/styles.css"/>
 
	<mx:VBox x="10" y="10">
		<mx:UIComponent id="fontHolder" height="20"/>
		<mx:Text styleName="bootle" text="ABC 123"/>
		<mx:Text styleName="squealer" text="ABC 123"/>
		<mx:Text styleName="frutiger" text="ABC 123"/>
		<mx:Text styleName="frutigerBold" text="ABC 123"/>
		<mx:Text styleName="frutigerItalic" text="ABC 123"/>
		<mx:Text styleName="frutigerBoldItalic" text="ABC 123"/>
	</mx:VBox>
 
</mx:Application>
 

Step 6 - Run the project and you should see the embedded font(s)

I hope this illustrated a way to simplify font embedding in Flash that allows for use in TextFormat object or in CSS files.

--jason

Below are 4 examples of setting 2 values with same parameter name. The first example results in 1 parameter. The rest result in 2 parameters as expected.

 
// results in 1 parameter
var urlVarsA:URLVariables = new URLVariables();
urlVarsA["foo"] = "Hello";
urlVarsA["foo"] = "World!"; // this overwrites the previous
trace(urlVarsA); // foo=World%21
 
// results in 2 parameters as expected
var urlVarsB:URLVariables = new URLVariables();
urlVarsB.decode("foo=Hello");
urlVarsB.decode("foo=World!"); // decode() has logic to detect existing params
trace(urlVarsB); // foo=Hello&foo=World%21
 
// results in 2 parameters as expected
var urlVarsC:URLVariables = new URLVariables("foo=Hello&foo=World!");
trace(urlVarsC); // foo=Hello&foo=World%21
 
// results in 2 parameters as expected
var urlVarsD:URLVariables = new URLVariables();
urlVarsD["foo"] = ["Hello", "World!"]; // Arrays are special to URLVariables
trace(urlVarsD); // foo=Hello&foo=World%21
 

What is Ribbit? It is an application framework that allows you to interact with telephone networks. You can basically send text message and make phone calls to mobile and regular phones. Right now, you can a request Ribbit account to use applications that utilize this platform. The Ribbit legal info can be found here. (For this blog, I am going to assume that you are a developer who is or will be using this platform for your application. You can get an account here.)

The concept was straight forward. Display my friends and create a phone book by adding their phone number, and call them up through the main application swf. My application uses Flash, Javascript, PHP, Ribbit Framework, Facebook API, and MySql database. I will primarily discuss the Facebook API FBML (Facebook Markup Language) with PHP, and how I used the Ribbit API in Flash.

First, it is a good idea to get acquainted with Facebook API by review and/or creating sample Facebook applications. You first need to look over at the developer section. As it states, you should be familiar with HTML, scripting languages such as PHP and JavaScript and a database like MySQL (if you want to contain any application state). You will be essentially hosting your application and interfacing with the Facebook site via their interface and setup. View the Basic Application Architecture to get an idea of how the system works. It is also helpful to run through their sample applications to understand what you can and can't do. Demo Applications

Here are a few good links I found helpful:
- Creating your first application
- Developers Wiki Page
- Developing with the Facebook Platform and PHP
- FBML Reference
- Test data retrieval of Platform
- PHP Client files for Facebook integration

You can either build your application using FBML (self defined markup language) or in an external web site with an iframe. For my application I used FBML. There are some HTML and Javascript techniques that will not work well with FBML. The parsing of the markup causes issues when you use quotes or parenthesis in a particular ways. It is a matter of trial and error (Error 500 to be exact).

Here are some tips:
- Avoid using inline Javascript, use function calls.
- Use a tool like Firebug to debug Javascript.
- I would also suggest enabling PHP log errors on your hosting server to troubleshoot issues cause on the server-end.
- Remember that the tags need to be written well formed. You must make sure you close tags.
- When you set up your application in the developer page, make sure that the canvas url is all in lower-case.
All in all, I always found a solution that would work. So don't give up.

FBML has tags for rendering flash and javascript bridge embed code. From the documentation, this tag (Fb:fbjs-bridge) seems to be fairly new. There must have been a big request for this feature because the rendered html in the FB:swf has allowScriptAccess set to none.  As the documentation states "Facebook prevents direct script access from flash"(1). The Javascript bridge is essential for interaction with the flash swf.
- code sample including javascript, php library and fla
- info on FB:swf (1)
- info on Fb:fbjs-bridge

Make sure that you add this file at the root of your web domain to prevent security issues:
...
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="apps.facebook.com" />
<allow-access-from domain="apps.*.facebook.com" />
</cross-domain-policy>
...

Now that we have the basics down on setting up the application for Facebook, I will give a few highlights of my application (Call a Friend). I won't go through the setup and actions (update, select and insert query) of the database and html form.

- To display all my friends, I reference get_friends() method from my instance of the Application API and run through the array object returned.
Something like this:
php
....
foreach($fb_friends as $friend){
$fbml .= '<div style="clear: both; padding: 3px;" >'
.   '<fb:profile-pic  uid="' . $friend . '" size="square"/> '
.   '<div height="20"><fb:name  uid="' . $friend . '" capitalize="true"/></div>'
}
echo $fbml;
....

- Within that listing of friends, I make a call to a Javascript function to send up the phone number
Something like this:
php
...
$info = '555-555-5555';
$fbml .= "<input type='button' name='callButton' value='Call Friend' onClick=callFriendPhone('" . $info . "') /> ";
echo $fbml;
...

html
...
<fb:fbjs_bridge />
<div id="swfContainer"></div>
...

javascript
...
var swf = document.createElement('fb:swf');
swf.setId('my_swf_id');
swf.setWidth('200');
swf.setHeight('100');
swf.setSWFSrc('[absolute path]fbjs.swf');
document.getElementById('swfContainer').appendChild(swf);
function callFriendPhone(phone){
document.getElementById('my_swf_id').callSWF('callFriend', phone);
}
...

So just to explain the Javascript... I'm getting the reference of the swf tag container. Which calls the internal actionscript method callFriend() with parameter (phone number). Make sure that the fb:fbjs_bridge tag is included on the page. Notice that the fb:swf tag is created dynamically and added to a div section. Check out my code sample as an example of this functionality.

This is a good time to talk about the embedded Flash Application which interacts with Ribbit. Before hand, I created a developer account on http://developer.ribbit.com. From there I downloaded the flash kit. Using Flash CS3 to build my swf, I referenced the classes for Ribbit by adding the "RibbitAPI_2.5.0.1070.CS3" component into my library. If you haven't already, I would highly suggest playing around with the samples and reading the documentation on this site.

There are three parts to my application:

The login window allows the user to login with their username and password.

The phone interface contains the status, phone number input, volume control of mic and sound, and digit buttons. This interface references a local connection to the Javascript/Flash bridge.

Lastly, the call log interface displays data grid consisting of recent calls.

These parts interact with my service manager that holds the Ribbit Framework reference. It's main purpose is to pass the application and developer id to the service, log into the service and add event listeners to Ribbit's AuthenticationEvent and Ribbit Callmanager's CallEvent. After logging into the Ribbit service, I reference Ribbit's callManager object to make and end phone calls. This object is also used to get call logs to display all recent calls made with this account and reference the call state ( Ringing, Answered, etc.). View Source of RibbitServiceManager.as

All in all, the Ribbit framework was straight forward and easy to use. The developer site gives a lot of helpful information on getting your application up and running. The only drawback I had was that I could not allow users to log out. I'm getting this error: "TypeError: Error #1009: Cannot access a property or method of a null object reference." within the Ribbit API. There seems to be a problem with the current library component. Here are a few forum posting that I found Forum post 1 Forum post 2 .

Maybe I'm getting this error because I'm not using their visual components. My colleague Seth is building a cool Ribbit app in Flex. I don't think he is having the same problem that I have. For now, I've disabled this feature in my application.

Well... I had a lot of fun building this application. If you have Facebook and want to check it out, hit this link : http://apps.facebook.com/callafriend/

This application is still a beta. It will only be used as a demo. It may be changed or reset at any given time.

I welcome any feedback or comments.

You are trying to call recursively into the Flash Player which is not allowed. In most cases the JavaScript setTimeout function, can be used as a workaround.

In a pinch, I've worked around this error using the suggested JS setTimeout() function or by retrieving data by other means. I've finally decided to see if there was a better way and found one.

For the impatient (like myself), the solution is to use the following FABridge static constants: 

FABridge.EventsToCallLater
FABridge.MethodsToCallLater 

Let's look at a test project:

• FABridge Test
• FABridge Test Source View

Open the FABridge Test and you'll see a bunch of links. Click FireBugLite to open a console. Then click embedSwf() to embed the swf which will output to the console when the FABridge has initialized (see the JavaScript callback() method on the HTML page . You should then see the following in the console:

embedSwf
franky.name: franky
franky.children.length: 2
franky.children[0]: Object
franky.children[0].name: john

The JS callback() method is a simple demonstration of getting data from the SWF through the FABridge.  Now click on the requestRingo() link.  That calls the following JS code:

getRoot().requestRingo();

That in turn calls the following ActionScipt code in FABridgetTest.as which dispatches a ringoRequested event:

public function requestRingo():void {
    var e:NodeEvent = new NodeEvent("ringoRequested");
     e.node = new Node("ringo", 14);
     e.node.children.push(new Node("dingo", 2));
     dispatchEvent(e); // dispatch right away
}

In the JavaScript, we've added an event listener for that event in the callback() method. The JS requestRingoHandler() method is called as a result:

function requestRingoHandler(event) {
    console.log("ringo");
      try {
         var ringo = event.getNode();
         console.log("ringo.name:", ringo.getName());
         console.log("ringo.children[0].name:", ringo.getChildren()[0].getName());
    } catch (e) {
        console.log("error:", e.message);
    }
}

So we've click on the requestRingo() link and will get the following output in the console:

ringo
error: You are trying to call recursively into the Flash Player which is not allowed. In most cases the JavaScript setTimeout function, can be used as a workaround.

The setEventsToCallLater() method registered the fabridgetest::NodeEvent class with the FABridge as an event to dispatch after a delay. This registration is done using the FABridge.EventsToCallLater Object constant. In a normal application you'd hard code these registrations, e.g.

FABridge.EventsToCallLater["fabridgetest::NodeEvent"] = "true";

You can also register the general flash.events.::Event class to cover all cases, but there may be performance concerns so that will have to be tested before I use it in production code.  

In addition to the EventsToCallLater constant, FABridge has the MethodsToCallLater constant which is the same thing but for specified methods for classes. The FABridge registers the following automatically:

MethodsToCallLater["mx.collections::ArrayCollection"]="refresh,removeItemAt";

Between EventsToCallLater and MethodsToCallLater you should be able to avoid many of the "You are trying to call recursively into the Flash Player..." errors.

Have you successfully uses these constants? Are there any pitfalls and/or performance issues?

In mx.controls.sliderClasses.Slider, there is a trackHitArea var who's mouseDown events are registered to a track_mouseDownHandler() method. That private method has all the logic to update the position of the thumb. But for dragging, that is initiated by the thumb (SliderThumb class), not the trackHitArea.

Click here for a small app that shows the original Slider and the new Slider subclass side-by-side. Right-click for source.

I ended up replicating the track_mouseDownHandler() method and changing the end of the logic to dispatch the mouseDown event through the thumb object itself to initiate dragging (and maintain the original dragging behavior as if you clicked directly on the thumb). Luckily there were enough public/protected/mx_internal namespaced methods to maintain the same logic from the original track_mouseDownHandler(). I also added an allowTrackClickDragSliderThumb Boolean to be able to maintain the original track click behavior.

I would suggest creating a unique local connection name between your applications (swfs). Check out Joey’s blog on this task - unique local connection names. In this project summary, I will not reference a unique connection name.

Here is the set up… In the first swf, I’ve set up a LC object (transSendLC) and an image object (imgOriginal). The second app (swf) somewhat mimics the first app (swf). The only difference is that I created a custom class, inheriting from LC. I’ve added a method for receiving the ByteArray and a Bitmap object. The bitmap object can be used to bind to the Image source. Note: You don’t need to create a custom class. I found that it made sense for my particular flex project.

Within my first app (swf), I have supplied an image (imgOriginal). Now with I need to chop up the data and send it to the second app (swf).

Example Code:
...
var width:Number = imgOriginal.width
var height:Number = imgOriginal.height;
var bytes:ByteArray =
   imgOriginal.bitmapData.getPixels(new Rectangle(0, 0, width, height))

var tempByteArray:ByteArray;

// limit byteArray to 40K - localconnection limit
var byteLimit:uint = uint(40000);

if(bytes.length > byteLimit){

   var currentSize:uint = byteLimit;
   var position:uint = 0;
   var totalSize:uint = 0;

   while(totalSize < bytes.length){
      tempByteArray = new ByteArray();
      tempByteArray.length = currentSize;

      // Write bytes from position to current size
      tempByteArray.writeBytes(bytes, position, currentSize);

      //send ByteArray chunk
      transSendLC.send(uniqueLCName, "sendSnapShot",
              tempByteArray, bytes.length, width, height);

      //get current total and get next position
      totalSize = totalSize + tempByteArray.length;
      position = totalSize;

      //set current size based on limit
      currentSize = bytes.length - totalSize;
      if(currentSize >  byteLimit){
         currentSize = byteLimit;
      }
  }
  else{
     //less than limit - send Byte Array
     bytes.writeBytes(tempByteArray, 0, uint(bytes.length));
     imgLCSend.send(uniqueLCName, "sendByteArrayData",
                 tempByteArray, bytes.length, width, height);
  }
...

Next in my second app (swf), I need to build the sendCopy method within my custom object (inheriting from LC). Note: It is assumed that you have logic to connect the shared local connection name, a Bitmap and a ByteArray object in your custom class.

Example Code:
public function sendByteArrayData(bytes:Object, bytesLength:Number,
                              width:Number, height:Number):void {
   var byteArray:ByteArray = bytes as ByteArray;

   //New ByteArray size
   if(byteArraySnapShot == null){
      byteArraySnapShot = new ByteArray();
      byteArraySnapShot.length = bytesLength;
      byteArraySnapShot.position = 0;
   }

   //Write byte array
   byteArraySnapShot.writeBytes(byteArray);

   //Once length/size is filled based on total bytes create bitmap
   if(byteArraySnapShot.bytesAvailable == 0){
      var bitmapDataSnapShot:BitmapData = new BitmapData(width, height);
      byteArraySnapShot.position = 0;
      bitmapDataSnapShot.setPixels(new Rectangle(0, 0, width, height),
            byteArraySnapShot);

      var bitmapSnapShot:Bitmap = new Bitmap(bitmapDataSnapShot);
      snapShotImg = bitmapSnapShot;

      byteArraySnapShot = null;
   }

}

There perhaps a few ways to achieve the functionality. My purpose here is to show the process of reading and writing ByteArray in a real world application set.

If you have questions then you can certainly post comments. Since I'm traveling I cannot guarantee a fast reply. However, I will field comments when possible, and other readers might have useful replies as well.

package examples {

import flash.external.ExternalInterface;

public class JavaScript {

    public static function getProperty(name:String):Object {
        var property:Object;
        if (ExternalInterface.available) {
            property = ExternalInterface.call("function() { return " + name +"; }");
        } else {
            property = new Object()
        }
        return property;
    }

    public function JavaScript() {}
}
}

The getProperty() method creates a dynamic anonymous function that simply returns a value.
With such a utility, you can easily access JavaScript properties like so:

trace(JavaScript.getProperty("window.location.href"));

Who needs the FABridge? Just kidding...

So what was I to do? After reading the Flex docs and scanning the Text, Label, and TextField source, I decided to subclass the Text component. Here is the resulting component:

package com.themorphicgroup.controls {

   import flash.text.TextLineMetrics;

   import mx.core.mx_internal;
   import mx.core.UITextField;
   import mx.controls.Text;

   use namespace mx_internal;

   public class LineLimitText extends Text {

       protected var _maxLines:uint = 0; // max lines to show; 0 = do nothing;
       private var _isTruncated:Boolean = false;
      private var explicitHTMLText:String = null; 

      public function get maxLines():uint {
         return _maxLines;
      }

      public function set maxLines(value:uint):void {
         if (_maxLines != value) {
            _maxLines = value;
            invalidateDisplayList();
            invalidateSize();
         }
      }

      /**
       * Returns the number of lines displayed.
       */
      public function get numLines():int {
         var lines:int;

         if (_maxLines > 0) {
            var metrics:TextLineMetrics = textField.getLineMetrics(0);
            var textHeight:Number = Math.ceil(metrics.height) * _maxLines;
            if (textField.height > textHeight) {
               lines = _maxLines;
            } else {
               lines = textField.numLines;
            }
         } else {
            lines = textField.numLines;
         }
         return lines;
      }

      override public function set text(value:String):void {
         super.text = value;
         explicitHTMLText = null;
      }

       override public function set htmlText(value:String):void {
          super.htmlText = value;
          explicitHTMLText = value;
       }

      /**
       * Overriding measure and trucating the lines here.
       * If not HTML and is truncated, add ellipses.
       */
      override protected function measure():void {
         super.measure();

         // if not html
         if (!isHTML) {
            // if previously truncated, reset the text to the original
            if (_isTruncated) {
               textField.text = super.text;
               textField.validateNow();
            }
         }         

         // if want to limit lines
         if ((_maxLines > 0) && (textField.numLines > _maxLines)) {
            // if not html
            if (!isHTML) {
               _isTruncated = true;

               var newText:String = "";
               var line:String;
               // loop through lines and collect text
               for (var i:uint = 0; i < _maxLines; i++) {
                  line = textField.getLineText(i);
                  if (i < (_maxLines - 1)) {
                     newText += line;
                  // if on last line
                  } else {
                     // remove end and add ...'s
                     line = line.substr(0, line.length - 3);         // cut 3 chars off end
                     line = line.substr(0, line.lastIndexOf(" "));   // cut at last space
                     newText += (line + "...");
                  }
               }
            }

            // calc and set the measured height
            var metrics:TextLineMetrics = textField.getLineMetrics(0);
            var newTextHeight:Number = Math.ceil(metrics.height) * _maxLines;
            measuredHeight = newTextHeight + UITextField.TEXT_HEIGHT_PADDING;

            // if not html
            if (!isHTML) {
               textField.text = newText;
            }
         } else {
            // if not html
            if (!isHTML) {
               // if truncated before, but dont need it anymore, reset size
               if (_isTruncated) {
                  textField.autoSize = "left";
                  measuredHeight = textField.textHeight + UITextField.TEXT_HEIGHT_PADDING;
               }
               _isTruncated = false;
            }
         }
      }

       private function get isHTML():Boolean {
         return explicitHTMLText != null;
      }
   }
}

The key to this component was overriding the protected measure() method and accessing the protected textField variable. The measure() method uses the new maxLines property and limits the number of lines in the textField if necessary. Now this new measure() method is more expensive so I wouldn't go and use it everywhere.

Here is an example application that uses LineLimitText:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:controls="com.themorphicgroup.controls.*" layout="absolute">
   <mx:Script>
      <![CDATA[
         [Bindable]
         private var _lipsum:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam et mi. Sed mi. In sit amet tortor. Curabitur eget neque. Ut nisi quam, convallis eget, elementum at, condimentum vitae, lorem. Vestibulum adipiscing hendrerit ligula. Donec vitae dolor id libero ultricies condimentum. Nulla dapibus sapien. Aliquam consectetuer lacus non nisl. Suspendisse rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.";
      ]]>
   </mx:Script>
   <mx:Style>
      FormItem {
         backgroundColor: #FFFFFF;
      }
   </mx:Style>
   <mx:Form>
      <mx:FormItem label="mx:Label, width=200">
         <mx:Label text="{_lipsum}" width="200"/>
      </mx:FormItem>
      <mx:FormItem label="mx:Text, width=200">
         <mx:Text text="{_lipsum}" width="200"/>
      </mx:FormItem>
      <mx:FormItem label="mx:Text, width=200, height=60">
         <mx:Text text="{_lipsum}" width="200" height="60"/>
      </mx:FormItem>
      <mx:FormItem label="controls:LineLimitText, width=200">
         <controls:LineLimitText text="{_lipsum}" maxLines="4" width="200" color="#FF0000"/>
      </mx:FormItem>
   </mx:Form>
</mx:Application>

This results in the following screenshot:

The text in red in the screenshot uses LineLimitText. Also in the screenshot is a Text component with a defined height. That one doesn't have the fancy ellipses though. This component was an interesting exercise in understanding Flex components, reading docs and source.

I've been using FlexUnit for a few years. And during this time I naively thought you _had_ to write tests using the structure that Darron Schall wrote about (http://www.darronschall.com/weblog/archives/000216.cfm). However, I never really cared much for that structure. I found it strange, and it didn't provide the flexibility I wanted in unit tests. For client work I just accepted this. However, recently I started writing a new chapter for the pending Programming Flex 3, and I decided to mention unit tests with FlexUnit. It was at that point that I thought "there must be a better way to write these tests." It was only then that I ran a Google search and read Theo's blog post.

Although Theo's blog post describes how you can alternately write FlexUnit tests I'll summarize with examples as well.

Basically, the popular FlexUnit approach is to use a static method that returns a TestSuite for every test, and the test's constructor accepts a string parameter naming the test method to run. This is the approach that Darron writes about. It's an approach that was unfamiliar to me until working with FlexUnit. My previous experience with unit testing was purely via the (excellent) book Test Driven Development By Example, and in that book the tests are structured differently. Theo describes how to structure tests in that way. That way requires that the test constructor does not require a parameter, and instead the test runner will run all methods on the test class where the method names start with "test". I'll show a simple example.
Consider the following, very complex and useful class that you need to test.

package {
	public class Adder {

		public function Adder() {
		}

		public function add(a:Number, b:Number):Number {
			return a + b;
		}

	}
}

The following shows a simple example test case class. This class defines three test methods, which is clear because the method names start with "test".

package {
	import flexunit.framework.TestCase;

	public class AdderTest extends TestCase {

		public function AdderTest() {
			super();
		}

		public function testPositiveInts():void {
			var adder:Adder = new Adder();
			assertEquals(adder.add(5, 4), 9);
		}

		public function testNegativeInts():void {
			var adder:Adder = new Adder();
			assertEquals(adder.add(-5, -4), -9);
		}

		public function testNaN():void {
			var adder:Adder = new Adder();
			assertTrue(isNaN(adder.add(5, NaN)));
		}

	}
}

The test runner looks like the following.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler();" xmlns:flexui="flexunit.flexui.*">
	<mx:Script>
		<![CDATA[
			import flexunit.framework.TestSuite;

			private function creationCompleteHandler():void {
				var suite:TestSuite = new TestSuite();
				suite.addTestSuite(AdderTest);
				testRunner.test = suite;
				testRunner.startTest();
			}

		]]>
	</mx:Script>
	<flexui:TestRunnerBase id="testRunner" width="100%" height="100%" />
</mx:Application>

Note that we use addTestSuite() to add a reference to the test case class to the test runner. This will automatically run all the methods starting with "test".
Apart from the simplicity and clarity of this way of structuring tests you also get to use setUp() and tearDown(), which automatically run before and after every test method. The following is another example illustrating setUp() and tearDown(). This time we'll use a sort-of VO class called Example that has a static method for creating a new Example object from XML data.

package {
	public class Example {

		private var _a:String;
		private var _b:String;

		public function get a():String {
			return _a;
		}

		public function set a(value:String):void {
			_a = value;
		}

		public function get b():String {
			return _b;
		}

		public function set b(value:String):void {
			_b = value;
		}		

		public function Example() {
		}

		static public function parseFromXml(xml:XML):Example {
			var example:Example = new Example();
			example.a = xml.a.toString();
			example.b = xml.b.toString();
			return example;
		}

	}
}

The test for this looks like the following.

package {
	import flexunit.framework.TestCase;

	public class ExampleTest extends TestCase {

		private var _example:Example;

		public function ExampleTest() {
			super();
		}

		override public function setUp():void {
			_example = Example.parseFromXml(Value 1Value 2);
		}

		override public function tearDown():void {
			_example = null;
		}

		public function testA():void {
			assertEquals(_example.a, "Value 1");
		}

		public function testB():void {
			assertEquals(_example.b, "Value 2");
		}

	}
}

Notice that both setUp() and tearDown() are overridden.

We were asked to build a presentation that featured video of a person talking about the client’s product while presenting statistic and data in an exciting visual way. We decided to do this presentation with Flash Timeline animation, Actionscript, FLV video files and some luck. The idea was to get a production house to produce video excerpts with alpha layers. A script was conceived and the video assets were delivered within a few weeks to a month (give or take the corrections and post-production snafus). While we were waiting for the video to arrive, I built the shell application that would house the video sections (SWF files with external video). Each section would contain the various video takes in the order of the production script. You never know how a script like this will play until you actually build the different sections. This was definitely the case for this project.

For me…. The developer… I wanted to control everything to the nth degree. The shell loads all of the video sections (swfs), animates the transition moving from one section to another via script, and has a navigation link bar with a drop down menu, all the things we do best in the programming structured discipline. But for the video sections themselves, it is a different story. I needed to consider the best environment for the animator/designer to work freely, to give them enough space for their animations and somehow gel the programming and video together.

That is where cue points come in (and save the day). The designer/animator created a list of titles for the animation in order of the video script. We developed a system where the cue point names would be the frame titles for the main movie clip; which would house the animations. I embedded cue points into the video to then play animation content at different instances of the presentation. This planning and collaborating was done well before any flash production started.

Example event handler for the cue points from the FLVPlayback (videoPlayer)
….
videoPlayer.addEventListener("cuePoint", onCuePointHandler);
….

function onCuePointHandler(event:MetadataEvent){

var cuePointName:String = event.info.name;
mainAnimation.gotoAndStop(cuePointName);
}

This is not a perfect system by any means. Most developer would poo poo the notion of using FLVPlayback, instead creating a video player class and going the route of a fully Actionscript solution. But I needed to keep in mind that the animator/designer would be using the timeline as his tool. We needed to see everything on the timeline. Animators/designers who work with the timeline seem to come up with amazing yet manageable animations that could never be created via script. Besides, it is a visual medium after all.

After creating one video section, we began to developer an organic workflow with the other sections. I built the FLAs with the cue point embedded video and code for referencing frame sections (named by the animation names). The designer/Animator added animations within the empty frame sections that are called based on the cue points fired. We had a system and we stuck to it throughout the project. The results were easy to see. The process of removing and moving parts that did not work was simple.

It is true that nothing is ever written in stone when you create a presentation like this. Here is an example of this fact. When we tested pieces of the presentation on the web, we noticed a big problem. The video did not always synch up with animation. Keep in mind that most of the animations consisted of movie clips embedded within movie clips. The solution was to create additional cue points, directly fire (or play) beginning/ending animations when needed and remove unnecessary frames. This improved the performance greatly and solved the lag problem on the web.

I will be honest with you. This approach is a bit wacky. In fact, I would revise the process if another projects like this comes up again. It got the job done and it did not break the original plan and system. As long as you keep things consistent and have a plan, you will always find a way out of any jam.

Perhaps what I'm about to say is common knowledge and nothing of any interest to anyone. However, I thought it was interesting and worth posting about. The first parameter for the ExternalInterface.call() method is a string containing a name of a JavaScript function. When executed the call() method effectively appends the function call operator (the () ) to the function name and evaluates that expression. I hadn't seen an example using an anonymous function definition in place of a function name, but I figured it might work, and it does. I figured this would work because in JavaScript you can do the following.

function() { alert('example'); }();

Notice the function call operator appended to the anonymous function. It causes the function to execute in JavaScript. Therefore, I figured that from ActionScript you could do the following.

ExternalInterface.call("function() { alert('example'); }");

That will work, which is neat. Not only that, but you can easily pass values from ActionScript to the JavaScript. The most obvious way to do that is as in the following example.

var message:String = "example";
ExternalInterface.call("function() { alert('" + message + "'); }");

However, you can also pass values as in the following example, which is a little nicer, in my opinion.

ExternalInterface.call("function(message) { alert(message); }", "example");

These examples are really simple to illustrate the point. However, you can also create much more complex functions. In fact, you can define functions that define functions, as in the following example.

var javascript:String = "function() { " +
                                    "timeoutHandler = function() { " +
                                        "alert('example', 2000); + "
                                    "};" +
                                    "setTimeout(timeoutHandler); }";
ExternalInterface.call(javascript);

In the library I wrote the functions configure event handlers for JavaScript events, and they use ExternalInterface callbacks to call ActionScript functions when the events are dispatched.

I guess this use of anonymous functions might not be the most efficient way to write or run JavaScript. It might even be bad memory management. I don't claim to be a JavaScript expert. I just think it's a neat use of ExternalInterface, and it has been very useful.

In this case I had a requirement to create a unique name to use when connecting a LocalConnection. The idea is that two .swf files need to communicate over this LocalConnection, and both of them need to know the name of the connection. Seems simple enough. I could just hard code the same value into both .swf files. However, the deal is that these two .swf files exist in the same HTML page, and I also would like to be able to open more than one instance of the HTML page in different browser windows. If the name of the connection is hard coded into the .swf files then it will work for one instance of the page, but subsequent instances will throw errors because the connection will already be in use. In such cases the error might be something like the following (which is particularly unhelpful in diagnosing the actual error since it doesn't really indicate what caused the error.)

Error #2044: Unhandled statusEvent:. level=error, code=

Note that you might see this error in other cases, and it doesn't necessarily indicate that the solution described in this post is appropriate. This error could be caused by lots of different scenarios. For example, you would see this error if you were trying to send requests across domains and the .swf files weren't properly configured (see allowDomain() in the LocalConnection documentation.) Probably the best way to determine the actual cause is to listen for status events on all LocalConnection object, and log the status codes. However, in this particular case the errors were because an .swf (in a new HTML window) was trying to establish a connection using the same name as a pre-existing connection.

One obvious solution to this would be to create a unique name using JavaScript, and then I can pass that in to each of the .swf files using FlashVars. That would allow each HTML page to create a unique name and pass in the same name to each of the .swf files, ensuring that those two .swf files can communicate over the same channel, but other .swf files in other pages wouldn't conflict. That would work except that in this particular case one of the .swf files is not embedded directly in the HTML page, and it does not have access to the JavaScript in the HTML page. This is because one of the two .swf files is embedded inside another plugin that is, itself embedded in the HTML, and that plugin doesn't have a way to pass a value from the HTML page to the Flash Player instance it embeds.

Therefore, the solution I'm using follows. Note that we'll refer to the .swf files as sending.swf and receiving.swf. In this case sending.swf is the instance embedded in the HTML page directly, and receiving.swf is embedded in the plugin.

1. Initially receiving.swf calls connect() for a LocalConnection object using a hard coded value of _defaultConnection.
2. Receiving.swf's local connection client defines a method called setNewConnectionName(), which accepts a string parameter. When this method is called it first calls close() for the LocalConnection object, and then it calls connect(), using the parameter value.
3. Once both .swfs are loaded into their respective players sending.swf creates a new, unique connection name. You could use any algorithm to create a unique name. In this case I use the following: var connectionName:String = "_" + (new Date()).getTime();
4. Then sending.swf calls send("_defaultConnection", "setNewConnectionName", connectionName); for the LocalConection object.
5. After that point sending.swf always calls send() with the new, unique connection name.