Example multidimensional / 3D indexed array in Flex AS3

Scenario: I recently created a Flex component that extended the Canvas, and was split into a large number of ‘cells’ using constraint rows/columns. In each of these cells could be placed any number of UIComponents.

Problem: At any time I could tell what cell I was mousing over e.g.  (0,1), but I also needed to get an array of the components in that cell. It was not optimal iterating accross all the UIComponents on the canvas to check their constraint row/column id’s to find the relevant ones.

Solution: Created a 3D indexed array with references to each cell’s UIComponents. To retrieve the components from cell (3, 5) I would simply use: resultsArray = _cellComponents[rowNum][columnNum];

The image below represents a basic 3D array, with each cell containing just random objects: ints, strings and an image object. The sample app code that follows shows you how to create and populate a 3D array, and has a simple interface so you can test retrieving the stored objects.

3D array visual

Simple UI for 3D Array


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.controls.Button;
			import mx.events.IndexChangedEvent;
			
			private var _array3D:Array = new Array();
			private var _numRows:int = 2;
			private var _numColumns:int = 4;
			
			private function init():void{
							
				for(var i:int = 0; i < _numRows; i++){
					
					var rowArray:Array = new Array();
					_array3D.push(rowArray);
					
					// Create a 3d array (basically a 2d array of array objects)
					for(var j:int = 0; j < _numColumns; j++){
						
						var columnArray:Array = new Array();						
						_array3D[i].push(columnArray);									
					} 
				}
				
				// Populate a 3d array
				_array3D[0][0].push(1, 2, 3, 4);
				_array3D[0][3].push("A", "B", "C", "D");
				_array3D[1][0].push(5, 6, 7);
				_array3D[1][1].push(8);
				_array3D[1][2].push(9, 10);				
				// You can add any type of Object to the array.
				var image:Image = new Image();
				image.name = "arrayImage";			
				_array3D[1][3].push(image);
															
			}
			
			private function getValues(row:String, col:String):void{
				
				var r:int = parseInt(row);
				var c:int = parseInt(col);
				
				var cell:Array = _array3D[r][c];
				var output:String = "";
				
				if(cell != null){
					
					for(var i:int = 0; i <cell.length; i++){
						output = output + " " + cell[i].toString();
					}
					
					if(output == ""){
						outputText.text = "No data in cell"
					}
					else{
						outputText.text = output;
					}					
				}
				else{
					outputText.text = "Not a valid row/column";			
				}					
			}			
			
		]]>
	</mx:Script>

	<mx:Canvas id="myCanvas" x="65" y="49" width="308" height="99" backgroundColor="#FFFFFF">
		<mx:ApplicationControlBar x="0" y="0" width="100%">
			<mx:Label text="Row"/>
			<mx:TextInput id="row" width="56"/>
			<mx:Label text="Col."/>
			<mx:TextInput id="col" width="56"/>
			<mx:Button label="Get Values" click="getValues(row.text, col.text)"/>
		</mx:ApplicationControlBar>
		<mx:Text id="outputText" x="0" y="52" width="100%" textAlign="center"/>
	</mx:Canvas>
</mx:Application>

Advertisements

Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: