Home » AIR, AIR for Android, Adobe, Flash AS 3

Air for Android (Flash Cs5): read XML files and use standard flash components

25 August 2010 5 Comments

When you’re working with Air for Android, you could often need to load application settings (or something else) from a local XML file.

So I got a similar exercise from my AIR and Flash CS5 Training course, I fixed just a bit the UI for a better view in a mobile device and I have tried if it worked on my Google Nexus One.

The answer is YES, it perfectly works without any important change.

Following the features of this sample:

1) loading data from an external XML files (info.xml)
2) displaying all XML content in a TextArea Flash component
3) get a list of urls from the XML file and display all the url labels in a List Component and the site name in the TextArea after every user list selection.
NOTE: I have not optimized the UI of the List component for mobile devices. Sorry but it was out of scope.
4) opening the selected website clicking on the Button Flash component “Open URL”.

Thanks to this test I understood that “Flash standard components” perfectly works in Android and I also opened URLs from the AIR application in a native Android browser simply using the navigateToURL AS3 command.

Check following video demo (no-audio) to see how it works:

Application screenshots (and see how Android correctly displays my Flex website in the 3rd image):
AIR-Android-XML-001 AIR-Android-XML-002 AIR-Android-XML-003

AIR-Android-XML-004 AIR-Android-XML-005

The loaded XML file:

<?xml version="1.0" encoding="utf-8" ?>
<data>
 
	<item>
		<title>WebSite</title>
		<link>http://www.fabiobiondi.com</link>		
	</item>
 
	<item>
		<title>My Blog</title>
		<link>http://www.fabiobiondi.com/blog</link>		
	</item>
 
	<item>
		<title>Google</title>
		<link>http://www.google.com</link>		
	</item>
 
</data>

The AS3 document class:

package 
{
	import fl.controls.List;
	import fl.controls.Button;
	import fl.controls.TextArea;
	import fl.data.DataProvider;
	import fl.events.ListEvent;
	import flash.desktop.NativeApplication;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextFormat;
	import flash.net.navigateToURL;
 
 
	public class XMLLoaderBase extends MovieClip
	{
		private var xmlData:XML;
		private var list:List;
		private var msgTxt:TextArea;
 
 
		public function XMLLoaderBase() 
		{
			uiCreation();
			loadXML("info.xml")
		}
 
 
		/**
		 * Create the UI.
		 * Remember to import all the component assets in your flash library
		 */
		private function uiCreation():void {
 
			var format:TextFormat = new TextFormat();
			format.size = 25;
 
			// Create the TextArea to display the xml content and urls
			msgTxt = new TextArea();
			msgTxt.move(5, 5)
			msgTxt.width = this.stage.stageWidth - 10;
			msgTxt.height = 300
			msgTxt.setStyle("textFormat",format) 
			addChild (msgTxt)
 
			// Create the links LIST Component
			list = new List();
			list.move (msgTxt.x , msgTxt.y + msgTxt.height + 5)
			list.width = msgTxt.width;
			list.height = msgTxt.height;
			list.addEventListener(ListEvent.ITEM_CLICK, onListClick)
			addChild(list)
 
			// Display the BUTTON "Visit URL"
			var button:Button = new Button();
			button.label = "Open URL";
			button.width = 150;
			button.height = 40;
			button.setStyle("textFormat",format) 
			button.x = list.x;
			button.y = list.y + list.height + 5;
			button.addEventListener(MouseEvent.CLICK, gotoURL)
			addChild(button)
 
 
		}
 
 
 
		/**
		 * Load the XML 
		 */
		private function loadXML(url:String):void
		{
			xmlData = new XML();
 
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, onXMLLoaded)
			xmlLoader.load(new URLRequest(url)); 
 
		}
 
 
		/**
		 * XML data are successfully loaded
		 * @param	e
		 */
		private function onXMLLoaded(e:Event):void 
		{
			xmlData = XML(e.target.data )
 
			// Display all the xml content
			msgTxt.text = "Display all ITEMS:nn" 		+ xmlData.item + "n";
 
 
			// Create a list component from the XML content
			populateList();
		}
 
 
 
		/**
		 * Create a list to display nodes
		 */
		private function populateList():void {
 
 
			// List population
			var dp:Array = new Array();
 
			for (var i:int = 0; i < xmlData.item.length(); i++) 
			{
				var item:XML = xmlData.item[i];
 
				 dp.push( { label: item.title , 
							data: item.link } );	
 
			}
 
			list.dataProvider = new DataProvider(dp)
			list.selectedIndex = 0;
 
		}
 
 
		/**
		 * On List selection
		 * 
		 * @param	e
		 */
		private function onListClick(e:ListEvent):void 
		{
			var list:List = e.target as List;
			var item:Object = e.item;
 
			msgTxt.text = item.label + " - " + item.data;
 
		}
 
 
		/**
		 * Open the URL using the default Android browser
		 */ 
		private function gotoURL(e:Event):void 
		{
			navigateToURL(new URLRequest(list.selectedItem.data)); 
		}
	}
 
}

The last important step to remember before publishing the Android/Air file is to include the info.xml file in the Android package (extension .apk) .

airpublishsettings

5 Comments »

  • Fabio Biondi Blog » Blog Archive » Android, Flash Cs5 and remote xml requests said:

    [...] my last Air for Android article I have explained how to load a local XML file in a Flash CS5 Android [...]

  • Gaston said:

    Thanks for posting this. I’ve been trying to get my application running on my handset and your post made me realize that I neglected to include my xml file!

  • Fabio Biondi (author) said:

    I’m happy to heard it has been useful.
    Thanx for posting! : )

  • Lars said:

    I have a question about this tutorial.
    When I create an app for Android this way and I publish it to the Android Marketplace, does that mean people need to have Air installed on their phone to use my app, or is the installation of Air only necessary for developing and testing the app (for me!).
    It would be a dissapointment if people can’t just use my app but first have to download air for it to work.

    Thanks in advance

  • Fabio Biondi (author) said:

    Hi Lars,
    users need to install the AIR Runtime to use your applications but there is a good news for you.
    If an user doesn’t have the runtime on the device, after the application download but before to install the application they should redirected to install the AIR runtime.

    To be 100% sure you could try it in this way:
    - uninstall the AIR Runtime on your device
    - Upload your app in the store
    - try to download it and check the process

    It should works fine.
    Fabio

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.