Question

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

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

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

<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，horizontalCenter等设置为我通过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>

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

2 个答案: