Lately in my free time I’ve started to learn Flex Hero to be able to develop mobile applications for Android devices in Flex. I’ve downloaded Flash Builder Burrito from Adobe Labs, which already consists Flex Hero SDK, so I could immediately start developing my first Flex Android application. It’s quite new area and there is lot of articles, tutorials, examples about Android application development in Flex Hero. I’m collecting links for me and for you as a source of help and knowledge base for developing Android applications in Flex. I hope my collection will be useful for you as good base to start playing with Flex Hero and Android devices. Enjoy it.

Download IDE and SDKs

• Flash Builder Burrito with Flex Hero SDK
• Android SDK (not needed)

Flex Hero Help

• Flex Hero SDK: AIR 2.5 Help
• Mobile Application Development in Flex SDK Hero
• What’s new in Flash Builder Burrito
• Introducing Adobe Flex SDK Hero
• Mobile development using Adobe Flex SDK Hero and Flash Builder Burrito
• Adobe Flash Mobile Platform
• Code, Package and Debug Flex Mobile apps with Flash Builder Burrito
• Adobe Flex Mobile Overview – Part 1

Flex Hero – Android Development Tutorials

• How to Skin AIR Mobile ActionBar
• URI handlers in AIR for Android
• Flex 4.5 PersistenceManager
• Building a native menu in Flex Mobile
• hacking native android with air app to allow air access unavailable apis
• Flex 4.5 Mobile Development Post Burrito
• How to Install Non-Market .apk Apps on Google Android G1 Phone

Flex Android Development – Video tutorials

• Flex Mobile Part 1: Beginning a mobile application
• Flex Mobile Part 2: Navigation and Lists
• Flex Mobile Part 3: Debug and package apps for devices
• Debug Adobe AIR for Android applications
• First Adobe AIR for Android App

Custom Flex Android Mobile components

• Android Time Picker for Flex Hero
• Android Date Picker for Flex Hero

Optimizations techniques for Flex Mobile development

• Optimize Flash Content and Improving Usability on Mobile Devices – Part #1
• Optimizing Flash Content for Mobile Devices by Ben Stucki
• Optimize web content for mobile delivery
• Optimization Techniques for Air for Android apps
• Practical Performance Tweaks (not just mobile optimizations)
• Adobe AIR Mobile: Application performance optimization on Android

Mobile Applications Performance

• Mr Doob’s Memory Monitor
• Flash Optimizing Tools by Elad Elrom

There are more than 30 links in Flex Hero – Android development links collection. If you are missing anything and want to add anything inside, please share your links in commenst and I will update collection. And please let me know if you are also trying, playing or learning Flex Hero for Flex Mobile apps development.

I’ve create new Android mobile component in Flex Hero. Last time I’ve created Android Date Picker, which allows you to pick date. But if you need change time, there is another component: Time Picker. So I’ve recreated it for Flex Hero. There are 2 different possibilities: changing time in AM/PM format or full day mode. It’s just matter of setting property: timePicker.fullDayMode = true/false. In next article I will post new Time picker with gestures support and not using buttons +/- for changing hours, minutes and seconds. Using Android Time Picker for Flex Hero is similar as for Date Picker, just open it with PopupManager.addPopup. Please download FXP project, which consist example of usage Time Picker (Date Picker as well) and import it to your Flash Builder Burrito.

Native Android Time Picker

Android Time Picker for Flex Hero – AM/PM mode

Android Time Picker for Flex Hero – full day mode

I’ve been testing new Flex Hero SDK with AIR 2.5 on my HTC Desire HD. In Flash Builder Burrito it works very nice and smooth. Even debugging on mobile works nicely (computer and mobile must be connected to same wifi). I’m just playing and testing some new stuff and have needed date picker for choosing date, but there is no such component in Flex Hero SDK I can use. So I’ve checked native Android Date Picker and try to create it from scratch in Flex. It’s pretty easy component, you can make it on your own in few minutes. But if you don’t want to bother to recreate it, you can just use mine.

Native Android Date Picker:

Flex Android Date Picker:

Download sources as Flash Burrito project with .apk file.
This file is hosted straight from our web hosting provider.

If you have already use another DatePicker or made your own one, let me know your thoughts. I’ve just tested it only on HTC Desire HD (screen resolution 480x800px).

I have commercial project in Flex 4. That’s great I always wanted to use Flex 4 for commercial project (otherwise I didn’t have time to work with Flex 4). It was too risky, because Flex 4 is just beta 2, but application depends on custom skinning, so we have decided to implement it in Flex 4 together with Flash Catalyst. Workflow is not ideal (as graphics designer didn’t know about Flash catalyst), but surely it was help (at least for cutting assets ). There were few problems, but after month of development and reading some stuff and tutorials on web I want to try use latest stable nightly build. Right now it’s Flex 4.0.0.13875 from 29th of January. So I’ve downloaded and install it to Flash builder.

First, what I’ve found out that namespace mx was change to ns namespace. xmlns:mx=”library://ns.adobe.com/flex/halo”
xmlns:ns=”library://ns.adobe.com/flex/mx”

some properties was renamed e.g BitmapImage resizeMode to fillMode, some properties was removed.

But I’ve stuck on 1 problem… from flash.* packages, there is just flash.text.*, all other flash.* packages are not inside. So e.g. I can not use MouseEvent and similar stuff

Does anyone know if I don’t see anything obvious? Does anyone use latest stable nightly build of Flex 4? (I’ve tried also latest nightly build Flex 13963, same problem)

I really want to use it, because I know, there is some important things fixed. Please let me know, if you have how to fix problem

Thank you very much

My current project needs to use new native 3D in Flash Player 10. It seems so easy to use it, just set any 3d property like x,y,z or rotationX, rotationY, rotationZ and all should work perfectly. It seems so. But I have found problem and it seems it’s Flash player bug (I hope someone proves me wrong ). I need to change field of view of some DisplayObject to have different perspective as it is set by default. So I’ve done it in way

var pp:PerspectiveProjection = new PerspectiveProjection();
pp.fieldOfView = 11;
 
this.transform.perspectiveProjection = pp;

it’s easy and it works. But problem is, that after setting of perspectiveProjection all children interactivity (mouse click, rollovers and rollouts) stops working and this is really big issue. I’ve tried everything I know to prevent this, but I could not make it work. So I’m trying to write this post to get help on this (if it is possible).

Let me know if you have similar problem and please vote for Adobe bug(s) I will post later to let Adobe fix it ASAP.

Some links with this issue on net:

• http://old.nabble.com/Setting-perspectiveProjection-disable-children-interactivity-td21207809.html
• https://bugs.adobe.com/jira/browse/FP-2445
• https://bugs.adobe.com/jira/browse/FP-1609 This is even marked as resolved by Adobe

Let me know if comments if you know anything about this problem. Thank you

Table of contents for flex-tips

1. Problem with XML attributes in AS3.0
2. Unable to export SWC oem
3. Numeric sorting of Flex DataGridColumn

This is quick example for Numeric sorting of Flex DataGrid columns. If you want to sort column in DataGrid, default sorting is sorted by String and not by Number. If you have just one numeric column, you may create custom sort function and set sortCompareFunction for given DataGridColumn. If you have more such columns and your dataProvider is ArrayCollection, which consists of many objects, better solution is override DataGridColumn and implement compare function inside this class. Here is class

package com.flexets.components.dataGridClasses
{
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.utils.ObjectUtil;
 
	public class NumericDataGridColumn extends DataGridColumn
	{
		public static const NUMERIC:String = "N";
		public function NumericDataGridColumn(columnName:String=null)
		{
			super(columnName);
			initCompare(NUMERIC);
		}
 
		function initCompare(numeric:Object):void
		{
			if (numeric == NUMERIC) {
				sortCompareFunction = numericCompare;
			}
		}
 
		/**
		* Pull the numbers from the objects and call the implementation. TAKEN FROM mx.collections.SortField
		*/
		private function numericCompare(a:Object, b:Object):int
		{
			var fa:Number;
			try
			{
				fa = dataField == null ? Number(a) : Number(a[dataField]);
			}
			catch(error:Error)
			{
			}
 
			var fb:Number;
			try
			{
				fb = dataField == null ? Number(b) : Number(b[dataField]);
			}
			catch(error:Error)
			{
			}
 
			return ObjectUtil.numericCompare(fa, fb);
		}
	}
}

and then just use NumericDataGridColumn in your mxml in DataGrid like this

<mx:DataGrid id="myDG" width="100%" height="100%" dataProvider="{myDataProvider}">
    <mx:columns>
	<mx:DataGridColumn dataField="id"/>
	<dataGridClasses:NumericDataGridColumn dataField="order"/>
	<mx:DataGridColumn dataField="title"/>
	<dataGridClasses:NumericDataGridColumn dataField="price"/>
    </mx:columns>
</mx:DataGrid>

Enjoy this little Flex tip.

Table of contents for Text Layout Engine

1. Text Layout Engine in Flex 3
2. Text Layout Engine: Fit text into rectangle
3. Text Layout Engine: TruncationOptions

This is same example as yesterday (Fit text in rectangle with Text Layout Engine), but I’ve added one more switch. You can decide if you want use TruncationOptions or not. Reason why I want to show this to you is that it works differently. I do not know if this is feature or bug, but try to tell me your opinion in comments. When I use TruncationOptions in this way:

var truncationOptions:TruncationOptions = new TruncationOptions('...',3);
factory.truncationOptions = truncationOptions;

all works nice and text is fitted into rectangle. But when I do not include truncation last line of text is out of the rectangle if any pixel line of text line is inside rectangle. Maybe there is some other property which can handle this situation, but I’m not really aware of it. Do you know about such property?

Try it in this example:

and here is source code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="fit()"
	backgroundColor="0x333333" color="0xffffff">
 
	<mx:Style source="styles/fonts.css"/>
 
	<mx:RadioButtonGroup id="radioGroup" />
 
	<mx:VBox width="100%" height="100%">
		<mx:HBox>
			<mx:RadioButton id="radioButton1" label="Don't truncate" value="false" group="{radioGroup}"	selected="true" />
			<mx:RadioButton id="radioButton2" label="Truncate" value="true" group="{radioGroup}" />
		</mx:HBox>
		<mx:HBox width="100%">
			<mx:Label text="Text:"/>
			<mx:TextInput id="txtInput" color="0x000000" width="100%" change="fit()" text="Text Layout Engine: Fit Text into Rectangle"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Font Size:"/>
			<mx:HSlider id="fsSlider" liveDragging="true" minimum="6" maximum="50" snapInterval="1" value="14"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Text Width:"/>
			<mx:HSlider id="wSlider" liveDragging="true" minimum="0" maximum="500" snapInterval="1" value="100"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Text Height:"/>
			<mx:HSlider id="hSlider" liveDragging="true" minimum="0" maximum="500" snapInterval="1" value="100"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Fit font to do not truncate text:"/>
			<mx:CheckBox id="chbTruncate" selected="false" change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="isTruncated?"/>
			<mx:Canvas width="20" height="20" backgroundColor="0xff0000" 
				visible="{!isTruncated}" includeInLayout="{!isTruncated}"/>
			<mx:Canvas width="20" height="20" backgroundColor="0x00aa00" 
				visible="{isTruncated}" includeInLayout="{isTruncated}"/>
		</mx:HBox>
		<mx:UIComponent id="ui" width="100%" height="100%">
 
		</mx:UIComponent>
	</mx:VBox>
 
	<mx:Script>
		<![CDATA[
			import assets.TLEAssets;
			import flashx.textLayout.factory.TruncationOptions;
			import flash.text.engine.Kerning;
			import flash.text.engine.FontLookup;
			import flash.text.engine.RenderingMode;
			import flashx.textLayout.formats.TextLayoutFormat;
			import flashx.textLayout.factory.StringTextLineFactory;
 
			private var sprite:Sprite;
 
			[Bindable] public var isTruncated:Boolean;
 
			public function fit(fs:int = -1, cnt:int = -1):void
	        {
	        	if (sprite == null)
	        	{
	        		sprite = new Sprite();
	        		ui.addChild(sprite);
	        	}
	        	while (sprite.numChildren > 0)
	        	{
	        		sprite.removeChildAt(0);
	        	}
	            var factory:StringTextLineFactory = new StringTextLineFactory();
 
	            factory.compositionBounds = new Rectangle( 10, 10, wSlider.value, hSlider.value );
 
	           	if (fs == -1)
	           		fs = fsSlider.value;
 
	            var format:TextLayoutFormat = new TextLayoutFormat();
	            format.fontFamily = "Verdana, _sans";
	            format.fontSize = fs;
	            format.color = 0x000000;
	            format.textAlpha = .9;
	            format.kerning = Kerning.ON;
	            format.renderingMode = RenderingMode.CFF;
				format.fontLookup = FontLookup.EMBEDDED_CFF;
	            factory.spanFormat = format;
 
				if (radioGroup.selectedValue == true)
				{
					var truncationOptions:TruncationOptions = new TruncationOptions('...',3);
					factory.truncationOptions = truncationOptions;
				}				
 
	            factory.text = txtInput.text;
	            factory.createTextLines( useTextLines );
 
	            isTruncated = factory.isTruncated;
 
	            if (chbTruncate.selected && isTruncated && fs > 10 && cnt < 50)
	            {
	            	fs--;
	            	cnt++;
	            	fit(fs, cnt);
	            }
 
	            sprite.graphics.clear();
	            sprite.graphics.beginFill(0x555555,.5);
	            sprite.graphics.drawRect( 10,10, wSlider.value, hSlider.value );
	            sprite.graphics.endFill();
	        }
 
	        private function useTextLines( line:DisplayObject ):void
	        {
	            var displayObject:DisplayObject = sprite.addChild( line );
	        }
 
		]]>
	</mx:Script>
</mx:Application>

Let me know, what you think about it…

P.S. I have other example with use TextFlow component with TextFlowTextLineFactory (graphics included within the text) instead of using StringTextLineFactory. I will post it later today or tommorow. Stay tuned

Table of contents for Text Layout Engine

1. Text Layout Engine in Flex 3
2. Text Layout Engine: Fit text into rectangle
3. Text Layout Engine: TruncationOptions

This is first example in serie of examples of showcase how to use Text Layout Engine (mainly for Flex 3).

Here is quick description: I need to fit text in rectangle (need it for our Goalscape project). I want to be able to change width, height, font size and text of course. In Text Layout Engine this can be done very easily. All you need to do is create correct format for your text, and set compositionBounds for text line factory. I will use StringTextLineFactory class, which provides a simple way to create TextLines from a string. Even I add also TruncationOptions, which specifies options for limiting the number of lines of text created by a text line factory and for indicating when lines have been left out. I’m using TruncationOptions, because I want use maximum of 3 lines and if text is too long I want add … at the end. This is done automatically in Text Layout Engine and I do not need to implement by myself.

Only problem I see, that result .swf file size is over 500kB even builded as Release version (Debug version has 692kB). It’s because of Text Layout Engine and Flex framework are included in .swf. But because I will use it in AIR application, it’s ok for me.

I have created Flash demo for you, but it works just in Flash Player 10, because of Text Layout Engine. Just play with sliders and write your custom text to see effect. In case text will be truncating you will see green square, otherwise there will be red square (not truncated).

And this is source code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="fit()">
 
	<mx:Style source="styles/fonts.css"/>
 
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="100%">
			<mx:Label text="Text:"/>
			<mx:TextInput id="txtInput" width="100%" change="fit()" text="Text Layout Engine: Fit Text into Rectangle"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Font Size:"/>
			<mx:HSlider id="fsSlider" liveDragging="true" minimum="6" maximum="50" snapInterval="1" value="14"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Text Width:"/>
			<mx:HSlider id="wSlider" liveDragging="true" minimum="0" maximum="500" snapInterval="1" value="100"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="Text Height:"/>
			<mx:HSlider id="hSlider" liveDragging="true" minimum="0" maximum="500" snapInterval="1" value="100"
				change="fit()"/>
		</mx:HBox>
		<mx:HBox>
			<mx:Label text="isTruncated?"/>
			<mx:Canvas width="20" height="20" backgroundColor="0xff0000" 
				visible="{!isTruncated}" includeInLayout="{!isTruncated}"/>
			<mx:Canvas width="20" height="20" backgroundColor="0x00aa00" 
				visible="{isTruncated}" includeInLayout="{isTruncated}"/>
		</mx:HBox>
		<mx:UIComponent id="ui" width="100%" height="100%">
 
		</mx:UIComponent>
	</mx:VBox>
 
	<mx:Script>
		<![CDATA[
			import flashx.textLayout.factory.TruncationOptions;
			import flash.text.engine.Kerning;
			import flash.text.engine.FontLookup;
			import flash.text.engine.RenderingMode;
			import flashx.textLayout.formats.TextLayoutFormat;
			import flashx.textLayout.factory.StringTextLineFactory;
 
			private var sprite:Sprite;
 
			[Bindable] public var isTruncated:Boolean;
 
			public function fit():void
	        {
	        	if (sprite == null)
	        	{
	        		sprite = new Sprite();
	        		ui.addChild(sprite);
	        	}
	        	while (sprite.numChildren > 0)
	        	{
	        		sprite.removeChildAt(0);
	        	}
	            var factory:StringTextLineFactory = new StringTextLineFactory();
 
	            factory.compositionBounds = new Rectangle( 10, 10, wSlider.value, hSlider.value );
 
	            var format:TextLayoutFormat = new TextLayoutFormat();
	            format.fontFamily = "Verdana, _sans";
	            format.fontSize = fsSlider.value;
	            format.color = 0x000000;
	            format.textAlpha = .9;
	            format.kerning = Kerning.ON;
	            format.renderingMode = RenderingMode.CFF;
				format.fontLookup = FontLookup.EMBEDDED_CFF;
	            factory.spanFormat = format;
 
				var truncationOptions:TruncationOptions = new TruncationOptions('...',3);
				factory.truncationOptions = truncationOptions;				
 
 
 
	            factory.text = txtInput.text;
	            factory.createTextLines( useTextLines );
 
	            isTruncated = factory.isTruncated;
 
	            sprite.graphics.clear();
	            sprite.graphics.beginFill(0x555555,.5);
	            sprite.graphics.drawRect( 10,10, wSlider.value, hSlider.value );
	            sprite.graphics.endFill();
	        }
 
	        private function useTextLines( line:DisplayObject ):void
	        {
	            var displayObject:DisplayObject = sprite.addChild( line );
	        }
 
		]]>
	</mx:Script>
</mx:Application>

Table of contents for Text Layout Engine

1. Text Layout Engine in Flex 3
2. Text Layout Engine: Fit text into rectangle
3. Text Layout Engine: TruncationOptions

I’m going to play with Text Layout Engine, which is bundled in Flex 4. But we need to use it in Flex 3 in our Goalscape project. And it’s possible to use Text Layout Engine in Flex 3. All you need to do is download Flex 4 SDK, or Flash Builder and get textLayout.swc from Flex 4 SDK into your project to libs folder. I’ve played with Flex 4 beta testLayout.swc, but now when Flex 4 beta 2 is released I’ve checked both .swc files and filesize has raised from 326kB to 531kB, so I’m really interested in what was changed or added. I will post about my tests when I will find out anything. So if you are interested in some Text Layout Engine examples, stay tuned.

Table of contents for flex-tips

1. Problem with XML attributes in AS3.0
2. Unable to export SWC oem
3. Numeric sorting of Flex DataGridColumn

I have few times lately this error in Flex Builder and there were at least 2 cases, which cause this error to happen. So maybe it will help you to find your problem.

• Some file (in my case .flexLibProperties) has SVN conflicts, so you need to resolve conflicts and merge them to solve this “Unable to export SWC oem” error
• In your library project there are some assets, which are not checked in project Properties/Flex Library Build Path/Assets Tab

If you know about other case, which can cause “Unable to export SWC oem” error, please let me know in comments and I will add it here to help other people with their development. Thank you