ActionScript 3 (AS3) Scrolling List for Android and iOS mobile devices.

AS3ScrollingList.as

/**
 * @author Michael Ritchie
 * @blog http://www.thanksmister.com
 * @twitter Thanksmister
 * Copyright (c) 2010
 * 
 * This is a Flash application to test the TouchList component.
 * */
package
{
  import flash.desktop.NativeApplication;
	import flash.desktop.SystemIdleMode;
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageOrientation;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.events.StageOrientationEvent;
	import flash.system.Capabilities;
	import flash.text.TextField;
	import flash.ui.Keyboard;
	import com.thanksmister.touchlist.renderers.TouchListItemRenderer;
	import com.thanksmister.touchlist.events.ListItemEvent;
	import com.thanksmister.touchlist.controls.TouchList;
	
	[SWF( width = '480', height = '800', backgroundColor = '#000000', frameRate = '24')]
	public class AS3ScrollingList extends MovieClip
	{
		private var touchList:TouchList;
		private var textOutput:TextField;
		private var stageOrientation:String = StageOrientation.DEFAULT;
		
		public function AS3ScrollingList()
		{
			// needed to scale our screen
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			if(stage) 
				init();
			else
				stage.addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void
		{
			stage.removeEventListener(Event.ADDED_TO_STAGE, init);
			
			stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
			stage.addEventListener(Event.RESIZE, handleResize);
			
			// if we have autoOrients set in permissions we add listener
			if(Stage.supportsOrientationChange) {
				stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, handleOrientationChange);
			}
			
			if(Capabilities.cpuArchitecture == "ARM") {
				NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, handleActivate, false, 0, true);
				NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, handleDeactivate, false, 0, true);
			}
			
			// add our list and listener
			touchList = new TouchList(stage.stageWidth, stage.stageHeight);
			touchList.addEventListener(ListItemEvent.ITEM_SELECTED, handlelistItemSelected);
			addChild(touchList);
			
			// Fill our list with item rendreres that extend ITouchListRenderer. 
			for(var i:int = 0; i < 50; i++) {
				var item:TouchListItemRenderer = new TouchListItemRenderer();
					item.index = i;
					item.data = "This is list item " + String(i);
					item.itemHeight = 80;
			
				touchList.addListItem(item);
			}
		}
		
		/**
		 * Handle stage orientation by calling the list resize method.
		 * */
		private function handleOrientationChange(e:StageOrientationEvent):void
		{
			switch (e.afterOrientation) { 
				case StageOrientation.DEFAULT: 
				case StageOrientation.UNKNOWN: 
					//touchList.resize(stage.stageWidth, stage.stageHeight);
					break; 
				case StageOrientation.ROTATED_RIGHT: 
				case StageOrientation.ROTATED_LEFT: 
					//touchList.resize(stage.stageHeight, stage.stageWidth);
					break; 
			} 
		}
		
		private function handleResize(e:Event = null):void
		{
			touchList.resize(stage.stageWidth, stage.stageHeight);
		}
		
		private function handleActivate(event:Event):void
		{
			NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
		}
		
		private function handleDeactivate(event:Event):void
		{
			NativeApplication.nativeApplication.exit();
		}
		
		/**
		 * Handle keyboard events for menu, back, and seach buttons.
		 * */
		private function handleKeyDown(e:KeyboardEvent):void
		{
			if(e.keyCode == Keyboard.BACK) {
				e.preventDefault();
				NativeApplication.nativeApplication.exit();
			} else if(e.keyCode == Keyboard.MENU){
				e.preventDefault();
			} else if(e.keyCode == Keyboard.SEARCH){
				e.preventDefault();
			}
		}
		
		/**
		 * Handle list item seleced.
		 * */
		private function handlelistItemSelected(e:ListItemEvent):void
		{
			trace("List item selected: " + e.renderer.index);
		}
	}
}

Features

• Cross-platform list for iOS and Android
• List Item Events broadcast when items touched.
• List Item Renderers for changing appearance of list items

TouchList

The TouchList class creates the list, adds items and handles touch events dispatched by the item renderers. You might notice that I didn’t use any actual TouchEvent listeners in the list. This is because a TouchEvent is essentially a MouseEvent. The TouchList class has a built in delay to differentiate between a scrolling and touch action. Like the Android phone, you can’t select an item while scrolling and pressed items are deselected if you scroll while pressed.

TouchListItemRenderer

TouchListItemRenderer implements ITouchListItemRenderer and renders the display of the items in the list data. This renderer can be customized to show whatever type of data you want in the list. List items can also be variable height.

ITouchListItemRenderer

If you want to create an item renderer for the list, then it must implement the ITouchListItemRenderer interface. This interface gives the renderer basic functionality to interact with user selection and touch events used by the list.

ListItemEvent

The list item event is a custom custom ListItemEvent dispatched when a list item renderer is pressed. The event contains the event payload and a instance of the item renderer selected.

Installation

Included in the GitHub repository is the working project files created in Flash Builder 4. This file handles adding the list to the stage, screen orientation on the device, stage resize, and other functions for an Android AIR application. To install, just checkout the project file and import it into Flash Builder. I have also included Android .apk file if you want to deploy it directly to your Android phone.

MIT License: http://www.opensource.org/licenses/mit-license.php