Friday, April 23, 2010

Creating web-based iPhone applications (Part I)



First off, this is my first blog post here so I wanted to say 'hi' to everyone. I look forward to working with you all.

This is the first part of what I hope to turn into a three part series about creating web-based iPhone applications. In this part, I'll show how to set up jQTouch and create a very basic webpage that looks and behaves like a native iPhone application.

Much of my experience, at least at developing GUI applications, is on the web. While I'd never developed native iPhone applications before starting at Macadamian, I did toy around with creating an iPhone front-end to a web application. It turns out you can go a long way with this approach, and I think it may be useful on this project for mockups.

The first software I want to introduce is jQTouch, an extension to the jQuery library which adds CSS and Javascript to make webpages that behave like native iPhone applications. It's pretty fancy. Let's get started.

First, download jQTouch from here and extract it somewhere a web server can find it. Then, create an "index.html" in that directory, and put this in it:


<!DOCTYPE html>
<html>
<head>
<title>jQTouch test page</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/apple/theme.min.css";</style>

<script type="text/javascript">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: [
'themes/apple/img/backButton.png',
'themes/apple/img/toolButton.png',
'themes/apple/img/toolbar.png',
'themes/apple/img/pinstripes.png',
]
});
</script>
</head>

<body class="fullscreen">
<div id="home">
<div class="toolbar">
<h1>Page 1</h1>
</div>

<ul>
<li>
<a href="#world">Hello</a>
</li>
</ul>
</div>

<div id="world">
<div class="toolbar">
<h1>Page 2</h1>
</div>

<ul>
<li>
<a href="#home">World</a>
</li>
</ul>
</div>
</body>
</html>

Everything in the head tag is boilerplate that loads jQuery from Google's JSAPI servers, then loads the CSS and Javascript for jQTouch and the "Apple" theme. It also initializes jQTouch and preloads some images so they are displayed immediately.

(Notice the doctype at the top: that's means it's an HTML5 page. That'll become important in the next part. We're living in the future.)

The important parts are the top-level div tags in the body. Each one is a screen. When the page is loaded, the first one is displayed. jQTouch adds some magic to handle clicks on links to anchors in the page, so that linking to anchors will change to a screen with that ID. For example, linking to "#foobar" displays the div with id="foobar". That way, the entire UI is in one HTML file and there is no load time to change screens.

If you load up this page in your web browser, you should see something like this:
It looks a little strange with the black bar at the bottom on a desktop browser (like Chrome here), because it's sized for an iPhone screen. Clicking on the "Hello" will change to another page with a "World" button. Clicking the "World" button returns you to the first page. In Webkit browsers like Safari (or Mobile Safari, like on an iPhone or iPod Touch) it will also have a sliding transition.

In Mobile Safari you can also click the "+" in the bottom toolbar to add it to the home screen. In addition to making it easier to get back to later, this gets rid of the Safari chrome.

That's the end of Part I. I've just scratched the surface of what jQTouch can do, but I hope it gives you a feel for what it can do. In the next part, I'll show how to make forms to take input from the user, how to application accessible even with no internet connection, and how to store data offline on the device.

2 comments:

  1. Hey thanks for the tiny code.I am having interest in web based application development from so long and i tried this code for the additional implementation.

    iPhone app developers

    ReplyDelete
  2. Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards, cell phone deals

    ReplyDelete