Tài liệu Lập trình ứng dụng cho iPhone part 5 pptx

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?. Action Button Back Button Chrome Separa

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 iUI, 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

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

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.

■ 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 tions put a “+” action in their chrome to generate new content Safari also includes search and bookmark actions

applica-■ 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 iUI)

■ 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

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

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

■ 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 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 iUI, 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 iUI to model the iPhone for your web app, but you can also expect it to be easy to use

iUI 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

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 iUI 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, iUI’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

iUI But we’ll offer one last disclaimer before we talk about that: author Christopher Allen is currently one of the three owners of iUI, along with Joe Hewitt and Sean Gilli-gan Naturally, this makes us biased toward iUI 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

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

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 backButtonline 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 iUI’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.

Listing 5.2 A toolbar that anchors an iUI page

B

C D

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 iUIscreen 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 iUI 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

iUI, 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">

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.

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" bute is required when you’re linking to a complete (usually off-site) HTML page This

attri-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 iUI 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

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

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

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

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

Inside the dialog class, the order of the contents is important You must have a

<fieldset> B, which is used to logically group form elements together and then draw a box around them Then you must have a level one header C, which will appear amid the chrome at the top Omitting either of these will cause your dialog to display incorrectly

The buttons D can be set in several configurations Here you display both cancel and search buttons This isn’t quite how the iPhone does things by default, but it provides a more complete UI, thus trading off usability for conformity If you prefer to stick with the iPhone standard, replace the pair of buttons with a single Cancel line:

<a class="button" type="cancel">Cancel</a>

Note that this example also introduces how to apply the iUI button classes The button class by itself always displays a right-justified gray button, but by applying multiple classes, you can move that button to the left (with leftButton) or turn it blue (with blueButton) We’ll return to all the ways in which buttons can be used later

After placing your buttons, you can put together a long series of <label> E and

<input> F lines In each case, the label is placed into the background of the input, showing what should be entered in that box This example only includes one such pair, but additional ones can be entered identically

The one thing that this example doesn’t show is the actual back end, search.php

As it turns out, that works in a special manner under iUI

5.3.4 iUI searches done right with Ajax

iUI’s search functions use Ajax, bringing us back to the idea of Ajax and page ments, which we touched on when we looked at external links iUI uses Ajax in a cou-ple of places to replace individual elements rather than redrawing a whole web page Not only does this make an application faster, but it also cleverly allows iUI to maintain its overall stack of history pages

This is all easy to do because iUI takes care of the Ajax details for you in a relatively transparent manner You don’t need to know that you’re using Ajax; you just need to know that in some situations you must supply fragmentary pages that contain only iUIelements rather than complete pages

This is the case with iUI-based searches Your search result pages should not draw full pages, nor should they forward you to full pages Instead, they should output an individual element, just like those elements that you’ve been writing to model other

iUI subpages

Listing 5.6 shows what search.php might output after a search for “Maroon”

<ul id="search" title="Maroon">

<li><font color="#800000"><b>Maroon (#800000)</b></font>

Listing 5.6 A search page fragment