You are previewing Building iPhone Apps with HTML, CSS, and JavaScript.

Building iPhone Apps with HTML, CSS, and JavaScript

Cover of Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark Published by O'Reilly Media, Inc.
  1. Building iPhone Apps with HTML, CSS, and JavaScript
  2. Dedication
  3. A Note Regarding Supplemental Files
  4. Preface
    1. Who Should Read This Book
    2. What You Need to Use This Book
    3. Conventions Used in This Book
    4. Using Code Examples
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  5. 1. Getting Started
    1. Web Apps Versus Native Apps
      1. What Is a Web App?
      2. What Is a Native App?
      3. Pros and Cons
      4. Which Approach Is Right for You?
    2. Web Programming Crash Course
      1. Intro to HTML
      2. Intro to CSS
      3. Intro to JavaScript
  6. 2. Basic iPhone Styling
    1. First Steps
      1. Preparing a Separate iPhone Stylesheet
      2. Controlling the Page Scaling
    2. Adding the iPhone CSS
    3. Adding the iPhone Look and Feel
    4. Adding Basic Behavior with jQuery
    5. What You’ve Learned
  7. 3. Advanced iPhone Styling
    1. Adding a Touch of Ajax
    2. Traffic Cop
    3. Simple Bells and Whistles
    4. Roll Your Own Back Button
    5. Adding an Icon to the Home Screen
    6. Full Screen Mode
      1. Changing the Status Bar
      2. Providing a Custom Startup Graphic
    7. What You’ve Learned
  8. 4. Animation
    1. With a Little Help from Our Friend
    2. Sliding Home
    3. Adding the Dates Panel
    4. Adding the Date Panel
    5. Adding the New Entry Panel
    6. Adding the Settings Panel
    7. Putting It All Together
    8. Customizing jQTouch
    9. What You’ve Learned
  9. 5. Client-Side Data Storage
    1. localStorage and sessionStorage
      1. Saving User Settings to localStorage
      2. Saving the Selected Date to sessionStorage
    2. Client-Side Database
      1. Creating a Database
      2. Inserting Rows
      3. Selecting Rows and Handling Result Sets
      4. Deleting Rows
    3. What You’ve Learned
  10. 6. Going Offline
    1. The Basics of the Offline Application Cache
    2. Online Whitelist and Fallback Options
    3. Creating a Dynamic Manifest File
    4. Debugging
      1. The JavaScript Console
      2. The Application Cache Database
    5. What You’ve Learned
  11. 7. Going Native
    1. Intro to PhoneGap
      1. Using the Screen’s Full Height
      2. Customizing the Title and Icon
      3. Creating a Startup Screen
    2. Installing Your App on the iPhone
    3. Controlling the iPhone with JavaScript
      1. Beep, Vibrate, and Alert
      2. Geolocation
      3. Accelerometer
    4. What You’ve Learned
  12. 8. Submitting Your App to iTunes
    1. Creating an iPhone Distribution Provisioning Profile
    2. Installing the iPhone Distribution Provisioning Profile
    3. Renaming the Project
    4. Prepare the Application Binary
    5. Submit Your App
    6. While You Wait
    7. Further Reading
  13. Index
  14. About the Author
  15. Colophon
  16. Copyright
O'Reilly logo

Chapter 3. Advanced iPhone Styling

In our quest to build an iPhone app without Objective-C, we’ve so far learned how to use CSS to style a collection of HTML pages to look like an iPhone app. In this chapter, we’ll lay the groundwork to make those same pages behave like an iPhone app. Specifically, we’ll discuss using Ajax to turn a full website into a single-page app, how to create a back button with history using JavaScript, and how to take advantage of the Web Clip icon and full screen mode features of the iPhone to launch your app without Mobile Safari intruding upon the user experience.

Adding a Touch of Ajax

The term Ajax 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 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, and so on). 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. Even so, there are some very good reasons to go to the trouble. In particular, it opens the door to creating iPhone apps that can run full-screen (Full Screen ...

The best content for your career. Discover unlimited learning on demand for around $1/day.