Review: ActionScript Developer’s Guide to Robotlegs

I recently purchased ActionScript Developer’s Guide to Robotlegs as I’m currently working on a project at work that uses Robotlegs and I thought it might come in handy. The attractive price point plus the 50% offer from O’Reilly definitely helped as well, of course. Since then, I’ve gone through the book and decided to give my point of view from a developer who’s already familiar with Robotlegs.

Basically, if you have

you will basically skim through 60% to 70% of the book. That doesn’t mean that the book isn’t worth your time. In fact, I found the remaining 30% of the book to be remarkably informative and enlightening.

The 2 projects that were used as examples in the book give a nice overview of how real applications should be structured, which is something I didn’t really get a feel of by just looking at the demo bundle.

Chapter 10, which goes into detail on how to test your models, commands, services and mediators, will prove to be a boon if you write tests. (you should!)

Apart from this, there were design tips sprinkled throughout the book about best coding principles for your mediators, services, etc that I found helpful. The authors also highlight some possible signs of code smells in your Robotlegs classes that made me realize I was doing certain things the wrong way. (eg: monolithic mediators, adding/removing children from the view in the mediator, etc).

All things considered, it was a good read for the price point and I would say that it’s a possible purchase for a developer who has worked with Robotlegs before. If you are new to AS3/Flex frameworks, I would definitely recommend getting this as it collects all the relevant information together in one location and drastically reduces the requisite fumbling around that always occurs when one starts off with a new framework.


Flex 4 Font Size Manager

I’ve uploaded an optimized font size changer based on Maxim Kachurovskiy’s component that one can use to change the font size of Flex applications since the browser’s zoom function doesn’t affect Flex apps.

The changing of sizes through scrolling the mousewheel has been disabled as it results in massive lag for apps with complex layouts.

The font size changer can be found under the Projects menu header or one can jump directly to the example.

For those who are interested, feel free to clone the github repo and contribute.


XML Parsed/Serialized as [#document: null]

It’s a huge annoyance when you’re working with XML and after parsing the web service’s XML or deserializing the XML from BlazeDS, you see in your debugger that the output is [#document: null]. When I was still fresh out of the woods, I thought that [#document: null] is null, but as it turns out, it isn’t. The toString() method on the Document object is trying to communicate that the Document’s root element’s “node value” is not defined. Unfortunately, it chooses to represent that as [#document: null], which is just plain confusing.

If I’d read the Node documentation earlier, which states clearly that for the Document interface, the nodeName is “#document” and the nodeValue is null, it would have saved me many hours of frustration. If the XML API you’re working with returns you this output, you’d have to recurse through all the nodes and build the XML yourself. One way of avoiding this is to use JDOM:

import java.io.StringWriter;
import java.io.IOException;
import org.jdom.*;
import org.jdom.output.*;
import org.jdom.input.*;

public String buildXML(org.w3c.dom.Document xmlDoc) throws IOException
    DOMBuilder domBuilder = new DOMBuilder();
    Document jdomDocument = domBuilder.build(xmlDoc);
    XMLOutputter xmlOutputter = new XMLOutputter(Format.getPrettyFormat());
    StringWriter stringWriter = new StringWriter();
    xmlOutputter.output(jdomDocument, stringWriter);
    String xmlString = stringWriter.toString();
    return xmlString;

Registering Mediators with Dynamic Views at Runtime in Robotlegs

Recently ran into a problem with Robotlegs due to my lack of experience with it. I was creating views dynamically at runtime and intended to automatically register their mediators via mediator.mapView in my context. However, the app just didn’t seem to hook the mediator to my view despite the mediator being created successfully.

After some googling, I found this piece of lifesaving advice – With Flex, a mediator’s onRegister() hook will only be called after creationComplete. So, the mediator gets created as soon as the view component lands on stage, but onRegister() only gets called when the view component dispatches creationComplete. With plain as3, onRegister() gets called sooner (immediately after the component is added to the stage).

Therefore, if your dynamic view needs to hit the database to populate some UI elements once it’s been added to the stage, you should register the event listeners in the onRegister() method of your listener and dispatch that event from your view (not your mediator) at the end of the onRegister() method. This approach is for those who want to go with an entirely async event driven design or the case where other views in your application need to respond to the creation of your new view, in which case the onRegister() method would dispatch an event to the context bus to alert all registered mediators.


Flex 4 Rich Text Editor, now with Spell Check

I’ve updated the Flex 4 RTE with US English spellchecking using the very useful Squiggly from Adobe Labs. Basically, it works like your typical MS Word spellcheck. Red squiggly lines will appear if it thinks you’ve mistyped something and you can right click to bring up a context menu to see your options.

One interesting bug that I ran into and wrestled with for 1 hour was that if you use a Spark Panel as your container, it swallows up your context menu and just gives you the plain ole Flash context menu. After some googling, I found out that it was already logged in Squiggly’s JIRA. As luck would have it, a very kind member provided a workaround. Make sure that you have mouseEnabled=true in your opening Panel tag as well as the listed creationComplete event handler:

	horizontalCenter="0" verticalCenter="0"
	xmlns:mx="library://ns.adobe.com/flex/mx" height="300"
	mouseEnabled="true" creationComplete="creationCompleteHandler(event)"

    protected function creationCompleteHandler(event:FlexEvent):void
	    this.skin.mouseEnabled = true;

Problem solved! As usual, you can play with it here and pull the repo from github.


Flex 4 Rich Text Editor via Text Layout Framework

Rolled my own RTE for Flex 4 recently due to the lackluster out-of-the-box RTE provided by Flex 4 using Adobe’s Text Layout Framework. It has all the standard stuff that you might expect from a typical RTE:

  • Font type selection
  • Font size selection
  • Multilanguage support
  • Justification
  • Font colours

which is already more than what Flex 4 gives us. I suppose one could use the RTE from Flex 3, but when you’re developing in Flex 4, it’s gonna be messy when you start to mix lots of Spark and Halo components together.

Besides, the main reason I had to roll my own RTE was because I wanted strikethrough, text search (incluging regex search) and undo functionality, which aren’t in Flex 3’s RTE anyway. The RTE can be found under the Projects menu header or one can jump directly to the example.

For those who are interested, feel free to clone the github repo and contribute.