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屋！