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

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.