Let’s give a quick example of a simple problem: You need to find the index of a string within a 2D array and do something with that index.  Here’s how I would do it normally:

private function findIndex(text:String):void
{
	var row:Array;
	var index:Point;
	for(var y:uint = 0, ylen:uint = array.length; y<ylen; y++)
	{
		row = array[y];
		for(var x:uint = 0, xlen:uint = row.length; x<xlen; x++)
		{
			if(row[x] == text)
			{
				index = new Point(x,y);
				break;
			}
		}
		if(index)
		{
			break;
		}
	}
	// Do something with index
}

You’ll notice that within the example, the second I find the index, I break out of the loops to reduce the run time of the function. The external loop always looks to see if ‘index’ is not null and breaks out if it is. I’ve never liked this approach because it adds more code than needed and sometimes its not as easy as just checking if a variable is not null. You could always use ‘return’ if your function is done with its purpose, but that’s not always possible.

The alternative to this is using label statements. What you can do is simply ‘label’ your loops and then when you want to break, you can specify which loop that needs to be broken. Take our current example and let’s add label statements in it:

private function findIndex(text:String):void
{
	var row:Array;
	var index:Point;
	outer:for(var y:uint = 0, ylen:uint = array.length; y<ylen; y++)
	{
		row = array[y];
		for(var x:uint = 0, xlen:uint = row.length; x<xlen; x++)
		{
			if(row[x] == text)
			{
				index = new Point(x,y);
				break outer;
			}
		}
	}
	// Do something with index
}

That is much better and cleaner. I’ve seen this done before in Java, but I have never encountered or read about it for Actionscript. This method can also be used with the ‘continue’ operator so that it skips the rest of the code to the next iteration or with block statements like so:

doSomething: {
	var x:uint = index.x;
	if(x > 100)
	{
		break doSomething;
	}
	trace(x);
}

I don’t think I would ever use it with block statements since these could be simply replaced with ‘if’ statements, but knowing about it can be beneficial. I know I will be using label statements in nested loops from now on.

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.

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.

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.