Fluent Essays

outline the steps for building the Derby app in PhoneGap outline the steps for building the Derby app in iMonoTouch. two pages with references Getting Started with MonoTouch and Mono for Android Developing in the mobile space can be a daunting task for developers. You have to fi gure out which platforms you should support for your app, purchase the hardware, and join the developer programs for each platform, so the last thing you may want to do is to learn a new programming language. In 2009 Miguel de Icaza, with a team of other developers, released version 1.0 of the MonoTouch framework. MonoTouch enabled .NET developers to create iOS applications in C# and then deploy to iOS hardware. After the initial launch of the MonoTouch framework, Apple modifi ed the iTunes terms of service to allow only apps that were created using Objective-C into the market, a decision that was quickly reversed. Although short lived, this edict from Apple is a fact that many developers keep in the back of their mind, knowing that Apple can change the terms of service again at any time. The bright side of this policy was that it was only for apps being deployed to the iOS store; if you created an app for internal company use that was deployed using an ad-hoc method, you were still free to use whatever non-Objective-C framework you liked. THE MONO FRAMEWORK MonoTouch and Mono for Android rely on the Mono Framework to function. Mono is a cross-platform open source implementation of the .NET Framework. The Mono project is led by Miguel de Icaza, with the sponsorship of his company Xamarin. The Mono project was started in 2001, with version 1.0 released in 2004. Throughout the years of development, a team of open source developers worked to keep parity with the C# and libraries within the .NET Framework. One of the most impressive development projects I have seen was when the Mono project released Moonlight, the Mono implementation of Silverlight, within 24 hours of Microsoft releasing Silverlight to the developer community at the Mix conference in 2007. 12 c12.indd 343c12.indd 343 28/07/12 6:09 PM28/07/12 6:09 PM 344 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID The Mono project focuses on providing: An open source Common Language Infrastructure (CLI) implementation: ECMA-335 is the open standard developed by Microsoft that describes the core of the .NET Framework. The Mono CLI provides a runtime environment for code that has been compiled to Common Intermediate Language (CIL). A C# compiler: ECMA-334 defi nes the open standard of the C# language. The Mono C# compiler is responsible for compiling C# code in the Common Intermediate Language that the CLI run time executes. An open development stack: The Mono project strives to provide tools that are both useful and easy for developers to use. At the forefront is the MonoDevelop IDE along with various other tools for linking, and other core libraries specifi c to UNIX environments such as the GTK# library used for GUIs. The current Mono C# compiler provides a complete feature set for C# 1, 2, and 3, with partial support for C# 4. MonoTouch MonoTouch is a set of tools that enables a developer to build iOS applications using their existing knowledge of the .NET Framework. The MonoTouch tools provide a combination of the core .NET Framework features along with APIs provided in the iOS SDK. The MonoTouch team has spent a great deal of time trying to provide an interface with names that match the corresponding iOS feature, in an effort to make the MonoTouch API very similar to the iOS SDK without sacrifi cing conventions that .NET developers are accustomed to. Although MonoTouch is based on the open source Mono project, MonoTouch is a commercial product, which is licensed on a developer basis. For up-to-date licensing info, visit the Xamarin store website at https://store.xamarin.com/. The Microsoft .NET Framework languages (Visual Basic, C#, F#) are interpreted languages that compile to Common Intermediate Language (CIL), and then are just-in-time (JIT) compiled, meaning in the normal uses of the .NET Framework, your code isn’t truly compiled until run time. Interpreted code/JIT compilation is not supported within iOS and is blocked via the terms of service as well as functionality within the iOS kernel. This means that a different solution is needed for the Mono framework to work within iOS. MonoTouch is delivered as a static compiler that turns .NET code into static byte code. MonoTouch apps are compiled using ahead-of-time (AOT) compilation (static compilation), which allows all code that is normally JITed to be generated from CIL to a single native binary that can then be signed, just like a C compiler would generate static byte code. This method loses some of the dynamic functionality of .NET, but features such as generics are still supported. Linking Because libraries cannot be reused in iOS, every time your app is installed on a device, the Mono Framework is bundled inside your app as well. When your MonoTouch app is compiled, a process runs that analyzes which portions of the Mono framework you are actually using, and creates a c12.indd 344c12.indd 344 28/07/12 6:09 PM28/07/12 6:09 PM The Mono Framework ! 345 custom version of the Mono Framework ARM CPU architecture, with only the functionality your app is using, and then links this version into your app. What this means is that if you have fi ve different MonoTouch apps installed on your iOS device, each app will have its own version of the Mono Framework. The fact that the Mono Framework needs to be installed increases the size of the app over a natively created app, but this is fully dependent on how much of the Mono Framework is being utilized. In most cases, the size increase of the app is trivial. The linker is integrated into MonoTouch and the MonoDevelop IDE, so you do not need to worry about doing anything extra. Performance Both Objective-C and the Mono Framework’s AOT compiler use the same low-level virtual machine (LLVM) for generating and optimizing the binary code, so there should be no performance difference using MonoTouch as opposed to Objective-C. Because portions of the Mono Framework are compiled into the fi nal assembly, the apps may be larger. Mono for Android Mono for Android is the sibling product of MonoTouch. Mono for Android allows .NET developers to create apps for the Android operating system using a set of tools they are familiar with. With Mono for Android, developers can create Android applications within Visual Studio or the MonoDevelop IDE. Mono for Android 1.0 was released in April 2011, and is much younger then the MonoTouch framework but is a viable alternative to native Android development. The Android operating system is a Linux-based system where Android apps run on top of a virtual machine named Dalvik. Mono for Android apps do not run within Dalvik, but within Mono, which runs side-by-side with Dalvik. Mono for Android developers access features in the Android operating system by calling .NET APIs through Mono, or by classes exposed in the Android namespace provided for Mono for Android. This provides a bridge into the Java APIs that are exposed by Dalvik. Both Mono and Dalvik run on top of the Linux kernel and expose API functionality to developers to access the operating system. Figure 12-1 shows the various components of a Mono for Android app and their interaction with the Mono framework and Dalvik. FIGURE 12!1: Mono for Android architecture c12.indd 345c12.indd 345 28/07/12 6:09 PM28/07/12 6:09 PM 346 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID Performance When it comes to performance, research suggests that Mono’s JIT compiling is faster than Dalvik’s (http://www.koushikdutta.com/2009/01/dalvik-vs-mono.html). In our experience with Mono for Android, both native and Mono for Android apps performed similarly. But to be fair, the apps we have created are not complex, and usually just display data retrieved from a web service. Assemblies Just as with Silverlight, MonoTouch and Mono for Android are subsets of assemblies included in the desktop .NET Framework, basically hybrids of .NET 4.0 and the Silverlight 2 API profi le. MonoTouch/Mono for Android are extended subsets of Silverlight and the desktop .NET assemblies to aid in your iOS development. It’s important to note that MonoTouch/Mono for Android are not Linking Very similar to how the linker in MonoTouch works, Mono for Android creates a custom static version of the Mono Framework that is distributed with your Mono for Android app. It’s important to note that the default debug releases of your Mono for Android app will not use the linker and a shared runtime package will be installed. Although this makes repeated deploying much quicker, it’s not a true test of your app, because turning on linking may have some unintended side effects. Figure 12-2 shows the build settings for a Mono for Android project in MonoDevelop. Notice the Linker Behavior setting for the Debug confi guration. To enable linking, simply uncheck the Use Shared Mono Runtime setting and select Link All Assemblies. FIGURE 12!2: Linker settings c12.indd 346c12.indd 346 28/07/12 6:09 PM28/07/12 6:09 PM The Mono Framework ! 347 ABI compatible with assemblies compiled for a different profi le, such as Silverlight or the desktop .NET Framework. Assemblies you want you use in your MonoTouch/Mono for Android app must be recompiled with the MonoTouch/Mono for Android profi le, just as if you were using these assemblies in a Silverlight app. Why MonoTouch/Mono for Android? The true power of these frameworks comes with the ability to share code. As we have stressed in previous chapters of this book, UI is very important to the mobile app experience, and you should not try to plan on a single solution that works on both iOS and Android. However, a great deal of business logic can be abstracted and shared very easily between both your iOS implementation and your Android implementation. As you become more experienced with a programming language, it becomes easier to follow patterns that have been identifi ed as “good” programming practice. I know from fi rsthand experience that the fi rst time I develop a project in a new language, it does not meet the quality I hold to other code bases with languages I have more experience with. With that being said, using MonoTouch and Mono for Android enable you to use a language where you already know the best practices, and let you focus on developing a great app. Do not re-create the wheel and keep business logic outside of the UI. There is a set of rules that we as developers should follow, but if you are unfamiliar with a framework or programming language, following these rules is easier said than done. With MonoTouch and Mono for Android the expectation is that you are already familiar with .NET and C#, so you are able to take your existing knowledge and start developing platform-specifi c apps without leaning a new framework. Downsides As you may have noticed when it comes to mobile development, nothing is black and white. You can perform the exact same task in multiple ways, but many of them come with a downside. Developing with MonoTouch and Mono for Android is no different. Waiting for Improvements When Apple or Google have a press conference to promote the latest and greatest features contained in their respective mobile operating systems, in most situations, it is at that time you can update the SDKs and start working with the new great features if you are working with a native app. When you have selected MonoTouch or Mono for Android as your development platform, you must wait until Xamarin includes these new features in the MonoTouch/Mono for Android SDK. Xamarin has a fraction of the developers on staff that Apple or Google have to perform development and testing of new features. Although Xamarian strives to keep feature parity complete, sometimes this process takes a bit longer than we as users of the framework would like. Because of the close interaction with xCode for the user interface development, when changes to xCode happen, it tends to take Xamarin a while to develop a product that works correctly. The release of xCode 4 left MonoTouch developers using an older version of the IDE for almost a year until a solution was delivered. c12.indd 347c12.indd 347 28/07/12 6:09 PM28/07/12 6:09 PM 348 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID Apple Confusion With developer certifi cates and provisioning profi les, the hoops a developer has to jump through just to get an app installed on a device may make you start to lose your hair. Although the process of provisioning profi les and certifi cates can be a pain in the neck, xCode and other Apple tools have been created to help make this chore a bit easier—whereas the tools contained within MonoDevelop will make you lose even more hair. It’s not that they don’t function within MonoDevelop, but they are not very user-friendly, and to a new developer on the iOS platform it can be overwhelming. Xamarin Mobile With sharing code being one of the most appealing reasons to use MonoTouch and Mono for Android, the Xamarin team has taken the platform one step forward with the Xamarin Mobile library. This library provides tools to write device-specifi c functionality once. For example, MonoTouch requires a different set of APIs for getting a contact than Mono for Android does, because they both try to adhere to the native API naming conventions as much as possible. Xamaran Mobile provides a single API that allows you to return the contacts for either iOS or Android. The following code examples show how Xamarin Mobile can be useful. To get a list of contacts in MonoTouch, you need to use the ABAddress object: ABAddressBook addressBook = new ABAddressBook(); ABPerson[] contacts = iPhoneAddressBook.GetPeople(); Licensing Both MonoTouch and Mono for Android are commercial products and currently require developers to purchase a license for each. The evaluation version of both MonoTouch and Mono for Android enable developers to create apps and deploy to the simulator/emulator only; a fully licensed version is required to deploy to a device. When a license is purchased, the key is entered within the IDE, and activation occurs over the Internet. The downside occurs if Xamarian goes out of business. What is the “escape” plan if you have to reinstall your machine, and activate the framework when the activation server no longer exists? You are putting the fate of a great deal of development resources in the hands of an external resource. Sure, you can argue the same fact about PhoneGap or Titanium, but because they are open source the projects can persist after corporation backing loses interest. As a developer you may not initially think that this could be an issue. Before Xamarian obtained the rights for MonoTouch, the MonoTouch project was in this exact state of limbo, and we were burned on a project. With a newly installed machine, and no way to activate the MonoTouch license we had paid for, there was no way to make changes to an app that had been in the fi eld for about a year. Luckily the app was small, and we were able to rewrite it natively for iOS. The client received their updates, but we lost time rewriting the app. c12.indd 348c12.indd 348 28/07/12 6:09 PM28/07/12 6:09 PM The Mono Framework ! 349 With a fundamental understanding of how the Mono framework, MonoTouch, Mono for Android, and Xamarin Mobile interact with one another, you can move on to setting up a development environment. foreach (ABPerson item in contacts) { // do something with the contact } In Mono for Android, you need to use the ManagedQuery object to get the contacts: var contacts = ManagedQuery(ContactsContract.Contacts.ContentUri, null, null, null, null); foreach (Contact contact in contacts) { // do something with the contact } Xamarin Mobile uses a new AddressBook object that returns the contacts for either iOS or Android: var book = new AddressBook (); foreach (Contact contact in book) { // do something with the contact } Xamarin Mobile is currently very early in development and is focusing only on the areas shown in Figure 12-3. FIGURE 12!3: Xamarian Mobile features c12.indd 349c12.indd 349 28/07/12 6:09 PM28/07/12 6:09 PM 350 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID GETTING THE TOOLS YOU NEED The leadership for the Mono project is all open source advocates, and as such many of the tools required for creating mobile apps based on Mono are open source. Some companies, usually larger companies, may have strict policies about not allowing open source projects into production code. Often these polices stem from the licenses that some open source projects use, or management not willing to trust that a community-funded project will be able to succeed because if the company has issues with the product, oftentimes there is no one call to ask for support. This chapter shows examples created within Mac OS X, and makes mention of when a particular tool can be installed within Windows as well Mono Framework Installing the Mono Framework is a relatively simple process. The Mono Framework is required for the remaining tools in this chapter to be installed. To fi nd the latest version of Mono, navigate to http://www.go-mono.com/mono-downloads/download.html and install the latest stable version for your platform. The examples in this chapter are for Mac OS X because MonoTouch is supported only on Mac OS X, but if you are working on a Windows machine, you will be able to work with Mono for Android. After the Mono Framework is installed, you can check the version by executing Mono --version in a terminal session. The output of this command lists version information as shown in Figure 12-4. MonoDevelop MonoDevelop is an open source IDE supported under the Mono project. In 2003 developers forked another open source IDE named Sharp Develop into the MonoDevelop IDE. MonoDevelop has a large open source community following, with updates being published frequently. MonoDevelop is supported on multiple platforms, with Mac OS X and Windows included. To get started with MonoDevelop, simply download the version for your platform from the download page (http://monodevelop.com/Download) and follow the install instructions. MonoDevelop is dependent on the Mono Framework, and if you have not already installed the Mono Framework, you will be prompted to do so. After MonoDevelop has been installed, you should be able to start the product and have a screen that looks similar to Figure 12-5. FIGURE 12!4: Mono Framework version from terminal c12.indd 350c12.indd 350 28/07/12 6:09 PM28/07/12 6:09 PM Getting the Tools You Need ! 351 Mono/MonoDevelop follow many of the same conventions that .NET and Visual Studio follow. Class fi les belong to project fi les and project fi les belong to solutions. If you have worked with Visual Studio in the past, you should feel right at home with this product. The MonoDevelop IDE is used to create solutions written in various languages that can be run on the CLR. This means there is support for a great number of languages/frameworks ranging from ASP.NET MVC to Silverlight (Moonlight on Mono). MonoDevelop is the IDE that you use to create both Android and iOS applications with Mono for this chapter. MonoTouch The MonoTouch toolset has a very close relationship to xCode and the iOS SDK. Because of this close-knit relationship, MonoTouch can be run only on a Mac and cannot be installed on a Windows machine. This means that before you start to install MonoTouch, you should ensure that you have the iOS SDK and xCode installed. This was discussed in depth in Chapter 7. MonoTouch is a commercial product offered through Xamarin and currently is licensed to developers, meaning that if you have a team of fi ve developers working on a MonoTouch app, you will need to purchase fi ve licenses from Xamarin. A full version of MonoTouch enables developers to deploy, build, and run MonoTouch apps on physical iOS devices. An unlicensed version enables developers to build and run MonoTouch apps on the iOS Simulator. FIGURE 12!5: MonoDevelop start screen c12.indd 351c12.indd 351 28/07/12 6:09 PM28/07/12 6:09 PM 352 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID Mono for Android Mono for Android has a few options in regards to platforms and IDEs. Mono for Android can be run on either Mac OS X or Windows. If you decide on the Windows option you can use either MonoDevelop or Visual Studio to create Android apps. Whether you decide on Mac OS X or Windows, you can download Mono for Android from http://xamarin.com/trial. The prerequisites are similar to MonoTouch (Mono Framework, GTK+, MonoDevelop) with the addition of the Android SDK. Both the Mac OS X and Windows versions of Mono for Android check for the prerequisites and assist you with installing them if they are missing. After you have installed Mono for Android and started MonoDevelop, you should be able to create one of the various Mono for Android project types as shown in Figure 12-7. To get started with MonoTouch, you must install the MonoDevelop IDE. After MonoDevelop has been installed, you can download MonoTouch from http://xamarin.com/trial and install it using the installer. The installer is straightforward — it’s simply a matter of clicking the Next button a few times. If for some reason a prerequisite for the install is missing, the MonoTouch installer will prompt you to install the missing prerequisite. After the install is complete and you restart MonoDevelop, you should be able to create one of the various MonoTouch project types from the New Solution dialog box as shown in Figure 12-6. FIGURE 12!6: MonoTouch projects in MonoDevelop c12.indd 352c12.indd 352 28/07/12 6:09 PM28/07/12 6:09 PM Getting to Know MonoDevelop ! 353 Visual Studio Support If you are familiar with Visual Studio, and plan to go down this development path, it’s important to note that Visual Studio Express is not supported because of its lack of support for plug-ins. After you have installed Mono for Android, as mentioned previously, you will then need to install the Mono Tools for Visual Studio, which you can fi nd at http://mono-tools.com/download/. This enables you to use Visual Studio to create solutions targeted at the Mono Framework, and in this case Mono for Android projects. The examples in this chapter have been created using MonoDevelop on Mac OS X, but should function the same within Visual Studio in Windows. GETTING TO KNOW MONODEVELOP Xamarin is working to deliver a fully integrated solution for developers with knowledge of .NET to create apps for iOS and Android. It put a great deal of effort, along with other open source developers, to contribute to the IDE where MonoTouch and Mono for Android apps are created. The integration of MonoTouch and Mono for Android was very well thought out, and if you are already familiar with MonoDevelop it will be intuitive on how these products fi t together. MonoDevelop is not bloated full of features that most developers will never use. Its simple user interface enables developers to rapidly fi nd tools they need when they are unfamiliar with the product. FIGURE 12!7: Mono for Android projects in MonoDevelop c12.indd 353c12.indd 353 28/07/12 6:09 PM28/07/12 6:09 PM 354 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID MonoDevelop provides tools to Step Over, Step Into, and Step Out on the Debug toolbar shown in Figure 12-9. Locals The locals window shows you a list of all of the variables that are currently within scope of your current breakpoint, and enables you to view details about each variable. Figure 12-10 shows the locals window with an object named fullLeagueData that has a count of 908 items. If you wanted to see more information about the Debugging It can be extremely frustrating to hunt down bugs in your application, and having well-developed debugging tools that are integrated into the IDE is very useful when trying to resolve issues in your app quickly. No matter what IDE you are working with, the teams that develop the IDEs are constantly working to make debugging better for developers, and MonoDevelop is no exception. MonoDevelop contains GUI debugging tools that are consistent with other IDEs such as xCode and Visual Studio. With a close relationship to the .NET Framework, the debugging experience is more like Visual Studio than any other product. Breakpoints You can set breakpoints by clicking in the gutter next to the line number as shown in Figure 12-8. When you are debugging your app, and the breakpoint has been reached, the line will be highlighted. FIGURE 12!8: Breakpoints within MonoDevelop FIGURE 12!9: MonoDevelop Debug toolbar c12.indd 354c12.indd 354 28/07/12 6:09 PM28/07/12 6:09 PM Getting to Know MonoDevelop ! 355 Output The Application Output section provides important information about the execution of the app, as well as displays any log messages you may add in your code. Figure 12-12 shows the application output of an MonoTouch application that logged information received from a web service. items in the fullLeagueData object, you could click the array next the variable name and drill into the data contained within. Call Stack When hunting for bugs, it’s useful to follow the execution path of a particular feature, in hopes of fi nding the issue. Figure 12-11 shows the Call Stack window within MonoDevelop. FIGURE 12!10: Locals window in MonoDevelop FIGURE 12!11: Call Stack window in MonoDevelop FIGURE 12!12: Application Output window in MonoDevelop MonoTouch Specifi cs When you install MonoTouch, new tools are added to the MonoDevelop IDE that will aid in your creation of iOS apps. These tools are specifi c to iOS apps and provide a range of functionality, such as creating a new iOS project type, as shown in Figure 12-13, to deploying your newly created app to a physical iOS device. c12.indd 355c12.indd 355 28/07/12 6:09 PM28/07/12 6:09 PM 356 ! CHAPTER 12 GETTING STARTED WITH MONOTOUCH AND MONO FOR ANDROID iOS Simulator Build confi gurations allow developers to create different build settings for different build scenarios. Every newly created MonoTouch app preconfi gures four different build confi gurations, two for deploying to the iOS simulator and two for deploying to a physical device. Figure 12-14 shows the build confi gurations for a MonoTouch iPhone-only app. When the iOS simulator is selected as an option in the build confi guration, MonoDevelop/MonoTouch will launch the iOS simulator that was installed when the iOS SDK/xCode was installed and push your app to the simulator for you to test. Interface Builder Interface Builder is the tool included with xCode that enables developers to create user interfaces for iOS applications. Interface Builder provides tools with which a developer can lay out the interface, and also map the controls to the events/functions that will be called. Interface Builder can open storyboard or XIB fi les. To work with Interface Builder from MonoDevelop, simply click your storyboard or XIB fi le and Interface Builder will be launched. This interaction between MonoDevelop and xCode/Interface Builder can be somewhat fragile. Behind the scenes, MonoDevelop generates a temporary xCode project that contains stubbed- out Objective-C functions that match the C# classes, which allow the classes to be accessed from Interface Builder and synchronized back to MonoDevelop. Mono for Android Specifi cs When Mono for Android is installed, a set of tools specifi c to working with the Android platform is installed, and linked within the MonoDevelop IDE. The most notable of these tools are the tools pertaining to the Android emulator. MonoDevelop can deploy your newly created Mono FIGURE 12!13: MonoTouch project types FIGURE 12!14: MonoTouch build confi gurations c12.indd 356c12.indd 356 28/07/12 6:09 PM28/07/12 6:09 PM Mono Projects ! 357 It’s important to note that the trial version of Mono for Android allows apps to be deployed only to the emulator. A full license is required if you want to deploy to a physical device. With the development environments installed and the basics of debugging covered, you can now examine what exactly makes up a MonoTouch and Mono for Android project with regard to fi les and code. MONO PROJECTS The developers on both the MonoTouch and Mono for Android projects have spent a great deal of time making the development experience as similar to using the recommended native tools as possible. Core programming concepts from iOS will transfer to MonoTouch, as will concepts from for Android app to a physical Android device or an emulator. The communication between MonoDevelop and the Android emulators is another one of those “fragile” areas. It’s best to use the tools within MonoDevelop to start the emulators. By default the debug build confi guration deploys your Mono for Android app to an emulator. The screen in Figure 12-15 is presented, which allows you select or create an AVD. If you are unfamiliar with the AVD concept, please see Chapter 6. The list of AVDs enumerated in MonoDevelop is the same list of AVDs enumerated in the … 11 Getting Started with PhoneGap WHAT’S IN THIS CHAPTER? ! History of PhoneGap ! Di! erences between HTML5 and PhoneGap ! Getting a development environment set up ! Implementing the Derby App PhoneGap is an open source set of tools created by Nitobi Solutions (now part of Adobe) that enables you to create mobile applications for multiple devices by utilizing the same code. PhoneGap is a hybrid mobile application framework that allows the use of HTML, CSS, and JavaScript to write applications that are based on the open standards of the web. These applications also have access to the native functionality of the device. PhoneGap has been downloaded more than 600,000 times, and more than 1,000 apps built with PhoneGap are available in the respective app stores, which makes PhoneGap a viable solution for creating cross-platform mobile apps. HISTORY OF PHONEGAP PhoneGap was started at the San Francisco iPhone Dev Camp in August 2008. iOS was shaping up to become a popular mobile platform, but the learning curve for Objective-C was more work than many developers wanted to take on. PhoneGap originally started as a headless browser implementation for the iPhone. Because of the popularity of HTML/CSS/JavaScript, it was a goal that this project use technologies with which many developers where already familiar. Based on the growing popularity of the framework, in October 2008 Nitobi added support for Android and BlackBerry. PhoneGap was awarded the People’s Choice award at the Web2.0 Expo Launch Pad in 2009, which was the start of developers recognizing PhoneGap as a valuable mobile development tool. PhoneGap version 0.7.2 was released in April 2009, and was the fi rst version for which the Android and iPhone APIs were equivalent. c11.indd 309c11.indd 309 28/07/12 6:08 PM28/07/12 6:08 PM 310 CHAPTER 11 GETTING STARTED WITH PHONEGAP In September 2009 Apple approved the use of the PhoneGap platform to build apps for the iPhone store. Apple required that all PhoneGap apps be built using at least version 0.8.0 of the PhoneGap software. In July 2011, PhoneGap released version 1.0.0. WHY USE PHONEGAP? PhoneGap enables you to leverage your current HTML, CSS, and JavaScript skill sets to create a mobile application. This can greatly speed up development time. When you develop for multiple platforms using PhoneGap, you can reuse the majority of the code you have written for the mobile project, further reducing development costs. It isn’t necessary to learn Java, C#, and Objective-C to create an applica- tion with PhoneGap that can target iPhone, Android, BlackBerry, and Windows Phone 7. If you fi nd native functionality missing from PhoneGap, you can extend the functionality of the PhoneGap platform using native code. With the PhoneGap add-in structure, you can create an add-in using the native language of the device and a JavaScript API that will call the native plug-in you created. Cross-platform development enables developers to maximize the amount of resources they are able to share. As the iOS and Android user base grows, this concept becomes more important. WHO IS USING PHONEGAP? Adopting a nonnative framework can be scary for a variety of reasons, such as stability and feature parity. Oftentimes, seeing other large projects created with the same framework will help alleviate some worries you may have. PhoneGap has recently released an updated showcase of applications built on its technology. Notable applications include an iOS application called METAR Reader, a cross-platform tool from Logitech for controlling its Squeezebox player on Android, iPad, or iPhone, and the offi cial Android Wikipedia app. METAR Reader METAR Reader (http://www.METARReader.com) is a website for searching for and translating the Meteorological Terminal Aviation Routine Weather Report (METAR) weather data from airports and meteorological sites. The iOS app takes the branded interface of the METARReader.com website and ties into all the functionality the device can offer. Don’t know your local airport’s FAA identifi er? Use your phone’s GPS to fi nd nearby airfi elds. You can then request their METAR information and convert it to human-readable format using this tool. The METAR Reader is currently available in the Apple iOS App Store. Figure 11-1 shows the clean UI that was created in PhoneGap for the METAR app. FIGURE 11!1: METAR Reader PhoneGap app c11.indd 310c11.indd 310 28/07/12 6:08 PM28/07/12 6:08 PM Logitech Squeezebox Controller Logitech Squeezebox is a network music player. The entire line of products can be controlled remotely from this multiplatform app. With a consistent look and feel between iOS and Andriod, this application leverages the quick deployment power of PhoneGap. The interfaces are nearly identical while still affording for the differences in screen resolu- tion and platform idiosyncrasies. Figure 11-2 shows the interface for the Squeezebox controller. Wikipedia It really says something when a site like Wikipedia uses PhoneGap for its platform of choice for a mobile application. Because the appeal of Wikipedia has always been its use of hypertext, breaking that feel is no different than changing a brand. Simplicity expressed through text while still being a self-contained application is shown in Figure 11-3. The next section discusses the differences between how PhoneGap works with the HTML5 standard and how HTML5 behaves on the web. DIFFERENCES BETWEEN PHONEGAP AND HTML5 Because PhoneGap uses HTML5 as its base, it has access to any HTML5 features that are available in the web framework for the device that is running the application. One of the differ- ences between PhoneGap and HTML5 is in the additional device interactions that are available in PhoneGap. These features can involve anything that talks to the bare metal of the device (sensors specifi cally), or more of a logical solution such as Push Notifi cations or In App Purchases. Another difference between PhoneGap and HTML5 is that PhoneGap implements the fea- tures the same way across the different devices, so that accessing the GPS function is handled with the same JavaScript for all PhoneGap devices. It doesn’t matter if you are using the iPhone, Android, BlackBerry, or Windows Phone 7 GPS functions; the calls to get the data from the GPS are the same. The other difference between a PhoneGap app and HTML5 is that an application built with PhoneGap is compiled to a native app on the device, and can be used on the device without the Internet. FIGURE 11!2: Logitech Squeezebox PhoneGap app FIGURE 11!3: Wikipedia PhoneGap app Di! erences between PhoneGap and HTML5 311 c11.indd 311c11.indd 311 28/07/12 6:08 PM28/07/12 6:08 PM 312 CHAPTER 11 GETTING STARTED WITH PHONEGAP GETTING THE TOOLS YOU NEED Even though PhoneGap applications are created using HTML, CSS, and JavaScript, you still need to have the native environments and SDKs installed for the platforms for which you want to develop. If you want your PhoneGap app to run on iOS, you need to have a Mac and have the xCode environ- ment set up as well. PhoneGap provides great “Get Started” pages for each platform. The documentation provided within the interface will be everything you need to get up and running with PhoneGap. The interface shown in Figure 11-4 makes it easy to fi nd resources as you need them. To get started with PhoneGap, download the PhoneGap SDK at http://phonegap.com/download. FIGURE 11!4: The PhoneGap start page for iOS Installing PhoneGap for iOS To develop PhoneGap apps for the iOS platform, you must install xCode and the iOS SDK. Chapter 7 discusses installing xCode and the iOS in depth. c11.indd 312c11.indd 312 28/07/12 6:08 PM28/07/12 6:08 PM Getting the Tools You Need 313 Installing the PhoneGap Template With PhoneGap downloaded and unarchived, navigate to the iOS directory of the extracted directo- ries and run the PhoneGap .pkg installer shown in Figure 11-5. FIGURE 11!5: The PhoneGap iOS package Creating Your First iOS PhoneGap Project With the PhoneGap template installed, launch xCode and select Application from the iOS section, then select PhoneGap-based Application as shown in Figure 11-6. FIGURE 11!6: Creating a PhoneGap application c11.indd 313c11.indd 313 28/07/12 6:08 PM28/07/12 6:08 PM 314 CHAPTER 11 GETTING STARTED WITH PHONEGAP Fill out the project template as shown in Figure 11-7: ! Product Name: Name of your application. ! Company Identifi er: This needs to be unique. Once you have distributed your application, you cannot change this because it will break your ability to upgrade the application. FIGURE 11!7: Selecting names for your PhoneGap project Next, run the project. Click the run button in the top-right corner of xCode. This generates the www resources directory, but sometimes the www directory is not created automatically. If your application has thrown an error, open your project folder in Finder and drag the www folder to your target application project. Make sure to select Create Folder References for any added directories. Once you have done this, run your application again and it will display the test page for the application. Installing PhoneGap for Android To develop PhoneGap apps for the Android platform, you must install Eclipse and the Android SDK. Chapter 6 discusses installing Eclipse and Android in depth. Creating Your First Android PhoneGap Project In Chapter 6 you learned how to create an Android application. PhoneGap is an extension of an Android app. To do this with Eclipse open, choose Create Android Application from the New Project wizard as shown in Figure 11-8. c11.indd 314c11.indd 314 28/07/12 6:08 PM28/07/12 6:08 PM Getting the Tools You Need 315 Once you create the application you must copy some resources from the PhoneGap package into your application. In the root directory of the project, create two new directories named libs and assets/www. After you create the directories, copy the following fi les: ! Copy phonegap.js from your PhoneGap zip fi le that was down- loaded earlier to assets/www. ! Copy phonegap.jar from your earlier PhoneGap download to /libs. ! Copy the xml folder from your earlier PhoneGap download to /res. The directory structure should look similar to Figure 11-9. FIGURE 11!8: Creating a new Android project FIGURE 11!9: Default application after adding resources c11.indd 315c11.indd 315 28/07/12 6:08 PM28/07/12 6:08 PM 316 CHAPTER 11 GETTING STARTED WITH PHONEGAP To get the PhoneGap framework to build correctly, you now need to make some code changes: ! Instead of extending your class from the Android Activity class, change your class to extend from the Phone Gap DroidGap. ! Replace the setContentView() line with super.loadUrl(“file:///android_asset/www/ index.html”);. ! Add import com.phonegap.*;. This may still result in an error. You will need to add the phonegap.jar fi le into your build path. Right-click phonegap.jar in your libs directory and select Build Path. Then remove import android.app.Activity;. The Android PhoneGap app should look similar to Figure 11-10. FIGURE 11!10: Application after PhoneGap code changes Right-click AndroidManifest.xml, select Open With # Text Editor, and add the following Android permissions: <uses-permission android:name=”android.permission.CAMERA” /> <uses-permission android:name=”android.permission.VIBRATE” /> c11.indd 316c11.indd 316 28/07/12 6:08 PM28/07/12 6:08 PM Getting the Tools You Need 317 <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” /> <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” /> <uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” /> <uses-permission android:name=”android.permission.READ_PHONE_STATE” /> <uses-permission android:name=”android.permission.INTERNET” /> <uses-permission android:name=”android.permission.RECEIVE_SMS” /> <uses-permission android:name=”android.permission.RECORD_AUDIO” /> <uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” /> <uses-permission android:name=”android.permission.READ_CONTACTS” /> <uses-permission android:name=”android.permission.WRITE_CONTACTS” /> <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” /> <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” /> <uses-permission android:name=”android.permission.GET_ACCOUNTS” /> <uses-permission android:name=”android.permission.BROADCAST_STICKY” /> You are adding all of these permissions so that your application is afforded everything that PhoneGap supports in Android. Generally you would add only the permissions you need at the time you are creating the app, but PhoneGap wants to limit confi guration to project start as opposed to as you go. The last step in this process is to add an index.html fi le in your assets/www folder with the following content: <!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type=”text/javascript” charset=”utf-8” src=”phonegap-1.4.1.js”> </script> </head> <body> <h1>Hello World</h1> </body> </html> Installing PhoneGap for Windows Phone 7 To develop PhoneGap apps for Windows Phone 7, you must install Visual Studio and the Windows Phone SDK. Chapter 8 discusses installing Visual Studio and the Windows Phone SDK in depth. With the Windows Phone SDK installed, navigate to the Windows Phone directory and copy the PhoneGapStarter.zip fi le to your templates folder located at C:\Users\username\Documents\ Visual Studio 2010\Templates\ProjectTemplates\Silverlight for Windows Phone as shown in Figure 11-11. Open Visual Studio and create a new PhoneGapStarter project as shown in Figure 11-12. c11.indd 317c11.indd 317 28/07/12 6:08 PM28/07/12 6:08 PM 318 CHAPTER 11 GETTING STARTED WITH PHONEGAP FIGURE 11!11: Visual Studio template directory FIGURE 11!12: PhoneGapStarter project c11.indd 318c11.indd 318 28/07/12 6:08 PM28/07/12 6:08 PM Getting the Tools You Need 319 Build the application by pressing F5 and the project should run in the emulator as shown in Figure 11-13. FIGURE 11!13: PhoneGap in Windows 7 emulator PhoneGap Tools and IDE Because PhoneGap apps are created using HTML, CSS, and JavaScript, developers are not restricted to the recommended mobile platform IDEs. Every developer and designer has their own set of tools they like to use when creating HTML, CSS, and JavaScript that will work well in the development cycle of PhoneGap apps. TextMate and Notepad++ The most basic tools that you can use to create a PhoneGap app are text editors. TextMate is a text editor for the Mac, and Notepad++ is a text editor for a Windows computer. Because PhoneGap applications use HTML and JavaScript, a text editor is a tool that can be used across platforms. If you are creating an application for iPhone and Android you can create your code in TextMate. c11.indd 319c11.indd 319 28/07/12 6:08 PM28/07/12 6:08 PM 320 CHAPTER 11 GETTING STARTED WITH PHONEGAP If you are creating your application for BlackBerry, Windows Phone 7, or Android on Windows you can use Notepad++. Using the same editor for multiple platforms gives you consistency while editing. Both TextMate and Notepad++ offer syntax highlighting and code folding. You can’t build and compile using a text editor, but you can perform a great deal of the testing in a web browser or a tool such as Ripple. Ripple Working in an IDE that is not familiar can be very frustrating and a huge waste of time. In many situations it is not acceptable to ask a designer to use xCode or Eclipse, nor would you want to. Working with tools you are comfortable with is one of the great benefi ts of working with PhoneGap. Ripple might be one such tool. You can get the Ripple emulator from http://ripple.tinyhippos .com/download. From the download page, you click Install and then click the Add to Chrome button. Once you have Ripple installed, it will place an icon in your Chrome browser’s menu bar, which will run the emulator when it is clicked. Ripple is a mobile emulator that enables developers/designers to run HTML created for PhoneGap apps without having the platform SDKs installed. Figure 11-14 shows a PhoneGap app running in Ripple. FIGURE 11!14: Ripple mobile environment c11.indd 320c11.indd 320 28/07/12 6:08 PM28/07/12 6:08 PM Getting the Tools You Need 321 Firebug Firebug is a plug-in for the Firefox browser. You can get Firebug from https://addons.mozilla.org/en-US/ firefox/addon/firebug/. Because it is a Firefox extension, you just have to click on the Add to Firefox button. Firebug is useful for debugging HTML, JavaScript, and CSS. If you are writing a PhoneGap app, and none of your JavaScript is fi ring, it could be an indication that the JavaScript syntax is incorrect. If you load the .html page in Firefox, you can see the error in the Firebug console as shown in Figure 11-15. Another thing that Firebug is good for is inspecting HTML elements. It enables you to see which CSS styles are being applied to that element. The element inspector also enables you to test changes to the HTML and see the effect those changes will have. Firebug also has a layout inspector that shows what the CSS layout looks like and what the margins are, as well as the borders and padding. Dreamweaver 5.5 The power of PhoneGap is that someone who knows HTML/CSS can get a mobile app running very quickly. Adobe caught on to this early on, and understood that the people who were using its tools, such as Adobe Fireworks, to create the designs for web applications were often the same people who were implementing the designs with HTML/CSS in Dreamweaver. Adobe knew there would be value in a tool that the Dreamweaver user demographic could use to create mobile applications easily. Dreamweaver is not just a WYSIWYG (what you see is what you get) editor as many believe it to be. Dreamweaver is a powerful tool that contains a great deal of features that enable HTML/CSS implementers to deliver great products. Just before Adobe acquired Nitobi, it bundled PhoneGap tools to assist with mobile development within Dreamweaver 5.5. Because the target audience was users who may not even know what an SDK is, Adobe made it simple to get the emulators and SDKs for iOS (Mac only) and Android on the machine. Setting up the Mobile Environment in Dreamweaver 5.5 You can fi nd the paths to the SDKs in the Mobile Application feature found under the Site Menu settings. If you have a copy of Dreamweaver 5.5, and you have been working through this book chapter by chapter, you should have the SDKs downloaded and working, so just setting the paths to where the SDKs have been installed will do the trick. If you are working with a machine that does not have the SDKs installed, the Easy Install button next to the Android path does exactly what the name implies: it downloads every- thing needed to run an Android application in the emulator. If you do not have the iOS SDK installed, there is a link with detailed instructions on how to do so in the Mobile Application setting. Figure 11-16 shows the SDKs confi gured and ready for use within Dreamweaver 5.5. FIGURE 11!15: Firebug console show- ing syntax error FIGURE 11!16: Dreamweaver 5.5 mobile framework confi guration c11.indd 321c11.indd 321 28/07/12 6:08 PM28/07/12 6:08 PM 322 CHAPTER 11 GETTING STARTED WITH PHONEGAP Creating a PhoneGap Project in Dreamweaver 5.5 After you have set the paths to the mobile frameworks, it’s just a matter of creating a new PhoneGap project within Dreamweaver 5.5. Choose Page from Sample # Mobile Starters # jQuery Mobile (PhoneGap) as shown in Figure 11-17 to create a new project. FIGURE 11!17: New PhoneGap project FIGURE 11!18: Running the project After you select the project, Dreamweaver includes the JavaScript Library fi les for PhoneGap as well as jQuery and jQuery Mobile. At this point you can start adding logic to create the mobile PhoneGap application. When you are ready to see your application run in the emulator, simply select the framework under the Build and Emulate menu group under the Site Menu options as shown in Figure 11-18. Before your mobile application can be deployed to a device or the market, you need to set some other settings such as the provisioning fi le for iOS. Specifi c application framework settings such as the Application Icon, Startup Screen Image, and Target OS are located under the Site Menu # Application option, as shown in Figure 11-19. c11.indd 322c11.indd 322 28/07/12 6:08 PM28/07/12 6:08 PM PhoneGap Project 323 Dreamweaver is not the cheapest solution, but if you are used to the environment, or are looking for a rich HTML/CSS IDE, Dreamweaver is a powerful tool for creating PhoneGap applications. With the understanding of the different development and testing environments that can be used to create PhoneGap mobile apps, you can dive PhoneGap code. PHONEGAP PROJECT With all of the setup out of the way, you can focus on working with the tools and examining code for mobile apps created with PhoneGap. This section assumes you have a fundamental understanding of HTML, CSS, JavaScript, and jQuery and have worked with these technologies on other platforms. Anatomy of a PhoneGap Application PhoneGap applications have three components: ! Native code: This code isn’t modifi ed (with some small exceptions, like the initial setup of an Android appli- cation and setting up permissions for Android). Depending on which platform you are working with, your directory structure will match that of the platform. Figure 11-20 shows the directory structure in iOS and Android. ! JavaScript: Residing within the www folder of the PhoneGap project, the PhoneGap JavaScript gives your code access to the native functions of the device. ! HTML/CSS: These fi les provide the UI layer of the application. The HTML, CSS, and JavaScript fi les live inside a www folder within the PhoneGap project. FIGURE 11!19: Application settings FIGURE 11!20: PhoneGap anatomy c11.indd 323c11.indd 323 28/07/12 6:08 PM28/07/12 6:08 PM 324 CHAPTER 11 GETTING STARTED WITH PHONEGAP Creating User Interfaces The user interface for a PhoneGap application relies on inputs and links. Every screen in PhoneGap is another HTML page. With every screen being a different HTML page, you can use anchor tags with an href to navigate between the screens. From the index page, which is the main screen for the PhoneGap application, you can create links to get to the different sections of your app. When you are creating an application to display data that you can drill into, you can list the parent data in an unordered list of links to a child page with a query string parameter to know which individual parent’s data to show. When you are on the child page, you can use the query string to drive the data of the child. The other interaction point for a user is in the input fi elds. These fi elds allow the user to pass data to the application. This data can then be stored on the device, if it is user-specifi c data that isn’t needed by the server. Another use for the data is that it can be sent up to a web service. Many developers promote PhoneGap as a “write once, deploy to multiple platforms” environment without modifying any code. This can be true, but each platform should have a unique UI. Although possible, deploying an app to an Android device with an iOS UI would not provide the best UI experience. It’s best to abstract business logic as much as possible from the UI, and plan for having separate UIs for the different platforms you plan to support. Debugging You can use a combination of Ripple and Firefox with Firebug platform simulators to debug applications in PhoneGap. The fi rst thing to check when you are debugging a PhoneGap app is to make sure that your onDeviceReady JavaScript event is fi ring. The onDeviceReady event is the JavaScript function that is called when PhoneGap is working correctly with the device. You can test to ensure the function is being called by adding an alert function in the onDeviceReady function alert(‘onDeviceReady has fired’);. If onDeviceReady is not fi ring, open the page you are working with in Firefox so that you can inspect it in Firebug as shown in Figure 11-21. FIGURE 11!21: Firebug syntax error The example illustrates a line has not been correctly terminated. If you fi x that issue, you can check to make sure that no more syntax errors exist and try to run the program again. If onDeviceReady is still not fi ring, you need to make sure that you are including the PhoneGap JavaScript. Once that c11.indd 324c11.indd 324 28/07/12 6:08 PM28/07/12 6:08 PM PhoneGap Project 325 is included you can try to run it again. If you are getting inside onDeviceReady, but the function isn’t running, you can wrap the call in a try/catch block to ensure that the code isn’t throwing an error. Then when you run the code, you will see that you haven’t declared printToConsole as shown in Figure 11-22. try{ printToConsole(‘This line wasn\’t Terminated’); } catch(err) { alert(err); } Now you can create the printToConsole function and run the project again to see the code in action: function printToConsole(stringToPrint){ console.log(stringToPrint); } Figure 11-23 shows PhoneGap writing a log message to the console screen of xCode. FIGURE 11!22: Alert showing caught JavaScript error FIGURE 11!23: Console from successful run With the log showing, you have seen the basic steps for debugging a PhoneGap application. Start with checking the syntax of your page, then check to make sure you have included all applicable libraries, wrap your code in try/catch blocks, and use alerts and the console log to ensure that the code is producing the appropriate results. Useful JavaScript Libraries When we all started out as developers, “do not re-create the wheel” was driven into our heads. That is a message that most developers take to heart, and they have amassed a great deal of useful tools over the years. As a web developer, these tools could be simple JavaScript libraries that allow only numbers to be entered into a text box or could be complex UI libraries that combine HTML/CSS and JavaScript to create a slick interface to enter data. PhoneGap embraces libraries, and the developer community has created a great deal of tools to help mobile PhoneGap developers. c11.indd 325c11.indd 325 28/07/12 6:08 PM28/07/12 6:08 PM 326 CHAPTER 11 GETTING STARTED WITH PHONEGAP jQuery jQuery is a JavaScript library that is used to make DOM selection, manipulation, event handling, and AJAX interactions easier for web development. Because PhoneGap is HTML5-based, the jQuery library is very useful. With jQuery you can select an individual element on the page so that you can manipulate it. jQuery is used in PhoneGap to bind events to buttons. iScroll One of the libraries used in most PhoneGap applications is the iScroll library. The iScroll library is useful for both iPhone and Android projects. This library enables you to set a scrolling area on part of the mobile screen, and have only that portion of the screen scroll. Without iScroll, PhoneGap apps scroll over the entire screen, and any headers or footers will scroll out of sight. When the header and footer scroll out of sight, it’s a good sign that app was not created natively. PhoneGap iPhone apps without iScroll have a rubber band effect (where the app bounced up and down like a stretched-out rubber band), which can be noticed any time the phone is scrolled. To set up iScroll you set a wrapper div and a scroller div. The scroller div is necessary because only the fi rst element inside the wrapper div is actually scrolled. The iScroll library also enables you to add pinch to zoom (UI gestures where the thumb and index fi gure are “pinched” together on a screen to cause a zoom effect) support. This lets you set an area that can be zoomed, as well as setting a max zoom, a min zoom, a starting zoom, and an area that is prezoomed. Another feature of the iScroll library is a pull to refresh (UI gesture where the top of the app is pulled down, and the content on the page is refreshed). This enables you to set up calls that happen when the screen is pulled down, which can be a useful way to access more information in a list of information. The HTML for a scroller is not very complicated. You need a wrapper div which will hold the scrolling area. Because iScroll scrolls only the fi rst element inside the wrapper, you also need a div inside the wrapper that will be …