View Demo Preloader App (right click for source view)

The preloader may fly by, so lets first take a look at how this progress bar looks as it is loading the Flex app:

The next screenshot shows the progress as RSLs are being loaded:

Finally the progress of initialization, with a second progress bar:

Creating the Preloader SWC in Flash Pro

In Flash professional we create a custom preloader. In this example there are several layers which the design is created from.
The layer 'prog_bar' and 'initilize_bar" hold shapes that we will use to resize to show progress.
The 'loading text' layer contains some dynamic text that has Character Embedding for upper/lower/numbers.
The layers look like this:

The custom preloader FLA can be found in the example by viewing source.

The FLA preloader is a movie clip and its properties are set for "Export for ActioScript" the "Class" property is set to "PreloaderDisplay" this allows us to have a PreloaderDisplay.swc created when this FLA is published.

In the first frame of the FLA "actions" layer we create the functions to set the two different progress bars:

 
//reset
setMainProgress(0);
setInitalizeProgress(0);
loading_txt.text = "";
 
//function for setting main prgress bar
function setMainProgress(percent:Number):void {
	prog_bar.width = percent * 275;
}
 
//function for setting the initilize bar
function setInitalizeProgress(percent:Number):void {
	initialize_bar.width = percent * 275;
}
 

The final step is to "Publish" the FLA so that the SWC file is create, this SWC will be used in Flash Builder.

Creating the Custom Preloader in Flex 4

The first step is to place the PreloaderDisplay.swc in the "libs" folder, this will make the PreloaderDisplay and its methods available to Flex:

To define a custom preloader we will do this in the Flex application's Application file, we simply specify the preloader class:

 
<s:Application preloader="com.themorphicgroup.preload.Preloader" ...
 

In the Preloader class we will extend "SparkDownloadProgressBar".

The SparkDownloadProgressBar class displays download progress.

From Flex 4 docs: It is used by the Preloader control to provide user feedback while the application is downloading and loading.
The download progress bar displays information about two different phases of the application: the download phase and the initialization phase.

The Preloader.as extends "SparkDownloadProgressBar" and we will use the FLA PreloaderDisplay.swc by creating a variable called "preloaderDisplay":

 
public class Preloader extends SparkDownloadProgressBar {
	private var preloaderDisplay:PreloaderDisplay;
	...
 

To add the PreloaderDisplay we will override the SparkDownloadProgressBar's "createChildren" method, in this method we will create a new PreloaderDisplay and
use the "addChild" method (SparkDownloadProgressBar inherits addChild from DisplayObjectContainer):

 
override protected function createChildren():void
{
	if (!preloaderDisplay) {
		preloaderDisplay = new PreloaderDisplay();
 
		var startX:Number = Math.round((stageWidth - preloaderDisplay.width) / 2);
		var startY:Number = Math.round((stageHeight - preloaderDisplay.height) / 2);
 
		preloaderDisplay.x = startX;
		preloaderDisplay.y = startY;
		addChild(preloaderDisplay);
	}
}
 

There are several methods that we will override so that we can make updates to the PreloaderDisplay.swc.
The rslProgressHandler method will be called each time a RSL is being loaded. We will use this method to set text indicating the current count of RSL being loaded:

 
private var rslBaseText:String = "loading: ";
override protected function rslProgressHandler(evt:RSLEvent):void {
	if (evt.rslIndex && evt.rslTotal) {
		//create text to track the RSLs being loaded
		rslBaseText = "loading RSL " + evt.rslIndex + " of " + evt.rslTotal + ": ";
	}
}
 

The next method we will override is setDownloadProgress. This method indicateds the current download progress. in this method we will set the
PreloaderDisplay.swc main progress bar and set the text:

 
override protected function setDownloadProgress(completed:Number, total:Number):void {
	if (preloaderDisplay) {
		//set the main progress bar inside PreloaderDisplay
		preloaderDisplay.setMainProgress(completed/total);
		//set percetage text to display, if loading RSL the rslBaseText will indicate the number
		setPreloaderLoadingText(rslBaseText + Math.round((completed/total)*100).toString() + "%");
	}
}
 

Finally we will look at overriding setInitProgress, this method indicates the progress of the Flex app as it initializes.
We will set the text in PreloaderDisplay.swc and change the progress of the second initialize progress bar:

 
override protected function setInitProgress(completed:Number, total:Number):void {
	if (preloaderDisplay) {
		//set the initialization progress bar inside PreloaderDisplay
		preloaderDisplay.setInitalizeProgress(completed/total);
		//set loading text
		if (completed > total) {
			setPreloaderLoadingText("almost done");
		} else {
			setPreloaderLoadingText("initializing " + completed + " of " + total);
		}
	}
}
 

This blog entry does not cover every bit of code used in the preloader, so
View Demo Preloader App right click for source view

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.

cfdevcamp is a gathering of people passionate about learning through  collaboration.  Attendees will work in small teams to code projects  ideas from the team members or from a suggested list of projects.   This will not be a lecture style event or a traditional classroom with  a set curriculum and learning materials.  We want you to ask questions, hack away and have fun.

This is a great event for ColdFusion beginners, experts, and everyone in between.

For more information and to sign up for this free event visit: http://www.cfdevcamp.org/

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

We don't want to brag or anything but we know we showed you something you've never seen before. We bet you went and told all of your programmer friends about it. It's cool. We're proud of our talents. We're even cool with the fact that you probably went and told your boss you figured that problem out all by yourself. No, no, it's fine, don't worry. We're happy for you. We had a good time too, but there is something that does bother us. We never see you anymore. It's kind of awkward.

We know, we know. You've been busy. You got your projects and the office has been a mad house. We TOTALLY understand. We have stuff going on too. Like we've been wicked busy. It's just that when we don't hear from you we kind of feel used. Sorry. "Used" is too strong of a word. Well it's like this. Even though the role of Blogger has evolved over the years, the stigma of having a high bounce rate still exists. Once word gets out on the street you have a high bounce rate, people have no problem stopping in, getting their answer, and then leaving without so much as a comment.

Oh god. We're sorry. We can see your eyes glossing over. Look, we don't expect you to leave a message on our Facebook or Twitter page every day. We don't expect you to immediately introduce us to your CIO or CTO. We know those are big steps. Don't get us wrong. We have lives of our own and don't want to get tied down either.

All we want is for you to follow us on Twitter or become a fan of our Facebook page and occasionally let us know if you like what we are doing. That's all. Who knows. You might find out we're more than a nice pair of technical tutorials and that we are also interesting and funny.

The other day I was signing up for a new gmail account, just filling out the form as usual. I clicked the submit button, and I got an error. Apparently I hadn't typed the correct value for the CAPTCHA field. (In case you're wondering what a CAPTCHA is, it's that image and text input usually with instructions like "type the letters that you see.")  I was puzzled at what had happened. Certainly it couldn't have been BECAUSE THE CAPTCHA WAS IMPOSSIBLE TO READ. I figured that I must have just mistyped.  I tried the new CAPTCHA that gmail provided, certain that I'd gotten it right this time. Again, an error.  It wasn't until about the twentieth CAPTCHA that I was able to eventually create 2hot4u_55@gmail.com.

This got me thinking, though. I see CAPTCHAs everywhere except on The Morphic Group's blog. And if CAPTCHAs are good enough for Google then they are good enough for The Morphic Group. That's why I've decided to add a CAPTCHA to our blog for comments.

I don't actually think the addition of a CAPTCHA will have an effect on comments spam. We've already got the 500 WordPress plugins installed for that, and they work nicely to keep the comments spam to only a few hundred a day. The point is just that people expect a certain user experience these days. If you don't have a CAPTCHA then people will feel that something is missing from their experience on your blog. I wouldn't want anyone to have too easy of a time posting a comment on the blog and feel that they'd had a bad user experience on our site. That's the real reason for adding the CAPTCHA.

We decided to outsource the development of the CAPTCHA system for our blog to a company that says that between their teams in India, China, and somewhere in Brazil they can have developers working 24 hours a day for only 55 cents an hour.  The only trouble is that they only communicate by email, and we can't really understand their emails. We can only understand the part that says "next week, very soon." In the meantime, we did get a comp image from them. We think it looks like it will work great. It seems exactly like the CAPTCHA systems we see on every site, including gmail. This is what it looks like.

CAPTCHA

Go ahead. Type the letters you see.

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.

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.

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;

@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.

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

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.

The main focus of this three day convention was the presentations and sessions on a variety of topics such as pixel manipulation, animation, programing design patterns, accessibility, broadcast media, sound, and video. What comes to mind are all of the tasty tidbits of knowledge smoothly gulped down like a frosty IPA.

Day one started out with a series of workshops. My workshop of choice was Papervision 3D presented by John Grden and Andy Zupko. The first half with John was a great overview of basics. The next half included the advanced and new features of PV3D. John and Andy kept a steady pace making sure that the attendees were involved throughout in the session. I was most impressed with the new amazing features of layers and effects. Keep in mind that this was only a day workshop that is covered in two days.
Good job guys.

The next two days consisted of breakout sessions and keynote presentations. Unfortunately
I could not attend all of these presentations. From what I've heard from the attendees,
everyone was pleased with the content presented throughout the conference.

Briefly... I will go though some of the session I did attend:

• Building Social applications with Christophe Conraets was great eye opener to projects you can do with Actionscript API for Facebook and Adobe Flash Collaboration Service (formerly named "Cocomo"):.
• Joa Ebert presented some great tools (including Hobnox Open Source) and development disciplines.
• Every time I attend a session related to Big Spaceship, I'm always entertained as well has inspired. Jamie Kosoy gave us a backstage look at the process of Big Spaceship... Very cool. From Ten fundamentals of the process, my favorite was number 6: Buy the developer Whiskey! … indeed … (Make mine Bushmills, Sam).
• Dr. Woohow gave an exceptional presentation of mixing it up with applications to create
  some amazing visual landscapes.
• Doug Marttilla attempted to go through ten design patterns within an hour and succeeded. By presenting his own insight into each pattern, he gave an overall good presentation. You rock!
• Who couldn't learn a thing or two about video production from a guy like Robert Reinhardt, A true innovator. It was a power packed session. He's got a really great project coming up - VideoRX.

The bigger presentations at the Castle were outstanding even with a ruckus beer festival going on. Grant Skinner… Mark Anders… Andre Michelle... Gmunk... Keith Peters… Chuck Freedman … Mario Klingerman and of course Hoss Gifford. (I may have missed a few presentations... my apologies)

Of course... there were the parties and beer tastings at the end of each day at The Castle.
This was challenging place to incorporate speakers on stage with the combination of socializing,
beer and food. Unlike most of the conferences there was better chance to meet and talk to more people in this forum. Maybe it was added element of beer. It all seemed to work out well. I don't
think anyone was thrown out for rude behavior ... (Todd ?).

Favorite events: (Day 2) The Flash is Right with Host Philip Kerman and (Day 3) Toussaint and the China Band

The convergence of learning, drinking, and hobnobbing for three days was a success for the organizers and partners. All who attended were treated to the best talent, not to mention some
great micro-beers. Special shout out to the Park Plaza Hotel- great venue.

Having gone to a few out of town conferences on Flash, design and development, I was happy
and proud that this one was held in my own backyard, Boston.

Cheers!

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