How do I create a custom Flex component that accepts elements inside it?

Question

I have the following code (exerpt):

<fx:Declarations>
    <fx:Array id="ribbonTabs">
        <fx:String>Home</fx:String>
        <fx:String>Help</fx:String>
    </fx:Array>
</fx:Declarations>

<cx:RibbonBar id="mainRibbon" tabs="{ribbonTabs}" />

The RibbonBar is a custom component I made, that basically has a TabNavigator in it and some other stuff. That code creates this:

As you can see, I'm using a public variable for the "tabs" property, but I want to write code so that I can do this:

<cx:RibbonBar id="mainRibbon">
    <fx:ArrayList>
            <fx:String>Home</fx:String>
            <fx:String>Help</fx:String>
    </fx:ArrayList>
</cx:RibbonBar>

...which would then create the same thing as the screenshot above.

How can I achieve this in Adobe Flex 4+? I'm really new to Flex so I would really appreciate commented code or some elaboration on the answers. Thanks!

Answer 1

Assuming your "tabs" is similar to the "Dataprovider", your code can be updated like this:

<cx:RibbonBar id="mainRibbon">
    <cx:tabs>
        <fx:ArrayList>
            <fx:String>Home</fx:String>
            <fx:String>Help</fx:String>
        </fx:ArrayList> 
    </cx:tabs>
</cx:RibbonBar>