Basic Styling

Ultimately, we are going to build a native Android app using HTML, CSS, and JavaScript. The first step on this journey is to get comfortable styling HTML to look like a mobile app. In this chapter, I'll show you how to apply CSS styles to a bunch of existing HTML pages so that they are easily navigable on an Android phone. So, in addition to moving closer to building a native app, you'll be learning a practical (and valuable) skill that you can use immediately. If you've been testing all your...

Adding an Icon to the Home Screen

Hopefully, users will want to add an icon for your webapp to their home screens this is called a launcher icon . They do this by bookmarking your app and adding a bookmark shortcut to their home screens. This is the same process they use to add any bookmark to their home screens. The difference is that we're going to specify a custom image to display in place of the default bookmark icon. First, upload a .png image file to your website. To maintain a consistent visual weight with other launcher...

Saving the Selected Date to Session Storage

Ultimately, what we want to do is set up the Date panel so that when it's displayed, it will check the database for any records entered for that date and display them as an edge-to-edge list. This requires that the Date panel know which date the user tapped on the Dates panel. We also want to allow the user to add and delete entries from the database, so we'll have to add support for the button that already exists on the Date panel, and for the Delete button in the Date panel entry template...

Download Phone Gap

Now that we have the Android SDK installed, we can use PhoneGap to create an Android project based on our web app. To ensure the instructions in this book will continue to work long into the future, I have forked the main phonegap-android project and intend to keep a relatively static version. Once you become comfortable using my version of PhoneGap for your Android development, you might want to visit the main page for the PhoneGap project to see if there is anything new and exciting that you...

Adding the New Entry Panel

Example 4-5 shows the source code for the New Entry panel. Add this code to the end of index.html, before the closing lt body gt . Example 4-5. The HTML for the New Entry panel lt div id createEntry gt lt div class toolbar gt lt h1 gt New Entry lt h1 gt lt a class button cancel href gt Cancel lt a gt lt div gt lt form method post gt lt ul class rounded gt lt li gt lt input type text placeholder Food name food id food autocapitalize off autocorrect off autocomplete off gt lt li gt lt li gt lt...

Inserting Rows

Now that we have a database set up to receive some entries, we can set about building the createEntry function. First, you have to override the submit event of the createEntry form. You can do so by binding the createEntry function to the submit event in the document ready function in kilo.js here I just show the first few lines with the added line of code in bold ' createEntry form' .submit createEntry ' settings form' .submit saveSettings loadSettings Figure 5-4. The Storage tab in Chrome's...

Web SQL Database

Of all the exciting features of HTML5, the one that rocks my world the most is the Web SQL Database. The Web SQL Database spec gives developers a simple but powerful JavaScript database API to store persistent data in a local SQLite database. Figure 5-1. Before the refreshEntries function, the title just says Date Figure 5-2. and after the refreshEntries function, the title reflects the selected date Technically, the Web SQL Database spec is not part of HTML5. It was broken out of the original...

Advanced Styling

In our quest to build an Android app without Java, we've discussed how to use CSS to style a collection of HTML pages to look like an Android app. In this chapter, we'll lay the groundwork to make those same pages behave like an Android app. Specifically, we'll discuss Using Ajax to turn a full website into a single-page app. Creating a Back button with history using JavaScript. Saving the app as an icon on the home screen. The term Ajax Asynchronous JavaScript and XML has become such a...

Saving User Settings to Local Storage

Let's update the Settings panel of the example app you started working on in Chapter 4 so that it stores the form values in localStorage. We are going to be writing a fair amount of JavaScript in this chapter, and I don't want to jam it all in the head section of our HTML document. To keep our code organized, create a file called kilo.js in the same directory as your HTML document, and update the head of your HTML document with a reference to kilo.js lt link type text...

Roll Your Own Back Button

The elephant in the room at this point is that the user has no way to navigate back to previous pages remember that we've hijacked all the links, so the browser page history won't work . Let's address that by adding a Back button to the top left corner of the screen. First, we'll update the JavaScript, and then we'll do the CSS. Adding a standard toolbar Back button to the app means keeping track of the user's click history. To do this, we'll have to store the URL of the previous page so we...

Geolocation

Let's update Kilo to save the location when entries are created. Once we have that information, we'll add a Map Location button that will open the built-in Maps application and drop a pin at the point where the entry was created. The first step is to add latitude and longitude columns to the database to store the information. To do so, replace the CREATE TABLE statement in Desktop KiloGap assets www kilo.js with the following function transaction transaction.executeSql 'CREATE TABLE IF NOT...

Build Kilo Gap

Next, we're going to convert our web app into a native Android app. The gang at Nitobi has created a little helper application named droidgap to help us with this. When you run droidgap, it'll ask you a few questions and insert your answers into a bunch of locations throughout a template to create your project. It's very cool in fact, if you ever run into someone from Nitobi, you should buy him a martini. The Android SDK requires Apache Ant, which is included with Mac OS X and many versions of...

Sliding Home

We are going to build a simple calorie-tracking application called Kilo that allows the user to add and delete food entries for a given date. All told, there will be five panels Home, Settings, Dates, Date, and New Entry. We'll start off with two panels and work our way up as we go. We will be assigning CSS classes to some of the HTML elements e.g., toolbar, edgetoedge, arrow, button, back . In every case, these classes correspond to predefined CSS class selectors that exist in the default...

Testing wurflphp

Now, in your web directory such as Sites or public_html , create the following PHP file name it something like wurfl-test.php . The first time you visit it from your Android device or any other browser , it will take a long time as it builds the initial cache. After that it should be zippy. Figure A-1 shows how this should appear in your browser. You can now modify this PHP code to suit your needs lt meta name viewport content user-scalable no, width device-width gt lt title gt WURFL Test lt...

Creating a Database

Now that our Date panel knows which date the user has selected, we have all the information we need to allow the user to create entries. Before we can write the createEntry function, we need to set up a database table to store the submitted data this is a one-time operation . We'll add some lines to kilo.js to do so var db ' settings form' .submit saveSettings loadSettings ' dates li a' .click function var dayOffset this.id var date new Date date.setDate date.getDate - dayOffset...

Beep Vibrate and Alert

PhoneGap makes beep, vibrate, and alert functions so simple that I'm going to lump them together into one example. Specifically, we'll set up the app to beep, vibrate, and display a custom alert when the user creates an entry that puts him over his daily calorie budget. To do so, add the following function to the end of the kilo.js located in the Desktop KiloGap assets www directory var currentDate sessionStorage.currentDate var dailyBudget localStorage.budget db.transaction Q function...

Creating a Dynamic Manifest File

Now that you're comfortable with how the offline app cache works, let's apply it to the Kilo example we've been working on. Kilo consists of quite a few files and manually listing them all in a manifest file would be a pain. Plus, a single typo would invalidate the entire manifest file and prevent the application from working offline. Running PHP Scripts on Your Web Server PHP is a versatile web-scripting language, and is supported by most web hosting providers. This means that on most web...

Download the Android SDK

PhoneGap works in conjunction with the Android SDK, so before we can get started with PhoneGap, we need to download and install the Android SDK itself. Follow the steps here to do so 1. Navigate to the Android SDK download page and download the package appropriate for your platform. If you are on Windows or Linux, you will need to install Java see http java.sun.com javase downloads first. My development machine is a MacBook Pro running Mac OS X 10.6, so in my case, the appropriate package is...

Installing Kilo Gap in the Emulator

Now it's time to test our shiny new native Android app in the emulator. 1. If your emulator is not running, launch it by entering the following command in the Terminal application this way, you can let it warm up while you're building the Kilo package You should see the Android emulator window appear after a few seconds. Notice that the command prompt doesn't return in the terminal window it will sort of just sit there and hang until you close the emulator. We won't be interacting with this...

P

P paragraph tag HTML , 3 padding, adding to content, 22 page scaling, controlling, 19 page title, setting, 41-42 pageAnimationBegin event, 139 pageAnimationEnd event, 138 PATH environment variable, 111, 115, 116 PhoneGap development tool accelerometer app, 137-140 beep, vibrate, alert functions, 128-131 building KiloGap, 118-122 controlling phones with JavaScript, 128140 creating Android virtual device, 117 downloading, 114 downloading Android SDK, 110-114 geolocation app, 132-137 installing...

Installing Kilo Gap on Your Phone

If you have an actual Android device at your disposal, you can install Kilo on it directly. The instructions for doing so are similar to the steps for the emulator installation 1. Plug your phone in to the USB port on your laptop. 2. Enable debugging on your phone by navigating to Settings Applications Development and enabling the USB Debugging option. 3. Open a terminal window and navigate into the KiloGap directory. In my case, the command to do so is 4. If you haven't compiled it already,...