Writing a Phone Gap Application

PhoneGap is completely unstructured. 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 shown in Listing 8-3. This was first written and tested on the desktop using Firefox and Safari. Another advantage of writing this first for a desktop browser is that you can use JavaScript debugging tools such as Firebug or the Safari developer tools to get your programming logic correct. The Safari desktop browser is very close in functionality to the WebKit mobile browsers on iPhone and Android. This version of the application uses jQuery, which is compatible with iOS and Android, but does not work on BlackBerry (more detail on BlackBerry to come). The key take-away here is that this could be any mobile web application. The example in this chapter is provided to help illustrate that fact, and to demonstrate how to build a custom application across platforms-the actual code is not particularly important.

Listing 8-3. Code for the Simple Tip Calculator Application for WebKit

<script src="jquery-1.3.2.min.js" type="text/javascript" charset=^ "utf-8"></script> <script>

$(document).ready(function() {

$("#click").click(function(){$('form')[0].reset();}); $("#split_form").submit(function(){

console.log($("#amount").val(), $("#gratuity").val(),^

var result = $("#amount").val() * $("#gratuity").val()^

$("#result").text("$"+result.toFixed(2)); return false; });

<h1>Tip Calculator and Bill Splitter</h1> <form action="#" id="split_form">

<p><label>Amount</label><input type="text" name="amount"^ id="amount"></p>

<p><label># Diners</label><input type="text" name="num_diners"^

id="num_diners" value="1"></p> <p>

<label>Gratuity</label>

<select id="gratuity" name="gratuity">

<option valuer <option value="1.10 <option value="1.15 <option value="1.l8 <option value="1.20 </select>

:"1.0">None</option> >10%</option> selected="1.15">15%</option> >l8%</option> >20%</option>

<p><span id="result"></span></p> <p><input type="submit" value="Calc"></p> <p><a href="#" id="click">Clear</a></p>

To mobilize this application, simply delete the existing contents of the PhoneGap iphone/www directory and copy the index.html and jquery.js files to that directory. Choose Build and Run. Note: we chose to use jQuery here only because it made the JavaScript simpler. It is absolutely not required, and in fact, does not work on some mobile browsers (like BlackBerry). See Figures 8-8 and 8-9.

I Simulator - 3.0 I Debug

Ocui *fi

* Flics

PhoneCap a«™

j» NU«V-1.3

__Conflg

" Defaultpng

3 «oo.pnç

1 README.md

~ OttTIo

Resources

►é

Targets

Eiecutables

»A

nnd Results

► Ut lookmirkl

SCM

9 Proieci Symbols

■JU

mplemenlation

► a

Interface luilder

ODOCTTPE htal> <httl>

<head>

<scrtpt sre»'JQuery-1.3 2.«]

n.)s" type»"text/j»v»»crlpt" charjet=

utf-i"x/scrlpt>

«script»

0 (

$( «.irui.u: ) . focusO ;

t('Kllck') . el ick( f i.nc !

on(){$('form')[0].reset();));

»( ' wl i t .'orm-).sut»lt(funct ion()(

console.lof($( ««noun

).v«lO. S(lra«Mlty*).valQ. $C»m.

it i1:ner>-).val())i

<m result « K'ljnour

: ).val() * $(-»gratuits ).val() / $(

»num_d1nors").val();

»(••reSuH-).t«ct(i-

result.toFlxed(?)):

«/script»

<body>

Calculator and Bill

Solltter- /hi.

Figure 8-8. Tip calculator code in PhoneGap XCode project

Figure 8-9. Tip calculator running inside iPhone Simulator

To build this application for Android, copy the same index.html and jquery.js into the PhoneGap android/assets/www directory. Then run as Android Application. See Figure 8-10.

Figure 8-10. Tip calculator code in PhoneGap Eclipse project for Android

You can see that the application looks and functions identically off a single code base on both platforms.

For BlackBerry, the application needs to be modified not to use jQTouch. As detailed in Chapter 14, the BlackBerry browser supports limited JavaScript capabilities. Listing 8-4 shows a modified application that runs on BlackBerry (as shown in Figures 8-11 and 812). To create this application, copy the code into phonegap/blackberry/framework/src/www/ and then build the project in Eclipse as detailed previously.

Listing 8-4. Code for the Simple Tip Calculator Application for BlackBerry

<script>

window.onload = function() {

document.getElementById("amount").focus(); document.getElementById("clear").addEventListener('click',* function(event){document.forms[0].reset();}, false);

document.getElementById("split_form").addEventListener^ ('submit', function(event){

var result = document.getElementById("amount").value * document.getElementById("gratuity").value document.getElementById("num_diners").value;

document.getElementById('result').value=^

txt="There was an error on this page.\n\n"; txt+="Error description:\n\n" + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt);

<h1>Tip Calculator and Bill Splitter</h1> <form action="#" id="split_form">

<p><label>Amount</label><input type="text" name="amount"^ id="amount"></p>

<p><label># Diners</label><input type="text" name="num_diners"«

id="num_diners" value="1"></p> <p>

<label>Gratuity</label>

<select id="gratuity" name="gratuity">

<option value="1.0">None</option>

<option value="1.10">10%</option> <option value="1.15" selected="1.15">15%</option> <option value="1.18">18%</option> <option value="1.20">20%</option> </select>

<p><input type="text" name="result" id="result"></p> <p><input type="submit" value="Calc"></p> <p><a href="#" id="clear">Clear</a></p>

Figure 8-11. Tip calculator in PhoneGap BlackBerry

Tip Calculator and Bill Splitter

# Diners] 1 Gratuity T596 V Cale

1

2 §

3

4M

5

6

7

8

9

0

Q

W

E

R

T

Y

U

I

0

P

A

s

D

F

G

H

J

K

L

O

z

X

C

V

B

N

M

«J

SVM

@

,_,

/

Figure 8-12. Tip calculator in PhoneGap Simulator

Easy Software Profits

Easy Software Profits

Here's How Anyone Can Start, Build and Run their Own Successful Software Empire Without Knowing the First Thing About Programming, Scripting Or Any 'Coder' Stuff. There is no doubt about it software sells. Software has a high percieved value and it solves problems for people.  A claim that can't always be made for PDF books, Video products and the like.

Get My Free Ebook


Post a comment