How would I include an MXML file inline another MXML file?

Question

I would like to include an MXML file in my MXML file in the same way you can include an external file in AS3 using the include directive. Using the include directive brings the code from the external file into the original file at compile time placing it in the same scope.

For example,

Application.mxml:

<Application>

    <source="external.mxml"/>

</Application>

External.mxml:

<Styles/>

<Declarations>
    <Object id="test"/>
</Declarations>

I need to keep this code/mxml/xml in the external file in scope with the original. Do not ask me why I want to do this.

Another example. Here is my current code (simplified) all in 1 mxml file:

...

File1.mxml
<Button click="clickHandler()"/>

<Script>
public function clickHandler():void {

}
</Script>

...

Here is what I want:

...

File1.mxml
<Group>

    <source="File2.mxml"/>

    <Button click="clickHandler()"/>

<Group>


File2.mxml
<Script>
public function clickHandler():void {
    trace(this); // File1.mxml
}
</Script>

...

I want to split my code out into a separate file...

~~ Update ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Though NOT what I was asking for using a "code behind" scheme achieves partial credit to breaking the code out of the view. So I create a MXML file, MyGroup.mxml or MyGroup.as and that extends Group that contains the clickHandler code.

The problem with this method is that I am then locked to the class type I'm extending, hardcoding the view. So for example I would have to extend Group if the MXML class I want to split into separate files is a Group.

I've worked on projects where this was done and it is not good. People start setting styles and visual aspects or group / view specific properties in the code behind class and later if or when we need to change it or the layout it we have end up with all these dependencies to the container. It becomes a mess. Plus, using Code Behind you can't reuse it (reuse in the way include styles.as is reused). So this is not a solution but thought I'd mention it.

Here is a code behind example,

MyGroupBehind.mxml:

<Group>

   <Script>
   public function clickHandler():void {
       trace(this); // File1.mxml
   }
   </Script>

</Group>

MyGroupAhead.mxml:

<MyGroupBehind>

    <Button click="clickHandler()"/>

</MyGroupBehind>

Answer 1

MXML is converted into a class by the compiler, so there is no way to do what you are asking.

Personally, I think that is a good thing. Breaking things up into separate files does not equal "more organized". In fact I would say it achieves the exact opposite effect. You would do better to focus on a proper component structure, IMHO.

Answer 2

Just start typing the name of your custom component, then press Ctrl+Space. Code completion will populate a list of possible things you might want to add, including the name of your component. Use the down arrow to select your component's name, then press enter. Code completion will set up the namespace and start the tag for your component. If you go to the end of the line and type "/>" (no quotes), voila! you will have an inline tag that represents your custom MXML component.

Answer 3

First of all, any external mxml should be a valid XML. Now, as long as you have a valid MXML file, you simply add it by its name like below:

<Application>
<external:External/>
</Application>

Where 'external' is the namespace for your External.mxml file.

Answer 4

Say my MXML file is called Example in the views folder. Simply call it within the parent MXML file you want this to be in

e.g.

<views:Example/>