Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
3rd October 2011

Build an Android App using Adobe AIR

Part one of this tutorial looks at creating a layout for your app

Mobile development is rapidly becoming a requirement for the majority of web developers to consider. Clients may want an exceptional website, and a companion mobile application to allow their users and customers to use their services regardless of location. Typically, mobile app development brings with it a steep learning curve. With the latest release of Adobe’s Flash Builder tool, we are now able to develop for an Android device using familiar software and languages including ActionScript, and deploy as an AIR application.
In part one of this tutorial, we will instal the required software and powerful server-side application to handle remote data connections, and produce a simple layout to display our dynamic data on an Android device. Next month we will enhance our mobile application with secondary views and built-in screen transitions.

tools | tech | trends: Adobe AIR, Flash Builder Burrito, ColdFusion
expert: Matt Gifford
tutorial files: download here

Build an Android App using Adobe AIR

01. Install ‘Burrito’
Build an Android App using Adobe AIR
Firstly, download a copy of Adobe Flash Builder’s latest preview release, codenamed ‘Burrito’ from http://bit.ly/FlashBuilderBurrito. If you already own a copy of Flash Builder 4, your serial will work with this. If not, there is a 60-day trial for you to try out the software. Once downloaded, follow the installation wizard to install the application.

02. Get ColdFusion
Build an Android App using Adobe AIR
Now download ColdFusion 9 from http://adobe.ly/getColdFusion. Choose to download the free developer version from the right-hand menu and follow the installation wizard to install the server configuration version. A short video tutorial is also available to help you complete the installation process, which can be found at http://bit.ly/installColdFusion9.

03. Add the datasource
Build an Android App using Adobe AIR
Unzip database.zip from the disc and place the mobileDB directory in the ColdFusion db folder. In the Administrator (http://tinyurl.com/4x9s3j), navigate to Data & Services>Datasources and create a source called webDes_mobile with an Apache Derby Embedded driver. Set the database folder to the mobileDB folder.

04. Copy files across
Build an Android App using Adobe AIR
From the CD, open the ‘start/www’ folder and copy the files and directory structure into the ‘wwwroot’ folder within the ColdFusion directory. This contains the ColdFusion component (CFC) file that will interact as a gateway to query the database and send the recordset of data back to the mobile application.

05. Create a project
Build an Android App using Adobe AIR
In Flash Builder, click File>New from the top menu and select Flex Mobile Project to create a new application skeleton. Enter the project name ‘MobileAIR’ and accept all default settings in this section and within the Mobile Settings window, which defines the basic settings for the mobile application layout.

06. Configure Server Settings
Build an Android App using Adobe AIR
In Server Settings, select ColdFusion from the list, and select ColdFusion Flash Remoting. Ensure the Standalone option is selected, and validate the configuration to connect to your ColdFusion install. The correct connection details can be found on the cover CD to help you. Click Finish to complete the set up.

07. Setting the title
Build an Android App using Adobe AIR
The project has been generated with two files open in Flash Builder. Close ‘MobileAIR.mxml’ as this file is a placeholder. ‘MobileAIRHome.mxml’ is the default view file and will contain the code for the layout. Click the Design button to go into Design View and change the title of the application to ‘Web Designer Issue List’.

08. Add a list
Build an Android App using Adobe AIR
To display a list of dynamic data, we can make use of the List control. Using the Components view, drag and drop a List control into the main area of the window, give it an ID of IssueList and set the constraints as zero all around except for a margin of 73 on the top, as shown in the screenshot.

09. Connect the data
Build an Android App using Adobe AIR
Open the ‘Data/Services’ panel, click ‘Connect to Data/Service’ and select ColdFusion from the dialog window. On the next step browse to the location of the IssueService CFC file within the webroot. Enter the ColdFusion admin details if asked when proceeding to the next step. You’ll see a list of available remote methods usable within the application. Click Finish.

10. Populate the list
Build an Android App using Adobe AIR
Drag the getIssues() item from the panel onto the List control component to bind the remote data to it. Select ‘Configure Return Type’ and choose the ‘Auto-detect’ option before proceeding. Enter the custom name ‘Issues’ for the array to hold our dynamic data and finally choose IssueNumber as the label field option. Click OK to confirm the data binding.

11. Test the dynamic data
Build an Android App using Adobe AIR
Click the debug icon (the green insect) from the top menu to test the current implementation. The initial run will display a configuration window. Choose to launch the device from the desktop, and select an Android device to simulate from the drop-down list. The debugger will launch with the application and display the list of issue numbers as selectable buttons.

12. Customise the list
Adding specific information to the list items is manageable by adding an custom itemRenderer property within the list tag block which will display an icon for each item listed. You can also set a labelFunction and messageFunction property which
will display textual information about each magazine issue in the list. The full code for this step is included
on the cover disc.

001 <s:List id=”list” left=”0” right=”0”
top=”73” bottom=”0”
002     creationComplete=”list_creationComplete
Handler(event)”>
003     <s:AsyncListView list=”{getIssuesResult.
lastResult}”/>
004     <s:itemRenderer>
005         <fx:Component>
006             <s:MobileIconItemRenderer
007                 iconHeight=”100” iconWidth=”100”
008                 iconFunction=”getIssueCover”
009                 labelFunction=”getIssueListTitle”
010                 messageFunction=”getIssueKeywords”>
011
012             </s:MobileIconItemRenderer>
013         </fx:Component>
014     </s:itemRenderer>
015 </s:List>

13.The display functions
The MobileIconItemRenderer class is expecting three functions to display the relevant content for each list item. Write these inside an fx:Script block and place them directly between the MobileIconItemRenderer tags to run in line for each item. The returned output from each function will be automatically displayed through the visual renderer component.

001 <fx:Script>
002 <![CDATA[
003 private function getIssueCover(item:
Object):String
004 {
005     return “http://localhost:8500/assets/
coverImage/” + item.COVERIMAGE;
006 }
007 private function getIssueListTitle(item:
Object):String
008 {
009     return “Web Designer “ + item.
ISSUENUMBER;
010 }
011 private function getIssueKeywords(item:
Object):String
012 {
013     return item.KEYWORDS;
014 }
015 ]]>
016 </fx:Script>

14. Adding search capabilities
In Design View, add a TextInput component above the list item with the ID ‘searchTxt’, setting both width and height to 100%. Add an event handler to run after pressing Enter which will call a performSearch() method and filter the results on a keyword search. Add the search function into the Code View inside the main script block. The full code for this step is on the disc.

001 protected function performSearch(event:
Event):void
002 {
003     getIssuesResult.token = issueService.
searchFeatures(searchTxt.text);
004 }

15. Run a search
Build an Android App using Adobe AIR
Run the debugger tool from the top menu to test the application. The list items now display custom info including images, and the search function updates the list using a filtered keyword search via ColdFusion. You can also use the debugger menu to rotate the device simulator to test horizontal and vertical displays.

LOOK OUT FOR PART TWO NEXT WEEK

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.