Channels ▼
RSS

Design

Porting Javascript Applications to the iPhone

Source Code Accompanies This Article. Download It Now.


Writing and Testing Code

Because iPhone web pages render in a browser, you can use a standards-compliant desktop desktop browser such as FireFox 3.x, Safari 3.x, or Opera 9.x to write and test a page's code. The iUI framework makes the web page resemble an iPhone screen even on the PC, so you can also work the kinks out of your web page's layout before it is ever loaded onto an iPhone. Because IE 6 and 7 don't support many of the standard CSS selectors, iPhone web pages won't render properly in this browser. Simply put, don't use IE.

I started my code port using FireFox 3 along with Aptana's Firebug to help debug the Javascript functions. While browsers are quite robust in rendering HTML with unbalanced or mangled tags, for a Javascript error they simply abort and don't render the page, a behavior that can drive you mad. Firebug is really good at catching Javascript errors, ranging from the simple typo to a reference to an object that doesn't exist, something that can easily happen you're figuring out how to access objects on the document tree. You can step through the code and watch variable values change as the Javascript executes, which is a good way of confirming that the code really works, rather than it just happens to work.

I was able to get a list display working quickly by using the toolbar style and writing a main list with the <ul> and <li> tags. Although this was only a proof-of-concept program, I then reworked the code so that Javascript built the list dynamically, using a for loop for this purpose. I wanted to see if iUI was capable of handling a dynamically changing list, and the framework passed the test. Listing One(a) (available online at www.ddj.com/code/) shows the HTML unordered list code that generates the main list, while Listing One(b) (also available online) shows the Javascript that generates the main list dynamically. Figure 2 shows the rendered result from both listings.

Figure 2: The code in Listing One rendered on the Mobile Safari on an iPhone

Making a selection on this main list takes you to other screens with the relevant controls. For the processor, team, report type, and e-mail address where the engineer chooses an item from a list, I used the drop-down menus provided by the <select> tag. For the SR's priority level where there are several mutually exclusive choices, I opted to use radio buttons, which were handled by the <input type="radio"> tag.

For those fields where text was entered, I used a form with tables for setting up the required fields. I could have used CSS to arrange these elements, but it was easier to reuse the table layout from the existing SR code. With some modifications, I got the subject and description fields, plus the character counter display to where it closely matched the original layout. See Listing Two (available online) for the code, and Figure 3 for the end result.

Figure 3: The code in Listing Two rendered on the iPhone. While I made it resemble the original SR page (Figure 1), this isn't a requirement.

The submit screen was straightforward, as this was just some buttons within a form. I specified a bluebutton style for the Submit button, as the blue color indicates the preferred choice (much like an OK button on the Mac OS UI). I had to add some Javascript code to handle the onsubmit event. This code invokes a verify function. For any missing information, the function displays an alert for the item in question and the submit process aborted. If all of the inputs were valid, the function instead packages the information for the e-mail's subject and body, launches the e-mail application, and drops the text into it.

One minor problem I had with iUI was in accessing the content of various objects on the document tree. Although the iPhone web page appears as a main list screen with links that jump to other web pages with controls or text fields, the reality is that the application is just one big web page. The page anchors that comprise the main list point to other elements on the page, which might be more lists, controls, or forms. Because iUI modifies the document tree to make the designated elements appear as separate screens, accessing them through the document objects array was problematic. The solution was to assign the desired objects an ID, and then use the getElementById() method to access the object. For those elements that are part of a form, the usual techniques of accessing arrays on the document tree worked.


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.
 

Video