Dr. Dobb's Journal - November 2008 - (Page 26)

Core Technology PORTING JAVASCRIPT APPLICATIONS TO THE 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 dropdown menus provided by the 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 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. Figure 2: The code in Listing One rendered on the Mobile Safari on an iPhone 26 Dr. Dobb’s Journal l www.ddj.com l November 2008 http://www.programmingresearch.com http://www.programmingresearch.com http://www.ddj.com

Table of Contents Feed for the Digital Edition of Dr. Dobb's Journal - November 2008

Dr. Dobb's Journal - November 2008 Contents Friday Night Fish Fry Alia Vox Developer Diaries Developer's Notebook Saving Open Source Conversations iPhone Building Your Own Web Server Green Telnet What's New In Boost Threads? Testing Service Oriented Architectures Test Case Generation, UML, and Eclipse Unit Testing Web Services C3 Programming The Agile Edge Swaine's Flames Effective Concurrency

Dr. Dobb's Journal - November 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.