Using localsrc Images
The WAP browser from Phone.com is currently the only browser on the market that ships with a list of predefined localsrc icons. These can greatly improve the look and feel of your application, convey messages in a small amount of space, and, because they are stored in the local ROM on devices with image support, they are displayed immediately and add no overhead. Since the Phone.com browser has been licensed by dozens of device manufacturers, there are a significant number of phones on the street today which do contain support for the localsrc icons.
Since not all the icons are exactly the same width, there are three localsrc images that are included among them that perform a placeholder action. These are "blankfull", "blankhalf", and "blankquarter", and can be used to ensure that the icons and text in a choice list will line up cleanly.
Listing 6.3 shows how the "blankquarter" and "blankhalf" icons can be used to present an attractive menu of choices with icons.
Listing 6.3 Using Placeholder Icons
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"http://www.phone.com/dtd/wml11.dtd">
<wml>
<card id="main">
<do type="options" label="Inbox" >
<go href="device:status"/>
</do>
<p align="center">Phone.com Services
</p>
<p align="left" mode="nowrap">
<select>
<option onpick="email.wml"><img src="" alt="" localsrc="envelope2"/>EMail</option>
<option onpick="euro2.wml"><img src="" alt="" localsrc="phone3"/> Content Services<
|
/option>
<option onpick="custs.wml"><img src="" alt="" localsrc="blankquarter"/>
<img src="" alt="" localsrc="head1"/> <img src="" alt="" localsrc="blankquarter"/>
CustCare</option>
<option onpick="bookmarks.wml"><img src="" alt="" localsrc="tag"/>Bookmarks</option>
</select>
</p>
</card>
</wml>
The third option Listing 6.3 uses is the "head1" icon, which takes up only one-half the width of the other three icons that are used. To ensure that the text associated with each option renders aligned, the "blankquarter" icon is used on either side of the "head1" icon. Using this method instead of a single "blankhalf" icon has the effect of centering the "head1", as shown in Figure 6.5. But be warned, this may not work on all devices.
Figure 6.5. localsrc images can be used within a list of options and can be aligned properly. Notice that the Phone.com DTD is used in the code in Listing 6.3 to make this possible.
Caution
Rendering of images within an <option> does rely on the use of the Phone.com WML DTD, but since only Phone.com devices currently can render localsrc images, this should not be an issue.
The use of localsrc images is a simple and inexpensive (in terms of overhead) way to liven up the look and feel of your site. When the WAP Forum approves a list of standard icons, these will be supported by the Phone.com browser in addition to the existing icon list.