Lập trình iphone chuyên nghiệp part 4

Chapter 3: Implementing the Interface
40
Displaying a Panel with an Internal URL
If you are linking to another block section inside of the same page, then you simply need to add the
code. For example, the Meet Our Team item links to the following
div
:

< div id=”meet_our_team” class=”panel” title=”Meet Our Team” >
< h2 > J-Team Reality < /h2 >
< fieldset >
< p class=”normalText” > Lorem ipsum dolor sit amet, consect etuer adipis cing
elit. Suspend isse nisl. Vivamus a ligula vel quam tinci dunt posuere. Integer
venen atis blandit est. Phasel lus ac neque. Quisque at augue. Phasellus purus. Sed
et risus. Suspe ndisse laoreet consequat metus. Nam nec justo vitae tortor
fermentum interdum. Aenean vitae quam eu urna pharetra ornare. < /p >
< p class=”normalText” > Pellent esque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Aliquam congue. Pel lentesque pretium
fringilla quam. Integer libero libero, varius ut, faucibus et, facilisis vel, odio.
Donec quis eros eu erat ullamc orper euismod. Nam aliquam turpis. Nunc convallis
massa non sem. Donec non odio. Sed non lacus eget lacus hend rerit sodales. < /p >
< /fieldset >
< /div >
The
id
attribute value of the block element is identical to the
href
value of the source link (except for
the
#
sign). The

div
element is assigned the
panel
class, and the
title
attribute supplies the new page
title for the application. Inside of the
div
element, the
h2
element provides a header, while the
fieldset

element, which is commonly used as a container inside of iUI destination pages, is used to house the
content. Figure 3 - 2 displays the results (based in part on additional styles that will be described shortly).
The
panel
class and
fieldset
styles are shown in the following code. In addition, the default
h2
style is
provided (though I will be updating this style in my own irealtor.css file):

body > .panel {
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 10px;
background: #c8c8c8 url(pinstripes.png);
}

.panel > fieldset {
position: relative;
margin: 0 0 20px 0;
padding: 0;
background: #FFFFFF;
-webkit-border-radius: 10px;
border: 1px solid #999999;
text-align: right;
font-size: 16px;
}
.panel > h2 {
margin: 0 0 8px 14px;
font-size: inherit;
font-weight: bold;
color: #4d4d70;
text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
}
c03.indd 40c03.indd 40 12/7/07 2:43:36 PM12/7/07 2:43:36 PM
Chapter 3: Implementing the Interface
41
The
panel
class property displays the vertical pinstripes, which is a standard background for iPhone
and iPod touch applications. The
fieldset
, used primarily for displaying rows, is used because it
provides a white background box around the text content the page will display. However, because the
iui.css styles did not display the
margin
/

padding
properties of
h2
or
p
text as I needed it to, I linked
irealtor.html with a new style sheet by placing the following declaration below the iui.css declaration:

< style type=”text/css” media=”screen” > @import “irealtor.css”; < /style >
iUI updates the caption and
functionality automatically
Taken from the title attribute
Panel style for destination pages
fieldset container box
Figure 3 - 2: Destination page
c03.indd 41c03.indd 41 12/7/07 2:43:36 PM12/7/07 2:43:36 PM
Chapter 3: Implementing the Interface
42
Inside of irealtor.css, the following styles are defined:

.panel p.normalText {
text-align: left;
padding: 0 10px 0 10px;
}
.panel > h2 {
margin: 3px 0 10px 10px;
}
Displaying AJAX Data from an
External URL
You could create an entire iPhone/iPod touch application inside of a single HTML page using

internal links. However, this single - page approach breaks down when you begin to deal with large
amounts of data. Therefore, iUI enables you to break up your application into chunks, yet still maintain
the same integrated look and feel of a single page app. When you use AJAX, iUI allows you to load
content into your application on demand by providing an external URL. However, the document that is
retrieved needs to be a document fragment, not a complete HTML page.
iUI fully encapsulates
XMLHttpRequest()
for you. Therefore, when you supply an external URL in a
link that does not have
target=”_self”
defined, it will retrieve the document fragment and display it
within iUI.
In iRealtor, tapping the Featured Listings menu item (
< li > < a href=”featured.html” > Featured
Listings < /a > < /li >
) should display a list of special homes that are being featured by this fictional local
realtor. The contents of the file named featured.html are shown below:

< ul id=”featuredListings” title=”Featured” >
< li > < a href=”406509171.html” > 30 Bellview Ave, Bolton < /a > < /li >
< li > < a href=”306488642.html” > 21 Milford Ave, Brandon < /a > < /li >
< li > < a href=”326425649.html” > 10 Main St, Leominster < /a > < /li >
< li > < a href=”786483624.html” > 12 Smuggle Lane, Marlboro < /a > < /li >
< li > < a href=”756883629.html” > 34 Main Ave, Newbury < /a > < /li >
< li > < a href=”786476262.html” > 33 Infinite Loop, Princeton < /a > < /li >
< li > < a href=”706503711.html” > 233 Melville Road, Rutland < /a > < /li >
< li > < a href=”767505714.html” > 320 Muffly, Sliver < /a > < /li >
< li > < a href=”706489069.html” > 1 One Road, Zooly < /a > < /li >
< /ul >
The result is a basic navigation list, as shown in Figure 3 - 3 . Each list item specifies a unique URL in

which iUI will load using AJAX when selected. You ’ ll see this MLS listing destination page shortly.
The All Listings menu item illustrates some additional capabilities that you can add to a navigation list.
Figure 3 - 4 displays the additional details added to the navigation list item, including a thumbnail picture
and summary details in a second line.
c03.indd 42c03.indd 42 12/7/07 2:43:37 PM12/7/07 2:43:37 PM
Chapter 3: Implementing the Interface
43
Figure 3 - 3: Listing data coming from AJAX
The document fragment that is loaded via AJAX is as follows:

< ul id=”listings” title=”Current Listings” >
< li >
< img class=”listingImg” src=”images/406509171-sm.png”/ >
< a class=”listing” href=”406509171.html” > 20 May Lane < /a >
< p class=”listingDetails” > Acton, MA, $318,000, Ranch < /p >
< /li >
< li >
< img class=”listingImg” src=”images/306488642-sm.png”/ >
< a class=”listing” href=”306488642.html” > 221 Bellingham < /a >
< p class=”listingDetails” > Borland, MA, $329,000, Colonial < /p >
< /li >
< li >
< img class=”listingImg” src=”images/326425649-sm.png”/ >
< a class=”listing” href=”326425649.html” > 210 Burlington < /a >
< p class=”listingDetails” > Borland, MA, $379,000, Ranch < /p >
< /li >
< li >
< img class=”listingImg” src=”images/786483623-sm.png”/ >
Figure 3 - 4: Enhanced navigational menu items
(continued)

c03.indd 43c03.indd 43 12/7/07 2:43:37 PM12/7/07 2:43:37 PM
Chapter 3: Implementing the Interface
44
< a class=”listing” href=”786483624.html” > 1 Happy Bosco Lane < /a >
< p class=”listingDetails” > Borland, MA, $429,000, Ranch < /p >
< /li >
< li >
< img class=”listingImg” src=”images/756883629-sm.png”/ >
< a class=”listing” href=”756883629.html” > 34 Kramerica Blvd < /a >
< p class=”listingDetails” > Holden, MA, $529,000, Colonial < /p >
< /li >
< li >
< img class=”listingImg” src=”images/786476262-sm.png”/ >
< a class=”listing” href=”786476262.html” > 3 George Road < /a >
< p class=”listingDetails” > Holden, MA, $359,000, Saltbox < /p >
< /li >
< li >
< img class=”listingImg” src=”images/706503711-sm.png”/ >
< a class=”listing” href=”706503711.html” > 39 Bubble Boy Road < /a >
< p class=”listingDetails” > Rutland, MA, $959,000, Colonial < /p >

< /li >
< li >
< img class=”listingImg” src=”images/767505713-sm.png”/ >
< a class=”listing” href=”767505714.html” > 98 Muffin Top Road < /a >
< p class=”listingDetails” > Rutland, MA, $99,000, Ranch < /p >
< /li >
< li >
< img class=”listingImg” src=”images/706489069-sm.png”/ >
< a class=”listing” href=”706489069.html” > 1291 Blackjack Lane < /a >

< p class=”listingDetails” > Zambo, MA, $159,000, Saltbox < /p >
< /li >
< /ul >
Each element inside of the
li
element has a class style assigned to it. The following CSS styles are
located in the irealtor.css file:

a.listing {
padding-left: 54px;
padding-right: 40px;
min-height: 34px;
}
img.listingImg {
display: block;
position: absolute;
margin: 0;
left: 6px;
top: 7px;
width: 35px;
height: 27px;
padding: 7px 0 10px 0;
}
p.listingDetails {
display: block;
position: absolute;
margin: 0;
left: 54px;
top: 27px;
(continued)

c03.indd 44c03.indd 44 12/7/07 2:43:37 PM12/7/07 2:43:37 PM
Chapter 3: Implementing the Interface
45
text-align: left;
font-size: 12px;
font-weight: normal;
color: #666666;
text-decoration: none;
width: 100%;
height: 13px;
padding: 3px 0 0 0;
}
The
img.listingImg
class positions the thumbnail at the far left side of the item. The
p.listingDetails
class positions the summary text just below the main link.
Designing for Long Navigation Lists
While a document fragment such as the one shown previously works fine for small amounts of data, the
performance would quickly drag with long lists. To deal with this issue, iUI allows you to break large lists
into manageable chunks by loading an initial set of items, and then providing a link to the next set (see
Figure 3 - 5 ). This design emulates the way the iPhone Mail application works with incoming messages.
Figure 3 - 5: Loading additional listing
c03.indd 45c03.indd 45 12/7/07 2:43:38 PM12/7/07 2:43:38 PM
Chapter 3: Implementing the Interface
46
To provide this functionality in your application, create a link and add
target=”_replace”
as an attri-
bute. iUI will load the items from the URL replacing the current link. As with other AJAX links, the URL

needs to point to a document fragment, not a complete HTML file. Here ’ s the link added to the bottom
of the listings
ul
list:

< li > < a href=”listings1.html” target=”_replace” > Get 10 More Listings... < /a > < /li >
When using the
target=”_replace”
attribute, you need to use a fragment of a
ul
element and not a
different structure. For example, the following document fragment is valid to use with a
_replace

request:

< li > item 1 < /li >
< li > item 2 < /li >
< li > item 3 < /li >
However, the following document fragment would not be correct because it is not valid inside of a

ul
element:

< ul >
< li > item 1 < /li >
< li > item 2 < /li >
< li > item 3 < /li >
< /ul >
Creating a Destination Page

Each of the MLS listings in iRealtor has its own individual destination page that is accessed by an
AJAX - based link, such as:

< a class=”listing” href=”406509171.html” > 20 May Lane < /a >
The design goal of the page is to provide a picture and summary details of the house listing. But, taking
advantage of iPhone ’ s services, you also want to add a button for looking up the address in the Map app
and an external Web link to a site providing town information. Figures 3 - 6 and 3 - 7 show the end design
for this destination page.
The document fragment for this page is as follows:

< div title=”20 May Lane” class=”panel” >
< div >
< img src=”images/406509171.png”/ >
< /div >
< h2 > Details < /h2 >
< fieldset >
< div class=”row” >
< label > mls # < /label >
< p > 406509171 < /p >
< /div >
c03.indd 46c03.indd 46 12/7/07 2:43:39 PM12/7/07 2:43:39 PM
Chapter 3: Implementing the Interface
47
< div class=”row” >
< label > address < /label >
< p > 20 May Lane < /p >
< /div >
< div class=”row” >
< label > city < /label >
< p > Acton < /p >

< /div >
< div class=”row” >
< label > price < /label >
< p > $318,000 < /p >
< /div >
< div class=”row” >
< label > type < /label >
< p > Single Family < /p >
< /div >
< div class=”row” >

< label > acres < /label >
< p > 0.27 < /p >
< /div >
< div class=”row” >
< label > rooms < /label >
< p > 6 < /p >
< /div >
< div class=”row” >
< label > bath (f) < /label >
< p > 1 < /p >
< /div >
< div class=”row” >
< label > bath (h) < /label >
< p > 0 < /p >
< /div >
< /fieldset >
< fieldset >
<
div class=”row” >

< a class=”serviceButton” target=”_self”
href=” > Map To House < /a >
< /div >
< div class=”row” >
< a class=”serviceButton” target=”_self”
href=” & L=3 & L0=Home & L1=State%20Government
& L2=Local%20Government & sid=massgov2 & selectCity=Acton” > View Town Info < /a >
< /div >
< /fieldset >
< /div >
There are several items of note. First, the
div
element is assigned the
panel
class, just as you did for the
Meet Our Team page earlier in the chapter. Second, the individual items of the MLS listing data are con-
tained in
div
elements with the
row
class. The set of
div row
elements is contained in a
fieldset
.
Third, the button links to the map and external Web page are assigned a
serviceButton
class.
Chapter 8 , which is devoted to iPhone service integration, discusses these types of button links.
c03.indd 47c03.indd 47 12/7/07 2:43:39 PM12/7/07 2:43:39 PM

Chapter 3: Implementing the Interface
48
The styles for this page come from both iui.css and irealtor.css. First, here are the
row class
and
label

styles in iui.css (if you recall, the
fieldset
is defined earlier in the chapter):

.row {
position: relative;
min-height: 42px;
border-bottom: 1px solid #999999;
-webkit-border-radius: 0;
text-align: right;
}
fieldset > .row:last-child {
border-bottom: none !important;
}
.row > label {
position: absolute;
margin: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
}
Figure 3 - 6: Top of listing page Figure 3 - 7: Bottom of listing page
c03.indd 48c03.indd 48 12/7/07 2:43:39 PM12/7/07 2:43:39 PM
Chapter 3: Implementing the Interface

49
The
row
class emulates the general look of an iPhone/iPod touch list row found in such locations as the
built - in Settings and Contacts apps. The
.row:last-child
style removes the bottom border of the
final
row
in a
fieldset
. The
.row > label
style defined in iui.css emulates the look of iPhone Settings,
but as you will see in the following example, the code overrides this formatting to more closely emulate
the Contacts look (right - aligned, black font).
The following styles are defined in irealtor.css to augment the base iUI styles:

.panel img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 2px solid #666666;
-webkit-border-radius: 6px;
}
.row > p {
display: block;
margin: 0;
border: none;

padding: 12px 10px 0 110px;
text-align: left;
font-weight: bold;
text-decoration: inherit;
height: 42px;
color: inherit;
box-sizing: border-box;
}
.row > label {
text-align: right;
width: 80px;
position: absolute;
margin: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
color: #7388a5;
}
.serviceButton {
display: block;
margin: 0;
border: none;
padding: 12px 10px 0 0px;
text-align: center;
font-weight: bold;
text-decoration: inherit;
height: 42px;
color: #7388a5;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

c03.indd 49c03.indd 49 12/7/07 2:43:39 PM12/7/07 2:43:39 PM
Chapter 3: Implementing the Interface
50
The
.panel > img
centers the image with
margin-left:auto
and
margin-right:auto
and rounds
the edges of the rectangle with
-webkit-border-radius
. (See Chapter 4 for more on this CSS style.)
The
.row > p
style is used to format the values of each MLS listing information. It is left - aligned and
starts at 110px to the right of the left border of the element. The
.row > label
style adds specific
formatting to emulate the Contacts UI look. The
.serviceButton
class style defines a link with a
button look.
Adding a Dialog
The application pages that have been displayed have either been edge - to - edge navigation lists or
destination panels for displaying content. iUI also enables you to define a modal dialog. When a user is
in a dialog, they need to either perform the intended action (such as a search or submittal) or cancel out.
Just like in any desktop environment, a dialog is ideal for form entry.
iRealtor needs dialog boxes for two parts of the application — Search and the Mortgage Calculator. The
Search dialog is accessed by tapping the Search button on the top toolbar. Here ’ s the calling link:

< a class=”button” href=”#searchForm” > Search < /a >
The link displays the internal link
#searchForm
. This references the
form
element with an
id
of

searchForm
:

< form id=”searchForm” class=”dialog” action=”search.php” >
< fieldset >
< h1 > Search Listings < /h1 >
< a class=”button leftButton” type=”cancel” > Cancel < /a >
< a class=”button blueButton” type=”submit” > Search < /a >
< select name=”proptype” size=”1” >
< option value=”” > Property Type < /option >
< option value=”SF” > Single-Family < /option >
< option value=”CC” > Condo < /option >
< option value=”MF” > Multi-Family < /option >
< option value=”LD” > Land < /option >
< option value=”CI” > Commercial < /option >
< option value=”MM” > Mobile Home < /option >
< option value=”RN” > Rental < /option >
< option value=”BU” > Business Opportunity < /option >
< /select >
< label class=”altLabel” > Min $: < /label >

< input class=”altInput” type=”text” name=”minPrice”/ >
< label class=”altLabel” > Max $: < /label >
< input class=”altInput” type=”text” name=”maxPrice”/ >
< label class=”altLabel” > MLS #: < /label >
< input class=”altInput” type=”text” name=”mlsNumber”/ >
< /fieldset >
< /form >
c03.indd 50c03.indd 50 12/7/07 2:43:40 PM12/7/07 2:43:40 PM