Upgraded to Starling 2 and FeathersUI 3

README.md

@@ -1,6 +1,6 @@
-# City App 1.0.0
+# City App 1.1.0
 
-City App is a mobile application developed with Starling Framework and FeathersUI. It showcases several web APIs and mobile specific tecniques.
+City App is a mobile application developed with Starling Framework and FeathersUI. It showcases several web APIs and mobile specific techniques.
 
 It uses the following Web APIs and technologies:
 
@@ -10,7 +10,7 @@ It uses the following Web APIs and technologies:
   - Foursquare API (JSON)
   - Google Maps Embed API (iframe)
 
-Some of the tecniques covered are:
+Some of the techniques covered are:
 
   - Lazy loading
   - Passing data between screens
@@ -21,8 +21,12 @@ Some of the tecniques covered are:
 
 To compile this application you require to provide your own API Keys which can be obtained for free in their respective sites.
 
-AIR 20 is recommended but it can work with earlier versions, such as 19 or 18.
+You will also need AIR 21 or greater, FeathersUI 3.0.2 and Starling 2.0.1.
 
-You can test this application in your Android devices by clicking on the Releases tab on this page and selecting the file 'CityApp.apk'.
+[![Watch on Youtube](http://i.imgur.com/9XwfenC.png)](https://youtu.be/x-LE-KRYxfk)
 
-[![Watch on Youtube](http://i.imgur.com/9XwfenC.png)](https://youtu.be/x-LE-KRYxfk)
+## Download
+
+You can test this app by downloading it directly from GitHub.
+
+[![Download](http://i.imgur.com/sYA22o3.png)](https://)

src/CityApp-app.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
-<application xmlns="http://ns.adobe.com/air/application/20.0">
+<application xmlns="http://ns.adobe.com/air/application/22.0">
 
 <!-- Adobe AIR Application Descriptor File Template.
 
@@ -28,7 +28,7 @@
 	Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
 	An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 .
     For iOS Apps, this represents build number. -->
-	<versionNumber>1.0.0</versionNumber>
+	<versionNumber>1.1.0</versionNumber>
 
 	<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. 
      For iOS Apps, this represents application version number and format should be (<0-999>.<0-999>.<0-999>).

src/CityApp.as

@@ -1,8 +1,6 @@
 package
 {
 
-	import flash.display.Bitmap;
-	import flash.display.Loader;
 	import flash.display.Sprite;
 	import flash.display.StageAlign;
 	import flash.display.StageScaleMode;
@@ -17,14 +15,10 @@ package
 
 	public class CityApp extends Sprite
 	{
-		private var Splash:Class;
-		private var splash:Bitmap;
 
-		private var _starling:Starling;
-		private var _scaler:ScreenDensityScaleFactorManager;
-		private var _launchImage:Loader;
-		private var _savedAutoOrients:Boolean;
-
+		private var myStarling:Starling;
+		private var myScaler:ScreenDensityScaleFactorManager;
+
 		public function CityApp()
 		{
 			if(this.stage)
@@ -39,28 +33,28 @@ package
 
 		private function loaderInfo_completeHandler(event:Event):void
 		{			
-			Starling.handleLostContext = true;
 			Starling.multitouchEnabled = true;
 
-			this._starling = new Starling(Main, this.stage, null, null, Context3DRenderMode.AUTO, "auto");
-			this._scaler = new ScreenDensityScaleFactorManager(this._starling);
-			this._starling.enableErrorChecking = false;
-			//this._starling.showStats = true;
+			this.myStarling = new Starling(Main, this.stage, null, null, Context3DRenderMode.AUTO, "auto");
+			this.myScaler = new ScreenDensityScaleFactorManager(this.myStarling);
+			this.myStarling.enableErrorChecking = false;
+			this.myStarling.skipUnchangedFrames = true;
+			//this.myStarling.showStats = true;
 
-			this._starling.start();									
+			this.myStarling.start();									
 			this.stage.addEventListener(Event.DEACTIVATE, stage_deactivateHandler, false, 0, true);
 		}
 
 		private function stage_deactivateHandler(event:Event):void
 		{
-			this._starling.stop();
+			this.myStarling.stop();
 			this.stage.addEventListener(Event.ACTIVATE, stage_activateHandler, false, 0, true);
 		}
 
 		private function stage_activateHandler(event:Event):void
 		{
 			this.stage.removeEventListener(Event.ACTIVATE, stage_activateHandler);
-			this._starling.start();
+			this.myStarling.start();
 		}
 
 	}

src/CustomTheme.as

@@ -7,6 +7,7 @@ package
 
 	import feathers.controls.Button;
 	import feathers.controls.Header;
+	import feathers.controls.ImageLoader;
 	import feathers.controls.Label;
 	import feathers.controls.List;
 	import feathers.controls.PanelScreen;
@@ -17,10 +18,10 @@ package
 	import feathers.controls.renderers.DefaultListItemRenderer;
 	import feathers.controls.text.StageTextTextEditor;
 	import feathers.controls.text.TextBlockTextRenderer;
+	import feathers.controls.text.TextFieldTextRenderer;
 	import feathers.core.FeathersControl;
 	import feathers.core.ITextEditor;
 	import feathers.core.ITextRenderer;
-	import feathers.skins.SmartDisplayObjectStateValueSelector;
 	import feathers.themes.StyleNameFunctionTheme;
 
 	import starling.display.Quad;
@@ -30,17 +31,10 @@ package
 	{
 		[Embed(source="assets/font.otf", fontFamily="MyFont", fontWeight="normal", fontStyle="normal", mimeType="application/x-font", embedAsCFF="true")]
 		private static const MY_FONT:Class;
-
-		private var whiteText:ElementFormat = new ElementFormat(new FontDescription("_sans"), 12, 0xFFFFFF);
-		private var blackText:ElementFormat = new ElementFormat(new FontDescription("_sans"), 12, 0x000000);
-
-		private var transparentQuad:Quad = new Quad(3, 3, 0xFFFFFF);
-
+
 		public function CustomTheme()
 		{
-			super();
-
-			this.transparentQuad.alpha = 0.0;
+			super();			
 			this.initialize();
 		}
 
@@ -65,9 +59,9 @@ package
 
 		private function initializeStyleProviders():void
 		{
+			this.getStyleProviderForClass(Button).setFunctionForStyleName("back-button", this.setBackButtonStyles);
 			this.getStyleProviderForClass(Button).setFunctionForStyleName("transparent-button", this.setTransparentButtonStyles);
 			this.getStyleProviderForClass(Button).setFunctionForStyleName("header-button", this.setHeaderButtonStyles);
-			this.getStyleProviderForClass(Button).defaultStyleFunction = this.setButtonStyles;
 			this.getStyleProviderForClass(DefaultListItemRenderer).defaultStyleFunction = this.setItemRendererStyles;
 			this.getStyleProviderForClass(Header).defaultStyleFunction = this.setHeaderStyles;
 			this.getStyleProviderForClass(Label).defaultStyleFunction = this.setLabelStyles;
@@ -114,40 +108,27 @@ package
 		// Button
 		//-------------------------
 
-		private function setButtonStyles(button:Button):void
+		private function setBackButtonStyles(button:Button):void
 		{
+			var transparentQuad:Quad = new Quad(3, 3, 0xFFFFFF);
+			transparentQuad.alpha = 0.20;
 
-			var skin:Sprite = new Sprite();
-			skin.height = 50;
-
-			var topColor:uint = 0x444444;
-			var bottomColor:uint = 0x000000;
-
-			var quad:Quad = new Quad(1, 50);
-			quad.setVertexColor(0, topColor);
-			quad.setVertexColor(1, topColor);
-			quad.setVertexColor(2, bottomColor);
-			quad.setVertexColor(3, bottomColor);
-
-			skin.addChild(quad);
-
-			var blueBar:Quad = new Quad(1, 5, 0x0099FF);
-			blueBar.y = skin.height;
-
-			skin.addChild(blueBar);
-
-			skin.flatten();
-
-			button.defaultSkin = skin;
-			button.downSkin = new Quad(3, 3, 0x000000);
+			var arrowIcon:ImageLoader = new ImageLoader();
+			arrowIcon.width = arrowIcon.height = 25;
+			arrowIcon.source = "assets/icons/ic_arrow_back_white_48dp.png";
 
-			button.defaultLabelProperties.elementFormat = whiteText;
+			button.width = button.height = 45;
+			button.defaultIcon = arrowIcon;
+			button.downSkin = transparentQuad;
 		}
 
 		private function setTransparentButtonStyles(button:Button):void
 		{
-			button.defaultSkin = transparentQuad;
-			button.downSkin = transparentQuad;
+			var quad:Quad = new Quad(3, 3, 0xFFFFF);
+			quad.alpha = 0;
+
+			button.defaultSkin = quad;
+			button.downSkin = quad;
 		}
 
 		//-------------------------
@@ -219,26 +200,33 @@ package
 		}
 
 		private function setItemRendererStyles(renderer:BaseDefaultItemRenderer):void
-		{
-			var skinSelector:SmartDisplayObjectStateValueSelector = new SmartDisplayObjectStateValueSelector();
-
-			skinSelector.defaultValue = 0x333333;
-			skinSelector.defaultSelectedValue = 0x11A9FF;
-			skinSelector.setValueForState(0x11A9FF, Button.STATE_DOWN, false);
-			renderer.stateToSkinFunction = skinSelector.updateValue;
+		{			
+			renderer.defaultSkin = new Quad(3, 3, 0x333333);
+			renderer.defaultSelectedSkin = new Quad(3, 3, 0x11A9FF);
+			renderer.downSkin = new Quad(3, 3, 0x11A9FF);
 
 			renderer.horizontalAlign = Button.HORIZONTAL_ALIGN_LEFT;
 			renderer.paddingLeft = 10;
 			renderer.paddingRight = 0;
-			renderer.paddingTop = 5;
-			renderer.paddingBottom = 5;
+			renderer.paddingTop = 10;
+			renderer.paddingBottom = 10;
 			renderer.gap = 10;
 			renderer.minHeight = 55;
-			renderer.defaultLabelProperties.leading = 7;
 			renderer.accessoryGap = Number.POSITIVE_INFINITY;
 			renderer.iconPosition = Button.ICON_POSITION_LEFT;
 			renderer.accessoryPosition = BaseDefaultItemRenderer.ACCESSORY_POSITION_RIGHT;
-			renderer.defaultLabelProperties.elementFormat = whiteText;
+			renderer.labelFactory = function():ITextRenderer
+			{
+				var renderer:TextFieldTextRenderer = new TextFieldTextRenderer();
+				renderer.isHTML = true;
+				renderer.wordWrap = true;
+
+				var format:TextFormat = new TextFormat("_sans", 14, 0xFFFFFF);
+				format.leading = 7;
+
+				renderer.textFormat = format;
+				return renderer;
+			};
 		}	
 
 		//-------------------------
@@ -269,7 +257,16 @@ package
 			button.selectedDownSkin = defaultSelectedSkin;
 			button.defaultSelectedSkin = defaultSelectedSkin;
 
-			button.defaultLabelProperties.elementFormat = whiteText;
+			button.labelFactory = function():ITextRenderer
+			{
+				var renderer:TextBlockTextRenderer = new TextBlockTextRenderer();
+
+				var font:FontDescription = new FontDescription("MyFont");
+				font.fontLookup = FontLookup.EMBEDDED_CFF;
+
+				renderer.elementFormat =new ElementFormat(font, 14, 0xFFFFFF);
+				return renderer;
+			}
 		}
 
 		//-------------------------

src/businessScreens/CategoryDetailsScreen.as

@@ -52,22 +52,10 @@ package businessScreens
 
 			this.title = _data.categoryinfo.label;
 			this.layout = new AnchorLayout();
-			this.backButtonHandler = function():void
-			{
-				this.dispatchEventWith(starling.events.Event.COMPLETE);
-			}
-
-			var arrowIcon:ImageLoader = new ImageLoader();
-			arrowIcon.source = "assets/icons/ic_arrow_back_white_48dp.png";
-			arrowIcon.width = 25;
-			arrowIcon.height = 25;
-			arrowIcon.snapToPixels = true;
+			this.backButtonHandler = goBack;
 
 			var backButton:Button = new Button();
-			backButton.width = 45;
-			backButton.height = 45;
-			backButton.styleNameList.add("header-button");
-			backButton.defaultIcon = arrowIcon;
+			backButton.styleNameList.add("back-button");
 			backButton.addEventListener(starling.events.Event.TRIGGERED, goBack);
 			this.headerProperties.leftItems = new <DisplayObject>[backButton];
 
@@ -77,34 +65,38 @@ package businessScreens
 			businessList.itemRendererFactory = function():IListItemRenderer
 			{
 				var renderer:DefaultListItemRenderer = new DefaultListItemRenderer();
+				renderer.isQuickHitAreaEnabled = true;
 
 				renderer.labelFunction = function(item:Object):String
 				{
 					if(item.location.address == undefined)
 					{
 						if(item.categories.length != 0){
-							return item.name + "\n" + item.categories[0].name;
+							return "<b>" + item.name + "</b>\n" + item.categories[0].name;
 						} else {
 							return item.name;
 						}
 					} else {
 						if(item.categories.length != 0){
-							return item.name + "\n" + item.location.address + "\n" + item.categories[0].name;
+							return "<b>" + item.name + "</b>\n" + item.location.address + "\n" + item.categories[0].name;
 						} else {
 							return item.name;
 						}
 					}
 				}
 
-				renderer.accessoryFunction = function():ImageLoader{
+				renderer.accessoryLoaderFactory = function():ImageLoader
+				{
 					var loader:ImageLoader = new ImageLoader();
-					loader.width = 35;
-					loader.height = 35;
-					loader.snapToPixels = true;
-					loader.source = "assets/icons/ic_chevron_right_white_48dp.png";
+					loader.width = loader.height = 35;
 					return loader;
-				}
+				};
 
+				renderer.accessorySourceFunction = function():String
+				{
+					return "assets/icons/ic_chevron_right_white_48dp.png";
+				}
+
 				return renderer;
 			}
 			this.addChild(businessList);
@@ -138,7 +130,8 @@ package businessScreens
 			dispatchEventWith(GO_VENUE_DETAILS);
 		}
 
-		private function goBack(event:starling.events.Event):void{
+		private function goBack():void
+		{
 			this.dispatchEventWith(starling.events.Event.COMPLETE);
 		}
 	}