Extending a spark list in Flex 4.5

Question

I need to create a custom component in Flex 4.5 by extending the spark list class. Basically, I want to add a new variable named "title" of type UIComponent. When this variable is set, I need to render it at the top of the list.

This would give me a list with a configurable title component that scrolls with the list. Should be simple but I can't figure out how it's done. I've looked all the way up the hierarchy of spark.components.List and spark.skins.mobile.ListSkin and read a few articles about skinning but all the tutorials are extremely simplified and don't show how to do something like this.

Any help? Thanks

Answer 1

I would look into the following flex POC: iOS Theme. There are multiple parts to the list, but you can download the example projects are on the page. The component is called the ListForm and there is a skin, an ActionScript component, and an Item Renderer. The IR is less important and you can create your own which matches what you need, but the ListForm.as file and the corresponding skin do pretty much what I gather you need.

Answer 2

Just create a new skin; and add the title section above the DataGroup.

You don't need to extend the List class unless you want to add new properties related to your title.

This is exactly what we did for our Mobile Flex DropDownList. Click the "Change Skins" button and select PopUpSkin 2. Then open the drop down; you'll she list in the pop up w/ a header above the list and a cancel button below it.

In practice, it is odd to use UIcomponent directly. Can you expand more on what you want to put in the title?