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″]