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.
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.
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.
