Flex mxml 自定义组件 - 如何添加 uicomponents? [英] Flex mxml custom component - how to add uicomponents?

问题描述

如何将 uicomponent 传递给 mxml 自定义组件?
例如:我想传入任意数量的按钮，并且我希望我的自定义组件按特定顺序排列它们.

how to I pass in a uicomponent to a mxml custom component?
ex: I want to pass in any number of buttons, and I want my custom component to lay them out in a certain order.

MainApp.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:

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' />

推荐答案

您似乎正在尝试重新创建 SDK 中已存在的功能.这是 SkinnableContainer 的用途.
根据您的用例，有两种使用方式:

You seem to be trying to recreate functionality that already exists in the SDK. This is wat SkinnableContainer is for.
Depending on your use case, there are two ways to use it:

您只需要向您的自定义组件添加一些自定义图形元素，而无需添加其他行为

在这种情况下，您可以简单地重用 SkinnableContainer 并为其分配自定义皮肤，如下所示:

In this scenario, you would simple reuse SkinnableContainer and assign it a custom skin, like so:

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

使用 MySkin.mxml 可能类似于:

With MySkin.mxml perhaps something like:

<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.

Your Buttons will now automatically be added to the contentGroup; the SkinnableContainer class handles this for you. Note that this Group must have exactly that id; it's a required SkinPart.

您想为组件添加一些行为

过程是相同的，但您现在将继承 SkinnableContainer(这通常在纯 ActionScript 中完成)，在其中编写一些行为，并将皮肤分配给此类的一个实例.

The procedure is the same, but you would now subclass SkinnableContainer (this is usually done in pure ActionScript), write some behaviour in there, and assign the skin to an instance of this class.

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！