Flex: How to keep code away from MXML

Question

Can you recommend articles,books and best practices on designing Flex applications? (both AIR and web).

I've read Creating components and enforcing separation of concerns with Flex and Building components by using code behind.

Does the application always have to start on the Main MXML? Can't I instantiate the first view from an ActionScript class?

How would you add a handler to the first MXML and give the flow control to it?

I'm trying to write zero code on my MXML files to keep the view decoupled from code. Is this possible in Flex?

Answer 1

Paul Williams has some great articles and examples on different presentation patterns for Flex. He has even built a sample application using each of the different patterns and showed how to unit test some of the patterns. http://blogs.adobe.com/paulw/

Take a look at the Passive View model, it may be what you are looking for in terms of writing no AS code in your MXML.

Answer 2

Best practices are very subjective in software development. If you find one person who says "X" I can find another who says "Y" and most likely they'd both be right in the given circumstances.

Most books I'm aware of focus on bringing beginners up to speed, as opposed to best practices.

To answer your specific questions:

Does the application always have to start on the Main MXML? Can't I instantiate the first view from an ActionScript class?

In theory, it seems like it should be possible to have the main application file be ActionSCript; after all the Flex compiler just turns MXM into ActionSCript. In practice, I've never seen anyone do this. I've seen applications that are all ACtionSCript except for the application tag in the main application file.

How would you add a handler to the first MXML and give the flow control to it?

What do you mean by handler and flow control? I'm not sure I have a specific answer here. A lot of people make use of frameworks. Cairngorm is the most widely used, but some find it overly complicated. For a while Mate was the community favorite. RobotLegs is the current favorite.

I'm trying to write zero code on my MXML files to keep the view decoupled from code. Is this possible in Flex?

It depends. Isn't the view also code? If you want to use a "Model View Controller" Style approach, there are plenty of ways. Frameworks can help and I mentioned a few above. But, you could also go it your own. If you're new to Flex I'd recommend you start your development "Frameworkless" and the bring frameworks into the equation to see if they help solve problems you run into.

Answer 3

I've worked on a few projects that have used the code-behind pattern, which meets many of your requirements. In a nutshell you isolate the code from the MXML by creating an ActionScript base class (MyClassCode.as) and then creating an MXML file that inherits from your code-behind class (MyClass.mxml). One drawback is that any UI elements in the MXML file need to be declared a second time in your code-behind class, otherwise I've found this to be a very effective method of separating code from UI. Here's an example and some links for more info:

MyClassCode.as:

package mypackage
{
    import flash.events.MouseEvent;

    import mx.events.FlexEvent;

    import spark.components.Button;
    import spark.components.Group;

    public class MyClassCode extends Group
    {
        public var myButton:Button;

        public function MyClassCode()
        {
            super();
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
        }

        private function onCreationComplete(e:FlexEvent):void {
            this.removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
            myButton.addEventListener(MouseEvent.CLICK, onClick);
        }

        private function onClick(e:MouseEvent):void {
            // Do something
        }
    }
}

MyClass.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mypackage:MyClassCode xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       xmlns:mypackage="mypackage.*">
    <s:Button id="myButton"/>
</mypackage:MyClassCode>

Some links:

http://learn.adobe.com/wiki/display/Flex/Code+Behind

http://ted.onflash.org/2007/02/code-behind-in-flex-2.php

http://blog.vivisectingmedia.com/2008/04/the-flex-code-behind-pattern/