Flash builder 4.6 - code behind approach

Question

I'm trying to figure out the right approach for "Code behind" using flash builder for a mobile app:

1. I'm creating a flex mobile AIR project (Based on the "Tabbed view" template)
2. setting my UI in design mode
3. now I want all the logic to be in a separate class that will change the UI look accordingly

Sounds easy, however I can't really get the approach for doing it, any help is appreciated :)

Update:

main app:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
    <s:ViewNavigator label="a" width="100%" height="100%" firstView="views.aView"/>
    <s:ViewNavigator label="b" width="100%" height="100%" firstView="views.bView"/>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</s:TabbedViewNavigatorApplication>

view A:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="a">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Label id="txt" x="280" y="139" text="Label"/>
</s:View>

So now I want MyClass to change txt textField according to my logic, what is the right approach?

Answer 1

Think of your Code Behind as a base class (or an Abstract Class). In an Abstract Class, it is really common for the actual implementation of methods or the "real objects" behind properties to be left to the extending class(es) to supply.

This is exactly like what you do when you set a base class in Flash to your custom Class, but the actual member objects (buttons, etc.) are provided on the stage of the MovieClip whose library instance is linked to your clip.

For more on code behind, check out my blog post here. If you'd like to check out the code for the template component described there, look here. Though template components are less useful in the Spark world (IMO).

Answer 2

All you do is make an AS file that has the same base class as whatever your MXML object was initially set up as, for example if it's a VGroup make MyBaseClass extends VGroup, then change the VGroup to MyBaseClass.

Example

[Main.mxml]

<main:MainBase 
   xmlns:main="*"
   ...>
</main:MainBase>

[MainBase.as]

public class MainBase extends Application

Answer 3

An elegant way would be implementing IMXMLObject. When implementing this interface, the IMXMLObject#initialize method will take the component (named document of type Object) and an optional id (of type String) as arguments and u can easily implement this pattern. The big advantage is, that you use composition over inheritance and when using interfaces, you can use it as some sort of type save mix-in as view behavior:

    package net.icodeapp.examples.views
    {
      import flash.events.MouseEvent;

      import mx.core.IMXMLObject;
      import mx.events.FlexEvent;

      public class ViewBaseModel implements IMXMLObject
      {
        //-------------------------------------------------------------------------
        //
        //          Properties
        //
        //-------------------------------------------------------------------------

        private var _id:String;

        private var _viewBase:ViewBase;

        protected function set viewBase(value:ViewBase):void
        {
          _viewBase = value;

          if (!_viewBase)
            throw new ArgumentError('View must be instance of ViewBase');

          if (!_viewBase.initialized)
            _viewBase.addEventListener(FlexEvent.CREATION_COMPLETE, viewBase_creationCompleteHandler, false, 0, true);
          else
            viewCreationCompleted();
        }

        //-------------------------------------------------------------------------
        //
        //          Constructor
        //
        //-------------------------------------------------------------------------

        public function ViewBaseModel()
        {
        }

        //-------------------------------------------------------------------------
        //
        //          Methods
        //
        //-------------------------------------------------------------------------

        public function initialized(document:Object, id:String):void
        {
          viewBase = document as ViewBase;
          _id = id;
        }

        private function viewCreationCompleted():void
        {
          _viewBase.addEventListener(MouseEvent.CLICK, viewBase_clickHandler);
        }

        //-------------------------------------------------------------------------
        //
        //          Event Handler
        //
        //-------------------------------------------------------------------------

        private function viewBase_creationCompleteHandler(event:FlexEvent):void
        {
          viewCreationCompleted();
        }

        private function viewBase_clickHandler(event:MouseEvent):void
        {
          // todo: do some action
        }
      }
    }

The model is initialized and references are set by the framework. When taking a peek at the generated ActionScript code you'll see, that IMXMLObject#initialize it called in the constructor after the model is instantiated.

    <?xml version="1.0"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:views="net.icodeapp.examples.views.*">
      <fx:Declarations>
        <views:ViewBaseModel/>
      </fx:Declarations>
    </s:Group>

The model would receive by events by the view and can call methods on it.