When Flex goes on a SlimFast diet

While digging around looking for some info on Keith Peters Minimal Comps I stumbled across a great post by Ryan Campbell on creating pure Actionscript projects using MXML. Actionscript projects using MXML??? yes that’s right. Using MXML markup you can create classes without all the Flex overhead. This means you get the benefit of clean easy to read MXML without the bulk of Flex. I will admit, I was completely blown away. I love programming in Flex, I find it much easier and quicker to layout components and views using MXML but I’m often conflicted when I factor in the size advantage a plain Actionscript project has over a Flex project. Now you can have the best of both worlds.

Here is what the mxml looks like.

<?xml version="1.0" encoding="utf-8"?>
 <comp:Container xmlns:fx="http://ns.adobe.com/mxml/2009"  
             xmlns:comp="com.dgrigg.components.*" 
             xmlns:text="flash.text.*"
             width="250" height="200" 
             color="0xdddddd">
    <fx:Script>
       <![CDATA[
          [Bindable]
          public var text:String = 'Click block to change color';
          
          private function onClick(event:MouseEvent):void 
          {
             var target:Component = event.target as Component
             target.color = Math.random()* 16581375;
             
             text = 'Color: #' + target.color.toString(16);
          }
       ]]>
    </fx:Script>
       <text:TextField id="tf" 
                   x="20" width="200" height="200" 
                   text="{text}"/>
    
       <comp:Component id="comp1" 
                   x="20" y="20" width="200" height="20" 
                   click="onClick(event)"/>
    
       <comp:Component id="comp2" 
                   x="20" y="50" width="200" height="40" 
                   click="onClick(event)"/>
    
       <comp:Component id="comp3" 
                   x="20" y="100" width="200" height="60" 
                   click="onClick(event)"/>
    
 </comp:Container>
 

I looks just like a Flex MXML class but when compiled it’s 12kb vs 532kb (debug version) and 8kb vs 235kb (non-debug version). Wow. If I add the [Bindable] tag, as you can see in the example it adds about 4-6 kb to the non Flex version.

Soure code.

Creating a project to do this is super easy. In Flash Builder (Flex Builder) create a new AS3 Project. After the setup is done

1. go to the project properties
2. select Actionscript Build Path
3. select Library path
4. Add SWC
5. Browse to the ‘framework.swc’ in the Flex SDK dir you are using (ie /flex_sdk_4.1.0.14965/frameworks/libs) and select it.

Now you are ready to go. To create a new MXML class you may need to a create new File instead of create new MXML component. Just make sure you use the MXML file extension and declare the ‘fx’ namespace

xmlns:fx="http://ns.adobe.com/mxml/2009"

One of the really nice features of coding this way is you can setup event listeners in the MXML just like in Flex, you don’t need to type out addEventListener(onEvent, Event.TYPE) blah blah each time.

As I start working on some projects using this method I’m sure I will be posting some more information. The next step is building out a full blown app with RobotLegs and hopefully Degrafa for the skinning. 

Comments RSS 2.0 feed. You can leave a response, or trackback from your own site.