MXML und Actionscript trennen

Question

Von diesem Tutorial http://www.brighthub.com/internet/web-development/articles/11010.aspx Ich fand den folgenden Code. Gibt es eine Möglichkeit, dies zu lösen, so dass die mxml-Datei nur die mxml hat und der Code zwischen den Skript-Tags in eine ActionScript-Datei geschrieben wird?

Danke.

-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

Es gibt mehrere Möglichkeiten, dies in Flex zu erreichen:

• den AS-Code in einer .as Datei Setzen und nutzen die "source = yourfile.as" attribute in the Script tag:

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

Sie können verwenden auch die includes="yourfile.as" Erklärung w/im Tag-Script:

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

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

---

• Verwenden Sie ein Code-Behind Muster, in dem Sie den Code in eine AS-Datei definieren, welche die visuelle Komponente erweitert Sie Ihre MXML-Datei erweitern möchten. Dann erweitert Ihre MXML-Datei einfach die AS-Datei und Sie haben (über Vererbung) Zugriff auf den gesamten Code. Es wäre etwa so aussehen (ich bin nicht sicher, ob dies für das Haupt MXML-Datei arbeiten würde, die Application erweitert):

AS Datei:

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

MXML Datei:

<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> 

• Verwenden Sie ein Framework, um die Funktionalität zu injizieren, die Sie suchen als eine Art "Modell", die die Datenfunktionalität enthält, die Sie verwenden werden. Es würde aussehen etwas wie dies in Petersilie:

  <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> 
  

Zwei Frameworks, die in den Sinn kommen, die w/Injektion helfen können, sind Mate oder Parsley.

---

Ich bin mir nicht sicher, ob das Code-Behind-Muster mit der Haupt-MXML-Datei arbeitet (die Anwendung erstreckt), so dass, wenn Sie Probleme haben, können Sie versuchen, den Inhalt in Ihrem Haupt MXML-Datei Ausbrechen in eine separate Komponente, die in Main enthalten ist. Es könnte wie folgt aussehen:

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.als

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

Von dem, was ich von Flex-Architektur sammeln konnte, ist dies eine sehr häufige Art und Weise der Anwendung der Einrichtung: Ihre Haupt MXML enthält eine einzige „Ansicht“, die der Einstiegspunkt zu der ist Rest Ihrer Bewerbung. Diese Ansicht enthält alle anderen Ansichten, aus denen die App besteht.

Hoffe das macht Sinn :)