Using images efficiently

The example in the previous section used a single static HDML deck to display several images. Although this works, it is not always the most efficient way to display multiple images. Because the images are provided by separate absolute URLs, the phone must make several requests to load the HDML decks--one request for the deck itself and an additional request for each image.

If you are using multiple images, you should consider including them in a digest; cards in the digest can display the images by specifying digest-relative URLs. This ensures that the images are all sent in a single response to a single device request. The potential disadvantage of this approach is that each time a deck in the digest is refetched, all of the images in the digest will also be refetched, regardless of whether they are already in the cache.

When you package multiple images in a digest, the device loads the images in the order in which you include them--that is, the first image you added to the digest gets loaded first, the image you added last gets loaded last.

Example: using Perl utilities to add images to a digest

The following Perl code demonstrates how to include the cards and images in Figure 4-1 in a single digest:

#! /usr/local/bin/perl5.001
# Sample libraries path (sdk_dir/examples/apputils)
BEGIN { push (@INC, "../apputils"); }
require Digest;
require 'HDMLUtils.pl';

# Read in the images. In production code, you should
# check for, and handle errors in reading in images.
open(FD, "<splash.bmp");
seek(FD, 0, 2);
$fdsize = tell(FD);
seek(FD, 0, 0);
read(FD, $image1, $fdsize);

open(FD, "<rainy.bmp");
seek(FD, 0, 2);
$fdsize = tell(FD);
seek(FD, 0, 0);
read(FD, $image2, $fdsize);
open(FD, "<sunny.bmp");
seek(FD, 0, 2);
$fdsize = tell(FD);
seek(FD, 0, 0);
read(FD, $image3, $fdsize);

# Define an HDML deck with display and choice cards.
$deck1 = '<HDML VERSION=3.0 PUBLIC=TRUE>'.
    '<DISPLAY NAME=a>'.
    '<ACTION TYPE=ACCEPT TASK=GO DEST=#b>' .
    'Welcome to Kurt Weather <BR>'.
    '<IMG SRC=?splash.bmp ALT=Kurt Weather Logo>'.
    '</DISPLAY>'.
    '<CHOICE NAME=b>'.
    'Choose a forecast:'.
    '<CE TASK=GO DEST=#a>'.
    '<IMG SRC=?rainy.bmp> Monday'.
    '<CE TASK=GO DEST=#a>'.
    '<IMG SRC=?sunny.bmp> Tuesday'.
    '</CHOICE>'.
    '</HDML>';

# Create the digest
my $digest = new Digest;

# Add deck to the digest
$digest->addHDMLDeck("?NS=DECK1", $deck1);

# Add image to the digest
$digest->addImage("image/bmp", "?splash.bmp", $image1);
$digest->addImage("image/bmp", "?rainy.bmp", $image2);
$digest->addImage("image/bmp", "?sunny.bmp", $image3);

# Output the digest
&AppUtils::OutputDigest($digest->asString());