Flash Builder Demo 2: Mobile Development
Editor's Note: This is Part-2 of a three-part tutorial. For links to all sections, check out the tutorial summary.
In light of the increasing competition for web traffic, a mobile app for business can no longer be viewed as optional. While Demo 1 of the Flash Builder series introduced simple data access in a Flash app, in this tutorial we will see how Adobe Flash Builder 4.5 and the Axeda Platform make it easy to build an app that's accessible across a wide range of mobile platforms.
Project Setup
Be sure to have Flash Builder 4.5 installed.
http://www.adobe.com/products/flash-builder.html
If you would like to run the finished app with the Blackberry Playbook:
1. Download and install the Playbook sdk, available at http://us.blackberry.com/developers/tablet/adobe.jsp.
2. In Project Properties, “Flex Build Packaging”, “Blackberry Tablet”, “Advanced”, “Extra Packaging Options” enter “-forceAirVersion 2.5”.
3. In Project Properties, “Flex Compiler”, “Additional Compiler Arguments” append “-swf-version=10”.
4. Copy the included library “playbook_overrides.swc” into your project's libs folder.
Open Flash Builder 4.5
1. Click “File” > “New” > “Flex Mobile Project”
2. Name the project accordingly.
3. Click “Next” and Select “Tabbed Application”
4. Add tabs for Assets, Alerts, and Events
5. Under Permissions, select Blackberry and Android and make sure they have permission to access the internet.
6. Click “Finish”
7. Notice it creates a few mxml files for you.
Design
Once the project has been set up, create the main display view.
8. Open each of those Views, switch to design view and drag a List component to the stage and position like we did in Demo 1. (Four Checkboxes in positioning 10 pixels apart)
9. From the device drop downs, you may want to switch to iPhone 3Gs, this is the lowest resolution phone, and the easiest to visualize, plus it keeps us in check for how much real estate we can use.
The Emulator
Start up the Emulator to get a feel for what the app looks like on the device.
10. Launch the app using the Green Arrow button at the top.
You will be presented with a window to determine how to launch it.
Use the desktop for now, and feel free to select any device you like. (I personally usually test iPhone 3GS and Motorola Xoom as they have the lowest and highest resolutions and can give the best comparison). Notice how the emulator works, under device, rotate left/right, etc.
Data Services
Now let’s connect the app to the data services.
14. Define the data services like you see below, each with username and password as parameters.
• Base Url: http://platform.axeda.com/services/v1/rest/Scripto/execute/
• Add Operations
i. Name: GetAssets
ii. URL: KillerApps_GetAssets
iii. Name: GetAlarms
iv. URL: KillerApps_GetAlarms
• Add the parameters for GetAssets
i. username
ii. password
• Add the parameters for GetAlarms
i. username
ii. password
iii. person
• Name the Service, and set the package name ("Axeda.Controller.Services"). This package will contain the generated classes.
15. Click Finish.
Return Type
The return type of the data service calls is configurable, so change it for each call to Events, Alerts and Assets, respectively. If you followed along with Demo 1, this should look familiar.
16. In the Data Services panel, right click “GetAssets()” and select “Configure Return Type”
Click “Next” and enter the username and password for the services as demo@flash.ap
17. Enter "Events" as the name for the new data type.
18. Repeat these steps to create return types for each method. When finished, your Data Services panel should look like the following screenshot:
Data Binding
Let's connect the data services to the displays.
19. Open each view, and drag the associated function to the associated stage. Be sure the View is selected, not the List component.
• GetAlarms to AlarmsView
• GetAssets to AssetsView
• GetEvents to EventsView
20. Each time you will be presented with a prompt.
Fill in the username and password as in the following code:
21. For each List and View, set the Data Binding to the associated object array, and use the following for the label variable:
• Assets: name
• Alarms: description
• Events: name
22. Execute the application using the green arrow. Try running the app in different device emulators.
Nicely done! In this demo, you created a tabbed mobile app that is accessible and has been tested across several devices. Learn more about publishing an RIA by reading Host an HTML and Javascript RIA from the Axeda Platform.
