Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Design

Porting Javascript Applications to the iPhone


Design Considerations

The original SR web page was an HTML form that presents an array of drop-down menu elements, along with several text fields where you can enter information, as in Figure 1. Other fields display explanations that help guide users. The form relies on CSS to provide some styling, and it uses the display property to reveal or hide form elements, depending upon the choices the field engineer makes. The page gathers the information entered (such as the MCU type and the team assigned to the problem) and massages the data into a text-formatted e-mail that the company's CRM system can read. All the engineer does to complete the report is inspect the e-mail for errors, then send it to our CRM system, where the SR is logged into a database and the selected team notified.

My plan was to overhaul the SR's UI because the layout of the web page's elements were made for a large laptop screen, and not for a mobile phone. The iPhone has a 320×480-pixel screen, which is large by mobile phone standards, but still much smaller than a laptop screen. Rather than try to pack everything onto the small screen, I would instead display the array of choices as a list, where each list element serves as a link to a separate page. I wanted the web page's iPhone-based front end to gather the SR information into the same Javascript variables used by the original SR form's back-end scripts. I could then re-use the field-tested back-end functions to reformat the data for the CRM system. Along the way, I expected to contend with the changes in the browser's event behavior, plus any quirks Mobile Safari threw at me.

Some initial tests with simple HTML forms showed that Mobile Safari could present the required text fields and drop-down menus that the SR page used. However, the layout of these forms on the iPhone's screen looked like something you'd see on a desktop browser and not at all like an iPhone app. For the sake of consistency, Apple promotes the idea of having your web page resemble regular iPhone applications as much as possible. Oddly, the company doesn't offer any framework to help you do this.

Figure 1: A portion of the original Service Request form as it appears on a laptop browser.

Because I didn't have the time or expertise to write such a framework, I did the next best thing—I did a Google search for one. It turns out that there are several: the iPhone UI (iUI), originally written by Joe Hewitt and now maintained by Google code (code.google.com/p/iui), the iPhone UI Universal Kit written by Diego Lafuente (www.minid.net/iphone), and WebApp.Net, written by Chris Apers (webapp.net.free.fr). I chose iUI because it's fairly simple, and its creator wrote Firebug, a FireFox add-on that lets you debug Javascript code in the browser (www.ddj.com/architect/196802787).


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.