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