fix_content_assist.bat

@echo off
REM The following will delete the prefs file in Flash Builder 4 Beta 2 that caused content assist to break
RMDIR C:\work\dev\morphic\myproject\trunk\code\as_fb4\.metadata\.plugins\com.adobe.flexbuilder.codemodel /s /q


From: http://bugs.adobe.com/jira/browse/FB-21566

Close Flash Builder 4 beta 2

Delete this folder in your workspace:

\.metadata\.plugins\com.adobe.flexbuilder.codemodel.

Relaunch Flash Builder 4 beta 2

• Skinning an item renderer and list
• States in an item renderer
• Pass callback function to item renderer
• Override ItemRenderer 'set data' as a known ValueObject
• Swap icons/images based on data values

 View the Example with source view enabled

This blog post will cover the main points of the example but not the entire code, so view the example's source view to see all the code in full.

Getting Blog Entries From RSS

I won't go into too much detail about how the data is retrieved, view the source for all the details. The RSSService class makes a request to this blog's RSS url. That XML responce is turned into an ArrayCollection of BlogEntryVO value objects. The result ArrayCollection is set as the data provider for the Spark List.

Skinning the Spark List

Spark List:
The first step in skinning the Spark List is to define the 'skinClass':

 
<s:List id="blogList"
	skinClass="com.themorphicgroup.skins.list.ListSkin"
	change="blogList_selectionHandler(event)"
	caretChange="blogList_selectionHandler(event)" />
 

Skinning Spark List:
Lets look at the 'com.themorphicgroup.skins.list.ListSkin' List skin class. The most important parts of this skin is the 'Scroller' and 'DataGroup' it surrounds.
The DataGroup is a simple container class in Flex 4 for holding data items and item renderers. The Scroller enables the DataGroup items to be scrolled. Full List skin code:

 
<?xml version="1.0" encoding="utf-8"?>
<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">
 
	<fx:Metadata>
		[HostComponent("spark.components.List")]
	</fx:Metadata>
 
	<s:states>
		<s:State name="normal" />
		<s:State name="over"/>
	</s:states>
 
	<!-- background -->
	<s:Rect top="0" right="0" bottom="0" left="0">
		<s:stroke>
			<s:SolidColorStroke color="0x999999" weight="2"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor color="0xffffff" color.over="0xf8f8f8" />
		</s:fill>
	</s:Rect>
 
	<!-- scroller -->
	<s:Scroller id="scroller"
				left="0"
				top="0"
				right="0"
				bottom="0"
				horizontalScrollPolicy="off"
				minViewportInset="1"
				focusEnabled="false">
 
		<!-- container for data-->
		<s:DataGroup id="dataGroup">
			<s:layout>
				<s:VerticalLayout gap="0" horizontalAlign="contentJustify" />
			</s:layout>
		</s:DataGroup>
 
	</s:Scroller>
 
</s:SparkSkin>
 

Skinning Spark List and global vertical scrollers:
The last thing we will look at in skinning the List is the skin for the Scroller (VScroll). The skin classes for the scroller are in com.themorphicgroup.skins.scroller.vertical
To define the 'VerticalScrollbar' Skin to all Spark VScrollBar we do that in the css file:

 
s|VScrollBar {
	skinClass: ClassReference("com.themorphicgroup.skins.scroller.vertical.VerticalScrollbar");
}
 

Define an ItemRenderer for the Spark List

In creationComplete we will create the item renderer for the Spark List, we will also define any needed properties.
In this case we want to pass in a callback funtion for when the delete icon is clicked in an item renderer.

 
//create itemrenderer
protected function application_creationCompleteHandler(event:FlexEvent):void {
	//create itemrenderer
	blogListItemRenderer = new ClassFactory(BlogEntryItemRenderer);
	//define properties (callback for item delete)
	blogListItemRenderer.properties = {deleteHandlerFunction:itemDeleteClick_handler};
	//set itemrenderer to List
	blogList.itemRenderer = blogListItemRenderer;
	.... }
 
//callback function for delete click
private function itemDeleteClick_handler(blogEntryItem:BlogEntryVO):void {
	...
 

Inside the Item Renderer when the delete icon is clicked the callback function is passed the current item renderer's data (a value object):

 
public var deleteHandlerFunction:Function;
private function trash_btn_clickHandler(event:MouseEvent):void {
	//callback function pass BlogEntryVO value object
	deleteHandlerFunction(blogEntry);
}
 

The ItemRenderer

Setting data in the ItemRenderer:
In the 'BlogEntryItemRenderer' we will override the the set data function and set a BlogEntryVO with the data of the item renderer:

 
private var blogEntry:BlogEntryVO
 
override public function set data(value:Object):void {
	super.data = value;
	if (value is BlogEntryVO) {
		blogEntry = BlogEntryVO(value);
	}
}
 

Displaying data in the ItemRenderer:
To display the data values in the itemrenderer we will override updateDisplayList and set values to Labels etc:

 
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
	super.updateDisplayList(unscaledWidth,unscaledHeight);
 
	if (title_lbl) {
		title_lbl.text = blogEntry.title;
		...
 

Skinning and States in the ItemRenderer

To make the item renderer more attractive and interactive we will create some states. In Flex 4 you can specify not only the name of a state but a name that will define a group of states:

 
<s:states>
	<s:State name="normal" />
	<s:State name="hovered" stateGroups="[hoveredStates]" />
	<s:State name="selected" stateGroups="[selectedStates]" />
	<s:State name="normalAndShowsCaret" />
	<s:State name="hoveredAndShowsCaret" stateGroups="[hoveredStates]" />
	<s:State name="selectedAndShowsCaret" stateGroups="[selectedStates]" />
</s:states>
 

Having the state and stateGroups names means we can define properties for those states. For example with can set the alpha of the background color as alpha='0' and them the when we are in one of the hovered states as alpha.hoveredStates='.1':

 
<s:Rect width="100%" height="100%">
	<s:fill>
		<s:SolidColor color="0x6699cc" alpha="0" alpha.hoveredStates=".1" alpha.selectedStates=".25" />
	</s:fill>
</s:Rect>
 
<s:Label id="title_lbl"
		 maxDisplayedLines="1"
		 styleName="myriad"
		 left="10"
		 top="10"
		 right="26"
		 textDecoration.hoveredStates="underline"
		 fontWeight.selectedStates="bold"
		 color="#000000"
		 fontSize="14"/>
 

Summary

This blog post does not cover every bit of code in the example so View the Example with source view enabled.

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

C:\Program Files\Adobe\Flex Builder 3\FlexBuilder.ini

Here are my settings
###

-vmargs
-Xms512m
-Xmx1024m
-XX:MaxPermSize=256m
-XX:PermSize=64m
-Djava.net.preferIPv4Stack=true

###
-Xms512m (minimum memory allocated for FlexBuilder)
-Xmx1024m (max memory cap for FlexBuilder)

If you happen to have 8GB of ram you might change your settings to this :).

-Xms512m
-Xms4096m

compile flex project:
[mxmlc] Loading configuration file C:\Program Files\Adobe\Flex Builder 3\sdks\3.3.0\frameworks\flex-config.xml
[mxmlc] Error: Java heap space
[mxmlc] java.lang.OutOfMemoryError: Java heap space
......

BUILD FAILED

Boooooo!

After consulting a couple of documents and search google, I found a solution that I decided to share. A lot of documentation states that you should change or add the environment variable ANT_OPTS to the particular size (Windows). This didn't work for me. The solution involves changing a particular property in Flex Builder. I really should thank Eric Fickes for his blog on this issue on Mac.  My solution is for Windows.

Go to Window --> Preferences

From the menu select Java -->Installed JREs

Select the VM and click the edit button. In "Default VM Arguments" enter "-Xmx512m" without quotes. This value may vary as well as performance.

Hopefully this makes your life a little easier.

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;

@Persistent(defaultFetchGroup="true")
Text description;

I was able to find this solution in a Google groups thread here. Apparently, for optimization reasons not all fields are retrieved when an object is requested from the database. With the line of code above, we force the description property to be retrieved.

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.

Search engines use “spiders” (scripted site crawlers), that runs through the hierarchy paths of your content, looking for patterns and associated links based on text. There are guidelines to be followed when formatting your web pages. Google has these guidelines defined out. This is pretty straight forward for web sites that only consist of text. For Flash/Flex media, it is not so easy. Most of these “spiders” can't index into binary modules.

Recently Google has made strives in solving this issue. They have advanced the ability to index text in flash content. If all of your text content is embedded in your Flash/Flex media, your web content will be found in a search.

The problem is that most flash/flex web applications keep the text content external to the actual application. This allows the ability to change text without recompiling the application. External files can not be properly indexed in search engines alone [UPDATE: As of June 18, Google will index external content - google]. There are techniques to do this in a flash application. Kenny Bunch of Dreamsocket has a great article on Flash SEO.

In a typical Flex application, you may be using deeplinks for paging sections of your application and external text data. I will discuss a technique to improve the search results for Flex applications that have external text content with deeplink functionality. Note: For the most part, I am following Google guidelines.

Example Solution - "My Company"

Let's evaluate the content section of a example flex application. My application has three major sections: Home, About Us, and Clients. The “About Us” section has two sub-section Mission Statement and Company Location. The “Portfolio” section has two subsections as well, “Client List” and “Projects”.

Here is the hierarchy of the "My Company" site:

• Home
• About Us
  • Mission Statement
  • Company Location
• Portfolio
  • Client List
  • Projects

The company site has one page (index.html) that loads the Flex application(swf) and external files (xml, images, video, and stylesheet css). All of the text content for these sections are kept in external XML files.

In essence, we need to break out the sections into html pages. If possible, avoid duplication of content.

• Add a reference to the section in the title tag. This should always be unique on every page.
• The meta description and keyword attributes needs a unique and descriptive text.
• Each page needs to link to each other via a series of anchor html tags.
• Most importantly it needs to contain the particular text content that would pertain to the each page section. This does involve manually copying particular section from the xml to each
  html page, preferably into div tags.

Deeplinks are being used for paging ability. We need to make sure that the deeplink can be changed with the different page sections. Every page will reference the root of the site with the particular deeplink moniker. This way each page will open the correct section when it is found in the search. I will use javascript to direct the page deeplink back to the relative root.

document.location.href = "/#portfolio";

The search engine should ignore the javascript and parse or read the text content, the basis of the search text.

"My Company" example illustrates this functionality (right click application page to see and download source). SwfObject is used to reference the swf. The meta description and keywords are very general examples. Your project may involve much more thought into what information is used. It needs to be very detailed and unique.

With my "My Company" solution, I created html pages based on SEO concepts that can reference the Flex application. It should work as if nothing changed. The goal is to reference particular text content of web application, improving the search ability of the web site.

This solution does have one drawback. The text content is not centralized. You anticipate constant (monthly or weekly) changes are made to the external data. It will need to be changed in the particular page that references that particular content.

So a further discussion would be: Could we dynamically generate html pages that with the external data used? Of course. One idea is to use a server-side language like php or ruby to generate the site like we did with the static html solution.

Verification and Sitemap

To verify that your site will be viewed as expected by search engines, it should be viewable regardless of having the flash player installed or javascript enabled. The best way to check this is to view the site in a barebones a text-mode web browser like Lynx. This is a tool I used to check this: lynx viewer

Next, you will need to create a sitemap for referencing the content of your web application. For the "My Company" site I would created a sitemap with all of the html pages I found a great resource that automates the process: sitemaps.org. It also has some great information about what the sitemap consists of and what each attribute means. For the "My Company" site, I would create a sitemap with all of the html pages referenced.

Now submit your sitemap to a popular search engines (you may need to create an account). It may take up to a week to see real results.
Yahoo: Site Explorer
Google Web master tools: Webmasters

Note: The usage of these sources are beyond the scope of this article. I have found that the google webmaster tools are great for monitoring the progress of this functionality.

Summary

In this article, I gave some tips and a possible solution for getting your flex application noticed by the most popular search engines. It does take some trial and error to see results. In one project, it took some weeks of tweeking to the content to find the right results. I hope this article is helpful to you.

Indycar Race Control is a fully immersive way to experience Indy Racing. Not only
can you watch the live race or in-car video but you can monitor each car's
telemetry data. Here are just some of the features:

• Live race and in-car video (up to 5 simultaneous videos)
• Real-time car telemetry (speed, throttle, RMP, steering, etc)
• Switch any in-car camera to full view and listen to driver & pit crew
• Race standings and scoring
• Configurable driver 'pods' allowing individually drivers to be tracked
• Customizable layouts
• 2 driver compete mode
• Fullscreen mode

Indy Race Control is only available during live Indy Races, please visit indycar.com
for more information on race dates.

Indycar Race Control Technical Details

Indy Race Control is an Adobe Flex application created by The Morphic Group that receives
live streaming video and live telemetry data from the race track during a race.

Race & in-car video
During an Indy car race live video and in-car video are encoded and redistributed from a
Flash Video CDN. Each video stream is encoded at multiple sizes. The Indy Race Control
Flex client is given information on which cars have in-car video and which is the main
video feed. The client allows any of the in-car videos to be switch from the small viewer
to the main viewer.

Real-time race car telemetry
Each car's live telemetry data is acquired by a cluster of Wowza servers. The Indy Race
Control Flex client connects to a Wowza server via a load balanced cluster living on
Amazon EC2. After connecting the client receives real-time race car telemetry data.
The Morphic Group create a Wowza based application that can scale to multiple
thousands of simulations clients.

Video Statistics
Conviva's LivePass gives Indy Racing the ability to view real-time statistics of video
streams being watched with the Indy Race Control.

Indy Racing Control Flex Client
The user interface was created by The Morphic Group using Adobe Flex. This Flex based
client provides the race fan with a huge amount of information displayed in friendly
and useful way. The user can customize the application to meet their needs. Specific
drivers and/or videos can be selected, and these custom layous can be saved.

Visit indycar.com to view Indy Race Control during races.

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
 

For a project I'm working on we are having to integrate a feature that uses a .swc provided by the client. This feature, which we are merely integrating and didn't have technical control over the implementation, requires that the Flex application run from a Web server (from an http directive, not from a file directive) in the browser or it won't work. I thought that was annoying, but I realized just how annoying it really was after I ran it from Apache (which I just installed on my machine for this purpose) and my new trace statements didn't show up. After a few minutes I realized it was because the .swf was cached by Firefox. I could clear the cache every time just before running the application. But that was not a very workable solution. instead, I wanted to disable caching entirely.

The way I found to disable caching from Firefox is to run Firefox and in the address bar type about:config. This will take you to a page with a datagrid and a bunch of configuration settings for Firefox. I set browser.cache.disk.enable and browser.cache.memory.enable both to false.

That was all I had to do to disable caching. Oh, and it does occur to me that I *could* have customized the .html template FlexBuilder is using in order to load the .swf with a unique query string value each time, which would have solved the caching issue in a different way. But disabling caching in Firefox entirely seemed far more silly. Plus, it required far less work.

By using dynamic item renderers you can create more flexible & reusable itemrenderers, you can also do neat stuff like pass callback functions to handle events in the itemrenderer.

Here are some of the things this dynamic item renderer example will demonstrate:

• Reuse the same item renderer for a DataGrid and a List, each with a different data provider
• Pass delete/click function into item renderer
• Dynamically change icons
• Dynamically change the label function
• Set label title style

View Example (right click for source)

In this post we won't go over every detail of the code, so check out the source in the example.

To start of with the basics, here is how to setup a itemrenderer using ClassFactory:

private var personItemRendererFactory:ClassFactory;
private function onInitialize():void {
	personItemRendererFactory = new ClassFactory(MyItemRenderer);
	peopleColumn.itemRenderer = personItemRendererFactory;
}
...
<mx:DataGrid id="peopleDataGrid" dataProvider="{peopleDataProvider}">
	<mx:columns>
		<mx:DataGridColumn id="peopleColumn" />
	</mx:columns>
</mx:DataGrid>

The example above doesn't really do much more than setting in itemrenderer in the DataGrid tag itself would, so lets set a property of the itemrenderer:

private function onInitialize():void {
	personItemRendererFactory = new ClassFactory(MyItemRenderer);
	personItemRendererFactory.properties = {doStuff: true};
	peopleColumn.itemRenderer = personItemRendererFactory;
}

In the above example we are now creating an itemrenderer and setting the 'doStuff' property using the ClassFactory properties object. Using the class factory properties we can set many things at once including functions. Let's say we want to listen for a click event inside the itemrenderer we can pass in a callback function that gets called from the item renderer when clicked:

private function onInitialize():void {
	personItemRendererFactory = new ClassFactory(MyItemRenderer);
	personItemRendererFactory.properties = {clickFunction: itemrendererClick_handler};
	peopleColumn.itemRenderer = personItemRendererFactory;
}

private function itemrendererClick_handler(evt:MouseEvent):void {
	Alert.show('clicked');
}

/* this in item renderer */
//inside the itemrenderer we need to define the click function
public var clickFunction:Function;

//and then for this example lets call the clickFunction when the canvas is clicked
<mx:Canvas click="clickFunction(event)"...

The above example allows a function to set on the itemrenderer. When the itemrenderer is clicked the event is handled in the same component that the holds DataGrid, this can be very convenient.

When using the properties of ClassFactory there is a something to be aware of; your itemrenderer may require a property to be set, but the ClassFactory and properties will not enforce that property to be required. For example if a click handler function is required in the ItemRenderer but not set in the properties there will be a runtime error when the ItemRenderer is clicked.

View the example and right click for source to see
more details on how to do things like dynamically change icons and label functions.
View Example (right click for source)

This example is not intended to be a best practices for the most efficient item renderers, for further reading: Efficient Item Renderers, Advanced visual components

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.

Here is what this example DataGrid/ItemRender demonstrates:

• MXML based ItemRenderer
• Override ItemRenderer 'set data' have data as a known ValueObject
• Swap icons/images based on data values
• Highlight selected ItemRenderer
• Enable ItemRenderer to dispatch an event to remove a person from the grid

View the Example with source enabled

DataProvider and ValueObjects
The first thing we'll look at in the example is the data and data provider for the Grid. Keep in mind this is just a quick demo way to load sample data, the goal is to create an ArrayCollection of Value Objects. The sample XML data is loaded via an HTTPService. When the result comes back from the service we cast the result as an ArrayCollection, we then loop through each item in that result ArrayCollection. Each item is an Object containing the 'person' data defined in the XML. For this example we want to place each person data in a person ValueObject (VO). This VO provides a known data type that we will use as the 'data' in the ItemRenderer. Often when using AMF taking to ColdFusion/BlazeDS/Java/Etc the VO will be aliased to a data type on the server, so this example simulates the DataGrid provider being an ArrayCollection of VOs.

This result function populates the DataProvider with our Person VOs:

private function httpResult_handler(evt:ResultEvent):void {
	if (evt.result.people.person) {
		//result
		var resultAC:ArrayCollection = evt.result.people.person as ArrayCollection;
		//loop through each item in data
		for (var i:int=0;i<resultAC.length;i++) {
			//create person VO
			var person:Person = new Person();
			//add data
			person.fill(resultAC[i]);
			//add person to main data provider
			peopleDataProvider.addItem(person);
		}
	}
}

ItemRenderer and Override of 'set data'
Next we'll look at how the data is dealt with inside the ItemRenderer. The DataGrid's only column is set to have an ItemRenderer. When the DataProvider is populated the DataGrid is going to set the 'data' property on each row's ItemRenderer with the the associated VO in the DataProvider ArrayCollection. We want to make sure that the data inside the ItemRenderer is actually a Person VO object (not a generic Object), so we need to override the 'set data' function. When we override this function we are now able to cast the data value as a Person VO. This will allow us to refer to data inside the ItemRenderer as that VO with known attributes rather than a generic Object that it would otherwise be:

[Bindable]private var person:Person;
override public function set data(value:Object):void {
	super.data = value;
	if (value is Person) {
		person = Person(value);
	}
}

When overriding the set data function make sure to remember set 'super.data=value'. The ItemRenderer still needs to know the value of the data otherwise it will be treated like an empty row in the DataGrid.

Swap ItemRenderer Images Based on Data
As a nice UI feature let's display a male/female icon based on the person's gender. This is easy to do, we know the data will be a Person VO. So we can have the Image component ask for the correct image based on the 'person.gender' value:

<mx:Image id="gender_img" source="{getGenderImg(person.gender)}"...

Since the person variable is Bindable if there is a change the 'getGenderImg' function will be asked to give the image its source:

private function getGenderImg(gender:String):Class {
	if (gender == Person.GENDER_FEMALE) {
		return imgUserFemale;
	} else {
		return imgUserMale;
	}
}

Highlight Selected ItemRenderer
Next let's add some nice functionality to make the ItemRenderer stand out a little more when it is selected. To do this we need to override another function. This time we're going to override the updateDisplayList function, this will allow us to set some styles and graphical elements to the ItemRenderer is if is the selected itemRenderer. Using 'ListBase' we are able to find out if the 'owner' (the DataGrid) has this data selected:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
	super.updateDisplayList(unscaledWidth, unscaledHeight);
	if(ListBase(owner).isItemSelected(data)) {
		name_lbl.setStyle("styleName","pnameselected");
		selected_img.visible = true;
	} else {
		name_lbl.setStyle("styleName","pname");
		selected_img.visible = false;
	}
}

Enable ItemRenderer to dispatch a remove person event
Lastly we'd like the trash can icon to remove a the person when clicked. There are other (maybe more preferable, but that's for a different example) methods, but for this example let's have the ItemRenderer dispatch an event and have a listener set to catch that event. On the click event of the trash can icon there is an event dispatched:

public static const DELETE_PERSON_EVENT:String = "deletePerson";
private function deleteClick_handler():void {
	var dEvt:Event = new Event(DELETE_PERSON_EVENT,true);
	this.dispatchEvent(dEvt);
}

This 'deletePerson' event is dispatched by the ItemRenderer and importantly has 'bubbles' set to true. This bubbling enables the parent component to simply add a listener for the event:

myDG.addEventListener(PersonItemRenderer.DELETE_PERSON_EVENT,deletePerson_handler);
private function deletePerson_handler(evt:Event):void {
	if (myDG.selectedIndex != -1)
		peopleDataProvider.removeItemAt(myDG.selectedIndex);
}

That's it for this example. The next example will build on this but go the route of a dynamic ItemRenderer, while they a little bit more complicated can be very flexible allowing for dynamic properties to be set on the itemRenderers.

View the Example

Step 1: (FB3) Create a new ActionScript project in Flex Builder 3 and give it a name.

Step 2: (Flash CS3) Make a new Flash CS3 project, save it in the SAME DIRECTORY as the AS3 project.

Step 3: (Flash CS3) Open up File --> Publish Settings in your Flash CS3 project and select "Permit debugging".

Step 4: (Flash CS3) Click on the Settings button and enter the name of your main AS3 class. If your main AS3 class is not in the same directory as the FLA then add the directory as a Classplath. Click the green check mark to validate the class location.

Step 5: (FB3) Write a bit of code and put in a break point.

Step 6: (Flash CS3) Compile a debug version of the SWF. The breakpoint you entered in FB3 will be compiled into the SWF. After it compiles and opens in the Flash CS3 debugger just close it. The SWF should have been compiled into the root of your FB3 project. I had to quit FB3 and reopen it for the SWF to show up.

Step 7: (FB3) Make a new debugging profile that points directly to the Flash CS3 complied SWF (NOT THE FB3 SWF in the bin directory).

Step 8: (FB3) Debug with your new profile.

If the debugger times-out and does not connect you may need to configure the debugger setting in your Flash Player. Do this by rt-clicking on the SWF and selecting Debugger.

This workflow allows for you to use the code hinting and debugger in FlexBuilder 3 even when compiling in Flash CS3. Let me know if you run into any problems.

Special thanks to Melih Elibol who helped me with some of these steps :).

--jason