 |
|
    |
 |
|
 |
Introduction We have spent most of this document providing guidelines and suggestions on how to best use the constructs of XHTML-MP and CSS to build compelling and usable wireless applications. However, the markup languages are only part of the story. While the markup specifications are covered by standards bodies such as the OMA and the W3C, other objects that can be included within the browser fall largely outside the scope of these or other standards bodies. Each browser and device combination may support a different set of images and objects above and beyond the markup languages, and the key to the supported objects lies in the HTTP_ACCEPT header. The MIME types in the accept header indicate exactly what types of data the device can accept. Supported Image and Object Formats The Openwave Browser 6.2 contains support for BMP, WBMP, PNG, JPG, and GIF images at a base line. Other browsers may support additional formats, and they will disclose these formats in the accept header. (Web browsers generally send "*/*" in their accept header, indicating that they will accept ANY object or image type.) If a website delivers something that the browser cannot handle natively, it will search the list of registered applications to look for an appropriate handler. If an appropriate handler cannot be found, the end user may be prompted to assign or download a handler, or simply write the data to disk for use at a later time, outside the context of the browser. Handheld devices with little storage, next to no end user configuration, and no ability to register data handlers, must explicitly send a list of MIME types so developers know what will successfully arrive at the device and what will be rejected out of hand. It is worth noting that simply because a MIME type is present in the accept header does not indicate that every object will be rendered within the context of the browser. Just like on the big Web, some things will be passed to pre-registered data handlers. Using Images Through out this document we have seen the image tag <img> used in numerous places. The tag itself should be familiar to anyone with experience in web programming as it forms one of the core elements used on nearly every web page built. The syntax and attributes are very straight forward. <img alt="mug shot" src="mugshot.png" height="88" width="120"/>  Image 1: Simple use of images in XHTML By using the width and height attributes for the image tag, not only can the region of the screen dedicated to the image be constrained (independent of the actual image size), but it also provides the browser guidelines for layout, resulting in a smoother end user experience. If we tweak the height and width attributes, we could use the same image twice on the screen  Image 2: Two images scaled by the <img> image tag
In the case above, we've modified the size of the image as rendered on screen without having to do any manipulation of the image itself. Performance issues While it is possible to scale images by using attributes of the image tag, this can result in less than optimal performance. There are a couple of guidelines to keep in mind when building images to render on the mobile web.
When a page contains more than one image, the browser will first request the markup document. Then each image will be fetched in an individual request. This means an additional network transaction for every image on the page.
There are two different categories of objects that can be delivered via the browser. One is objects for use directly in the browser environment; the other is objects that are intended to be stored locally on the device and used outside the browsing environment. While the underlying media types may be the same across the two categories, the delivery mechanism varies slightly. Images that are to be displayed in the browser can be delivered using the <img> or <object> tag. These same images can be stored as screensavers by delivering it in an OMA Download wrapper or content descriptor. Using the <object> tag for the delivery of media types implies that object will be viewed/played within the browser. <object data="music.wav" height="20" width="20" title="Play" type="audio/x-wav" standby="loading"/>  Image 3: Using objects within the browser In the example above, we are using a .wav file to play within the browser. The height and width attributes of the object control how much space the control takes on the screen. The title attribute controls how the softkey label appears on the device. For more details on using the <object> tag, please refer to the XHTML and CSS Reference Guide. The <object> tag can also be employed to use WAP Pictograms in the Openwave Browser. WAP Pictograms are the standards-based equivalent to the "localsrc" attribute to the <img> tag in WML. The set of pictograms is scaled down from what was available (and still is) for the Openwave localsrc images. Since the pictograms are resident in devices with the Openwave Browser version 6.2 or higher, there is absolutely no lag time in loading the images. The complete list can be found in the XHTML/CSS reference guide on the Openwave Developer website. <object data="pict:///core/arrow/up" height="16" width="16" standby="Loading image..."/>  Image 4: WAP Pictogram via the <object> tag The delivery of objects for use in the local device is beyond the scope of this document. At this time, each carrier (and device type) may have different specifications on exactly how to download objects for local use. What's Next This has been a high level overview on how to build compelling applications, but we've not looked at all of the possible features available for developers to build compelling XHTML applications. For deep technical details on all of the elements and attributes supported by the Openwave Browser, please do refer to the Openwave XHTML-MP and CSS Reference Guide. In the next chapter we will discuss techniques to test and validate your applications. XHTML-MP Style Guide Chapters XHTML-MP Style Guide Index 1. History of XHTML Mobile Profile 2. XHTML MP in practice 3. Menus in XHTML Mobile profile 1.0 4. Text-flow 5. Forms: Collecting User Data 6. Images and Objects 7. Testing Your Applications Appendix A Appendix B |