DZone Snippets: TreeMap code

DeclarativeDescriptor an example of writing a custom DataDescriptor

middlec (Charlie) — Thu, 19 Jun 2008 20:05:07 GMT

Sometimes it becomes necessary to write a custom DataDescriptor for certain Flex controls (i.e. Tree, TreeMap, etc). This is a generic data descriptor that allows you to declare a single field name to be used for the children of the given node. This makes it easy to simple tell Flex to use any field instead of the default "children" field.



package {

	

	import mx.collections.ArrayCollection;

	import mx.collections.CursorBookmark;

	import mx.collections.ICollectionView;

	import mx.collections.IViewCursor;

	import mx.controls.treeClasses.ITreeDataDescriptor;

	import mx.events.CollectionEvent;

	import mx.events.CollectionEventKind;

	

	public class DeclarativeDescriptor implements ITreeDataDescriptor {

		

		private var _fieldname : String;

		

		public function DeclarativeDescriptor( fieldname : String ) {

			_fieldname = fieldname;

		}



		public function getChildren(node:Object, model:Object=null) : ICollectionView {

			if( node.hasOwnProperty( _fieldname ) ) {

				return node[_fieldname] is ICollectionView ? node[_fieldname] as ICollectionView : new ArrayCollection( node[_fieldname] );

			} else {

				return null;

			}

		}

		

		public function hasChildren(node:Object, model:Object=null) : Boolean {

			if( isBranch( node, model ) ) {

				var children : ICollectionView = getChildren( node, model );

				return children.length > 0;

			} else {

				return false;

			}

		}

		

		public function isBranch(node:Object, model:Object=null) : Boolean {

			return node.hasOwnProperty(_fieldname);

		}

		

		public function getData(node:Object, model:Object=null) : Object {

			return node;

		}

		

		public function addChildAt(parent:Object, child:Object, index:int, model:Object=null) : Boolean {

	        var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);

	        event.kind = CollectionEventKind.ADD;

	        event.items = [child];

	        event.location = index;

	        if (!parent) {

	            var iterator:IViewCursor = model.createCursor();

	            iterator.seek(CursorBookmark.FIRST, index);

	            iterator.insert(child);

	        } else if (parent is Object) {

	            if (isBranch(parent) ) {

	            	var children : Object = parent[_fieldname];

	                if( children is ArrayCollection) {

	                    children.addItemAt(child, index);

	                    if (model) {

	                        model.dispatchEvent(event);

	                        model.itemUpdated(parent);

	                    }

	                    return true;

	                } else {

	                    children.splice(index, 0, child);

	                    if (model)

	                        model.dispatchEvent(event);

	                    return true;

	                }

	            }

	        }

	        return false;

		}

		

		public function removeChildAt(parent:Object, child:Object, index:int, model:Object=null) : Boolean {

	        var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);

	        event.kind = CollectionEventKind.REMOVE;

		    event.items = [child];

		    event.location = index;

		

		    //handle top level where there is no parent

		    if (!parent) {

		        var iterator:IViewCursor = model.createCursor();

		        iterator.seek(CursorBookmark.FIRST, index);

		        iterator.remove();

		        if (model)

		            model.dispatchEvent(event);

		        return true;

		    } else if (parent is Object) {

		    	var children : Object = parent[_fieldname];

		        if (children) {

		            children.splice(index, 1);

		            if (model) 

		                model.dispatchEvent(event);

		            return true;

		        }

		    }

		    return false;

		}

	}

}

Example of a TreeMap using Objects Instead of XML

middlec (Charlie) — Wed, 18 Jun 2008 21:44:05 GMT

This is an example of how to use Flex2TreeMap with plain old ActionScript (POASO) objects instead of XML. You have to declare a dataDescriptor of the TreeMap so you can map companies field to the children of the sector node.

This class depends on DeclarativeDescriptor in order to compile.









	

				

			private const MIN_COLOR:uint = 0xcc0000;

			private const ZERO_COLOR:uint = 0;

			private const MAX_COLOR:uint = 0x00cc00;

			

			private var _maxAbsoluteChange:Number;

			private var __descriptor : DeclarativeDescriptor = new DeclarativeDescriptor("companies");

			

			[Bindable]

			private var marketData : Array = [

				{ name: "Technology",

				  companies: [

					{ name: "WidgetCorp", marketCap: "4200000000", value: 42.01, change: -2.03 },

					{ name: "Sprocket Systems", marketCap: "2100000000", value: 24.87, change: 4.45 },

					{ name: "Gizmodyne", marketCap: "10500000000", value: 106.52, change: 1.01 },

					{ name: "GadgetSoft", marketCap: "1200000000", value: 12.98, change: -0.82 }

				  ]

				},

				{ name: "Financial",

				  companies: [

					{ name: "Parker-Hayes", marketCap: "4550000000", value: 36.74, change: 3.56},

					{ name: "G.A. Harvard", marketCap: "12800000000", value: 21.61, change: -1.71},

					{ name: "P. Royal Trust", marketCap: "8700000000", value: 25.22, change: 2.09},

					{ name: "Houndsworth Bank", marketCap: "1900000000", value: 33.71, change: 0.2}

				  ]

			 	},

				{ name: "Communication",

				  companies: [

				     { name: "Richtel Networks", marketCap: "2400000000", value: 34.93, change: -1.94},

				     { name: "TCI", marketCap: "9600000000", value: 45.82, change: 0.22},

				     { name: "Norizon", marketCap: "1400000000", value: 27.46, change: 1.68}

				  ]

			 	},

			 	{ name: "Energy",

			 	  companies: [

				     { name: "Axxom Monopocorp", marketCap: "3200000000", value: 36.18, change: 5.46},

				     { name: "RP Petrol", marketCap: "7500000000", value: 26.74, change: -3.25},

				     { name: "Lexaco", marketCap: "3900000000", value: 15.96, change: -2.08}

			 	  ]

			 	}

			];

			

			/**

			 * For each item, determines the tooltip text.

			 */

			private function itemToToolTip(item:Object):String

			{

				//one tooltip for branches and one for leaves

				if(this.treeMap.dataDescriptor.isBranch(item))

				{

					return null;

				}

				var capInBillions:Number = Number(item.marketCap) / 1000000000;

				return "Value: " + this.formatter.format(item.value) + "\n" +

					"Change: " + item.change + "%\n" +

					"Market Cap: $" + capInBillions + "B";

			}



			/**

			 * Takes the absolute value of each change value and determines the maximum.

			 */

			private function calculateMaxAbsoluteChange():void

			{

				var companies:Array = this.marketData.companies;

				this._maxAbsoluteChange = 0;

				for each(var company:Object in companies)

				{

					var change:Number = Number(company.change);

					this._maxAbsoluteChange = Math.max(this._maxAbsoluteChange, Math.abs(change));

				}

			}

			

			/**

			 * For each item, determines the background color.

			 */

			private function itemToColor(item:Object):uint

			{

				var change:Number = Number(item.change);

				if(change < 0)

				{

					return this.blendColors(MIN_COLOR, ZERO_COLOR, Math.abs(change) / this._maxAbsoluteChange);

				}

				else if(change > 0)

				{

					return this.blendColors(ZERO_COLOR, MAX_COLOR, 1 - (Math.abs(change) / this._maxAbsoluteChange));

				}

				return ZERO_COLOR;

			}

			

			/**

			 * Determines the blended color between two separate colors using a range from 0 to 1.

			 */

			private function blendColors(color1:uint, color2:uint, percent:Number = 0.5):uint

			{

				var remaining:Number = 1 - percent;

				

				var red1:uint = (color1 >> 16) & 0xff;

				var green1:uint = (color1 >> 8) & 0xff;

				var blue1:uint = color1 & 0xff;

				

				var red2:uint = (color2 >> 16) & 0xff;

				var green2:uint = (color2 >> 8) & 0xff;

				var blue2:uint = color2 & 0xff;

				 

				color1 = ((red1 * percent) << 16) + ((green1 * percent) << 8) + blue1 * percent;

				color2 = ((red2 * remaining) << 16) + ((green2 * remaining) << 8) + blue2 * remaining;

	

				return color1 + color2;

	

			}

			

		]]>

	



			dataProvider="{marketData}" labelField="name" weightField="marketCap"

		colorFunction="{itemToColor}" dataTipFunction="{itemToToolTip}" dataDescriptor="{__descriptor}"/>

Printing out a Map in sorted order

Archanciel (Jean-Pierre Schnyder) — Thu, 27 Mar 2008 09:09:50 GMT

// print out a Map in sorted order of its keys



    public static String dumpToString(Map map) {

        if (map == null) {

            return Constants.EMPTY_STRING;

        }



        StringBuffer strbuf = new StringBuffer();



        SortedMap sMap = new TreeMap(map);

        Set> s = sMap.entrySet();



        for (Map.Entry elem : s) {

            String key = elem.getKey();

            Object value = elem.getValue();

            strbuf.append(key);

            strbuf.append("=");

            strbuf.append(value == null ? Constants.EMPTY_STRING : value);

            strbuf.append("\r\n");

        }



        return strbuf.toString();

    }