Beyond Flex, Part 2 – Making your code smaller and faster

If your game or application is too large to fit, or too slow, then you may be in a position to rethink the usage of Flex SDK.
Part 1 discussed the motivations to try and skip the Flex SDK on certain projects. While it focused on the why, this time it will focus on the how – what can actually be done and how.

So our project needs only basic layouts and some simple controls. One option would be to roll our own controls and layouts, and while that is certainly a possibility, it does not save us any time. A better option would be to take advantage of an existing library, preferably small and light weight.

This time I will look at two of the top open source component frameworks. The nice thing about open source is that even if you don’t want to use the library as is, you still have the chance to create your own customized version. Also, if you are like me, looking under the hood to see how things get done can be very helpful.
In addition to reviewing some of these libraries, I am interested in practical aspects like ease of use and availability for current projects.

Minimal Comps

One such library is the excellent Minimal Comps, written by Keith Peters. It is open source and available for free download from the official web page: www.minimalcomps.com, which also contains full documentation and tutorials.
As its name suggests, it is a minimal set of lightweight UI components – currently it features an extensive list of over 30 different components, from the trivial label, checkbox and push button to the more exotic meter (VU Gauge) and wheel menu. It also has layout components like panel, window and boxes.

This is a great example of implementing a small, yet powerful UI component framework. The base component for all library classes (simply called ‘Component’) is based on Sprite and has only 250 lines of code. Compare that to Flex UIComponent with its 12,000 lines and draw your own conclusion.
The entire library swc file is 120K in size. All the components use drawing commands to draw themselves, and there are no assets, besides a single font that is used to display text.

var label1:Label = new Label(this, 20, 30, "Some text");
var myButton:PushButton = new PushButton(this, 120, 45, "Press me", onClick);

◊

Reflex

◊

Using MXML and Data Binding without Flex

While everyone knows that you can use Flex without MXML, not many realize that it is possible to use MXML outside of the Flex framework. It is probably one of the worst kept secrets of the flash platform.

Take the following code for instance:

<cc:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:comp="cc.*"
          xmlns:text="flash.text.*">
 
    <fx:Script>
        <![CDATA[
			[Bindable]public var myTitle:String = 'Sample App';
        ]]>
	</fx:Script>
 
    <text:TextField id="title"
                    x="20" y="20" width="200"
                    text="{myTitle}"/>
 
    <text:TextField id="label2"
                    x="20" y="120" width="200"
                    type="{TextFieldType.INPUT}"/>
 
</cc:Group>

import flash.display.DisplayObject;
import flash.display.Sprite;

// Default property for mxml
[DefaultProperty("children")]

// Group container class
public class Group extends Sprite
{
    private var _children:Vector.<DisplayObject>;

    public function get children():Vector.<DisplayObject> {return _children;}

    public function set children(value:Vector.):void
    {
        if (value != _children)
        {
            while (numChildren > 0)  removeChildAt(0);
            _children = value;

            for each (var child:DisplayObject in _children) {
                this.addChild(child)
            }
        }
    }
}

.

◊

Resources

Minimal Comps minimalcomps.com
Skinnable Minimal Comps skinnable minimal comps
Reflex page:        reflex.io
Tyler on Reflex:  xtyler.com