MANNING IN ACTION www.it-ebooks.info Advance Praise for Flex Mobile in Action A must-read for anyone thinking of doing mobile apps. It’s simple enough for the novice and deep enough for the pros. —Ken Brueck Director of User Experience, Protoven Flex Mobile is cross-platform development at its best. —Andrew Grothe Developer, zedIT Solutions An excellent introduction to the powerful ability of Flex and AIR to target multiple mobile platforms. —Kirsten Schwark Senior Software Developer, iDashboards Great cutting-edge techniques for mobile apps developers! —Bill LaPrise Owner/Developer, c3works A very detailed and complete look at cross-platform mobile development with Flex. Lots of great examples explaining the whats, hows, and whys of mobile Flex development. —Brian Genisio Senior Software Consultant, SRT Solutions Very handy code snippets, both for novice and day-to-day development. —Fabien Nicollet GIS Software Engineer, Business Geografic It gets you building multi-platform real-world mobile apps in no time while acquainting you with best coding practices and techniques. —Alexandre Madurell R&D Analyst Programmer, KIT digital Get mobile applications running quickly with Flex on AIR. Very good for learning, with extremely reusable examples. —Doug Warren Software Architect, Java Web Services www.it-ebooks.info Flex Mobile in Action JONATHAN CAMPOS MANNING SHELTER ISLAND, NY www.it-ebooks.info For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: orders@manning.com ©2012 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Cynthia Kane 20 Baldwin Road Technical proofreader: Kevin Korngut PO Box 261 Copyeditor: Linda Recktenwald Shelter Island, NY 11964 Proofreaders: Melody Dolab, Nermina Miller Cover designer: Marija Tudor ISBN 9781617290619 Released as eBook only, May 2012 www.it-ebooks.info iv brief contents PART 1 GETTING STARTED 1 1 ■ Getting to know Flex Mobile3 PART 2 MOBILE DEVELOPMENT WITH FLEX 15 2 ■ Get going with Flex Mobile 17 3 ■ Persisting data 54 4 ■ Using your device’s native capabilities 78 5 ■ Handling multiresolution devices 128 PART 3 ADVANCED MOBILE DEVELOPMENT 155 6 ■ MVC with mobile applications 157 7 ■ Architecting multiscreen applications 218 8 ■ Extending your mobile application 246 9 ■ Effective unit testing 267 10 ■ The almighty application descriptor 291 11 ■ Building your application with Flash Builder 310 12 ■ Automated builds using Ant 324 www.it-ebooks.info v contents PART 1 GETTING STARTED 1 1 Getting to know Flex Mobile 3 1.1 Learning key terms 4 1.2 Deciding between native and cross-platform 4 1.3 What’s Flex Mobile? 6 What language am I coding in? 7 ■ What runs our code? 7 1.4 Hello World 8 Prerequisites 8 ■ Creating a new application 9 1.5 Introducing a running example 11 The roadmap for our example 12 ■ Public APIs and Rotten Tomatoes 12 ■ The RottenTomatoesAS3 API 13 1.6 Summary 14 PART 2 MOBILE DEVELOPMENT WITH FLEX 15 2 Get going with Flex Mobile 17 2.1 Starting up your application 18 Creating a TabbedViewNavigatorApplication 19 The views 21 www.it-ebooks.info vi 2.2 Running your application 23 Desktop run/debug configurations 23 ■ Adding a device configuration 27 ■ Device run/debug configurations 29 2.3 Building your first application views 29 Navigating your application with the ViewNavigator 29 Providing context with the ActionBar 35 ■ Updating the main application 37 ■ Creating the browse view 38 ■ Creating the list view 42 ■ Creating the search view 48 ■ Creating the details view 50 2.4 Persisting navigator state 52 2.5 Summary 53 3 Persisting data 54 3.1 Storing data with the local shared object 55 Creating a local shared object 57 ■ Interacting with a local shared object 57 3.2 Storing data using SQLite 60 Connecting to SQLite 62 ■ Creating a SQLite table 63 Reading from SQLite 65 ■ Writing to SQLite 67 Deleting from SQLite 68 ■ Updating a SQLite record 69 Adding public methods 70 ■ Integrating with SQLPersistenceManager 71 3.3 Simpler data storage with PersistenceManager 72 Interacting with PersistenceManager 73 ■ Implementing IPersistenceManager 74 3.4 Summary 77 4 Using your device’s native capabilities 78 4.1 Creating a device capability testing app 79 Creating a new application 79 ■ Creating the menu view 80 Application descriptor file 82 4.2 Taking the same picture three different ways 84 Using the CameraUI the cross-platform way 86 ■ Using the getCamera() method 88 ■ Accessing the device’s camera roll 91 Camera permissions 94 4.3 Monitoring movement with the accelerometer 94 Listening to the accelerometer 95 ■ The values returned from the accelerometer 96 www.it-ebooks.info vii 4.4 Finding out where you are with geolocation 98 Adding the geolocation permissions 98 ■ Getting location from the geolocation sensor 99 4.5 Including the entire web with StageWebView 102 Connecting the StageWebView with the stage 103 ■ Setting the StageWebView location 104 ■ Setting the StageWebView content 105 4.6 Using gestures the right way, right away 105 Setting your touch input type 106 ■ Using gestures 107 Using touch points 109 4.7 Texts, emails, maps, and phone calls 112 Sending SMS messages with SMS 113 ■ Sending emails with mailto 114 ■ Navigating with Google Maps 115 ■ Making a phone call with tel 116 4.8 Recording sound with the microphone 117 Adding the microphone permission 117 ■ Connecting to the microphone 118 ■ Recording and playing back audio 120 4.9 Responding to OS-specific inputs 122 Android operating system buttons 123 ■ BlackBerry bevel gestures 125 4.10 Summary 127 5 Handling multiresolution devices 128 5.1 Automatic scaling 131 Diving deep into automatic scaling 131 ■ Enabling automatic scaling 132 ■ Considerations with automatic scaling 133 5.2 Using media queries in CSS 133 Starting up the CSS file 134 ■ Adding color 136 ■ Overriding CSS based on DPI 138 ■ Adding in hardware-specific CSS media queries 141 5.3 Images for multiscreen projects 144 Organizing your images for multiscreen projects 144 Using the MultiDPIBitmapSource with an image 145 5.4 Overriding DPI returns to customize applicationDPI values 146 Finding the capabilities values for each device 146 ■ Overriding the RuntimeDPIProvider 147 www.it-ebooks.info viii 5.5 Splash screens 148 Basic splash screen 148 ■ Multiresolution splash screen 152 5.6 Summary 154 PART 3 ADVANCED MOBILE DEVELOPMENT 155 6 MVC with mobile applications 157 6.1 What is Robotlegs? 161 How Robotlegs works 163 6.2 Hitting the ground running with Robotlegs 169 Creating the context shell 169 ■ Connecting the context and starting up the application 171 6.3 Separating your services 173 Creating your public methods 174 ■ Transferring your result and fault events 177 ■ Mapping your service events to service commands 181 6.4 Refactoring your data into models 186 Creating your model shell 188 ■ Including the models in your context 195 ■ Creating your state model 196 6.5 Splitting your code into views and mediators 201 Creating the view 202 ■ Wiring up your mediators 204 Adding handler methods 206 ■ Connecting and disconnecting your mediator 207 6.6 Application upgrade 210 Changing the main application 211 ■ Building the ApplicationMediator 214 6.7 Summary 217 7 Architecting multiscreen applications 218 7.1 Laying out a multiscreen application 219 Hub library 220 ■ Spoke applications 220 7.2 Libraries 221 What’s a Flex library? 221 ■ Setting up the library 223 Creating your base context 225 7.3 Android application 227 Setting up your Android application 228 ■ Customizing the view/mediators for Android capabilities 231 www.it-ebooks.info ix 7.4 Creating your QNX-specific application 233 Setting up the QNX application 233 ■ Customizing the view/ mediators for QNX capabilities 236 7.5 Creating your iOS-specific application 240 Setting up the iOS platform application 241 ■ Customizing the view/mediators for iOS capabilities 242 7.6 Summary 245 8 Extending your mobile application 246 8.1 Making money by adding ads 246 Not all platforms support ads 246 ■ Not all ad systems are created equal 247 ■ Be honest or be punished 247 ■ Integrating with Google AdSense 248 ■ Creating the HTML page 250 Integrating ads into your application 251 8.2 Native extensions 254 Including native extensions 255 ■ Using a native extension 259 8.3 Useful user tracking 259 Using Google Analytics for Flash 260 ■ Plugging in tracking 262 ■ Integrating with tracking events in an application 265 8.4 Summary 266 9 Effective unit testing 267 9.1 What is unit testing? 267 Test-driven development 268 ■ Test-behind development 268 Flying blind 268 9.2 Testing terms 269 Test suite 269 ■ Test case 270 ■ Test method 270 Assert 271 ■ What do you unit test? 271 9.3 Synchronous unit tests 272 Creating a RendererUtil class 272 ■ Testing a utility class 273 9.4 Asynchronous test for event-driven tests 279 Testing a service call 279 ■ Writing the tests 281 9.5 Running tests from the IDE 283 Using Flash Builder to run FlexUnit tests 283 Creating an application to run FlexUnit tests 287 9.6 Summary 290 www.it-ebooks.info [...]... code listed in this eBook The full, nicely formatted, code can be found online in my GitHub account at https://github.com/jonbcampos /Flex- Mobile- In- Action or on the publisher's website at www.manning.com/FlexMobileinAction Under each code listing I include the path to find the specific file being discussed in the listing This is meant to make finding full code segments as simple as possible In some rare... code is shown in the book—mainly due to repetitive code Complete applications, including these missing segments, can be found in my GitHub account You can also download the source code in a zip file from the publisher's website at www.manning.com/FlexMobileinAction Also in the code listings, you will find code annotations that point out certain code segments and explain what each individual line of code... with the power built into the Flex framework www.it-ebooks.info www.it-ebooks.info 2 Get going with Flex Mobile This chapter covers Starting a Mobile Flex project Creating views Using the ViewNavigator Running your application Creating new device configurations Pulling data from Rotten Tomatoes AS3 API Customizing the ActionBar It’s time to dive headfirst into Flex Mobile development Armed... sample of Flex visual components skinned for mobile interaction This simple description of Flex Mobile opens the door to many more questions What language am I coding in? What runs our code? Next, I’ll answer these questions www.it-ebooks.info Getting to know Flex Mobile 1.3.1 7 What language am I coding in? When developing a Flex application you’ll hear people use phrases like the MXML code, the ActionScript... specifically Flex Mobile www.it-ebooks.info CHAPTER 1 Getting to know Flex Mobile 6 1.3 What’s Flex Mobile? With the decision to use a cross-platform framework for your mobile applications behind you, we’ll look at Flex Mobile specifically Some time back, before Flex 4.5+, Flex was already the best user interface framework on the market for browser and desktop applications Mobile devices were starting to... be saved www.it-ebooks.info 10 CHAPTER 1 Getting to know Flex Mobile Figure 1.4 Project Location dialog box After naming your new Flex Mobile project HelloWorld, click Next to configure your application (see figure 1.5) Figure 1.5 Mobile Settings dialog box www.it-ebooks.info Getting to know Flex Mobile 11 You can skip most of the project settings (we’ll revisit these settings in chapter 2), and select... and love with the mobile optimizations of a mobile specific framework, along with some industrial-strength upgrades to Flash Builder Including components specifically for mobile, Flex 4.5 took existing mobile components appropriate for the mobile user experience and provided mobile skins that were size appropriate for touch input and multi-DPI layouts The codename for this merged mobile- capable framework... Powered by thousands of active developers and contributors, the Flex framework is always improving and expanding At the time of this writing, Flex version 4.6 is just being released, adding additional mobile components to the Flex framework Figure 1.2 shows just some of the Flex components skinned for mobile use In addition to the selected list of mobile components shown, many other components are available... of code accomplishes Flex is an open source project, released under the Apache Software License and distributed with the Adobe Flash Builder IDE and many others You can also download Flex, in source or binary form, from the Flex home page at http://incubator apache.org /flex/ Author Online The purchase of Flex Mobile in Action includes free access to a private web forum run by Manning Publications, where... client asking for a mobile application! You spring into action and take the case only to realize later that mobile development is very different from the application development you’ve done in the past Enter Flex Mobile With the latest release of Flex, Flex 4.6—the successor to Flex 4.5 (codenamed Flex Hero), you can easily make applications that run on the web, desktop, or a wide range of mobile phones . website at www.manning.com/FlexMobileinAction. Under each code listing I include the path to find the specific file being discussed in the listing. This is meant to make finding full code segments. 2012 www.it-ebooks.info iv brief contents PART 1 GETTING STARTED 1 1 ■ Getting to know Flex Mobile3 PART 2 MOBILE DEVELOPMENT WITH FLEX 15 2 ■ Get going with Flex Mobile 17 3 ■ Persisting data 54 4 ■ Using. MANNING IN ACTION www.it-ebooks.info Advance Praise for Flex Mobile in Action A must-read for anyone thinking of doing mobile apps. It’s simple enough for the