Friday, September 14, 2012

Adobe Flex 4.6 : Mobile Application From Tip To Toe



                                      System requirements

Adobe Flex builder 4.6 (trail available on internet for download) download here.
Adobe Flex4.5 also supports mobile application development but the new Adobe flex 4.6 has more components and updates. The new features of Flex 4.6 will help you to achieve great performance and experience, especially with scrolling lists and transitions between views.

                      Supported operating systems

·         Microsoft® Windows® 7 (32 bit), Windows Vista® (32 bit), or Windows XP Professional with Service Pack 2 or 3
·         Mac OS X v10.5.6–10.6 (Intel® only)
·         Ubuntu 9.10
·         Fedora Core 12

                                            Java virtual machine

Java™ Virtual Machine (32 bit), IBM® JRE 1.5, IBM JRE 1.6, Sun™ JRE 1.5, Sun JRE 1.6

                      Supported runtimes

·         Adobe® Flash® Player 11
·         Adobe AIR® 3


                                      Sample Flex Mobile Application

Let’s start building a simple flex mobile application for android. Flex 4.6 lets you develop native applications for Android devices, BlackBerry and IOS. We are taking example of android since it’s widely used among Indian masses.
I’ll cover a simple hello word mobile application development here and will show you how to deploy it on your android device.

Step : 1 Open New Mobile Project

Open a new Flex Mobile Project




Give your project a name, say “HelloWorld” and click on Next





Choose a template , here we are using a blank “View Based Application  for Google Android. Now click on Finish.






Step : 2  Default Project Structure

In the Package Explorer you will see your project created with some default structure like this



Under default package resides default main application file.
HelloWorld.mxml

xmlns:fx="http://ns.adobe.com/mxml/2009"
                                   xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.HelloWorldHomeView" applicationDPI="160">
      
The  firstView contains the name of the file to be shown first when application is executed.

Step : 3  HelloWorld Example Code

In HelloWorldHomeView.mxml we will simply create a Label and two buttons to hide and show the Label.
HelloWorldHomeView.mxml
xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
       <![CDATA[
protected function btnClick_clickHandler(event:MouseEvent):void
              {
                     lblHello.text="Hello World";                                  }
             
protected function btnClear_clickHandler(event:MouseEvent):void
              {
                     lblHello.text="";
              }
             
       ]]>
  width="50%" height="162" >
      
horizontalAlign="right"
verticalAlign="top"/>
       id="lblHello"/>
       id="btnClick" label="Click Me"
              click="btnClick_clickHandler(event)"/>
       id="btnClear" label="Clear"
click="btnClear_clickHandler(event)"/>  

Step : 4 Run on Desktop

To Run the application click Run button or press Ctrl+F11. On first time execution the run configuration appears.



Choose the option On Desktop and then device name (like Samsung Galaxy Ace) and then click on Run.


 

OutPut :


Step : 5  Installing .apk on device

In order to create the .apk file which will be deployed on your device we need to Export Release build

Click Next and go to Digital Signature tab . Create your Certificate and Password by clicking on create button. And then click on Finish.




You can now see your .apk (HelloWorld.apk) file in Package Explorer

Now send this .apk to you device via Data Cable or Bluetooth and install the application and Enjoy!!!
 If you face any issues in Exporting Release Built kindly refer following link : Installing an application on a Google Android Device

Please Vote here