Tài liệu Lập trình iphone chuyên nghiệp part 23 ppt

246
The screenshots displayed in this section were captured on Safari for Mac OS X, not on iPhone or iPod
touch. The results are not fully identical to the optimized UI when viewed under Mobile Safari.
Figure 11-3: Community sports Web site ready for iPhonification
and coaches of the sports league will have fingertip access to the league schedule, game results, league
news, and the rule book — either at the games or else en route to them.
c11.indd 246c11.indd 246 12/7/07 2:58:10 PM12/7/07 2:58:10 PM
form a community sports Web site, as shown in Figure 11 - 3 . The use for this mobile app is that parents
into a useful mobile Web application. For this example, you ’ ll venture out of the corporate world to trans-
A second case study demonstrates how you can turn a plain vanilla Web site with minimal functionality
Case Study: Mobile WYFFL
Chapter 11: Case Studies: Beyond Edge-to-Edge Design
247
Given the traditional site structure of the site, an edge - to - edge navigation scheme is an ideal design
model for the entry - level page. The iUI framework will be used in the implementation. However, as
you ’ ll see later on, Mobile WYFFL will employ some design ideas not included with iUI to give parts of
the application a fresh look, but one that remains consistent with Apple ’ s built - in applications.
Each of the links on the top - level menu will be translated to a menu item on the Mobile WYFFL applica-
tion. However, note the scoreboard at the top of the homepage. It serves a double purpose. Before games,
it provides a game schedule for the current week. Then, after the games are completed each Saturday, the
scoreboard is then used to display the scoring results. To display this information in Mobile WYFFL,
you ’ ll add a menu item called
Gameday
.
Not all of the content on the main Web site makes sense to include in the mobile version of the applica-
tion. For example, the Documents page containing downloadable forms is not useful in iPhone or iPod
touch. Therefore, in these cases, you will simply refer them to the main Web site by adding a final link to
it in the initial list. Here is the initial code for the primary HTML page of the application:

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“ >

< html xmlns=” >
< head >
< title > WYFFL Mobile < /title >
< meta name=”viewport” content=”width=300; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;”/ >
< style type=”text/css” media=”screen” > @import “../iui/iui.css”; < /style >
< style type=”text/css” media=”screen” > @import “../iui/iuiadd.css”; < /style >
< script type=”application/x-javascript” src=”../iui/iui.js” > < /script >
< /head >
< body >
< div class=”toolbar” >
< h1 id=”pageTitle” > < /h1 >
< a id=”backButton” class=”button” href=”#” > < /a >
< /div >
< ul id=”home” title=”WYFFL Mobile” selected=”true” >
< li > < a href=”news.html” > Latest News < /a > < /li >
< li > < a href=”gameday.html”
> Game Day < /a > < /li >
< li > < a href=”standings.html” > Standings < /a > < /li >
< li > < a href=”#schedule” > Schedule < /a > < /li >
< li > < a href=”#rules” > Rules < /a > < /li >
< li > < a href=”about.html” > About WYFFL < /a > < /li >
< li > < a href=”” target=”_self” > Visit Web
Site < /a > < /li >
< /ul >
< /body >
< /html >
Note the link to the iuiadd.css style sheet, which will be used to extend the default iUI style rules.
Figure 11 - 4 displays the opening page of the application.
c11.indd 247c11.indd 247 12/7/07 2:58:11 PM12/7/07 2:58:11 PM

Chapter 11: Case Studies: Beyond Edge-to-Edge Design
248
Figure 11-4: Mobile WYFFL (as shown in Safari for Mac)
There are three types of links represented in the navigation list: AJAX links (
Latest News
,
Game Day
,

Standings
, and
About
); Page links (
Schedule and Rules
); and External links (
Visit Web Site
).
The Standings and Schedule pages on the regular Web site are lengthy. Therefore, for the mobile version,
these pages are broken into small readable sections. These sections are displayed as second tier menus:

< ul id=”schedule” title=”Schedules” >
< li > < a href=”seniors.html” > Seniors < /a > < /li >
< li > < a href=”juniors.html” > Juniors < /a > < /li >
< li > < a href=”freshman.html” > Freshman < /a > < /li >
< li > < a href=”instructional.html” > Instructional < /a > < /li >
< /ul >
< ul id=”rules” title=”Rules” >
< li > < a href=”field.html” > Fields and Players < /a > < /li >
< li > < a href=”game.html” > Game < /a > < /li >
< li > < a href=”time.html” > Time < /a > < /li >

< li > < a href=”penalties.html” > Penalties < /a > < /li >
< li > < a href=”enforce.html” > Enforcement of Penalties < /a > < /li >
< /ul >
Figures 11 - 5 and 11 - 6 show these two submenus.
c11.indd 248c11.indd 248 12/7/07 2:58:11 PM12/7/07 2:58:11 PM
Chapter 11: Case Studies: Beyond Edge-to-Edge Design
249
Figure 11-5: Schedule submenu (as shown in
Safari for Mac)
Figure 11-6: Rules submenu (as shown in
Safari for Mac)
Text - Based Destination Pages
The Latest News page is a destination page that is designed for readability of short, bite - sized articles.
Here ’ s the document fragment used for this purpose:

< div id=”news” class=”panel” title=”News” >
< fieldset >
< h3 > Top Ranked Teams Set to Battle on Oct. 13 < /h3 >
< p > The #1 and #2 teams of both the Junior and Senior divisions will square off on
Saturday, October 13. These games will have major implications on the season
rankings heading into the playoffs. In the Junior division, the high flying #1
Dolphins (4-0 ) meet the upstart #2 Cowboys (4-0) at 8am. In the Senior division,
the defensive powerhouse #1 Steelers (4-0) will battle the #2 Bears (3-0-1) at
12pm. < /p >
< h3 > No Games on Columbus Day Weekend < /h3 >
< p > Just a reminder that there will be no games this week due to the holiday
weekend. Have a great weekend. < /p >
< h3 > Open Practices for Junior and Senior Divisions < /h3 >
< p > Open Practices are on Wednesday evenings from 5:30-7:00pm for both Junior and
Senior Divisions, but not Freshman Division. The Open Practices will be held at the

Jefferson School Fields in Holden. < /p >
< h3 > Wachusettflagfootball.com - Your Best Source for Weather Info < /h3 >
(continued)
c11.indd 249c11.indd 249 12/7/07 2:58:11 PM12/7/07 2:58:11 PM
Chapter 11: Case Studies: Beyond Edge-to-Edge Design
250
< p > Be sure to come to this web site throughout the year in case it looks rainy
outside on a Saturday morning. Throughout the season, the league will post any rain
postponement or cancellation announcements here by 7:00am on gameday. < /p >
< h3 > Dick’s Sporting Goods as Community Partner < /h3 >
< p > Wachusett Youth Flag Football would like to thank and recognize Dick’s Sporting
Goods as a sponsor and community partner. < /p >
< /fieldset >
< /div >
As is standard for iUI apps, a
div
with
class=”panel”
is used to contain this type of destination page.
A
fieldset
is used as a container for the rest of the content to take advantage of the iUI styles. Custom
styles are set inside of iuiadd.css for the
h3
,
p
, and
a
styles:
.panel p, .panel a {

text-align: left;
padding: 0 10px 0 10px;
}
.panel h3 {
margin: 3px 0 10px 10px;
text-align: left;
font-size: 1.2em;
}
Figure 11 - 7 shows the page displayed in Safari.
Figure 11-7: Latest News (as shown in Safari for Mac)
(continued)
c11.indd 250c11.indd 250 12/7/07 2:58:12 PM12/7/07 2:58:12 PM
Chapter 11: Case Studies: Beyond Edge-to-Edge Design
251
The text - based Rules page and About page employ the same
div
element structure and the same
style rules.
Table - Based Destination Pages
Because of the tabular nature of the information they present, the Standings and Schedule pages are
implemented as table - based destination pages. Here is a portion of the document fragment for the
Standings page:

< div id=”standings” class=”panel” title=”Standings” >
< table border=”1” cellpadding=”0” cellspacing=”0” >
< tr class=”first” >
< th > Seniors < /td >
< th > W < /td >
< th > L < /td >
< th > T < /td >

< th > PS < /td >
< th > PA < /td >
< /tr >
< tr class=”row-a” >
< td > Steelers < /td >
< td > 4 < /td >
< td > 0 < /td >
< td > 0 < /td >
< td > 74 < /td >
< td > 6 < /td >
< /tr >
< tr class=”row-b” >
< td > Bears < /td >
< td > 3 < /td >
< td > 0 < /td >
< td > 1 < /td >
< td > 92 < /td >
< td > 36 < /td >
< /tr >
< tr class=”row-a” >
< td > Eagles < /td >
< td > 3 < /td >
< td > 1 < /td >
< td > 0 < /td >
< td > 104 < /td >
< td > 54 < /td >
< /tr >
< tr class=”row-b” >
< td > Pats < /td >
< td > 2 < /td >

< td > 1 < /td >
< td > 1 < /td >
< td > 81 < /td >
< td > 61 < /td >
< /tr >
(continued)
c11.indd 251c11.indd 251 12/7/07 2:58:20 PM12/7/07 2:58:20 PM