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.

Usage is extremely simple: just pass the parent display object and x,y in the constructor and you’re done. Other parameters may follow as well:
var label1:Label = new Label(this, 20, 30, "Some text");
var myButton:PushButton = new PushButton(this, 120, 45, "Press me", onClick);
Ok, so not everything is included in the library – skinning for one.
This is not really a big deal since in case you need your components heavily customized you can still use the library classes as base components and add you own drawing code and assets. There are samples of using degrapha to skin the Minimal Comps components and some developers even attempted to create skinnable components for the library.
Another is MXML and data binding – there is no direct support for either one, but technically you can still use both with any set of non-Flex components – more on that later.
To conclude, Minimal Comps has gained popularity among flash developers and new updates are being released occasionally for bug fixes. It is well structured, compact and efficient and could accommodate a wide variety of applications, including games. If you need anything like data grids and tables you should probably stick to Flex anyway.

Reflex

A more recent addition to the bunch of open source UI frameworks is Reflex. In contrast with Minimal Comps, Reflex is described as a component development platform that is extremely light weight yet powerful and do not rely on the Flex framework.
Reflex has an active developer community around it and it is described it as a component development platform that is extremely light weight yet powerful and do not rely on the Flex framework.  To quote from one of the sessions:  “Reinventing the features of Flex for the creative workflow, Reflex enhances the Flash Player (rather than abstracting it) to meet the demands of next generation applications and devices.”

It has an ambitious roadmap, and it adopts some of the paradigms found in the spark component model – specially the MVC micro architecture that separates the component logic from its skin.
In addition to UI components and layouts, the roadmap contains the following:

  • MXML Support, including spark style states and CSS styling
  • Skinning, including default skins
  • Behaviors – separated component logic in a controller class
  • Custom data binding with meta tags
  • Many more components, including data grid
  • Lightweight graphics framework (Flex4 and Degrafa style)
  • Integrates with any IDE, including Flash Pro

After attending one of the sessions that presented Reflex I was very impressed with the architectural vision of the project and the simplicity of the code. This is the closest thing to flex functionality out there, without the huge overhead.

Compared to Minimal Comps it’s a bit larger, but you can still get swfs that are around 150K in size.
However, the current build is incomplete and  I was not able to actually use it – very few controls are implemented, and the default skins still lack some basic functionality. Even the posted examples are very minimal. I tried to use it to put together a basic sample, but I had to give up since it was too time consuming – I expect most features to work out of the box but its not there yet.
Reflex is still in early stages, but given some time it promises to become the leading non-Flex development platform in the flash ecosystem, at least once the features in the road-map are delivered.

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>
As you can see we can have a script tag as usual and use data binding the same syntax we use in Flex.
All you need is a container class, just a sprite with a default property ‘children’ that overrides the get/set functions. One you have the container in place, use it as the root of the mxml and define the namespaces. Now you can place any display object inside the container, as long as its namespace it defined.
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)
            }
        }
    }
}

.

A note on data binding: in some cases it will require explicit binding since we don’t have the component framework to generate the events for us anymore.
One last thing is to add the framework.swc to the project library path – you can find it in the frameworks/libs folder of the Flex SDK. Also, If you are using Flash builder, MXML files cannot be created directly in pure actionscript projects, so just create a text file and rename the extension to mxml.
Any component can be used that way, flash or custom. You can throw in any component library (like Minimal Comps) and use it in MXML with your own custom components.

Resources

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