Adobe Flex - Display a Visual Element from HostComponent in MXML

Question

I have got a SkinnableComponent:

public class ContentView extends SkinnableComponent
{       
    [Bindable]
    public var titleBar:IVisualElement;

    public function ContentView(pContentXML:XML)
    {
        this.setStyle("skinClass", ContentViewSkin );
    }
}

and now i want to display the titleBar in the mxml skin file.

    <?xml version="1.0" encoding="utf-8"?>
    <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Metadata>   
      [HostComponent("EMM.App2Go.Viewer.Component.ContentView")]
</fx:Metadata>

<s:DataGroup width="100%" >
    <s:dataProvider>
        <s:ArrayList source="{hostComponent.titleBar}" />
    </s:dataProvider>
</s:DataGroup>  

as you can see I managed it with a DataGroup but this is kind of ugly, and I was thinking about an easier way to do this like

<fx:Object source="hostComponent.titleBar" />

or something like that.

I hope you can help me.

Answer 1

You seem to have a deep misunderstanding of how the Spark SKinning Model should work. You should not reference the hostComponent from the skin in order to display items. You should create the element in the skin; and use the same name. So if the hostComponent has a skin part defined like this:

[Bindable]
[SkinPart]
public var titleBar:IVisualElement;

the skin should have something like this:

<s:DataGroup width="100%" id="titleBar" >
</s:DataGroup>

I suggest reading through this information on Spark Skinning, and also learn the Component LifeCycle.