Flex - How to access component inside another component in MXML?

Question

I have two components. One is called "InsideComp" and one is called "OutsideComp". OutsideComp has InsideComp as one piece of its component, and in my main MXML file, I have embedded an instance of OutsideComp. How do I access a public variable of InsideComp within my main MXML file?

In Actionscript, I could just do something like: OutsideComp.InsideComp.valToChange = 5;

But I dont know how to do it in MXML. I know this is probably an easy question.

Answer 1

By setting the id property of the MXML component you effectively make it a public property accessible via dot-notation. "Accessing it via MXML" is sort of a trick question. You can use binding notation within an xml tag and bind the property to another property, or you can access it in your Script block in the normal AS3 fashion.

Answer 2

I'm updating the code here to include a reference to the outer class. I'm not 100% certain this is what you're looking for, but I'll do my best to give you a

OuterClass:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
    <local:InnerClass id="inner" width="100%" height="100%" />
</mx:VBox>

InnerClass:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:CheckBox id="innerCheckbox" selected="true" />
</mx:VBox>

Edit: Here's the updated version of the Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" xmlns:local="*">

    <mx:Binding source="{outer.inner.innerCheckbox.selected.toString()}"
                destination="checkLabel.text" />
    <mx:Label id="checkLabel" />
    <local:OuterClass id="outer" width="100%" height="100%" />
</mx:Application>

Here's a brief explanation of what this does:

1. There are 3 MXML files:

   • OuterClass: an MXML file which contains InnerClass
   • InnerClass: an MXML file which contains a checkbox
   • Application: the main app which contains the OuterClass

2. There is a binding in the Main app which takes the checkbox value (via the Object hierarchy) and sets the Label's text field appropriately. This works just like ActionScript would: with the . operator to access nested objects.

3. When the checkbox updates, the value of the Label updates accordingly.

Hope this makes things a little clearer.

Answer 3

I think the most direct way to answer this is to use a script tag. This will allow you to run the AS you're familiar with. First, you'll need to assign ids for each of the properties you want to edit.

<mx:Script>
   private function onCreationComplete (event:Event):void {
     idOfTheOutsideComp.idOfTheInsideComp.propertyName = newValue;
   }
</mx:Script>

I put this code inside of a creation complete handler because you can't simply run the code from within the Script tags, it needs to be run within a function.