Archive for July, 2010

Easing/tweened Flex Scrolling Canvas

July 27, 2010

I was looking to add some acceleration/easing to the scrolling of a Flex container.

I used Tweener API and applied it to a Flex Canvas (the canvas has its scrolling policies turned off, and scrolling is provided with an external/floating scrollbar).

You can see the Tweener trainsitions on their online documentation here (click on ‘transition types’).

Full code after the jump ………………

Advertisements

Example multidimensional / 3D indexed array in Flex AS3

July 26, 2010

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>

Flex: Date.month is zero-based, Date.date is one-based!!

July 7, 2010

This little issue caught me out a bit when debugging an app: the month property of a Flex Date object is zero-based, whereas the Date.date property is an integer from 1 to 31. Crazy or what!

For 07/07/2010 (07/July/2010) at 09:33 GMT, the date object is shown below:

Flex Date for 07/July/2010 09:33 GMT