Separating MXML and Actionscript

Question

From this tutorial http://www.brighthub.com/internet/web-development/articles/11010.aspx I found the code below. Is there a way to break this out so the mxml file just has the mxml, and the code between the script tags is put in an actionscript file?

Thanks.

-Nick

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="600"
    height="400"
    frameRate="100"
    creationComplete="CreationComplete()"
    enterFrame="EnterFrame(event)">
    <mx:Script><![CDATA[
        public function CreationComplete():void
        {

        }

        public function EnterFrame(event:Event):void
        {

        }
    ]]></mx:Script>
</mx:Application>

Answer 1

There are several ways of achieving this in Flex:

• Put the AS code in a .as file and use the "source=yourfile.as" attribute in the Script tag:

<mx:Script source="yourfile.as" />

You can also use the includes="yourfile.as" declaration w/in the Script tag:

<mx:Script
    <![CDATA[
        include "yourfile.as";

        //Other functions
    ]]>
</mx:Script>

---

• Use a Code-Behind pattern where you define the code in an AS file which extends the visual component you want your MXML file to extend. Then your MXML file simple extends the AS file and you have (via inheritance) access to all the code. It would look something like this (I'm not sure if this would work for the main MXML file which extends Application):

AS File:

package {
    public class MainAppClass {
        //Your imports here
        public function CreationComplete():void {
        }
        public function EnterFrame(event:Event):void {
        }
    }
}

MXML File:

<component:MainAppClass xmlns:component="your namespace here"
                        xmlns:mx="http://www.adobe.com/2006/mxml"
                        layout="absolute"
                        width="600"
                        height="400"
                        frameRate="100"
                        creationComplete="CreationComplete()"
                        enterFrame="EnterFrame(event)">
</component:MainAppClass>

---

• Use a framework to inject the functionality you are looking for as a type of "model" which contains the data-functionality you will use. It would look something like this in Parsley:

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="absolute"
              width="600"
              height="400"
              frameRate="100"
              creationComplete="model.CreationComplete()"
              enterFrame="model.EnterFrame(event)">
  
              <mx:Script>
                  <![CDATA[
                      [Inject]
                      [Bindable]
                      public var model:YourModelClass;
                  ]]>
             </mx:Script>
     </mx:Application>
  

Two frameworks which come to mind which can help w/injection are Mate or Parsley.

---

I'm not sure if the code-behind pattern works with the main MXML file (which extends Application), so if you're having problems, you might try breaking out the content in your Main MXML file into a separate component which is included in Main. It might look something like this:

Main.mxml:

<mx:Application blah,blah,blah>
    <component:YourComponent />
</mx:Application>

YourComponent.mxml:

<component:YourComponentCodeBehind creationComplete="model.creationComplete()"...>
  //Whatever MXML content you would have put in the Main file, put in here
</component:YourComponentCodeBehind>

YourComponentCodeBehind.as

package {
    class YourComponentCodeBehind {
        //Whatever AS content you would have put in the Main .as file, put in here
    }
}

From what I've been able to gather from Flex architecture, this is a very common way of setting up your application: your main MXML includes a single "view" which is the entry-point to the rest of your application. This view the contains all other views which comprise the app.

Hope that makes sense :)