Flex mxml自定义组件-如何添加uicomponents？

Question

如何将uicomponent传入mxml自定义组件？

例如:我想传入任意数量的按钮，并且我想让我的自定义组件以特定的顺序排列它们。

MainApp.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           minWidth="955" minHeight="600" xmlns:local="*"
           >

<local:myComp >
   <s:Button label='Button1' />
   <s:Button label='Button2' />
   <!--I want to add anything else here -->
</local:myComp>

​

myComp.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     creationComplete="init()"
     width="400" height="300"
     >


<fx:Script>
    <![CDATA[
        private function init():void {
        // how do I access the added components and place them where I want?
        // do I use removeChildren and AddChildren?
        // addItemsHere.addchild(nextButton);
    ]]>
</fx:Script>

<s:HGroup id='addItemsHere' />

​

Answer 1

因为你的组件扩展了Group，所以你应该使用addElement而不是addChild (对于所有其他名称中有‘Group’的方法，它应该被替换为'element‘。因此，对所有元素的访问将如下所示：

for(var i:int =0; i < numElements; i++){
   var button:Button = Button(getElementAt(i));
   doWhatIWantWithMyButton(button);
}

如果您知道要在创建时添加什么，那么最好覆盖组件的createChildren方法。

如果您不需要非常具体的按钮放置，您可以将组件的layout属性设置为任何所需的布局(例如VerticalLayout )，这些布局是可调的。

Answer 2

您似乎正在尝试重新创建SDK中已存在的功能。这就是SkinnableContainer的用途。

根据您的用例，有两种使用方法：

你只需要在你的定制组件中添加一些定制的图形元素，而不需要额外的行为

在这个场景中，您可以简单地重用SkinnableContainer并为其分配一个自定义皮肤，如下所示：

<s:SkinnableContainer skinClass="MySkin">
    <s:Button label='Button1' />
    <s:Button label='Button2' />
</s:SkinnableContainer>

对于MySkin.mxml，可能是这样的：

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:layout>
         <s:VerticalLayout/>
    </s:layout>

    <s:Label text="I'm a SkinnableContainer"/>

    <s:Group id="contentGroup" width="100%" height="100%">

 </s:SkinnableContainer>

您的按钮现在将自动添加到contentGroup中；SkinnableContainer类将为您处理此操作。请注意，此组必须具有该id；它是必需的SkinPart。

要向组件中添加一些行为，请执行以下操作

过程是相同的，但是你现在可以子类化SkinnableContainer (这通常是在纯ActionScript中完成的)，在里面编写一些行为，并将皮肤分配给这个类的一个实例。

public class MyComp extends SkinnableContainer {
    //additional behaviour goes here
}

用法：

<local:MyComp skinClass="MySkin">
    <s:Button label='Button1' />
    <s:Button label='Button2' />
</local:MyComp>