Building a Simple iPhone Web App: RedGreen…YellowBlue

Back in the early days of iPhone application development, when any release of free and open source software was caught up in an NDA controversy with the mothership, Chris Allen helped popularize the notion that the iPhone could become a viable platform for building open source applications. He offered as an example his simple and free iPhone application called “RedGreen”. The application was indeed simple. It permitted you to use the iPhone as a kind of public voting machine. It could splash a bright red screen for all to see by tapping on the glass to signify disapproval, and then it would go green with another tap, presumably to register approval. And it was free as in, er, advice and of course free as in freedom. You could get the MIT-licensed code from Chris by a simple e-mail request. Except perhaps for a “Hello World!” nothing could be easier.

The World Has Changed

But hello, the world has changed. Apple has allowed open source applications to be built and distributed through the App Store and has amassed a healthy collection of applications to download for free. So it seemed to us that the time had come to webify Chris’s wonderful application.

First, we thought we’d move it away from the world of still semi-proprietary development and out onto the free and open web. Hmmm… Free at last. And then we thought we’d add a couple more colors.

So here you have it: RedGreen…YellowBlue.

Back to Basics

Well, if the truth is told, we actually wanted to demonstrate some basics of writing near-native iPhone applications using web-based tools. With modern web browsers, technologies like AJAX and JavaScript can power many kinds of interactive applications while imposing few artificial constraints on any phase of development. A web approach can be crafted from generic components and may result in less overall complexity. The main downside, of course, is that applications need some sort of web site for program deployment as well as for data retrieval and storage. However, when developing in-house applications, these concerns become less important, and so many useful and highly interactive mobile applications can be built for the iPhone (as well as for other platforms like Android) as part of infrastructure development using sophisticated web technologies.

So How Do You Start?

We thought it would be instructive to see how a simple web-based application for the iPhone can be built. We started with Chris’s simple idea: display an electronic version of red-green voting cards. Once certain limitations of the iPhone as a web device are understood, it turns out to be pretty easy to produce a basic application. Some of the iPhone’s contraints include its 480×320 screen-size, an imprecise input device (your finger), and two orientation modes (portrait and landscape).

The 480×320 pixel screen and the variable size input device drive the bulk of the iPhone’s UI design. Buttons and other widgets must be drawn over-sized in order to be comfortable for the human finger to tap. This means fewer buttons and other interactive fields on any one screen. Furthermore, data must be organized carefully to fit onto the small screen. This requires vertical, instead of horizontal, scrolling and favors navigation techniques like sliding panels. Two screen orientation modes arise because the user can rotate the iPhone at any time while viewing a web page. Ideally, the web application will render a fresh screen with all the components (text, buttons, fields, etc.) being rotated and displayed in their appropriate relationships under the new geometry. There are additional details, like the 44 pixel (32 pixel in landscape mode) button bar at the bottom of every web screen which cannot be hidden or programmatically controlled. Likewise for the 20 pixel status bar at the top of the screen. Fortunately, the 60 pixel URL bar can be scrolled out of view when not in use through a simple JavaScript command. This leaves a screen real estate area usable for content which is only 416×320 in portrait mode and only 268×480 in landscape mode.

Diving in Deeper

The following web application illustrates practical solutions to some of the constraints imposed by the iPhone as a web client. Typically for this kind of application, JavaScript and CSS must partner in providing the solutions.

RGYB Screenshot

The application we have developed displays two panels next to each other, side-by-side. Each panel covers half the iPhone screen width and all of its height. The user can tap on one panel or the other to toggle different colors: red/green by tapping on the right panel, and yellow/blue by tapping on the left panel.

The application structure is summarized as follows:

First, a META tag recognized by the Safari browser on the iPhone specifies that the iPhone’s viewport is set to “device size” (480×320) and that it cannot be resized by the user. This is the first step in giving the web application the appearance and behavior of a typical native iPhone application.

Second, an embedded CSS style sheet defines a common set of properties for the left and right panels; e.g., they both start out red. Then different panel dimensions for each screen orientation mode are given. Notice also that the left edge of the right panel is increased when in landscape mode. This maintains the right panel’s position at half-screen.

The JavaScript in this application begins with a few variables and helper functions and then continues with a series of simple color toggle functions. Following these functions are methods which are more important for the behavior of the iPhone interface. They are ‘checkOrientation‘ and ‘loadHandlers‘. The onLoad property of the BODY tag is set to method ‘loadHandlers‘ in the HTML text. Consequently, ‘loadHandlers‘ will be called after the web page has been completely loaded into the browser. When invoked, ‘loadHandlers‘ starts by calling ‘checkOrientation‘ to determine the current screen orientation and then sets up a recurring task to perform this same check periodically. If ‘checkOrientation‘ finds that the orientation has changed, it sets the ‘orient‘ property of the BODY tag to ‘portrait’ or ‘landscape’ as appropriate. The orient flag guides the re-drawing of the web screen according to the automatically selected CSS properties. A window object scrollTo method is then scheduled by setTimeout to be run a tenth of a second later. This gives the browser time to make any adjustments needed to display the correct orientation and then the scrollTo method hides the 40 pixel URL bar.

This then is our web equivalent of Chris Allen’s first native iPhone application, a groundbreaking demonstration from the first iPhoneDevCamp long, long ago (actually, about a year and a half ago.) In our application, a lot of capabilities like AJAX and data access that are needed for any serious web application have been completely ignored. However, by exploring the structure of the simplest kind of mobile web application, we hope that more interesting and sophisticated applications will be developed for the iPhone using web tools and techniques.

Try This Out

If you would like to try ‘red_green_yellow_blue’ on your iPhone, please click here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;
          maximum-scale=1.0; user-scalable=0;"/>
<style>
.container {
  top: 0;
  position: absolute;
  background-color: #f00;
}
body[orient='portrait'] .container {
  height: 460px;
  width: 160px;
}
body[orient='landscape'] .container {
  height: 320px;
  width: 240px;
}
body[orient='portrait'] #right_panel {
  left:160;
}
body[orient='landscape'] #right_panel {
  left:240;
}
</style> 
<script>
CURRENTWIDTH = 0;
RG = ['rgb(0, 255, 0)', 'rgb(255, 0, 0)' ]
YB = ['rgb(0, 0, 255)', 'rgb(255, 255, 0)' ]
function $(id) { return document.getElementById(id); }
function updateContainers(rgb) {
  $('right_panel').style.backgroundColor = $('left_panel').style.backgroundColor = rgb;
  setTimeout(scrollTo, 100, 0, 1);
}
function toggleRedGreen() {
  var color = $('right_panel').style.backgroundColor.toString();
  updateContainers(RG[(color == RG[0]) ? 1 : 0]);
}
function toggleYellowBlue() {
  var color = $('left_panel').style.backgroundColor.toString();
  updateContainers(YB[(color == YB[0]) ? 1 : 0]);
}
function checkOrientation() {
  if (window.innerWidth != CURRENTWIDTH) {   
    CURRENTWIDTH = window.innerWidth;
    document.body.setAttribute('orient', (CURRENTWIDTH == 320) ? 'portrait' : 'landscape');
    setTimeout(scrollTo, 100, 0, 1);
  }
} 
function loadHandlers() {
  checkOrientation();
  setInterval(checkOrientation, 300);
}
</script>
</head>
<body onLoad="loadHandlers();">
<div onClick="toggleRedGreen();" class="container" id="right_panel"></div>
<div onClick="toggleYellowBlue();" class="container" id="left_panel" style="left: 0;"></div>
</body>
</html>