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

Question

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

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

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

<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、工具箱、displayArea）。我希望能够设置它们的高度、宽度、背景、x、y、水平中心等，就像我可以通过 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 组件生命周期（请参阅此处< /a> 或此处）。因此，在您的代码中，您应该在 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>