Mobile Apps Resource: Flash Builder “Burrito” Mobile Application

Flash Builder “Burrito” Mobile Application:

Recently, I spend some time to feel the great environment in Flash Builder “Burrito” for mobile application development. I like to share the basic ideas to start work on mobile application development environment.

With the rapid evolution of mobile computing platforms, new challenges have emerged for application developers. Adobe Flex SDK “Hero” and Flash Builder “Burrito”, along with the availability of the Adobe AIR runtime on mobile devices, developers can now build mobile applications for touchscreen smartphones and tablets with same ease and quality as on desktop platforms using Flex.

Setting up the project

After installing Flash Builder “Burrito” follow these steps to create your first mobile application:

1) Choose File > New > Flex Mobile Project.

2) For project name type FirstMobileApp

3) For mobile settings, make sure Google Android and Mobile Application options are selected.

4) Skip the server settings with their default values ( As we are not using application server for this application.)

5) Skip the build path settings with default values and select Finish.

Flash Builder “Burrito” creates a new mobile project, with two default files and initial view of the application. Now, its ready to start application logic, according to your needs. But for the first mobile application we creating simple application with navigation between some screens.

Now, first add a Button, to perform navigation to application’s first view. For this we are using ViewNavigator component. To change views will have to update the navigator what to do and accordingly, the build in navigation system responds. Will have to add the following code to add Home button to first view.

<s:navigationContent>

<s:Button label="Home" click="navigator.popToFirstView()"/> 

</s:navigationContent>

When the Home button clicked, postToFirstView() invoked, and the navigator will display the first view.

Within the tag <s:navigationContent> in FirstMobileApp.mxml, the firstView property has been set to views.FirstMobileApp, which refers to a file that was automatically generated when you created the project. When the user clicks the Home button, the ViewNavigator component will load the views. FirstMobileApp view.

Now, follow these steps to add more view screen :

1) Right-click the views package and select New > MXML component.

2) Type component name, here DetailsView as the name

3) Click Finish

4) Update the DetailsView code as below:

<?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="DetailsView">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>

 <s:VGroup horizontalCenter="0" verticalCenter="0">
 <s:Button label="Go Home"
 click="navigator.popToFirstView()"/>

 <s:Button label="More Details View"
 click="navigator.pushView(views.MoreDetailsView)"/>  
 </s:VGroup>

</s:View>

5) Repeat the steps as describe above and create MoreDetailsView.mxml and update its code.

Running the application in the emulator

Now follow the steps, to run the application with the emulator.

1) Open the FirstMobileApp.mxml

2) Choose Run > Run As > Mobile Application.

3) Select On Desktop as the Lunch Method and then choose a device to simulate

4) Click Apply > Run

The emulator will open and you will be able to navigate through the application using the buttons.

Running the application on a device

Excited to run the application on device!

If you have an device, you can follow the steps below to test your application on your device:

1. Plug your device into your USB port and choose Run > Run Configurations.

2. Change the Launch Method to On Device.

3. Click Run.

4. If the Choose Device dialog box appears, you may need to click Refresh and select your device.

If everything configure perfectly, then the application simply launch on device.