Building Android Apps with HTML, CSS, and JavaScript

Chapter 3. 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.

Adding a Touch of Ajax

The term Ajax (Asynchronous JavaScript and XML) has become such a buzzword that I’m not even sure I know what it means anymore. For the purposes of this book, I’m going to use the term Ajax to refer to the technique of using JavaScript to send requests to a web server without reloading the current page (e.g., to retrieve some HTML, submit a form). This approach makes for a very smooth user experience, but does require that you reinvent a lot of wheels.

For example, if you are loading external pages dynamically, the browser will not give any indication of progress or errors to the users. Furthermore, the Back button will not work as expected unless you take pains to support it. In other words, you have to do a lot of work to make a sweet Ajax app. That said, the extra effort can really pay off, because Ajax allows you to create a much richer user experience.

Traffic Cop

For the next series of examples, we’ll write a single page called android.html that will sit in front of all the site’s other pages. Here’s how it works: ...