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（对于名称中包含'child'的所有其他方法，它应替换为'element'。因此，访问所有元素将是这样的：

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

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

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

Answer 2

您似乎正在尝试重新创建SDK中已存在的功能。这是wat 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>

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

2 个答案: