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:

Download:[download id="1"]

Leave a Reply

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


*

WordPress SEO