Flex Monkey Patches

TileList with popup that deletes from dataProvider

October 29th, 2008 by Kyle
Tags: Flex, itemrenderer, popup
Posted in: Flex

I wrote a demo a while back for a customer to demonstrate the following scenario:

Tilelist populated by an arrayCollection of typed objects.

Tilelist has a custom itemRender that pops up a “view” of the data for the item in the tilelist that was clicked.

The popup can delete the related object from the dataProvider of the TileList, removing the popup and the corresponding item from the Tilelist.

Here is the app:

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:

Here is the app code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.managers.PopUpManagerChildList;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;

[Bindable]
private var catalog:ArrayCollection;

private var assets:Array = ["assets/putty.jpg", "assets/cantena.jpg", "assets/orb.jpg", "assets/globe.jpg", "assets/usbfan.jpg", "assets/hotsauce.jpg"];

private function initCatalog():void
{
catalog = new ArrayCollection();
for (var i:int=0;i<assets.length;i++){
var vo:MyVO=new MyVO(assets[i],assets[i]);
catalog.addItem(vo);
}
}

public function createPopup(event:ListEvent):void
{
var foo:String="bar";
var renderer:MyRenderer = event.itemRenderer as MyRenderer;
var pop:MyPopup = MyPopup(PopUpManager.createPopUp(this,MyPopup,false,PopUpManagerChildList.POPUP));
pop.vo=(event.target as TileList).selectedItem as MyVO;
pop.myparentDP=(event.target as TileList).dataProvider as ArrayCollection;

tilePopUps();

}

private function tilePopUps():void{
for (var i:int=0;i<systemManager.popUpChildren.numChildren;i++){
  var o:* = systemManager.popUpChildren.getChildAt(i);
  PopUpManager.centerPopUp(o)
  if(i!=0){
    o.x+=10*i;
    o.y+=10*i;
  }
}
}

]]>
</mx:Script>

<mx:TileList id="tileList"
dataProvider="{catalog}"
itemRenderer="MyRenderer"
columnCount="3"
columnWidth="140"
rowCount="1"
rowHeight="140"
themeColor="haloSilver"
verticalScrollPolicy="on"
itemClick="createPopup(event);"
creationComplete="initCatalog();"/>

</mx:Application>

Here is the itemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">

<mx:Image source="{data.asset}" scaleX=".25" scaleY=".25"/>
<mx:Label text="{data.title}" />
</mx:VBox>

Here is the simple popup:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">

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

public var myparentDP:ArrayCollection;
[Bindable]
public var vo:MyVO;

private function removeItem():void{
var i:int = myparentDP.getItemIndex(vo);
if (i!=-1){
myparentDP.removeItemAt(i);
}
PopUpManager.removePopUp(this);
}

]]>
</mx:Script>

<mx:Image source="{vo.asset}" />
<mx:Label text="{vo.title}" />
<mx:HBox>
<mx:Button label="close" click="PopUpManager.removePopUp(this)"/>
<mx:Button label="remove item" click="removeItem()"/>
</mx:HBox>
</mx:TitleWindow>

Here is the type value object that populates the ArrayCollection:

package
{
[Bindable]
public class MyVO
{

private var _asset:String;
private var _title:String;

public function MyVO(title:String, asset:String)
{
this.title=title;
this.asset=asset;
}

public function set title(title:String):void{
_title=title;
}

public function get title():String{
return _title;
}

public function set asset(asset:String):void{
_asset=asset;
}

public function get asset():String{
return _asset;
}

}
}

Share and Enjoy: