Creating the application

Generate the application and a person model to which you will add geolocation and mapping, using commands illustrated in Listing 6-14. Listing 6-14. Generating the application and model using rhogen commands rhogen app map_example cd map_example rhogen model person name,latitude,longitude,zip,twitter Then modify the new person form, adding a checkbox for Use Current Location. This will not be saved in the model, but is a flag that will be sent to the controller (see create action in Listing...

Contacts Example

For the next example, we will demonstrate using native device APIs that are made available by PhoneGap. Smartphones all have a built-in Personal Information Management (PIM) contacts applications that allows users to store phone numbers and addresses. Smartphone platforms allow applications to access those contacts through APIs that differ per platform, but generally offer the same capabilities. In this section, we will step through writing a PhoneGap application that will allow you to show and...

Adding HTML Text with a Panel

Sencha applications are created dynamically using procedural code to create Ul objects, in contrast to declarative Ul frameworks that use markup in XML or HTML to create interface elements. Coding in Sencha Touch feels similar to traditional Ul frameworks such as the Microsoft Foundation Classes (MFC) or Java Swing. You will add Ul components to a panel and specify a layout to visually organize an application screen. You will start with a panel, which is a fairly generic container for...

Windows Mobile

The Windows Mobile operating system provides a more desktop-like user experience than other smartphones, adhering to the concepts of hierarchical organization with nested folders and menus. Approximately 15 of smartphones currently subscribe to a mobile plan run on the Windows Mobile platform, and Windows Mobile remains the third most popular platform for business users, commanding approximately 1 4 of the enterprise market. However, Windows Mobile market share has experienced a sharp decline...

Navigation

Because a mobile application typically has many screens, navigational controls are often helpful. Several different approaches to navigation are commonly implemented to help users find different areas of the application. In addition to the navigational paradigms implied by the design pattern details in the Screen-Based previoussection, many devices implement toolbars, tabs, or menus. Windows Mobile, BlackBerry, and Android have a standard menu to help their users navigate the application. A...

Building for Device

The process for building Titanium Mobile applications for iPhone devices is very straightforward. Download your Development Certificate and Provisioning Profile from the Apple iPhone Provisioning Portal. You will need to enter them in the screen titled Run on Device. Titanium will then build and sign your application, put it into iTunes, and trigger a sync to install it on your device. The only caveat is that you need to do this on a Mac that is configured to sync applications with your iPhone....

Installing the App on the Device

You through the many steps required to set up and install the provisiong profile. Choose Launch Assistant on the home screen of the iPhone Developer Program Portal. The assitant will ask you a few questions and guide you through the installation process. Its docuemntation is quite good, so we won't elaborate here. Manually Setting Up iPhone Provisioning There are many steps when creating your provisioning profile manually. The first thing to understand is the difference on the site between...

Simple Application Using Android Web View

This section shows how to embed a WebView, which could allow you to add HTML UI to your native Android application. Create a project, as you did in the previous tutorial (Figure 3-15). In this example, we don't use a layout (although you could). Instead, we simply create a new WebView and then set the ContentView to that instance of the WebView. Then we dynamically create some html and load it into the WebView (Figure 3-16). This is a very simply example of a powerful concept (Figure 3-17)....

Building a Simple iPhone app

As an introduction to building iPhone applications, you will build a simple HelloiPhone application, designed to introduce you to writing Objective-C code in Xcode and using Interface Builder to create the user interface of your application. The goal of this application is to have the user enter his or her name into a text box, press a button, and have the iPhone greet them by name. Start by opening Xcode and creating a new project (select New Project under the File menu or Command+Shift+N on...

How the Sync Server Works

The RhoSync server acts as a middle tier between a mobile application and the web service that it accesses for remote data. The RhoSync server stores information from back-end systems in its data store as object-attribute-value (OAV) triples capable of representing any type of arbitrary data. OAV triples allow small changes between the device and the back end to be communicated back and forth very efficiently. Because RhoSync operates on individual attribute values rather than entire objects,...

Rhodes Device Capabilities

To create a compelling mobile application, you will want to take advantage of capabilities that are available on a phone, differentiating the experience from a web or desktop application. Most applications want to interface with native phone functionality such as the GPS, the camera, and the contacts. Access to these features is implemented quite differently on different smartphone platforms, but Rhodes lets you write simple, clean code that will work on all the supported platforms. By writing...

Runtime Architecture

Rhodes development files are compiled into a native executable that is installed on the device or run in a desktop simulator using command line tools or the web interface on rhohub.com. Since Rhodes apps are native binary applications, they can be submitted and distributed through the Apple iTunes App Store, BlackBerry World, Android Marketplace, and other distribution channels. To build for a device, you typically need to sign up for those developer programs and acquire cryptographic keys...

Fleshing Out the Application

Return to Visual Studio and select the Form1.cs Design view, where you will flesh out the rest of your application. From the Toolbox pane on the left, select a label and drag it to the top of the form. Click the label a single time and in the Properties pane under Appearance, change the Text to Name, and under Design, change the Name to fieldLabel. Double-click the button to generate the handler. Drag a TextBox from the toolbox and place it underneath the fieldLabel on the form. Click the label...

Packaging and Distributing Your

Windows Mobile applications can be distributed on the Web or through the Windows Marketplace for Mobile. To compress and package application files for distribution, Windows Mobile uses Cabinet files, designated with the .cab extension. To distribute your application, you need to build your application as a signed CAB file. The following section provides an overview of the process required to release the hello world application built in the previous section. Additional advanced configuration...

About this Book

Part 1 of this book, the next four chapters (2-5), guide you through building native mobile applications. You will learn how to write code for simple applications and how to embed a browser control into a native application. These chapters are designed to give you a feel for what it is like to develop using native methodologies. If you decide to develop using platform-specific techniques, then you will need to learn a lot that is outside the scope of this book however, to save work in...

Web Techniques

We are seeing the influence of web development on emergent cross-platform techniques for mobile. Before any cross-platform frameworks existed, many developers found that embedding Web UI in a native application was a practical way to develop mobile applications quickly and make cross-platform applications easier to maintain. The user interface for mobile applications tends to be presented as a series of screens. From a high level, the mobile UI can be thought of as having the same...

Application Marketplace

In September 2009, Apple announced that more than two billion applications had been downloaded from its App Store. With more than 100,000 applications available, Apple has transformed the mobile phone market by dramatically increasing consumer spending on applications and successfully shifting independent developer mindshare toward mobile application development. By the end of 2009, Google Android's open platform was reported to have over 20,000 apps in the Android Market online store.1 Mobile...

The Smartphone is the New PC

The mobile phone is the new personal computer. The desktop computer is not going away, but the smartphone market is growing fast. Phones are being used as computers by more people and for more purposes. Smartphones are generally cheaper than computers, more convenient because of their portability, and often more useful with the context provided by geolocation. Already there are more mobile phones than computers connected to the Internet. While a minority of those phones would be considered...

Foreword

The year 2010 is an exciting time for those of us who have worked in and around the mobile industry since before the, now, decade-old 21st century. Some have referred to this year as The Year of the Mobile Developer. It's true that, following the creation of frictionless paths to market through Apple's App Store, Google's Android Market, and the other handset or OS app stores, developers and brands alike are pursuing a market previously limited in reach. The options of distribution of...

About the Technical Reviewer

Fabio Claudio Ferracchiati is a prolific writer on cutting-edge technologies. Fabio has contributed to more than a dozen books on .NET, C , Visual Basic, and ASP.NET. He is a .NET Microsoft Certified Solution Developer (MCSD) and lives in Rome, Italy. The authors received enthusiastic support from many of the creators of the software discussed herein. We would like to extend our thanks for technical review and enthusiastic support from the Rhomobile team Adam Blum, Lars Burgess, Brian Moore,...

Animated UI with jQTouch

JQTouch is a jQuery plug-in for mobile web development originally developed for the iPhone and iPod Touch.1 jQTouch enables animated transitions, swipe detection, and themes for HTML-based web applications based on features in WebKit. The most exciting and interesting feature of jQTouch is that it allows you to quickly make HTML pages look like a native iPhone application. jQTouch enables you to quickly develop applications that take advantage of common UI patterns, leveraging the JavaScript...

Basic Views

As seen in the examples so far, jQTouch applications consist of a single HTML file, used to create the individual views in your the application. You can create additional views by creating new DIVs as children of the body. . The following is an example excerpt from an application with two views < body> < div id jqt> < div id index> < div class toolbar> < h1> My Application< h1> < a class button flip < div> < p> Hello I am the index page< p> < div> <...

Cancel Back and Browser History

You can reverse a link animation by including a back or cancel class to your links. Those links are then styled as buttons and will appear as top-left buttons in the application. See Listing 12-8 for an example of how a Back button is placed within a page. Figure 12-4 shows the page with the apple theme. Listing 12-8. Back Button Inside a Toolbar on a Page < div class toolbar> < h1> Page 1< h1> < a class back href > Back< a> < div> < ul> < li class arrow> < a...

Add iWeb Kit Framework to Application Layout Template

IWebKit app layout.erb contains the basic header and layout for your application. This file will contain references to all the CSS files for each target device. To guarantee the Framework works as intended, you will need to remove all global references to the autogenerated stylesheets from the header of your application. Additionally, in the header, you will see a series of conditional statements. These statements define which HTML, CSS and JavaScript files are loaded at runtime. In this case,...

Create an Application

Setting up Rhodes to use iWebKit is a simple process. The first thing you will need to do is generate an application (Listing 11-15). Rhodes generates default CSS, JavaScript and HTML. Although you can delete the default Rhodes CSS, make sure to leave the JavaScript intact. Some features depend on the included JavaScript to function. Copy the Framework folder from the iWebKit root directory to the public directory of your Rhodes application. If you wish, you can rename the Framework folder to...

IOS for iPhone iPad iPod Touch

The iOS operating system (for iPhone, iPad, and iPod Touch devices) includes a mobile WebKit-based native browser, which is also available as a UlWebView component that may be embedded in applications. The embedded browser component is as fully featured as the stand-alone browser application. As far as mobile browsers, iOS has one of the most robust browsers with a well-developed CSS3 implementation that allows you to create visual elements that appear like native UI, often without needing to...

Forms

Forms can be styled using page items that group your form elements together. Use a standard < form> and < fieldset> tags to create the form, as shown in Figure 11-10 and Listing 11-11. Figure 11-10. The iWebKit 5 Demo Application Listing 11-11. Example iWebKit Form Figure 11-10. The iWebKit 5 Demo Application Listing 11-11. Example iWebKit Form < DOCTYPE html PUBLIC - W3C DTD XHTML 1.0 Strict EN < html < head> < meta content minimum-scale 1.0, width device-width, maximum-scale...

Phone Integration

IWebKit offers several simple ways to trigger device functionality and launch other applications. Table 11-4 shows how to format links so the associated application launches on the device when a user follows the link. Table 11-4. Integrating with iPhone Functionaliy < a class noeffect URL for item in the iTunes < a class noeffect < a class noeffect Launches a dialogue that asks if you would like to call the number provided < a class noeffect oF08 > Google Maps GoogleMaps query url,...

Integrating iWeb Kit in Mobile Applications

In this section, you'll see how to integrate iWebKit into your UlWebView-based mobile applications to match what users expect to see in an iPhone application. The following sections walk you through integrating iWebKit in applications built in Xcode using Objective-C, as well as applications built using the Rhodes and PhoneGap frameworks. These examples build on the foundation provided in earlier chapters, so if it's been awhile, take a minute to refresh your memory before continuing on.

Android Market

The Android Market is the official Google directory for applications (Figure 3-19). With web distribution described previously, this marketplace is just one option for distributing your application. Some Android devices come preinstalled with an application called Market, which allows people to access the Android Market. You may also access applications from the Android Market web site. For developers who would like to submit their applications to the Market, there is a simple sign-up process...

Creating a Simple jQTouch Application

The user will go to a page that is the jQTouch application. This page includes jQuery, jQTouch JavaScript, jQtouch CSS, and a theme to skin the application with. While you don't need to (and shouldn't) modify the jQTouch CSS file, it is helpful to understand that the jQTouch CSS file contains the transition classes (such as slide, pop, and so forth) and defines the WebKit animations for each transition. Typically, you will use the jQTouch styles by annotating your HTML with the jQTouch classes....

Rhodes

Rhodes is a cross-platform smartphone application framework developed by Rhomobile (www.rhomobile.com) a venture backed startup in Cupertino, CA. It was released in December of 2008. Rhodes is available for most major smartphones including the iPhone, Research in Motion (BlackBerry), Android, Windows Mobile, and Symbian. As of this writing, Symbian is not actively maintained and therefore not addressed in this chapter. A key value proposition for Rhodes is the ability for a company to build and...

Building for an Android Device

It is important to test your application on a range of target devices to understand its usability and responsiveness. For example, a G1 is significantly slower than a Nexus One. For some applications, that may make no difference, but for most it will be noticeable. Also, some device features such as the accelerometer cannot be tested in the emulator. Building for an Android Device is easier than other mobile platforms. You do not need to sign up for a developer program or sign your executable...

Writing a Phone Gap Application

It does not require you to organize your application in any particular way. To start writing your mobile app, it is easiest to begin by writing a web application using whatever tools you are familiar with. In this example, we will write a simple tip calculator and restaurant bill-splitting application. This is a single-page application that uses JavaScript to change the contents of the page based on user interaction. The code for our sample application is...

What is a Smartphone

Cell phones today are generally divided between the low-end feature phones and higher-end smartphones. A smartphone has a QWERTY keyboard either a physical keyboard or soft keyboard like the iPhone or BlackBerry Storm and is more powerful than the feature phone with larger, high-resolution screens and more device capabilities. Relative to desktop computers, smartphones have a diverse set of operating systems see Table 1-1 . Moreover, unlike desktop operating systems, the OS in mobile computing...

Creating a Native iPhone Application with iWeb Kit in Objective C

Use the instructions in Chapter 2 to create a new native UlWebView-based application. To include iWebKit in an application, you need to place a copy of the iWebKit framework in your iPhone project directory. In this example, you will build an app using the iWebKit feature demo. In the root directory of the iWebKit Framework you downloaded earlier, find the folder entitled Demo. Drag the contents of the Demo folder into the Resource folder in Xcode. A dialogue box should prompt you for import...

Rho Sync

Synchronization servers provide the ability for mobile users to access information even when the device is offline or disconnected. They can also dramatically simplify the programming model. Developers can assume the data that they need is available locally in a database instead of writing code to access the network and take apart the data from some wire format. In the past, synchronization servers assumed access to an underlying database for the application they wanted to mobilize. This was...

Rhodes Tip for Dynamic Layout

If you need to layout a screen dynamically and you can divide the screen into table cells that are a percentage of the width or height, then you can use simple width and height attributes that specify a percentage. If you need to calculate width and height based on specific values, then it normally would not be possible to create a dynamic layout for the BlackBerry 4.2 browser. In Rhodes, however, you can do a calculation in the ERb Embedded Ruby HTML file. This technique is demonstrated in...

Camera Example

gt rhogen model Photo image_uri In rhoconfig.txt at the root of your application directory, change the start_path to change the startup page for your application In your Photo directory, you can delete all the ERB files except for index.erb. Edit your index.erb to look like the Listing 6-10. Listing 6-10. Contacts app Photo index.erb lt div class toolbar gt lt h1 lt div id photos title Photos selected true gt lt link_to ' Choose Picture ', action gt choose gt lt link_to ' Take Picture ',...

Setting up Phone Gap for iWeb Kit

Using iWebKit with PhoneGap is very simple. To create a new PhoneGap for iPhone project, see Chapter 8 for complete details. You will need to be using XCode. Copy the contents of the iWebKit demo directory into the www folder in your PhoneGap project, replacing the existing index.html. Target the iPhone simulator and then choose Build and Run. Simulator - 3.2 I Debug we Overview 1 . blogrss.php w changelog.html I classicllst.html Index.html lntegration.html lpodlist.html mi Itunesllst.html...

Authenticating with Web Services Login and Logoff

If your back-end application requires authentication in order to perform web service queries, you will need to add a login method to your source adapter. The login method shown in Listing 7-3 is taken from the source adapter for the SugarCRM source adapter you can find the full implementation in RhoSync vendor sync SugarCRM. Listing 7-3. Login method with back-end authentication ua 'user_name' gt u password' gt pwd ss client.login ua,nil this is a WSDL if ss.error.number.to_i 0 puts 'failed to...

Phone Gap Simulator

You can also test your application in a cross-platform Windows, Mac, and so forth PhoneGap simulator written in Adobe Air. You can find the simulator at http phonegap.com download.The simulator uses the WebKit browser that is built into Adobe Air to run your application. Start the simulator and choose your starting index.html file or equivalent. This is very helpful since the build and test process can be very time-consuming using the native device SDKs. You must always test using the device...

Check Boxes

All smartphone mobile platforms provide UI widgets for check boxes to represent boolean or on off values. All of them have some concept of a check and most have the box that surrounds them. This is the way traditional browsers have implemented checkboxes. Keep in mind here we are talking about native components. To override this functionality in the iOS mobile WebKit browser using CSS, refer to Listing 10-1. This code example assumes you are using a check box image that looks like Figure 10-10....

Radio Buttons

Radio buttons allow you to choose one item in a list of options. BlackBerry and Windows Mobile use a standard radio-button implementation that shows an empty circle when not selected and a filled circle when it has been selected. Android uses the same implementation as BlackBerry and Windows Mobile, but instead of the entire circle being filled, only the center of the circle is filled. iOS has the concept of radio buttons, but Apple suggests using pickers such as date pickers instead in their...

Phone Gap

PhoneGap http phonegap.com is an open source framework for building native mobile applications using HTML, CSS, and Javascript for iPhone, Android, BlackBerry, Palm webOS, and Symbian WRT Nokia . PhoneGap is a perfect for transforming a mobile web application to a native application. It is easy to use for web developers. In order to use PhoneGap, a web developer will need to learn how to build using one or more device SDKs and tools, but all the application code can be HTML, CSS, and...

Contact Example Code Explained

We began the example by including jQuery and jQTouch JavaScript libraries and CSS. We used these for convenience and style, but they are not absolutely required. However, the phonegap.js we included is required. The following recaps what was done in the remainder of the example 1. We initialize the jQTouch library. Please refer to the Chapter 12 on jQTouch for complete details. 2. We define a function called getContacts. getContacts uses the navigator.contacts.getAllContacts function provided...

Web Kit Web Views

Web views on iOS and Android OS work very similarly this is because they both use a WebKit implementation. Try to think of the web view as more of a window on the page. It lets you see any given portion of the page at any moment, while blocking your view of the rest of the page. The WebKit browser engine renders the entire HTML page and places it behind this window. The window stays static while moving the page beneath it. You slide the page up and down beneath this window like a film reel....

JQTouch Initialization Options

JQTouch must be initialized by calling .jOTouch , as shown in Listing 12-9. jQTouch returns an object with public that enables you to interact with it via JavaScript If you want to invoke any of these public methods programmatically, you can save the jQTouch instance in a variable, otherwise ignore it. You can also pass options to the initialize function.5 Listing 12-9. Initializing jQTouch with Options icon 'jqtouch.png', statusBar 'black-translucent', preloadlmages 'themes jqt img...

Development Architecture

Rhodes applications are installed and run as native applications. However, you develop using the web development paradigm. You define the user interface of your application in HTML and CSS. Then, at runtime, the HTML and CSS is rendered in a native browser UI control that is embedded in your application by the Rhodes framework. JavaScript may be used for some interaction control the same way that you would use JavaScript in a web application. You can also add application logic to your views...

Black Berry Browser UI Controls

Developing for the BlackBerry web UI requires a disciplined approach to work within the limitations of the target browser. There are two separate browser-rendering engines included on the BlackBerry platform browser.field available since v3.8 with most recent changes made in v4.5 The level of content support provided by this browser is limited to Document Object Model DOM L1 read only access to the DOM . Partial support for HTML, JavaScript and CSS. Content rendered using this browser field...

Organizing Data with Lists

Lists are one of the most frequently used components in iPhone applications, as they provide a simple way to layout various types of information, and can optionally provide hierarchical organization to allow for sub-lists and navigation. iWebKit provides several different formatting options for lists in your application. You can choose to style your list using the classic style, with support for images and comments a list in the classic iTunes style, containing album covers, artist, title, and...

Sencha Touch

Sencha Touch www.sencha.com products touch is a JavaScript framework for creating web applications targeted to touch-based devices. Sencha Touch is the flagship product of Sencha formerly Ext JS , a Palo Alto, Calif. company launched in 2007 that makes application frameworks. Sencha Touch combines ExtJS, jQTouch and Rapha l. Unlike jQTouch, Sencha Touch is not dependent on jQuery and is compatible with both the iPhone and Android. Sencha Touch is distributed under the GPL v3 open source...

Query

Whether your web service uses SOAP, JSON, XML, or any other protocol or data format including direct access to a database , Ruby offers a wide assortment of standard and third-party libraries that you can use to easily integrate with any kind of web service or data source. Imagine a simple back-end application where the web services are published as REST interfaces and return JSON. A sample query method to interact with this simple product catalog web service will retrieve all products in a...

Cross Platform Frameworks

In the past few years, many cross-platform frameworks have emerged. There has been an explosion of activity in this area as mobile devices become faster and more widely adopted, and particularly with a fast-growing market for applications. This book covers many of the popular frameworks that are focused on application development. The frameworks fall into two categories those that let you create a native mobile application using cross-platform APIs, and HTML CSS Javascript frameworks that let...

Development

IPhone, BlackBerry, Windows Mobile and Android Development and Distribution Sarah Allen Vidal Graupera Lee Lundrigan Pro Smartphone Cross-Platform Development iPhone, BlackBerry, Windows Mobile, and Android Development and Distribution Sarah Allen, Vidal Graupera, Lee Lundrigan Pro Smartphone Cross-Platform Development iPhone, Blackberry, Windows Mobile and Android Development and Distribution Copyright 2010 by Sarah Allen, Vidal Graupera, Lee Lundrigan All rights reserved. No part of this work...