Results

Now, a few things about this data.  The Signals library was very consistent in the times outputted, however the EventDispatcher was very erratic.  You can see it a little here within the results, but these results were fairly tame.  During testing, I’ve seen spikes going both high and low.  I’ve also seen it several times being faster than Signals.  I’ve tried to find an explanation about why and all I could think of is because the EventDispatcher is so intertwined with Flash Player and that could affect the test somehow but this is all speculation.

Because of this inconsistency, it’s hard to interpret the data for the EventDispatcher, so instead let’s concentrate more on the Signals side.  You’ll notice that the time taken is fairly consistent and would work as expected (one event is faster than a thousand).  When I first heard of Signals, my first thought was that this would be faster than normal events, and the data clearly shows this by 173%.

Signals is fast, there’s no doubt about it, but will incorporating it in your project actually increase overall speed?  Will it actually benefit development?

Personally, I don’t think I would personally use it in my project for a few different reasons:

1. It’s not native to Flash/Flex.  Some may dismiss this point, but when you have a whole system based upon EventDispatcher and Events, it’s hard to ignore.
2. Lack of bubbling and capture.  Signals is working on bubbling, but I doubt they will get it working as well as the native implementation.
3. There is no meta-data possible for Signals.  This severely limits the possibility of using signals in MXML.
4. Need to recreate all event variables for Signals all over again.  Signals tries to reduce boiler-plate code by dismissing custom Event classes, but you still need to create new variables in the class for the event which essentially cancel each other out.
5. Keeping two separate standards for events in one system is a maintenance nightmare.
6. Little speed gain for the amount of extra work needed to get it working in a system.

All and all, I think Signals is a very good idea for performance and extra utility, however it seems to me that the concept is Utopian.  If we could swap out the native event mechanism of Flash, then I’d be all for it, but in my current situation it isn’t very realistic to replace a current system that works (very well I might add) with another that’s slightly faster and more convenient.  The pros simply do not outweigh the cons.  If I were to use Signals, it would be in a very small Actionscript only project.

In the end, we opted for a quick implementation of it, but it wasn’t up to the standards of Spark.  This is where this post comes in.  Searching online quickly listed a lot of different variations on how to do it, but many of them resembled my first attempt and didn’t take advantage of Spark skinning.  I chose to rectify this by creating my own PromptTextInput that is highly skinnable, stylable and to my knowledge, uses the best Spark practices.

One quick note before diving into the code; while I was trying to implement this, I was surprised to find that you could not extend TextInput via MXML.  It has to be done in Actionscript.  This is no doubt a bug in the compiler.  The error? “Multiple initializer values for default property, ‘text’, of type ‘String’.”  This because the ‘defaultProperty’ of TextInput is ‘text’, which means anything that’s placed in between the TextInput tag is expected to be the text that’s going to be displayed.  In this case though, when trying to just add a Script tag, it would give this error.  Very annoying.   Moving on however to the actual implementation.  First the component itself.  Or just download the project.

package com.michelboudreau.view.components
{
	import com.michelboudreau.view.skins.PromptTextInputSkin;
	import flash.events.FocusEvent;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	import spark.components.Label;
	import spark.components.TextInput;

	// Extra skin states that we need to show prompt
	[SkinState("normalWithPrompt")]
	[SkinState("disabledWithPrompt")]

	public class PromptTextInput extends TextInput
	{
		// Create a new skin part that will display our prompts
		[SkinPart(required="false")]
		public var promptDisplay:Label;

		private var _prompt:String; // Holds the value of the prompt text
		private var _promptChanged:Boolean; // Flag for the invalidation
		private var _inFocus:Boolean = false; // Flag used to know if in focus

		// New state constants
		static protected const NORMAL_WITH_PROMPT:String = 'normalWithPrompt';
		static protected const DISABLED_WITH_PROMPT:String = 'disabledWithPrompt';

		public function PromptTextInput()
		{
			super();
			this.addEventListener(FocusEvent.FOCUS_IN, onFocus);
			this.addEventListener(FocusEvent.FOCUS_OUT, onFocus);

			// sets the default skin
			setStyle("skinClass", PromptTextInputSkin);
		}

		[Bindable]
		public function get prompt():String
		{
			return _prompt;
		}

		public function set prompt(value:String):void
		{
			this._prompt = value;
			this._promptChanged = true;
			invalidateProperties();
		}

		/**
		 * Adding the prompt text to the label if it's available
		 */
		override protected function commitProperties():void
		{
			super.commitProperties();

			if (this._promptChanged)
			{
				if (promptDisplay)
				{
					promptDisplay.text = prompt;
				}
				this._promptChanged = false;
			}
		}

		/**
		 * Changing the logic to add our new skin states
		 *
		 * @return The state that the skin should change to
		 */
		override protected function getCurrentSkinState():String
		{
			if(!this._inFocus && text.length == 0)
			{
				if(enabled)
				{
					return NORMAL_WITH_PROMPT;
				}else{
					return DISABLED_WITH_PROMPT;
				}
			}else{
				return super.getCurrentSkinState();
			}
		}

		/**
		 * Listen to see if the prompt label is being created and add
		 * prompt text to it.
		 *
		 * @param partName:String
		 * @param instance:Object
		 */
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);

			if (instance == promptDisplay)
			{
				promptDisplay.text = prompt;
			}
		}

		/**
		 * Handles the focus event and sets our focus flag then
		 * invalidates the skin to change states appropriately
		 * @param e:FocusEvent
		 */
		private function onFocus(e:FocusEvent):void
		{
			this._inFocus = e.type == FocusEvent.FOCUS_IN;
			invalidateSkinState();
		}
	}
}

You’ll notice that we’re add a few things to the components. First, we’re adding two new skin states on top of the two that are with TextInput (normal and disabled). We’re also adding a new skin part that isn’t required since we want to leave it open to the developers/designers if they want to have to add in the skin. And finally, we override the getCurrentSkinState so to send out two new skin state strings to the skin itself. If none of this makes sense, I definitely recommend you read up on Spark Skinning. And of course, for all this to come together, we need our new skin.

<?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:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" blendMode="normal">

    <fx:Metadata>
		[HostComponent("com.michelboudreau.view.components.PromptTextInput")]
	</fx:Metadata>

    <fx:Script fb:purpose="styling">
        private var paddingChanged:Boolean;

        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background", "textDisplay"];

        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}

        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];

        /**
         *  @private
         */
        override public function get contentItems():Array {return contentFill};

        /**
         *  @private
         */
        override protected function commitProperties():void
        {
            super.commitProperties();

            if (paddingChanged)
            {
                updatePadding();
                paddingChanged = false;
            }
        }

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }

        /**
         *  @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                shadow.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
            }
            else
            {
                border.visible = false;
                shadow.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
            }

            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        /**
         *  @private
         */
        private function updatePadding():void
        {
            if (!textDisplay)
                return;

            // Push padding styles into the textDisplay
            var padding:Number;

            padding = getStyle("paddingLeft");
            if (textDisplay.getStyle("paddingLeft") != padding)
                textDisplay.setStyle("paddingLeft", padding);

            padding = getStyle("paddingTop");
            if (textDisplay.getStyle("paddingTop") != padding)
                textDisplay.setStyle("paddingTop", padding);

            padding = getStyle("paddingRight");
            if (textDisplay.getStyle("paddingRight") != padding)
                textDisplay.setStyle("paddingRight", padding);

            padding = getStyle("paddingBottom");
            if (textDisplay.getStyle("paddingBottom") != padding)
                textDisplay.setStyle("paddingBottom", padding);
        }

        /**
         *  @private
         */
        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);

            if (allStyles || styleProp.indexOf("padding") == 0)
            {
                paddingChanged = true;
                invalidateProperties();
            }
        }
    </fx:Script>

    <fx:Script>
        <![CDATA[
        /**
         * @private
         */
        private static const focusExclusions:Array = ["textDisplay"];

        /**
         *  @private
         */
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>

		<!-- ADDED -->
		<s:State name="normalWithPrompt" stateGroups="promptGroup"/>
		<s:State name="disabledWithPrompt" stateGroups="promptGroup"/>
    </s:states>

    <!-- border -->
    <!--- @private -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <!--- @private -->
            <s:SolidColorStroke id="borderStroke" weight="1" />
        </s:stroke>
    </s:Rect>

    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <!--- @private Defines the background fill color. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>

    <!-- shadow -->
    <!--- @private -->
    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>

    <!-- text -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />

	<!-- ADDED -->
	<!-- prompt -->
	<s:Label id="promptDisplay" verticalAlign="middle" includeIn="promptGroup"
			 alpha="0.5" mouseEnabled="false" left="1" right="1" top="1" bottom="1" />
</s:SparkSkin>

This is a default TextInput skin, but with an added Label at the end of the file, and you’ll also find the two new states added to the mix. That’s all it takes.

UPDATE: After looking around, it seems that a prompt property will be added to Flex 4.5.

It integrates completely with Eclipse (and Flash Builder) and has this neat feature called CodeSync that makes sure your model and code is always persisted between each other.  In other words, everything works together in an integrated workflow to save you time.

I’ll have to dig deeper, try this out on projects and do a complete review.  In the meantime, please support this initiative by registering and posting on the forum.

What I’ve done is extend TraceTarget and include some code so that any output goes to Firebug.  Simple enough, but very useful when you don’t have to have your debugger always running to see the output.

package com.codemonkeycreative.utils
{
	import flash.external.ExternalInterface;

	import mx.formatters.DateFormatter;
	import mx.logging.ILogger;
	import mx.logging.LogEvent;
	import mx.logging.LogEventLevel;
	import mx.logging.targets.TraceTarget;

	public class FirebugLoggerTarget extends TraceTarget
	{
		private var _dateFormatter:DateFormatter = new DateFormatter();

		public function FirebugLoggerTarget()
		{
			super();
		}

		/**
		 * Overrides the main function of TraceTarget that gets triggered
		 * every time someone tries to log anything using a Logger
		 **/
		override public function logEvent(event:LogEvent):void
		{
			// send the event to be traced normally
			super.logEvent(event);
			// Find the level
			var levelType:String = getLevelString(event.level);
			var level:String = includeLevel?levelType.toUpperCase():'';

			// Date variables
			var date:String = "";
			var d:Date = new Date();

			// Format date
			if(includeDate)
			{
				this._dateFormatter.formatString = "MM/DD/YYYY";
				date = this._dateFormatter.format(d) + fieldSeparator;
			}

			// Format time
			if(includeTime)
			{
				this._dateFormatter.formatString = "J:N:SS.QQQ";
				date += '[' + this._dateFormatter.format(d) + ']' + fieldSeparator;
			}

			// Find the category
			var category:String = includeCategory ? ILogger(event.target).category + fieldSeparator : "";

            // Then output it in firebug
            if(ExternalInterface.available)
            {
				ExternalInterface.call("console."+levelType, date + level + category + event.message);
            }
		}

		/**
		 * Returns the string equivalend of the level enum.
		 * This is needed for firebug to understand the console output.
		 **/
		private function getLevelString(level:int):String
		{
     		switch(level)
			{
				case LogEventLevel.DEBUG:
					return 'debug';
					break;
				case LogEventLevel.INFO:
					return 'info';
					break;
				case LogEventLevel.WARN:
					return 'warn';
					break;
				case LogEventLevel.FATAL:
				case LogEventLevel.ERROR:
					return 'error';
					break;
				case LogEventLevel.ALL:
				default:
					return 'log';
					break;
			}
		}
	}
}

Simply create this class and include it in your project. Then in your config file, just add the following line.

<utils:FirebugLoggerTarget level="{LogEventLevel.ALL}" includeTime="true" includeDate="true" />

You just need to change the properties like you normally on TraceTarget and the class does the rest.

When I moved here from Ottawa I thought to myself that NYC would be full of Flex gurus. Sadly, that is not the case. I’ve met many developers, but very few experts in the field.

This is my way to try and change that. I’m hoping that this will become the place where Flex developers of all skill levels meet, discuss, share and learn from each other.

If that interests you, join the group and come out to our inaugural meet June 7th. Pizza will be provided.

More

more

I’m a fan of Flash, but like most things in life, it isn’t perfect.  Flex and Actionscript have been an integral part of my career and I would like them to continue to be so.  I would like to touch on certain concepts that I think would add more value to the current software offerings and in turn give Adobe an edge over the competition.

Time is an important asset for a company, which is why increasing development efficiency will be a key factor in winning this war. I’m talking about reducing the compiler time, making it smarter and bug free, and adding 64bit support to utilise workstation performance. This improvement can save valuable minutes or even hours depending on the developer.

Speaking of development efficiency, I also suggest that Flash Builder starts supporting Linux.  Adobe doesn’t even have to officially support it, just make sure the eclipse plug-in can work in a Linux environment with or without design view (I personally never use it).  The feature request for having Flash Builder on Linux is one of the most popular requests on the Adobe bug tracker.

Irritations while using Flash products also need to be eliminated. I personally enjoy development work (geek alert!), but when something doesn’t work like expected, it frustrates me to no end. The Flex framework is fairly good at doing exactly that; it’s supposed to save time, and it does, but there are some components that have been buggy ever since its inception and they aren’t being fixed.

The next point is cause for debate between developers, in the end it comes down to preference, but it needs to be addressed. Of course, I’m talking about Cairngorm – or more specifically your decision to support it. I personally don’t think MVC is the pattern to use when handling a Flex application, and other developers in the community agree; hence the creation of several new open- source frameworks. It seems to me that Adobe is playing favorites with Cairngorm and could instead use that development effort in a more productive way.  Adobe should work on enhancing the Flash API and opening up doors to allow third party frameworks to improve their usability.

With complex applications come crucial new ways to design the flow and interaction within the system.  For that, a developer needs tools to show this visually.  Tools like wireframe UI timeline or UML round-trip engineering can combine both design and functionality in a uniform way that all developers can understand.  A lot could be learned from Java and their tools: e.g. offering code hot-swapping to greatly reduce debugging time.

If Adobe is serious about creating a developer language, then a more complex language needs to be their goal.  Multiple-inheritance, polymorphism, overloading, enumerators, abstract classes, destructors, private constructors, decimal data type, threading support – these are only a few of the things that Actionscript is lacking. Some would argue that there are a lot more. I’m not saying it’s a bad language, after all, it does do what it’s supposed to do, but with bigger systems come more architectural complexities that the current language cannot support.

A common topic when debating Silverlight vs Flex is the lack of multi-threading.  I really do hope that this will be implemented in the next iteration of the language because the possibilities it would open would be mind-blowing.  Imagine a system that can execute complex algorithms and computations without disrupting the user experience; that would be a major improvement! Heck, even if the language doesn’t give developers access to threads, just allowing the player to run different threads for visual components and for computations would be a great improvement.

Let me leave you with this: I’ve been a fan of Adobe since I was a kid, and I still am. If any business is capable of surmounting the upcoming challenge, it will be Adobe. I believe that the community surrounding this product will be a key factor in this war; if Adobe listens and responds to our suggestions, only great things can happen.

Speaking of community, I invite all developers and designers to debate and comment on this topic. I think it is one that will be talked about for quite some time to come.  I’d also like to thank Joe Morrison, a Director at Lab49, for letting me bounce ideas off of him.

The problem with this approach is that we needed our application to be re-themeable between different clients that would be using this product, which meant that we also needed a way to style the html content without having to redo the html itself.

As much as I looked for it, I couldn’t find anyone else doing something similar to this, so I created my own. Essentially, I just extended TextArea which already handles htmlText and added my own html tag styling to it. I was surprised to see that you can actually set styles to the html within the TextArea, but you can only do it with Actionscript.

I looked at all the possible html tags that TextArea supports, and created CSS styles for it. I wanted to stick with the proper CSS convention of separating the words using a dash and used my own kind of standard ‘html-<tag>-<property>’, property being one of ‘color’, ‘weight’, ‘decoration’ or ’style’. One exception to this rule is for the anchor tag, which can also do pseudo-classes (a:link, a:hover and a:active). If you need to reference those tags, you just need to use ‘alink’, ‘ahover’ and ‘aactive’. If someone has a better suggestion, I’m all ears.

package com.lab49.components
{
	import flash.text.StyleSheet;

	import mx.collections.ArrayCollection;
	import mx.controls.TextArea;
	import mx.styles.CSSStyleDeclaration;
	import mx.styles.StyleManager;

	// Set the style metadata - If adding another style/tag, add it here
	// Style names are in the of 'html-<tag>-<property>' exception is for pseudo-classes
	// which is attached directly to the tag name.
	[Style(name="html-a-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-a-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-a-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-a-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-ahover-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-ahover-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-ahover-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-ahover-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-aactive-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-aactive-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-aactive-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-aactive-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-alink-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-alink-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-alink-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-alink-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-b-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-b-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-b-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-b-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-font-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-font-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-font-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-font-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-i-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-i-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-i-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-i-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-li-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-li-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-li-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-li-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-p-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-p-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-p-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-p-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-span-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-span-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-span-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-span-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-textformat-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-textformat-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-textformat-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-textformat-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-u-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-u-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-u-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-u-color", type="uint", format="Color", inherit="no")]

	/**
	 * RichTextArea Class, extends TextArea.  Displays html text, but styles them uniformily for
	 * easy theming.
	 **/
	public class RichTextArea extends TextArea
	{
		private var _stypePropChanged:Boolean = false; // Style property change flag.  Set to true when one of the html styles is set
        private static var _classConstructed:Boolean = classConstruct(); // Calls a static initializer function before anything else

        // All possible styles.  If adding a new one, must be added in this ArrayCollection with the proper metadata above.
        private const _styles:ArrayCollection = new ArrayCollection([	"html-a-style",
														            	"html-a-weight",
														            	"html-a-decoration",
														            	"html-a-color",
														            	"html-ahover-style",
														            	"html-ahover-weight",
														            	"html-ahover-decoration",
														            	"html-ahover-color",
														            	"html-alink-style",
														            	"html-alink-weight",
														            	"html-alink-decoration",
														            	"html-alink-color",
														            	"html-aactive-style",
														            	"html-aactive-weight",
														            	"html-aactive-decoration",
														            	"html-aactive-color",
														            	"html-b-style",
														            	"html-b-weight",
														            	"html-b-decoration",
														            	"html-b-color",
														            	"html-font-style",
														            	"html-font-weight",
														            	"html-font-decoration",
														            	"html-font-color",
														            	"html-i-style",
														            	"html-i-weight",
														            	"html-i-decoration",
														            	"html-i-color",
														            	"html-li-style",
														            	"html-li-weight",
														            	"html-li-decoration",
														            	"html-li-color",
														            	"html-p-style",
														            	"html-p-weight",
														            	"html-p-decoration",
														            	"html-p-color",
														            	"html-span-style",
														            	"html-span-weight",
														            	"html-span-decoration",
														            	"html-span-color",
														            	"html-textformat-style",
														            	"html-textformat-weight",
														            	"html-textformat-decoration",
														            	"html-textformat-color",
														            	"html-u-style",
														            	"html-u-weight",
														            	"html-u-decoration",
														            	"html-u-color" ]);

		// Sets default properties of RichTextArea
		[Inspectable(category="General", defaultValue="false")]
		override public function set editable(value:Boolean):void
		{
			super.editable = value;
		}

		[Inspectable(category="General", defaultValue="true")]
		override public function set selectable(value:Boolean):void
		{
			super.selectable = value;
		}

		[Inspectable(category="General", defaultValue="true")]
		override public function set condenseWhite(value:Boolean):void
		{
			super.condenseWhite = value;
		}

		// Constructor
		public function RichTextArea()
		{
			super();

			// Removes background, border and focus highlight of the TextArea
			this.setStyle('backgroundAlpha', 0);
			this.setStyle('borderStyle', 'none');
			this.setStyle('focusAlpha', 0);
		}

		/**
		 * This method is called a static initializer since it is called before the
		 * constructor since it's being referenced by a static variable.
		 * If anything needs to be set before the constructor runs, this is the place to do it.
		 *
		 * @return true
		 **/
        private static function classConstruct():Boolean
        {
        	// Check to see if style exists
            if (!StyleManager.getStyleDeclaration("RichTextArea"))
            {
            	// Set default empty style declaration
                var style:CSSStyleDeclaration = new CSSStyleDeclaration();
                style.defaultFactory = function():void {};
                StyleManager.setStyleDeclaration("RichTextArea", style, true);
            }
            return true;
        }

    	/**
    	 * Overrides the htmlText property to set the '_stylePropertyChanged' flag
    	 * since any new text being set will not be styled unless updateDisplayList()
    	 * is called.
    	 *
    	 * @param value:String The html text to be set
    	 **/
    	override public function set htmlText(value:String):void
		{
			super.htmlText = value;
			this._stypePropChanged = true; // Set the flag to style the text
			invalidateDisplayList(); // Call updateDisplayList() on next render
		}

		/**
		 * Override the styleChanged() method to detect changes in your new style.
		 * only set the _stylePropChanged tag to true if one of our custom styles has
		 * been changed.  If a new style is added, it must be added here as well.
		 *
		 * @param styleProp:String The new property name that has been set
		 **/
        override public function styleChanged(styleProp:String):void
        {
            super.styleChanged(styleProp);

            // Check to see if it's one of our custom styles
            if(this._styles.contains(styleProp))
            {
            	// Redo text styling
            	this._stypePropChanged = true;
	            invalidateDisplayList();
            }
        }

		// Override updateDisplayList() to update the component
        // based on the style setting.
        /**
         * Override the drawing function and resets the style on the html text if the _stylePropChanged flag is set to true.
         *
         * @param unscaledWidth:Number the width of the current component
         * @param unscaledHeight:Number the height of the current component
         **/
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            // Check to see if style changed.
            if (this._stypePropChanged)
            {
            	this._stypePropChanged = false; // set the flag back to false

                /*
				 * Adds new styles to the CSS for specific html content.
				 * More can be added, just add the tag name in the 'tags' array and
				 * add the css property 'html-<tag name>-<text property name>' in your stylesheet
				 * For instance, I can could do 'html-p-weight:bold'.
				 * Possible text property names are 'style', 'weight', 'decoration' and 'color'
				 *
				 * Only exception to the tag name is for the 'a' tag.  You can specify just 'a' or
				 * you can do the pseudo class 'hover', 'link' and 'active', but you need to specify the tag
				 * before, like so 'html-ahover-weight: bold;'.
				 */
				var style:Object, value:Object, tag:String, tagSplit:Array, ss:StyleSheet = new StyleSheet();

				for(var i:int = 0, len:int = this._styles.length; i < len; i++)
				{
					style = {};
					tag = this._styles.getItemAt(i) as String;

					// Convert into AS3 stylename format (camelCase)
					tagSplit = tag.split('-');
					tag = tagSplit[0] + String(tagSplit[1]).charAt(0).toUpperCase() + String(tagSplit[1]).slice(1) +
							String(tagSplit[2]).charAt(0).toUpperCase() + String(tagSplit[2]).slice(1);

					// Get style if there
					value = getStyle(tag);
					if(value)
					{
						style = ss.getStyle(tagSplit[1]); // Get style if one already exists so you don't override the previous one
						// Find the proper style name and save it
						switch(tagSplit[2])
						{
							case 'style':
								style.fontStyle = value;
								break;
							case 'weight':
								style.fontWeight = value;
								break;
							case 'decoration':
								style.textDecoration = value;
								break;
							case 'color':
								style.color = '#'+('00000'+Number(value).toString(16).toUpperCase()).substr(-6);
								break;
						}

						// Do the cases for the pseudo 'a' classes and set the style object
						switch(tagSplit[1])
						{
							case 'ahover':
								ss.setStyle('a:hover', style);
								break;
							case 'alink':
								ss.setStyle('a:link', style);
								break;
							case 'aactive':
								ss.setStyle('a:active', style);
								break;
							default:
								ss.setStyle(tagSplit[1], style);
								break;
						}
					}
				}

				styleSheet = ss; // Save stylesheet
            }
        }
	}
}

Here are my thoughts on what is missing and why I think those features should get implemented as the language matures and tries to appeal to a wider range of developers (think non-”traditional” one who have been working mostly on non rich web application application). By the way, I don’t consider myself a language expert and my opinion may evolve as I write more ActionScript code.

- No support for multi-threading. I feel that this is the most glaring shortcoming. I understand that it can get tricky for any language belonging to the JavaScript family (I guess it’s more appropriate to use ECMA family of languages here, or ECMA-compliant, but ECMA is a weird acronym that just doesn’t round right) to support threads when it’s meant to run within many browsers and on many different operating systems but this could be one of the main reasons why some enterprise projects may shy away from ActionScript 3. But then again AIR is a desktop solution, and still no threading. Maybe Adobe and the community should seriously reconsider this missing feature. haXe could be considered as a model (http://haxe.org/doc/neko/threads?lang=en)

- Limited native types. You just get 5 of them: String, Boolean, Number, int and uint. It may be an indication of the language purely dynamic origins where such considerations were not important. And what’s with the inconsistent use of cases: String and int (upper and lower)? I guess it’s for legacy reasons. You could argue that if you really need to make a distinction between double and float then maybe AS3 is not the right tool just as you could argue that for people who want to use AS3 for the visualization of complex analytics such a distinction does matter. There is a lot of room for debate here.

- No overloading allowed for constructors, methods, or even between a variable and a method. This is a limiting factor in larger OO applications. Overloading constructors, for example, greatly contributes to the usability of your class. On the other hand I do like the mandatory inclusion of the ‘override’ keyword in subclasses, in line with the trend of other languages (or Java’s @Override annotation; for Java it’s too late to enforce it as a keyword)

- No abstract classes, but there are interfaces. Again, that’s a missing piece in the arsenal of an OO language as interfaces are not exactly the same thing.

- Interfaces can only declare methods, not variables or constants. This restriction can be lived with, but why?

- An .as file must have only one externally visible (public or internal) class or function; this a compiler (mxmlc) restriction, not an AS3 restriction per se. This can become annoying for a file defining global utility functions.
It’s worth noting at this point that there are a few ActrionScript compilers out there, a tribute to the vitality of the community, but that’s a little bit off topic in a post titled “AS3 shortcomings”, isn’t it? So I’ll just add that MTASC is great, but specifically geared towards AS2 with no plans for AS3 as they announced that they are focusing on haXe (by the way they are the creators of haXe). I never tried swftools, though I should. Maybe this bullet point will prove invalid.

- No Generics, which gives the language a very pre-Java 5 feel. This is felt even more acutely given the many resemblances to the Java language. They could have been inspired by GJ, the work on STL, etc… For some reasons it has been left out. This may not be necessarily hurtful for people used to work with the AS3 Array class (it’s a heterogeneous collection of objects) but you do feel their absence when you are trying to write a method where arguments can be of a certain type and all of its descendants but no more, i.e. you don’t want to necessarily resort to the * notation.

- Speaking of Array, what’s with the delete operator? It does not really delete (for that you are better off using splice()). Maybe that’s what happens when you try too hard to come up with a unique syntax for your language. At this point I am tempted to say that we should just stick to the C++ syntax, but to each his own and this type of debate can easily degenerate into futility, so let’s leave it that: The ‘delete’ operator does not delete an array element (when used in the context of arrays), it merely sets the element value to undefined, and that’s misleading.

That’s it for now, I will probably post a follow up where I explain why I really like the event dispatching model and some of the language functional features.

Filed under: ActionScript 3, Adobe, RIA Tagged: ActionScript, AS 3, Java, Object Oriented, OO