Adobe Flash Builder 4.6 or later makes it easy for you to build mobile apps for a variety of devices using the same workflow you use to build web or desktop applications today. You can now build apps to run on the Apple iOS, Google Android, and BlackBerry Tablet OS platforms.
This tutorial walks you through the basic steps required in Flash Builder 4.6 to create and run a simple mobile Flex project both on the desktop and on a device. Although the screen shots in this particular tutorial show an Android device, the steps apply equally to an iOS or BlackBerry Tablet OS device. This app will display the text "Hello, World!" on your tablet or smartphone, with a button below it that you can tap to advance to another screen. (You can also watch a recorded presentation at the end of this article to see how to do many of the same tasks.)
First things first: Make sure you have a copy of Flash Builder 4.5.1 or later (an updater is available for existing Flash Builder 4.5 customers). You can download a trial version and try it out for 60 days.
Creating a Flex mobile project in Flash Builder 4.6 is easy:
- Select File > New > Flex Mobile Project to open the project wizard.
- On the Project Location screen of the wizard, specify the Project name: HelloWorld (see Figure 1).
- Keep the other settings at their default values, so just click Next.
Figure 1. Specifying the Flex project location
- On the Mobile Settings screen of the wizard, ensure that Google Android is checked as the target platform. (Note that you can also target BlackBerry Tablet OS and Apple iOS.) There are three possible app design styles; choose View-Based Application. Leave the other settings at their defaults for this exercise (see Figure 2).
Figure 2. Specifying the mobile settings of the Flex project
- This step is optional. You can click the Permissions tab to see which permissions are allowed by the app on the device at runtime. Leave INTERNET checked for now (see Figure 3), since you generally want the app to connect to the Internet on the device—and it's required for on-device debugging.
Figure 3. Determining the mobile app's permissions
- Click Next to advance to the Server Settings screen of the wizard. Leave the settings as-is (see Figure 4) and then click Next again.
Figure 4. Selecting the application server technology used by the mobile app
- Flash Builder now creates the project and updates the path settings, and shows you the Build Paths screen of the wizard. Here you can add libraries or source paths that you know you'll need in your application. You can also change some filenames and parameters. For your purposes here, you only need to change the Application ID, which is a unique string needed to help identify your application.
If you're creating a test project, any name is sufficient (e.g. "test") but a real-world application should use something similar to a fully qualified domain name. For example, com.mydomain.MyApp is a good choice, where MyApp is the actual name of your application. For this tutorial, enter com.mydomain.HelloWorld as the Application ID (see Figure 5) and then click Finish.
Figure 5. Adding libraries or source paths used by the mobile app
At this point Flash Builder should load the project, open the code editor, and display your new Flex mobile application in the authoring environment (see Figure 6).
Figure 6. Flex mobile project ready to code in Flash Builder (click to enlarge)
When you create a Flex mobile project, Flash Builder generates the following files for the project (where ProjectName is the name you give your project in the first step of the wizard):
- ProjectName.mxml: This is the application file for the project. Typically, you do not add content to the default application file directly.
- ProjectNameHomeView.mxml: This file represents the initial screen (or view) of the project. Flash Builder places the file in a package called "views."
(These are MXML files, written in the user interface markup language that Flash Builder uses to design application interfaces. You can read more about views in the online documentation.)
Right now the app is just an empty container, except for some information about the default layout. Time to add some text to the screen and a button below it that does something when pressed.
Make sure the HelloWorldHomeView.mxml tab is visible in Flash Builder. (If it's not, double-click the HelloWorldHomeView.mxml view in the Package Explorer on the left side of the project window.) Insert some blank lines above the closing
</s:View> tag. Type the following code (or copy the code from this listing and paste it directly into Flash Builder):
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Hello, World!"/>
<s:Button label="Continue" click="navigator.pushView(MyNewView)" styleName="next"/>
If you choose to type out the code yourself rather than copy and paste it, you'll notice that the code hinting feature in Flash Builder helps you enter the proper code correctly. (Watch the recorded presentation at the end of this article to see examples of code hinting in action.)
Select File > Save to save your file. Your code should resemble Figure 7. Here's what this code does: Inside the VGroup (a layout container that arranges elements vertically) is the code that will create a label that says "Hello, World!" and a button that says "Continue". The code will "push" the HelloWorldHomeView screen (or view) aside when the button is tapped, revealing a second screen, to be called MyNewView.
Figure 7. Code to display the "Hello, World!" text and "Continue" button on the screen
You're just a few steps away from testing your application. Right now the new MyNewView screen that this pushing script is supposed to act on does not yet exist, so let's create it now:
- In the main menu, select File > New > MXML Component. You'll see the New MXML Component dialog box.
- Make sure "HelloWorld/src" appears as the source folder. If it isn't, click the Browse button to select the HelloWorld project.
- For the Package, type views if it's not already there.
- For the Name, type in the name of the screen (view) that's referenced in the script that does the pushing: MyNewView.
- Keep the Layout set to None. Make sure that the component is "Based on" spark.components.View. Your dialog box should look similar to Figure 8.
- Click Finish.
Figure 8. Creating the MyNewView view
Back in the authoring environment, click the MyNewView tab to make it visible, if it's not already. Let's add some text and a button to this view. Insert some blank lines above the closing
</s:View> tag. Then type the following code (or copy the code from this listing and paste it directly into Flash Builder):
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Success!" />
<s:Button label="Back" click="navigator.popView()" styleName="back" />
Select File > Save to save your file. Your code should resemble Figure 9. Here's what this code does for MyNewView: Inside the MyNewView.mxml is a label that says "Success!" and a button that says "Back". The code will "pop" you back to HelloWorldHomeView when the button is tapped, so you'll return to where you started.
Figure 9. Code to display the "Success!" text and "Back" button on the second screen
Now you're ready to test the app.
You don't need a mobile device to test your app. Flash Builder makes it easy to run and debug mobile apps on the desktop:
- Ensure that the main MXML file for the project (its name should be HelloWorld.mxml) is open and active within the code editor.
- Click the Run button on the main toolbar (see the red highlight in Figure 10).
Figure 10. Clicking the Run button on the main toolbar
- Ensure that the target platform is set to Google Android.
- For the Launch Method, select On Desktop and then choose a device to simulate—for example, Motorola Droid Pro. Your settings should resemble those shown in Figure 11.
- Click Run in the dialog box to accept your settings and launch the application on the desktop.
- A program launcher called ADL now runs, showing a window (called HelloWorld-debug) that displays "Hello, World!" on the HomeView screen and a Continue button below it (see Figure 12).
- Click the Continue button to advance to the next screen, MyNewView, which displays "Success!" on the screen and a Back button below it. Clicking the Continue button is the equivalent of tapping the button with your finger on the actual device.
Figure 11. Selecting the emulated device with which to test the app
Figure 12. Running the mobile application in a window that mimics the device's look. The first screen appears on the left; the second screen on the right.
- Either click the Back button or press Control-B (Command-B) to go back to the previous screen. This is the equivalent of tapping the Back button on the actual device. You can click back and forth between these two views.
- Close the HelloWorld-debug window and then select File > Save to save your Flash Builder project file.
Congratulations! You have successfully run your first Flex mobile app on the desktop.
Testing your app on a simulated device is one good way to see how it looks but running and debugging the app on an actual device is even better. The following steps show you how to run your application on your own Android device connected using USB:
- Make sure that USB debugging mode is enabled on your device. On Android 2.2, you do this by launching the system settings application, tapping Applications > Development, and then ensuring that USB Debugging is checked. (Tap OK on your device to allow USB debugging.) For more information, see Connect Google Android devices in the online documentation.
- Plug your device into your computer via a USB cable. Your device may prompt you to choose a connection type. Choose to mount it as a disk drive.
If you see a dialog box that asks you to choose your device, and don't see yours in the list, click the "I do not see my connected device in the list" link. This takes you to the Connect Google Android devices page in the online documentation.
Also, if you see a warning dialog box that says, "The disk you inserted was not readable by this computer," click Ignore (rather than Eject) to complete the steps. You'll still be able to test the app on your device.
- Because you ran a test configuration of HelloWorld on the desktop in the previous section, this time click the black downward arrow next to the Run button in the toolbar at the top of the Flash Builder workspace and select Run Configurations (see Figure 13) to display the Run Configurations dialog box. (Clicking just the Run button simply repeats the previous test configuration.)
Figure 13. Clicking the arrow next to the Run button on the main toolbar
- In the Run Configurations dialog box, ensure that the Project field displays "HelloWorld" (if not, click Browse to select it), the application file is set to "src/HelloWorld.mxml", Google Android is the target platform, and On Device is the selected launch method (see Figure 14). Select the appropriate target platform for your actual device, if it's not Android.
- Click Run in the dialog box to make Flash Builder send the app to your device. Your device should respond and your app should automatically launch.
Figure 14. Configuring the app to run on a mobile device
Note: If your computer prompts you to upgrade your device to run the latest version of Adobe AIR, click OK (see Figure 15).
Figure 15. Prompt to upgrade your device to the latest version of Adobe AIR
Congratulations! You have successfully run your first Flex mobile app to an Android device. Note that your app is called HelloWorld-debug on the device. For other devices, you will want to connect your particular device and select the appropriate target platform in the Run Configurations dialog box.
Now it's time to deploy the release build of your HelloWorld app. (A release build is generally the final version of the application.)
Once you're ready to release the final build of your application—for example to the Android Market—you can export it from Flash Builder:
- With your project open in Flash Builder, select Project > Export Release Build.
- In the Export Release Build dialog box, make sure that your HelloWorld project appears in the Project selector. HelloWorld.mxml should appear in the Application selector.
- Connect your device to your computer if it is not already.
- Specify the base filename of the Android Package (APK) file or leave the default, which is the project name.
- Make sure that "Signed packages for each target platform" is selected. Click Next to start the build export process.
- You now have to select a digital signature that is used to sign the application. Trusted signatures are obtained from certificate authorities, but you can create a self-signed certificate for now. Either locate your existing certificate and enter your password, or click the Create button and fill out the information in the Create Self-Signed Digital Certificate dialog box. (Use your name as the publisher name and enter your password where indicated.)
- Click Browse to save your certificate to your computer. The path and filename you entered will now appear in the Save As field (see Figure 16). Click OK to return to the Export Release Build dialog box.
- This next step is optional. Click the Package Contents tab to see which assets are being included in the release build. These are the necessary files for your app to run, and they vary from app to app. (Including more assets may increase the final package size, so you'll want to carefully determine which assets to include when you publish your mobile apps to devices.)
- Click the Deployment tab and note the "Install and launch application on any connected devices" option. If you select this, the APK file will automatically be pushed to any connected Android device(s).
- Click Finish.
Figure 16. Creating a self-signed digital certificate
Congratulations! Flash Builder created the release build (APK) file and deployed and installed it on your device. Note that the release build is called HelloWorld, while the app called HelloWorld-debug is your test app.
Note: If no device is connected or recognized, you'll see a warning that it wasn't successfully deployed.
You will find your APK file in the default folder where Flash Builder stores your project asset files:
- Windows: C:\Users\<username>\Adobe Flash Builder 4.6\<project folder>
- Mac OS: HD/Users/<username>/Documents/Adobe Flash Builder 4.6/<project folder>
You could now submit this as an app to the online store.
The packaging process for each platform varies based on the requirements of the manufacturer. Read the following resources to learn more about packaging the app for additional platforms:
Flash Builder makes it a snap to change the appearance ("skin") of visual elements in your project. The following steps show you how to import a style sheet and some skinning MXML files so you can swap out the buttons' look with a simple code change.
- Download the sample project file (HelloWorld-source.zip) from the top of the article and extract its contents to a folder of your choosing (for example, on the desktop).
- Within Flash Builder, select File > Import Flash Builder Project from the main menu. In the Import Flash Builder Project dialog box, browse to the HelloWorldSkins.fxp file and click Open. Click Finish in the confirmation dialog box to complete the process.
- Note the addition of the HelloWorldSkins project to the Package Explorer. Expand the HelloWorldSkins folder to reveal the main.css file in the HelloWorldSkins/src/(default package) folder.
- Drag the main.css file from the HelloWorldSkins project to the corresponding HelloWorld/src/(default package) folder (see Figure 17).
Figure 17. Dragging the main.css file from the HelloWorldSkins sample project (left) to your HelloWorld project (right)
- In the Move dialog box, confirm that you want HelloWorld/src/(default package) as the destination folder for the move (see Figure 18). If a different destination is highlighted, just click "(default package)" to select it. Click OK.
Figure 18. Confirming the destination of the moved file
- Select File > New > Package from the main menu. In the New Package dialog box, make sure that "HelloWorld/src" appears as the source path and enter skins as the package name. Click Finish to complete the process.
- Back in the Package Explorer, expand the HelloWorldSkins/src/skins folder to reveal four MXML files:
Select the first MXML file in the list and then press Shift on your keyboard and select the last MXML file in the list. You should have selected all four files in the group.
- Drag all four files to the empty HelloWorld/src/skins folder you just created. This time the Move dialog box asks you to confirm the destination of the four resources you're moving. Make sure that "skins" is highlighted and click OK to complete the move. Your HelloWorld asset structure should now look like Figure 19.
Figure 19. Revised HelloWorld asset structure showing newly added main.css file and skin MXML files
- To make your HelloWorld project aware of the main.css file that you just moved there, you need to add a link to it in the project file. If the HelloWorld.mxml tab is not already visible, double-click the HelloWorld.mxml file in the "(default package)" folder to open it in the workspace. Insert the following line just above the closing
Your code should resemble Figure 20.
Figure 20. HelloWorld.mxml file showing new code referencing the main.css file
- Select File > Save to save the HelloWorld.mxml file.
- With the HelloWorld project selected in the Package Explorer, click the Run button. You should now see a very different set of buttons on the screens (see Figure 21).
Figure 21. Buttons with the NextButtonSkin1 and BackButtonSkin1 skin applied
- Earlier you moved four skin files from the article's sample file to your own. Figure 21 shows one set of skins; a simple code change can alter the buttons' look considerably.
- First close the ADL window showing the app demo. Then double-click the main.css file in HelloWorld/src/(default package) to open it in the workspace. Change the skin names being referred to from "1" to "2":
- NextButtonSkin1 becomes NextButtonSkin2
- BackButtonSkin1 becomes BackButtonSkin2
- Save the main.css file (File > Save) and re-run the HelloWorld app. You should now see a very different set of buttons on the screens (see Figure 22).
Figure 22. Buttons with the NextButtonSkin2 and BackButtonSkin2 skin applied
Congratulations! You've seen how easy it is to change the appearance of a button in your HelloWorld app buy making a simple change to the main.css file, which references a specific skin definition file that you inserted into your project.
Now that you've followed the tutorial and seen how easy it is to build a simple app, test it on the desktop, change its appearance, and deploy it to a device, watch the following presentation to see how a seasoned developer approaches the task. Duane Nickull, senior technical evangelist at Adobe, takes you on a personal tour of Flash Builder as he builds a simple "Hello, World!" app, tests it on the desktop, and exports a release build. By watching him type the code (rather than copying it from this tutorial), you can see how the code-hinting feature in Flash Builder helps you enter the proper code correctly.
Duane Nickull gives you a personal tour of Flash Builder as he builds a simple "Hello, World!" app. (Best watched in full-screen mode.)
To read a more advanced tutorial that explores this mobile application development workflow further, be sure to check out Build your first mobile Flex application – Twitter Trends, in which you build an app that incorporates the latest trending topics from Twitter.
In addition, the Flex Test Drive for Mobile shows you how to build an application in an hour by following a guided sequence of videos, sample code, or short tutorials.
The Adobe Developer Connection offers many resources to help you become more familiar with mobile development and dig deeper into learning the tools to get it done. To learn more about the new features and enhancements in Flash Builder 4.5, read What's new in Flash Builder 4.6 by Adam Lehman. Narciso Jaramillo provides a detailed overview of the current state of mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5.
Find out more about the Flex layout properties in About Spark layouts in the online documentation. The Mobile and Devices Developer Center is also a great place to find out more about developing mobile apps.
This tutorial is based on a workshop originally given at the Adobe MAX 2010 Device Lab by Daniel Koestler. Thanks to Garth Braithwaite who helped with reskinning the buttons, and Duane Nickull who contributed the demo video.