80 Using iUI for web apps Creating web apps with the WebKit gives you a lot of power and allows for a lot of diversity. But it doesn’t address a real concern: what if you want to create web apps that have the same look and feel as native applications on the iPhone? The reasons for doing so are obvious. You can take advantage of lessons that users have already learned by using Apple’s standard iPhone user interfaces. The question of how to do so, however, is slightly more complex. Certainly you could do so using the WebKit’s extensions atop HTML, and we’re going to give you the opportunity to do so here by dissecting what makes up the iPhone interface. Unless you have specific needs, however, creating your own inter- face is probably overkill. Fortunately, we have another solution to this problem: a third-party library exists that you can use to model the iPhone interface. It’s called i UI, and it’ll be the focus of much of this chapter. But before we get into iUI, let’s see what the iPhone interface looks like. This chapter covers ■ Outlining iPhone web app paradigms ■ Using iUI to make web apps ■ Applying tips and tricks to iUI apps 81Creating your own iPhone UI 5.1 Creating your own iPhone UI The iPhone UI has quite a few unique (and distinctive) features. If you want to model its UI inside a web app, you must consider all of them. We’ll provide some guid- ance by highlighting the most im- portant UI features in this section. We’ll start out by looking at the iPhone’s graphic interface, but the UI goes far beyond that. The iPhone’s UI also depends on a data-driven content paradigm and the usage of those unique design choices that we highlighted back in chapter 1. 5.1.1 The graphical interface As shown in figure 5.1, the stan- dard look of an iPhone applica- tion is quite distinctive, and thus can be easily modeled in your own web pages. What follows are a number of simple guidelines that suggest how to easily model the iPhone’s graphical interface. ■ Match the look and feel —When you’re building your own iPhone-UI web apps, the best thing you can do is match the general look and feel of the built-in iPhone pro- grams. This ap-proach has two benefits. First, it gives your users a leg up on using your program, because they’re already familiar with the interface. Second, it takes advantage of the work that Apple programmers have already done to figure out what works on the iPhone. The downside is that there isn’t a totally consistent interface on all the iPhone applications, a rarity for Apple. The core iPhone pro- grams—the iPod, Mail, and the various phone accessories—do the best job of pre- senting a consistent UI, but some of the other programs look slightly different. You’ll ultimately need to decide how much of the look and feel you want to model, and how much you want to change it to match your own site’s branding, a topic we’ll return to toward the end of this chapter. ■ Use chrome —It’s most important to match the iPhone’s chrome. Put navigation and control bars to the top and the bottom of your App’s web pages. You might want to match the iPhone’s gray coloring, or you might want to match the col- ors of the rest of your site. Action Button Back Button Chrome Separated Choices Figure 5.1 The iPhone has a unique look and feel that should be emulated in iPhone web apps. 82 CHAPTER 5 Using iUI for web apps ■ Put action buttons in your chrome —In the chrome, it’s not just the navigation that’s important, but the action buttons as well. For example, several applica- tions put a “+” action in their chrome to generate new content. Safari also includes search and bookmark actions. ■ Create sliding menus —Menus of options should typically be display on subpages, not as a part of your web app’s main display. You might click an action button to pop up a menu. Alternatively, a list of options that fills the screen might each have a > symbol that leads to its own subpage, as with the iPod’s “more” pages. Though we call these sliding menus, for the way they animate on the iPhone, you probably won’t mimic that aspect in your web app (unless you use i UI). ■ Include back buttons —Whenever you slide in a subpage, make sure there’s an explicit, labeled button that will bring you back to the page that you left from. Note that the iPhone creates a history stack that could be several levels deep. No matter how deep you go in the structure, you can always return to the top level with back buttons. This is a topic that we’ll return to a few times in this chapter. ■ Separate your choices—Whenever you have a list of options, make sure they’re widely separated. The iPhone always includes both spaces and rules between options, giving “fat fingers” plenty of room to fit in. ■ Use the viewport —If you’re creating a web app specifically for the iPhone, you no longer have to worry about creating a full-sized web page that will look good elsewhere. Either set your viewport to 480, or (if you want to be fancy) use either the device-width feature or vary your viewport based on orientation. ■ Don’t be afraid to turn off zooming —Don’t be afraid to set minimum-scale and maximum-scale to 1 in your viewport metatag. After all, if you’ve designed a page specifically for the iPhone, there should be no reason for users to mess with it. About views iPhone programs often include multiple pages of information that are all part of the same application. Apple calls these individual pages of content views (though the term is also used to refer to individual objects, or subviews, within a page). Many web apps will be built using the same concept, allowing pages to call up other pages using tab bars, navigational controllers, and other means. As you’ll see, the view model is well supported by various tools that you might use when creating iPhone web apps. iUI (which we’ll discuss in this chapter) supports it as part of its navigational methods, and Dashcode (which we’ll talk about in the next chapter) sup- ports it using a stackLayout object. We’ll see even more complex view hierarchies when we begin using the SDK, which is the ultimate model that these other libraries are imitating. 83Creating your own iPhone UI This advice is crucial for putting together an iPhone-UI web app, but it’s also primarily visual. When creating iPhone web apps, it’s important to think about the base para- digm that underlies your web development. 5.1.2 The iPhone data paradigm We’ve already talked quite a bit about how the iPhone is technically different from last-generation mobile phones. We also believe that a core difference exists in the methods that people use to access information on the iPhone. The desktop internet centers on the paradigm of browsing. Although users will sometimes go to a specific page for certain information, a lot of internet usage instead centers around idle viewing of interesting sites. Because browsing is so important, desktop-centric websites often center on immediately dumping unsorted piles of con- tent on users, hoping to draw them further down into a site. We believe that these priorities are reversed on the iPhone. You are less likely to attract casual browsers and more likely to attract users who already know what your site is and are visiting it to retrieve specific information. This more data-centric view of web usage has already been verified by the huge jumps that Google saw in iPhone searches. Likewise, some of our sample sites already reflect this paradigm, such as Facebook, which removed most of the information from their iPhone login page. In other words, it’s all about the data. When you’re building your iPhone- UI web apps, think about how the iPhone itself organizes data and try to mimic that. That means using trees of lists. Take a look at the iPod button on your iPhone if this concept isn’t immediately clear. When you push it, notice that you get no textual descriptions, just a set of options. When you click Com- posers, you get another list of options. You can dig down from there to a list of songs, and then you can finally listen to a song. A similar model for your web app will omit most of your website’s text and replace it with the core of your data, easily accessible via sliding menus. It’s a pretty big para- digm change, and you may initially feel resistant to it, but we feel that it’ll give you best results, because it’s what iPhone users are used to and want. 5.1.3 Other iPhone design elements Beyond the display UI and the data paradigm, you should also think about the iPhone’s six unique design elements when creating any web app interface. ■ The always-on internet is a great benefit because it’s easy for you to access online pages and data. But your users may sometimes be accessing your pages via a slower web connection, thanks to EDGE. This all suggests Ajax as a great tool for any web app usage because it requires constant access, but at the same time allows redrawing of pages in bits and pieces. When thinking about an always-on internet, also consider the methodology that Apple uses in native apps like Mail. These programs only load small sets of data—such as 25 messages at a time—waiting to load more until you request it. 84 CHAPTER 5 Using iUI for web apps ■ Power consciousness won’t be a huge issue in your web app work, because you’ll be limited to what you can do by Safari. But you shouldn’t include JavaScript events that will constantly poll the internet or keep Safari active. ■ Location awareness can’t be accessed from a web app. ■ Orientation awareness is a topic we covered in chapter 4, when looking at the WebKit. ■ Input was also covered in chapter 4. If you want, you can continue to use the WebKit’s orientation and gesture support as part of your iPhone- UI web apps. ■ Output is the last of the design elements. One of the cool things about the iPhone’s Safari output is that it scales, but as we’ve already suggested, that’s something you might want to omit in an iPhone- UI web app. By now you might have some great ideas for how to turn your website into an iPhone web app, but the idea of coding everything to look like and work like the iPhone can seem daunting. Unlike our discussions of Canvas and the WebKit, there isn’t an Apple library that we can point you to (though one is in process, from what we hear). But if you don’t mind using third-party libraries, you can use a free software package called i UI. 5.2 Getting ready for iUI iUI is a library of JavaScript and CSS that is intended to mimic the look and feel of the iPhone in web pages. In other words, it’s precisely what you need to make an iPhone- UI web app of the sort that we’ve been describing. Software engineer Joe Hewitt, the author of i UI, said the following about it in his initial blog posting on the topic: First and foremost, i UI is not meant as a “JavaScript library.” Its goal is to turn ordinary standards-based HTML into a polished, usable interface that meets the high standards set by Apple’s own native iPhone apps. As much as possible, i UI maps common HTML idioms to iPhone interface conventions. For example, the <ul> and <li> tags are used to create hierarchical side-scrolling navigation. Ordinary <a> links load with a sliding animation while keeping you on the original page instead of loading an entirely new one. A simple set of CSS classes can be used to designate things like modal dialogs, preference panels, and on/off switches. Let me re-emphasize that all of this is done without the need for you to write any JavaScript. It is meant to feel as though HTML was the iPhone’s own UI language. http://www.joehewitt.com/blog/introducing_iui.php (July 11, 2007) Thus, not only can you expect i UI to model the iPhone for your web app, but you can also expect it to be easy to use. i UI is a community project that is offered for your free usage. At the time of this writing, there are two versions of the code. The officially released code is probably what you want to use for any live website, but you can also go to the current SVN repos- itory for the rawest, most up-to-date code. Table 5.1 lists the current places that you can access the code. 85Developing with iUI Once you’ve downloaded iUI, you need to place the iui directory in a standard library location for your website so that you can load JavaScript and CSS files from it. Of course, if you’re using i UI in any corporate environment, you’ll also want to look at LICENSE.txt to make sure that it meets the requirements of your company. Fortu- nately, i UI’s license is a permissive new BSD license that places few restrictions on what you can do with the software. Barring problems, you should now be ready to start programming a web app in i UI. But we’ll offer one last disclaimer before we talk about that: author Christopher Allen is currently one of the three owners of i UI, along with Joe Hewitt and Sean Gilli- gan. Naturally, this makes us biased toward i UI. But we wouldn’t be supporting it if we didn’t think it was a superb product for creating iPhone-specific web pages. We’re pretty sure you’ll agree too. 5.3 Developing with iUI Once you’ve got iUI installed, you can include it in your code by referencing iUI’s JavaScript and CSS files. Listing 5.1 shows a typical iUI header, placed in the <head> section of your HTML file. This is the beginning of a color-selector application that we’re going to develop over the next couple of examples; it will allow you to look up your favorite shades of red (and other colors if you want to extend the example on your own). <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <style type="text/css" media="screen">@import "iui/iui.css";</style> <script type="application/x-javascript" src="iui/iui.js"></script> Note that besides the standard include statements for the style and the script, you’ll also set a viewport, following the suggestions we offered earlier for iPhone- UI web apps. This viewport is set to the iPhone screen width and also keeps users from scaling the window. From here you can start building an application using the i UI classes. Table 5.2 shows all the major classes that you’ll be encountering. We’ll return to each of them in turn as we build up our color selector. We’ll cover each of these in more detail as we step through our example, which we’re now ready to dive into, beginning with the all-important i UI toolbar. Code type Location Release Bundle http://code.google.com/p/iui/ Subversion Repository http://iui.googlecode.com/svn/trunk/ Listing 5.1 The headers for an iUI page Table 5.1 iUI can be freely downloaded from the internet, either in its officially released form or via a Subversion repository. 86 CHAPTER 5 Using iUI for web apps 5.3.1 The iUI toolbar Once you’re working on the <body> of your iUI web page, you can start using the package’s unique styles. This will typically begin with a toolbar, as shown in listing 5.2. <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#searchForm">Search</a> </div> This is a standard toolbar that will appear almost unchanged in any iUI program that you create. Every toolbar should have a pageTitle line B . Most will also have a backButton line C , unless your app contains no subsidiary pages. The button line D —which is what we called an action button in section 5.1—is the most optional of the three, and will only appear when you have some action that you want a user to be able to take. A few of these elements bear additional discussion. First, notice that the pageTitle and backButton lines do not contain any content. This is because i UI’s Javascript automatically fills them. The pageTitle will be filled with the title of the element that’s currently selected. The backButton will be filled by the title of the previous element when you move forward a page (and won’t be used until then). Table 5.2 iUI makes about a dozen classes available for you to use in creating iPhone-like web pages. iUI class Element Summary button <a> The standard iPhone-UI toolbar button. Appears at top right normally, or at top left with an arrow pointing backward with id="backButton". leftButton <a> Moves a button left. blueButton <a> Turns a button blue. grayButton <a> A page-width gray button. This is the button to use for important links internal to your page. whiteButton <a> A page-width white button. This is the button to use for important links internal to your page. toolbar <div> The core class for iUI. Anchors the page. dialog <form> Creates a standard iPhone UI for data entry. group <li> A nonlinked list item, intended to organize links into groups. panel body element Creates a standard iPhone UI for settings. row body element Creates a left- and right-justified set of data. toggle .row Creates toggle buttons in a row. Listing 5.2 A toolbar that anchors an iUI page B C D 87Developing with iUI Second, be aware the backButton allows access to a whole stack of pages—just like on the iPhone itself. No matter how deep you are in your iUI page stack, you’ll always be able to get all the way back to your first page. Third, note that we said “elements” when referring to the individual parts of an i UI screen. Although an iUI web app will look like several pages on an iPhone, it can all be in one file on your web server (using the standard model of views that we’ve already highlighted). Individual forms, lists, and <div> s are each named. iUI then redraws the page—using simple animations that model the iPhone—whenever a user moves to a new, named element. 5.3.2 iUI lists Once you’ve written your (relatively standard) toolbar, you then need to prepare your default element. It’s what will get pulled up on the screen the first time a user visits your i UI page. To create your default element, you must write a <div> , form, list, or other element, then give it the selected="true" attribute. This selected element is the only one that will appear when your page is first drawn. All the other elements on your page should be available via links from your default element; they’ll only appear when those links are clicked. Figure 5.2 shows the results that you’re aiming for. As you can see, you’re creating a simple example of what the SDK will call a table view, one of the most fre- quently used iPhone user interfaces. This table view is surprisingly easy to create in i UI, as shown in listing 5.3, which continues our example by showing the default element of our color selector. All that’s needed to create the table is a simple unordered list. <ul id="home" title="Colors" selected="true"> <li><a href="#red">Red</a></li> <li><a href="#green">Green</a></li> <li><a href="#blue">Blue</a></li> <li><a href="http://en.wikipedia.org/wiki/Color" target="_self">Other Colors</a></li> <li><a href="#settings">Settings</a> </ul> As promised, you start off your default element with the selected="true" attribute. Note that you also use an id="home" attribute B . This isn’t a requirement, but helps keep things clear. Listing 5.3 iUI’s default element B C D Figure 5.2 A list-based paradigm is easy to program in iUI, using just the <li> elements. 88 CHAPTER 5 Using iUI for web apps The rest of the lines in this element are list items holding links. Although you’ll frequently be linking to other elements that are part of the same iUI page, as you do in your first three list items C , you’re creating a fully functional web page and can thus link to anywhere on the web. Your penultimate anchor line D shows an offsite link. The target="_self" attri- bute is required when you’re linking to a complete (usually off-site) HTML page. This is because iUI assumes that external links usually connect to iUI-style page fragments containing only elements. It therefore tries to load them via Ajax if you don’t tell it otherwise. We’ll explain more about how you might want to use these page fragments and Ajax when we get to i UI tips and tricks, later in this chapter, but for now just be aware that you need to set the target attribute to _ self for normal links. Once you’ve written your default element, you can add other elements in a similar manner. To correctly link these elements, you just have to make sure that their ID matches the origi- nating href link. Figure 5.3 shows an example of how a subpage might appear when con- nected to the href="#red" link in the default element. It also highlights another bit of iUI chrome: groups. The code required to create this new ele- ment is shown in listing 5.4. As you can see, it’s another unordered list, this time using some new attributes. Note that you’re introducing an additional i UI class in this example. The group class can only be applied to <li> elements. You apply it to list items that are not links. The result will be a category head that you can use to orga- nize several links below it. About Ajax Ajax stands for Asynchronous JavaScript and XML. It’s a technology that can be inte- grated into web pages, but it’s more a set of techniques than an actual language. It combines JavaScript and XML (as you’d expect from the name) with DOM. The concept behind Ajax is that the web browser exchanges small amounts of data with the web server without redrawing complete pages. Typically, a form sends some data to the server, the server processes it, and then it sends back a command for the browser to update some small part of a page. Ajax is great for data entry where you want to indicate that the server has accepted the data. As it happens, it’s really good for low-bandwidth services too, like EDGE. Figure 5.3 Groups help programs to organize lists into logical units. 89Developing with iUI <ul id="red" title="Red Shades"> <li class="group">Light Reds <li><font color="#ff0000"><b>Computer Red (#ff0000)</b></font> <li><font color="#ED1C24"><b>Pigment Red (#ED1C24)</b></font> <li><font color="#E0115F"><b>Ruby Red (#E0115F)</b></font> <li class="group">Dark Reds <li><font color="#DC143C"><b>Crimson (#DC143C)</b></font> <li><font color="#800000"><b>Maroon (#800000)</b></font> </ul> We could easily extend this example to also show pages for green and blue color selec- tions, but doing so wouldn’t add anything to what you’ve already learned. Instead, we’re going to jump to the next major element of our color selector example: the searchForm. 5.3.3 iUI dialogs The iPhone already has a standard way to display web searches. You can see it when you click the magnifying glass in mobile Safari. A search dia- log pops up toward the top of the screen, com- plete with a cancel button in the chrome. Meanwhile, the rest of the page is grayed out but can still be faintly seen in the background. This is the look and feel that is mimicked when you use the dialog class in iUI. It’s proba- bly what you want to use whenever you’re creat- ing a simple search, and you may find it useful for other types of simple interaction as well. Fig- ure 5.4 shows how it will look when used as a part of your web app. Listing 5.5 shows how to create this dialog as part of our color selector example. <form id="searchForm" class="dialog" action="search.php"> <fieldset> <h1>Color Search</h1> <a class="button leftButton" type="cancel">Cancel</a> <a class="button blueButton" type="submit">Search</a> <label>Color:</label> <input id="color" type="text" name="color"> </fieldset> </form> Although we listed dialog as a <form> class in table 5.2, it can technically be applied to anything; but it probably doesn’t make much sense for anything but a form. Listing 5.4 Other elements defining subpages in your iUI web app Listing 5.5 Creating a search-like form with the dialog class B C D E F Figure 5.4 A dialog allows users to conduct searches. [...]... (jquery .iphone. js, jquery.js) or if you prefer the appropriate compressed scripts (jquery .iphone. min.js, jquery.min.js) Once you’ve done that, you can use a handful of new functions We’re not going to go in-depth into jQuery for the iPhone as we did with iUI Table 5. 7 summarizes the contents of the package, and you can find more complete examples in jQuery’s iPhone documentation Table 5. 7 The jQuery iPhone. .. searchRecentDB( 25) ; for ($i = 0 ; $i < sizeof($recent) ; $i++) { if ($recent[$i][entrydate] != $lastdate) { B D E C 95 Other iUI tips and tricks ?> Entered F . Button Chrome Separated Choices Figure 5. 1 The iPhone has a unique look and feel that should be emulated in iPhone web apps. 82 CHAPTER 5 Using iUI for web. as well. Fig- ure 5. 4 shows how it will look when used as a part of your web app. Listing 5. 5 shows how to create this dialog as part of our color selector