October 22, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Building WML Gadgets: A Calendar

  • December 20, 2002
  • 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"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
  "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>
<card>
<p>
   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/>
</p>
</card>
</wml>

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

FIGURE 11.1

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:

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

The resulting output resembles this figure:

FIGURE 11.2

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:


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

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:

FIGURE 11.3





Page 2 of 5



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel