Created
May 8, 2013 18:19
-
-
Save matthua/5542412 to your computer and use it in GitHub Desktop.
ActionScript 3 (AS3) Scrolling List for Android and iOS mobile devices.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Features
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