Develop Your First Flex Android Application

In this tutorial I will show you how to make a very simple application for Android devices, and for that we’re gonna use Flash Builder 4.5, and we will make a Flex Mobile Project.
First, create a new Flex Mobile Project and name it HelloWolrd, after that you will see these 2 .mxml files which will be created: HelloWorld.mxml and HelloWorldHomeView.mxml.

Step 1

Open your HelloWorldHomeView.mxml file and put this code inside:


<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
		<s:Label text="Click to find something about me"/>
		<s:Button label="Click Me!" click="navigator.pushView(About)" styleName="next"/>
		<s:Label text="How are you?"/>
		<s:Button label="Send me your name!" click="navigator.pushView(Sending)" styleName="next"/>
	</s:VGroup>
</s:View>

As you can see we created 2 buttons and 2 labels. When I click on the first button the About view will open, and when I click on the second button the Sending view will open, but we don’t have any other view yet,than the HelloWorldHomeView.mxml. So now let’s make the other 2 views: Click FIle->New> MXML Component and name it About; make the same thing for Sending view.

Step 2

Now open the About view and put this code inside:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="About">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
		<s:Label text="My name is Horia Condrea!"/>
		<s:Button label="Back" click="navigator.popView()" styleName="back"/>
	</s:VGroup>
</s:View>


Step 3

Open the Sending.mxml and copy this code:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="Sending">
	
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void
			{
				
				// TODO Auto-generated method stub
				alert.alpha = 1;
				alert.enabled = false;
				if(txt.text == "")
				{
					alert.text = "Please give me your name";
				}
				else
				{
					alert.text = "Thanks for sending me you name " + txt.text;
				}
				
				
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
		<s:TextInput id="txt" mouseFocusEnabled="true"/> 
		<s:Button label="Send!" click="button1_clickHandler(event)"/>
		<s:TextArea id="alert" alpha="0" selectable="false" mouseEnabled="false" />
		<s:Button label="Back" click="navigator.popView()" styleName="back"/>
	</s:VGroup>
</s:View>


if you test the application you will see this:
[kml_flashembed movie=”http://www.horiacondrea.com/wp-content/uploads/article/First%20Android/First%20Android%20_controller.swf” height=”480″ width=”620″ fversion=”9″ useexpressinstall=”true” /]
Download:[download id=”1″]

Author: Horațiu Condrea

My name is Horațiu Condrea, and I work as a Software Developer Manager at Siemens PLM Software. I hope that my experiments will prove to be useful for many of you guys/girls out there. Don’t forget to leave a comment whenever you run over a bug or something that is not working as it should be. For any kind of information contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.