Organizing Data with Lists

Lists are one of the most frequently used components in iPhone applications, as they provide a simple way to layout various types of information, and can optionally provide hierarchical organization to allow for sub-lists and navigation. iWebKit provides several different formatting options for lists in your application. You can choose to style your list using the classic style, with support for images and comments; a list in the classic iTunes style, containing album covers, artist, title, and rating information; an App Store list with ratings and prices; an iTunes style list with ratings and album covers; an iPod/music list that shows a numbered list of songs with times.

In iWebKit forms, as with a lot of mobile web UI, <ul> and <li> tags are used quite differently than you would typically see on the Web. When considering the small amount of screen real estate available on a mobile device, it makes sense that a single column would take up the entire width of the screen. For this reason, it makes sense to use unordered lists to vertically organize your content instead of divs and other containers.

Additionally, in order to utilize the custom iWebKit list styles, you need to ensure that you have properly declared the list type in the required location. Most list classes require you to apply a class to the <body> tag or the <ul> tag, and some list items require styles as well. You can see an overview of available list types and corresponding body classes in Table 11-1.

Use the following code samples as your guide to make sure you've got all the right classes in all the right locations.

Table 11-1. ¡WebKit List Types and <body> Tag Class

List Type

Body Class


Classic list

App Store applist iTunes Music musiclist

List Type

Body Class

Example iTunes Classic iPod n/a ipodlist

Classic Lists

There are two main ways to format content in a Classic list:

■ Simple format: list items without a class display text (Figure 11-3 and Listing 11-3)

■ Pretty format: list items with the withimage class include an image, main text and comment text (Figure 11-4 and Listing 11-4)

In addition to the simple and pretty formatting available for content cells, you can include one or more Title cells in a list to logically group the items in your list. For example, in a corporate directory application, you may wish to display employees grouped by their department. Each department would then have a Title cell at the top of the group and employees in that department would be listed alphabetically below. All of these options require you to use unordered lists <ul> and list item <li> tags inside your document's content <div> tag.

Technically, it is possible to mix-and-match all three types of list items within a list; however, mixing different types of list items would create a non-standard UI and could negatively affect usability, as it will impede the user's ability to visually parse the data contained in the list. However, if your use case requires items to be displayed with multiple formatting types on the same page, you should consider using a Title cell to separate your list into groups.

List Item >

List Item >

List Item >

Figure 11-3. Classic list:—simple Format

Listing 11-3. Classic List—Simple Format

<body class="list"> <div id="content"> <ul>

<li class="title">Title Bar</li>

<li><a class="noeffect" href="#">

<span class="name">List Item</span> <span class="arrow"></span></a>

<li><a class="noeffect" href="#">

<span class="name">List Item</span> <span class="arrow"></span></a>

<li><a class="noeffect" href="#">

<span class="name">List Item</span> <span class="arrow"></span></a>

Figure 11-4. Classic list—pretty format

Listing 11-4. Classic Lists with Images in iWebkit

<body class="list"> <div id="content"> <ul>

<li class="title">Title Bar</li>

<li class="withimage">

<a class="noeffect" href="#">

<img alt="Sample" src="sample_image-1.jpg" /> <span class="name">List Item with Image</span> <span class="comment">Comment</span> <span class="arrow"></span>

<li class="withimage">

<a class="noeffect" href="#">

<img alt="Sample" src="sample_image-1.jpg" /> <span class="name">List Item with Image</span> <span class="comment">Comment</span>

<li class="withimage">

<a class="noeffect" href="#">

<img alt="Sample" src="sample_image-1.jpg" /> <span class="name">List Item with Image</span> <span class="comment">Comment</span> <span class="arrow"></span>

iTunes Classic Style Lists iTunes Classic-style lists are like classic lists, except in a iTunes Classic-style list, the list item doesn't expand to the full width of the screen. Additionally, the top and bottom cells in each iTunes Classic-style list will have rounded corners.

Store lists


Sample Title >

✓ -Aitititit 151 Ratings

Figure 11-5. iTunes classic-style list wih title and sample list item

To include any of the options available to the cells in an App-store style list, simply add a <span> tag styled with the appropriate class inside the list item's <a> tag (Listing 11-5).

Listing 11-5. Store List Item

<a class="noeffect" href="#">

<span class="image" style="background-image:^

url(/public/img.jpg)"></span> <span class="comment">This is a Comment</span> <span class="name">Cell Title</span> <span class="stars4"></span> <span class="starcomment">100 Ratings</span> <span class="arrow"></span> <span class="price">$1.99</span>

You can also display a title above your store list by including a <span> tag styled with the graytitle class immediately above the <ul class="pageitem"> tag.

Although the iTunes Classic-style list type does not require a class to be added to the

<body> tag, you must include a pageitem class on the <ul> tag, as shown in Listing 11-6.

Listing 11-6. Store List Example <body>

<div id="content">

<span class="graytitle">Store lists</span> <ul class="pageitem">

<li class="store">

<a class="noeffect" href="#">

<span class="image" style="background-image:^ url('images/sample.png')"></span>

<span class="comment">Comment</span> <span class="name">Sample Title</span> <span class="stars5"></span> <span class="starcomment">151 Ratings</span> <span class="arrow"></span>

App Store-style Lists

App Store-style lists support background images, star rating comments, the number of ratings, and price of the product.

Figure 11-6. App store list items

App Store-style lists also optionally include inline ads at the top of the lists. To include ads at the top of the list, create a list item styled with the doublead class. Each doublead list item has space for two ad links. Note that the ads are fixed in width and height, will not resize if only a single ad is included, and the topmost list item may make the page feel unbalanced.

To include background images for your links, simply apply an inline style to the <a> tag. Listing 11-7 illustrates how to create the top ad element for an App Store-style list.

Listing 11-7.

Double Ad Link


<a href=""

url('pics/ad1.png')"></a> <a href="" url('pics/ad2.png')"></a>

style="background-image:< style="background-image:<

App Store-style list items are structured in the same way as regular Store-list style items. See Listing 11-8 for a stand-alone example.

Listing 11-8. App Store Style List Example

<body class="applist"> <div id="content"> <ul>

<li id="doublead"> <a href="" style="background-image: <a href="" style="background-image: </li> <li>

<a class="noeffect" href=" bejeweled-2/id284832142?mt=8">

<span class="image" style="background-image:^ url('/images/bejeweled.jpg')"></span>

url('pics/ad1.png')"></a> url('pics/ad2.png')"></a>

="comment">Games</span> ="name">Bejeweled 2</span> ="stars5"></span>

="starcomment">l6924 Ratings</span> ="arrow"></span><span class="price">$2.99</span> </a> </li> <li>

<a class="noeffect" href="#">

<span class="image" style="background-image:^

<span class= <span class=' <span class=" <span class=" <span class="

url('images/sample.png')"></span> <span class= <span class= <span class= <span class= <span class=

"comment">Comment</span> "name">Sample Title</span> "stars5"></span>

"starcomment">151 Ratings</span> "arrow"></span>

iTunes style-lists iTunes-style lists are simple lists that can display a number, title, and time comment. The background of the cells in this class alternate between light and dark gray (see Figure 11-7 and Listing 11-9).

Figure 11-7. iTunes-syle list wih alternating table cells

Listing 11-9. iTunes List Item Example

<body class="musiclist"> <div id="content"> <ul>

<a class="noeffect" href="#"> <span class="number">1</span> <span class="name">Sample Title</span> <span class="time">(1:33:03)</span> <span class="arrow"></span></a>

<a class="noeffect" href="#"> <span class="number">1</span> <span class="name">Second Sample</span> <span class="time">(33:03)</span> <span class="arrow"></span></a>

iPod-style lists iPod-style lists use the same basic structure as the other lists, but are designed with play icons to visually indicate when music is playing (Figure 11-8).

1 ► Sample Song


2 Sample Song


Figure 11-8. iPod list selected and non-selected cell

Figure 11-8. iPod list selected and non-selected cell

To play music using an iPod list, each list item should contain a link to a JavaScript call that plays the music and toggles the pause/play icon.3

To include an iPod-style list, the <body> tag must be styled with the ipodlist class.

As with the iTunes-style lists, you are responsible for defining the track numbers for the items in your list within the <span class="number"> tag. Track numbers can be generated dynamically with JavaScript, or you can hard-code the desired value inside the <span class="number">.

Additionally, each list item must have a child that includes a <span> tag styled with the auto class (see Listing 11-10). This container serves as a placeholder for the location where the play button will be displayed when the user selects the cell.

Listing 11-10. iWebKit iPod List Example

<body class="ipodlist"> <div id="content"> <ul>

<a class="noeffect" href="javascript:document.sample.Play();"> <span class="number">1</span> <span class="auto"></span> <span class="name">Sample Song</span> <span class="time">4:11</span>

Was this article helpful?

0 0
Living With Android

Living With Android

Get All The Support And Guidance You Need To Finally Be A Success At Using Android. This Book Is One Of The Most Valuable Resources In The World When It Comes To Playing With the Hottest Android Tablet.

Get My Free Ebook

Post a comment