How can I edit the objects within custom AS3 components using MXML?

Question

I'm writing a Flex application using Flash Builder 4 and I'm having a bit of trouble with an AS3 object. Essentially, it is a BorderContainer, with a few buttons and images, and programming logic that determines how these interact with eachother and a database.

What I want to be able to do is configure the layout/style of the inner components using MXML and CSS. I can configure the inherited objects, but not ones that I have defined...

For example, in my MXML. I can modify the (inherited) borderstroke variable of myContainer like so;

<IE:MyContainer>
    <IE:borderStroke>
        <s:LinearGradientStroke weight="10" rotation="270">
            <s:GradientEntry color="0xF655E5"/>
            <s:GradientEntry color="0x6600CC"/>
        </s:LinearGradientStroke>
    </IE:borderStroke>
</IE:MyContainer>

However, I can't edit the nextButton variable (which is of type Button) like this;

<IE:MyContainer>
    <IE:nextButton width="100" height="30" left="10%" bottom="10%"/>
</IE:MyContainer>

If I try, I get the compile error "Could not resolve to a component implementation".

What do I need to do to make this work?!

Thanks in advance, Aidan

EDIT: Here's the main method of MyContainer (actually named InvestigativeEnvironment). The call to defineTestInvestigativeEnvironment() is what takes care of setting up the objects and action listeners and such. What I want to do is change the layout and appearance of these visual components in MXML (nextButton, prevButton, toolbox, displayArea). I want to be able to set their height, width, background, x, y, horizontalCenter, etc like I can to a button that I add to a container via MXML.

public class InvestigativeEnvironment extends BorderContainer
    {
        private var toolbox:Toolbox;        
        private var bodySystem:BodySystem;      
        public var nextButton:Button;
        public var prevButton:Button;       

        private var displayArea:Group;
        private var image:Image;    
        private var toolDisplayArea:Group;

        public function InvestigativeEnvironment()
        {
            super();

            //create 'Next' button and event listener
            nextButton = new Button();
            nextButton.addEventListener(MouseEvent.CLICK, nextViewAngle);
            nextButton.label = "Next";
            this.addElement(nextButton);

            //create 'Prev' button and event listener
            prevButton = new Button();
            prevButton.addEventListener(MouseEvent.CLICK, prevViewAngle);
            prevButton.label = "Prev";
            this.addElement(prevButton);

            //define investigative environment by creating models.
            defineTestInvestigativeEnvironment();   

            //Instantiate the Group that contains the model image and tool overlays
            displayArea=new Group();

            //Instantiate the image that is used to display the model
            image = new Image();    
            image.source=bodySystem.getImage();
            image.horizontalCenter=0;
            image.verticalCenter=0;
            displayArea.addElement(image);

            //add toolOverlayContainer to the display area ABOVE the model image            
            toolDisplayArea = new Group();
            toolDisplayArea.verticalCenter=0;
            toolDisplayArea.horizontalCenter=0;
            displayArea.addElement(toolDisplayArea);

            this.addElement(displayArea);

            //add toolbox to display
            toolbox = new Toolbox(toolDisplayArea);
            toolbox.replaceTools(bodySystem.getToolGroup());
            this.addElement(toolbox);
        }

Please add code listing what is your edits are and what line in particular produces this error. — Constantiner
@Constantiner Just a second... adding the code in the comments isn't going so well. I'll add it to the original question. — user726492

Constantiner Constantiner · Accepted Answer · 2011-04-28T07:17:11

I can't understand what is your problem with editing button in particular, sorry for that. But I have a lot of notices about your InvestigativeEnvironment which code you've attached.

First, you haven't follow Flex components livecycle (see here or here). So in your code you should add and configure children in createChildren() method.

But anyway you can't use your container to add children both with MXML and from code. If your adding custom components code will be executed first MXML (in your implementation with adding them in constructor it is so) all the MXML tags just remove all your added content (anyway result will be unpredictable). In other case it will be very hard to control instance's order.

I can suggest you to declare your nextButton etc as skin parts and perform their positioning in skin. This way these internal controls will be a part of border and you can add MXML children without any problem. And you can configure them within partAdded() method.

How can I edit the objects within custom AS3 components using MXML?

2 Answers