March 9, 2021
Hot Topics:

Building WML Gadgets: A Calendar

  • By Steve Schafer
  • Send Email »
  • More Articles »

Setting the Stage

As with other projects, we have to be careful how we design our application, given the small amount of screen real estate available. I started this project by using the output of the Unix "cal" program. This program's base functionality provides small monthly calendars such as this:

   December 2002
Su Mo Tu We Th Fr Sa
 1  2  3  4  5  6  7
 8  9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

This format fits nicely in the screen of a small device such as a cell phone. In fact, it fits so nicely that my first attempt at this gadget used the output straight from the cal program.

Using a filter, I was able to add line breaks ("<br/>") to the end of each line. Adding an appropriate WML shell around the resulting output gave me the following code:

<?xml version="1.0"?>

   December 2002<br/>
Su Mo Tu We Th Fr Sa<br/>
 1  2  3  4  5  6  7<br/>
 8  9 10 11 12 13 14<br/>
15 16 17 18 19 20 21<br/>
22 23 24 25 26 27 28<br/>
29 30 31<br/>

However, the output was something of a train wreck, as shown in the following figure:


All Image in this article are courtesy Openwave Systems Inc. (Openwave, the Openwave logo, Openwave SDK, Openwave SDK Universal Edition, Openwave SDK WAP Edition are trademarks of Openwave Systems Inc. All rights reserved.)

The problem lies in the mobile browser's font; because it uses a proportional font, the columns of numbers don't line up correctly. In fact, I quickly determined that WML wouldn't allow me to use the pure text calendar—it lacks even rudimentary font control outside of the usual bold, italic, and underline. The equivalent of a <PRE> tag would be very welcome.

Refining the Output

There is one WML construct that would aid our format: tables. Using a seven-column design, we could put each date in a cell and rely on the table format to align the dates properly. Using this method, our calendar display code becomes the following:

December 2002<br/>
<table columns="7">

The resulting output resembles this figure:


This is much closer to the desired effect, but could use a little more polish. Adding leading spaces to the days under 10 and some separating bars gets us about as close as possible:

December 2002<br/>
<table columns="7">

Note: We use non-breaking space entities ("&nbsp;") instead of straight spaces because WML abhors white space—it otherwise would fail to recognize and render the white space.

The output of this new code now resembles the following figure:


Page 2 of 5

This article was originally published on December 21, 2002

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date