From a code standpoint, the
Contact panel is a div element with the panel class assigned to it, which displays a generic iPhone-style
page (see Figure 7-4 ).
Figure 7-2: iProspector top-level menu
Chapter 7: Integrating with iPhone Services
157
Figure 7-3: List of sales leads Figure 7-4: Empty Contact panel
Creating the Contact Header
With the application shell functionality in place, the Contact panel is now ready to be filled in. At the top
of a typical iPhone Contacts page is a thumbnail image of the contact along with the contact name and
company. The HTML document is set up by replacing the dummy h2 text with a div element with a
cuiHeader class that you??™ll define shortly. Inside of the div , three elements are defined, each of which is
assigned a cui class. Here??™s the code:

Chapter 7: Integrating with iPhone Services
158
The img element will hold the thumbnail image. The h1 element will contain the name, while the h2
element will show the company.
Creating the cui.css Style Sheet
Next, it is time to create the cui.


Pages:
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189