This is an example of creating feature rich item renderers in Flex 4. The example retrieves this blog's RSS feed and displays each entry in a Spark List using Item Renderers. This example will demonstrate:
- Skinning an item renderer and list
- States in an item renderer
- Pass callback function to item renderer
- Override ItemRenderer 'set data' as a known ValueObject
- Swap icons/images based on data values
View the Example with source view enabled
This blog post will cover the main points of the example but not the entire code, so view the example's source view to see all the code in full.
Getting Blog Entries From RSS
I won't go into too much detail about how the data is retrieved, view the source for all the details. The RSSService class makes a request to this blog's RSS url. That XML responce is turned into an ArrayCollection of BlogEntryVO value objects. The result ArrayCollection is set as the data provider for the Spark List.
Skinning the Spark List
Spark List:
The first step in skinning the Spark List is to define the 'skinClass':
<s:List id="blogList" skinClass="com.themorphicgroup.skins.list.ListSkin" change="blogList_selectionHandler(event)" caretChange="blogList_selectionHandler(event)" />
Skinning Spark List:
Lets look at the 'com.themorphicgroup.skins.list.ListSkin' List skin class. The most important parts of this skin is the 'Scroller' and 'DataGroup' it surrounds.
The DataGroup is a simple container class in Flex 4 for holding data items and item renderers. The Scroller enables the DataGroup items to be scrolled. Full List skin code:
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Metadata> [HostComponent("spark.components.List")] </fx:Metadata> <s:states> <s:State name="normal" /> <s:State name="over"/> </s:states> <!-- background --> <s:Rect top="0" right="0" bottom="0" left="0"> <s:stroke> <s:SolidColorStroke color="0x999999" weight="2"/> </s:stroke> <s:fill> <s:SolidColor color="0xffffff" color.over="0xf8f8f8" /> </s:fill> </s:Rect> <!-- scroller --> <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" horizontalScrollPolicy="off" minViewportInset="1" focusEnabled="false"> <!-- container for data--> <s:DataGroup id="dataGroup"> <s:layout> <s:VerticalLayout gap="0" horizontalAlign="contentJustify" /> </s:layout> </s:DataGroup> </s:Scroller> </s:SparkSkin>
Skinning Spark List and global vertical scrollers:
The last thing we will look at in skinning the List is the skin for the Scroller (VScroll). The skin classes for the scroller are in com.themorphicgroup.skins.scroller.vertical
To define the 'VerticalScrollbar' Skin to all Spark VScrollBar we do that in the css file:
s|VScrollBar { skinClass: ClassReference("com.themorphicgroup.skins.scroller.vertical.VerticalScrollbar"); }
Define an ItemRenderer for the Spark List
In creationComplete we will create the item renderer for the Spark List, we will also define any needed properties.
In this case we want to pass in a callback funtion for when the delete icon is clicked in an item renderer.
//create itemrenderer protected function application_creationCompleteHandler(event:FlexEvent):void { //create itemrenderer blogListItemRenderer = new ClassFactory(BlogEntryItemRenderer); //define properties (callback for item delete) blogListItemRenderer.properties = {deleteHandlerFunction:itemDeleteClick_handler}; //set itemrenderer to List blogList.itemRenderer = blogListItemRenderer; .... } //callback function for delete click private function itemDeleteClick_handler(blogEntryItem:BlogEntryVO):void { ...
Inside the Item Renderer when the delete icon is clicked the callback function is passed the current item renderer's data (a value object):
public var deleteHandlerFunction:Function; private function trash_btn_clickHandler(event:MouseEvent):void { //callback function pass BlogEntryVO value object deleteHandlerFunction(blogEntry); }
The ItemRenderer
Setting data in the ItemRenderer:
In the 'BlogEntryItemRenderer' we will override the the set data function and set a BlogEntryVO with the data of the item renderer:
private var blogEntry:BlogEntryVO override public function set data(value:Object):void { super.data = value; if (value is BlogEntryVO) { blogEntry = BlogEntryVO(value); } }
Displaying data in the ItemRenderer:
To display the data values in the itemrenderer we will override updateDisplayList and set values to Labels etc:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth,unscaledHeight); if (title_lbl) { title_lbl.text = blogEntry.title; ...
Skinning and States in the ItemRenderer
To make the item renderer more attractive and interactive we will create some states. In Flex 4 you can specify not only the name of a state but a name that will define a group of states:
<s:states> <s:State name="normal" /> <s:State name="hovered" stateGroups="[hoveredStates]" /> <s:State name="selected" stateGroups="[selectedStates]" /> <s:State name="normalAndShowsCaret" /> <s:State name="hoveredAndShowsCaret" stateGroups="[hoveredStates]" /> <s:State name="selectedAndShowsCaret" stateGroups="[selectedStates]" /> </s:states>
Having the state and stateGroups names means we can define properties for those states. For example with can set the alpha of the background color as alpha='0' and them the when we are in one of the hovered states as alpha.hoveredStates='.1':
<s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="0x6699cc" alpha="0" alpha.hoveredStates=".1" alpha.selectedStates=".25" /> </s:fill> </s:Rect> <s:Label id="title_lbl" maxDisplayedLines="1" styleName="myriad" left="10" top="10" right="26" textDecoration.hoveredStates="underline" fontWeight.selectedStates="bold" color="#000000" fontSize="14"/>
Summary
This blog post does not cover every bit of code in the example so View the Example with source view enabled.
