如何使用 MXML 编辑自定义 AS3 组件中的对象？

Question

我正在使用 Flash Builder 4 编写 Flex 应用程序，但我在使用 AS3 对象时遇到了一些问题。本质上，它是一个 BorderContainer，带有一些按钮和图像，以及确定它们如何与彼此和数据库交互的编程逻辑。

我想要做的是使用 MXML 和 CSS 配置内部组件的布局/样式。我可以配置继承的对象，但不能配置我定义的对象...

例如，在我的 MXML 中。我可以像这样修改 myContainer 的（继承的）borderstroke 变量；

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

但是，我不能像这样编辑 nextButton 变量（Button 类型）；

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

如果我尝试，我会收到编译错误“无法解析为组件实现”。

我需要做什么才能完成这项工作？！

提前致谢， 艾丹

编辑： 这里是 MyContainer 的主要方法（实际命名为 InvestigativeEnvironment）。 对 defineTestInvestigativeEnvironment() 的调用负责设置对象和动作侦听器等。我想要做的是改变这些可视化组件在 MXML 中的布局和外观（nextButton、prevButton、toolbox、displayArea）。我希望能够设置它们的高度、宽度、背景、x、y、horizo​​ntalCenter 等，就像我可以通过 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);
        }

Answer 1

我不明白您在编辑按钮方面有什么问题，对此深表歉意。但是我有很多关于您的InvestigativeEnvironment 的通知，您附加了哪些代码。

首先，您没有关注 Flex 组件的生命周期（请参阅 here 或 here）。因此，在您的代码中，您应该在 createChildren() 方法中添加和配置子项。

但无论如何，您不能使用您的容器通过 MXML 和代码添加子级。如果您添加的自定义组件代码将首先执行 MXML（在您的实现中将它们添加到构造函数中就是这样），所有 MXML 标记只会删除您添加的所有内容（无论如何结果将是不可预测的）。在其他情况下，将很难控制实例的顺序。

我可以建议您将您的nextButton 等声明为皮肤部件并在皮肤中执行它们的定位。这样，这些内部控件将成为边框的一部分，您可以毫无问题地添加 MXML 子项。您可以在partAdded() 方法中配置它们。

Answer 2

事实证明，我并没有问对正确的问题。我想编辑组件，特别是它们的布局和颜色类型属性。

我需要做的是设置组件的 id，然后使用 CSS 定位它们。

对于我的 nextButton，我像这样添加 ID；

nextButton.id="nextButton";

然后我可以像这样在 MXML 文件（或外部样式表）中进行布局；

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace IE "InvestigativeEnvironment.*";

    IE|InvestigativeEnvironment s|Button {
        chromeColor: #336666;           
    }

    #nextButton {
        bottom: 100;
        right: 5;
    }       
</fx:Style>