Advanced Flex List Control for Mobile Devices
How to build a mobile list control with delete function…
I’m surprised that Adobe has forgotten such an obvious thing like a list control with delete function in its Flex mobile framework. You know it from the iPhone: just wiping over an item with your finger shows a delete button, on which you can click to delete the item. I’ve researched for solutions to realise such a list with Flex at our well known Flexperts, but without any success. So let’s try it ourself…
My approach is subclassing a List in combination with an IconItemRenderer. The renderer is prepared to handle gestures and listens to the (s)wipe gesture.
{
Multitouch.inputMode = MultitouchInputMode.GESTURE;
this.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
…
}
The handler function – when detecting a left-to-right-swipe – adds my self-defined trash group to the renderer’s ui:
{
…
if ((event.offsetX == 1) && (FLAGSTATE == 2))
{
this.addChild(trash);
trash.visible = true;
…
}
…
}
Here’s th MXML-Declaration of trash:
<s:Group id="trash" width="{this.width}" height="{this.height}">
<icons:trash_small id="icnTrash"
right="10" verticalCenter="0"
click="icnTrash_clickHandler(event)"
/>
</s:Group>
</fx:Declarations>
As you can see, trash includes only a simple trash icon that you can click on.
The handler function of the icon dispatches my self-defined AdvancedListEvent (at the level of List!) including the data of the item that should be deleted.
{
var myDeleteEvent:AdvancedListEvent = new AdvancedListEvent(AdvancedListEvent.DELETE_ACTION);
myDeleteEvent.data = this.data;
list.dispatchEvent(myDeleteEvent);
}
At the level of Application or View (or wherever you placed your AdvancedMobileList) you can listen to the delete event and do all the deleting stuff.
…
protected function deleteHandler(event:AdvancedListEvent):void
{
for (var i:int=0; i<list.dataProvider.length; i++)
{
if (list.dataProvider.getItemAt(i) == event.data)
{
list.dataProvider.removeItemAt(i);
return;
}
}
}
Well, that’s a simplified explanation of my AdvancedMobileList. Two features that I didn’t explain:
-
My
AdvancedMobileList has an autoDelete property. If set to true, the list itself handles the deletion of an item.I use a wipe effect to wipe my trash icon in and out. And to precisely handle the effect, I had to code a few additional things.
You can download the complete project files – embedded in an example – from here.
Feel free to use it for your own purposes!
P.S.:
When you want to use an IconItemRenderer you should use my AdvancedMobileListItemRenderer. Look at the AmericanPresidents view in my example for details. You’ll see, it has never been so easy to get rid of a president ;-).
Schlagworte: Android, FlashBuilder, Flex, iPad, iPhone
