Anuj Gakhar

I had this requirement recently come up at work, where I had to add separators to a List. The List was grouped by items of certain types and after each type of items, a separator was required. To give you a better idea of what I am talking about, I took this menu from my browser window (Firefox).

In the above menu, there are separators after “Web Search”, “Gears Settings” and so on…. this is the kind of thing I was trying to do. So, I will be working with the above menu in this post as well.

The approach I am going to take for this task is to create a custom Spark List that will be a subclass of List and will use the updateRenderer() function to determine if the item is the last item in the group or not. If the item is the last item in the group, then it would set a flag on the custom Item renderer and the renderer will then draw a horizontal separator only if the flag is set to true. Ofcourse, in this approach, the key is to have a field in the data which tells us how the items are grouped. Also, in order for the updateRenderer() function to be able to set the flag on the actual item renderer, I will be using an interface that the renderer will implement.

Let’s look at some code :-

The code for the main mxml file using the custom List is below. As you will see, I have created a simple VO/DTO called DataItem that holds 2 properties. type and label. type is the property that tells us how to group the items ie when to add a separator.

[as3]
<?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="599" minHeight="600"
creationComplete="init()"
xmlns:components="com.anujgakhar.components.*">

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var dataset:ArrayCollection;

private function init():void
{
dataset = new ArrayCollection();
dataset.addItem(generateDataItem(‘search’,’Web Search’));
dataset.addItem(generateDataItem(‘browsertools’,’Downloads’));
dataset.addItem(generateDataItem(‘browsertools’,’Add-ons’));
dataset.addItem(generateDataItem(‘browsertools’,’Gears Settings’));
dataset.addItem(generateDataItem(‘devtools’,’Charles’));
dataset.addItem(generateDataItem(‘devtools’,’Web Developer’));
dataset.addItem(generateDataItem(‘devtools’,’Firebug’));
dataset.addItem(generateDataItem(‘devtools’,’AMF Explorer’));
dataset.addItem(generateDataItem(‘devtools’,’Error Console’));
dataset.addItem(generateDataItem(‘devtools’,’FireFTP’));
dataset.addItem(generateDataItem(‘devtools’,’Page Info’));
dataset.addItem(generateDataItem(‘devtools’,’Dust-Me Selectors’));
dataset.addItem(generateDataItem(‘browsing’,’Start Private Browsing’));
dataset.addItem(generateDataItem(‘browsing’,’Clear Recent History’));
dataset.addItem(generateDataItem(‘browsing’,’Pencil Sketching’));
}

private function generateDataItem(type:String, label:String):DataItem
{
var item:DataItem = new DataItem();
item.type = type;
item.label = label;
return item;
}
]]>
</fx:Script>
<s:HGroup paddingTop="20" paddingLeft="20">
<components:GroupedList
id="menu"
groupedItem="type"
dataProvider="{dataset}"
width="200" height="320"
itemRenderer="GroupedListItemRenderer" />
</s:HGroup>
</s:Application>

[/as3]

The DataItem VO/DTO looks like this :-

[as3]
package
{
public class DataItem
{
[Bindable] public var type:String;
[Bindable] public var label:String;
}
}
[/as3]

The Custom ItemRenderer (GroupedListItemRenderer) looks like this :-

[as3]
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
implements="com.anujgakhar.components.IGroupedItemRenderer"
xmlns:components="com.anujgakhar.components.*">
<fx:Script>
<![CDATA[

[Bindable]
private var item:DataItem;

[Bindable]
private var _isLastItemInGroup:Boolean;

public function set isLastItemInGroup(value:Boolean):void
{
_isLastItemInGroup = value;
}

override public function set data(value:Object):void
{
if(value && value is DataItem)
{
item = DataItem(value);
}
}
]]>
</fx:Script>

<s:layout>
<s:VerticalLayout gap="3"/>
</s:layout>

<s:Label text="{item.label}" width="100%"
verticalAlign="middle"
horizontalCenter="0" height="20" paddingLeft="5" paddingTop="2"/>

<components:HDivider
width="100%"
includeInLayout="{_isLastItemInGroup}"
visible="{_isLastItemInGroup}"/>
</s:ItemRenderer>

[/as3]

You will notice that this ItemRenderer implements the Custom Interface IGroupedItemRenderer which is simply forcing the ItemRenderer to implement a set isLastItemInGroup() function.

[as3]
package com.anujgakhar.components
{
import mx.core.IDataRenderer;

public interface IGroupedItemRenderer extends IDataRenderer
{
function set isLastItemInGroup(value:Boolean):void;
}
}
[/as3]

And finally, the Custom GroupedList component :-

[as3]
package com.anujgakhar.components
{
import mx.core.IVisualElement;

import spark.components.List;

public class GroupedList extends List
{
public function GroupedList()
{
super();
}

[Bindable]
public var groupedItem:String;

override public function updateRenderer(renderer:IVisualElement, itemIndex:int,
data:Object):void
{
if (renderer is IGroupedItemRenderer)
{
var lastItemInGroup:Boolean = false;
if (dataProvider.length > (itemIndex + 1))
{
var thisItem:String = dataProvider.getItemAt(itemIndex)[groupedItem];
var nextItem:String = dataProvider.getItemAt(itemIndex + 1)[groupedItem];
if (thisItem != nextItem)
{
lastItemInGroup = true;
}

}
IGroupedItemRenderer(renderer).isLastItemInGroup = lastItemInGroup;
}

super.updateRenderer(renderer, itemIndex, data);
}
}
}
[/as3]

And this is how the final product looks like. View source is enabled so you can right click and view source for this if you wish to. Please note that in this example, I have not tried to mimick the look n feel of the original menu I used so there is pretty much no skinning/styling on this.

[SWF]/wp-content/listdemo/SparkMenu.swf, 390, 390[/SWF]

P.S.  A reader has posted a Romanian translation of this blog post here. http://webhostinggeeks.com/science/adding-separators-ro