2001 Prentice Hall, Inc. All rights reserved.

1

Chapter 13 - Wireless Markup Language (WML): Part I

Outline13.1 Introduction13.2 Editing WML13.3 First WML document13.4 Phone Simulator Install and Setup13.5 Formatting Text13.6 Images13.7 Linking 13.7.1 Hyperlinking 13.7.2 Internal Linking 13.7.3 External Linking 13.8 Special Characters13.9 Internet and World Wide Web Resources

2001 Prentice Hall, Inc. All rights reserved.

Outline2

1 <?xml version="1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.1: fig13_1.wml -->6 <!-- Simple WML Document -->7 8 <wml>9 <card>10 <p>11 Welcome to WML!12 </p>13 </card> 14 </wml>

Fig13_1.wml

Text for display in a microbrowser.

2001 Prentice Hall, Inc. All rights reserved.

Outline3

2001 Prentice Hall, Inc. All rights reserved.

Outline4

Fig. 13.2 Phone Information window.

2001 Prentice Hall, Inc. All rights reserved.

Outline5

Fig. 13.3 Phone Information window displaying an error.

2001 Prentice Hall, Inc. All rights reserved.

Outline6

Fig. 13.3 Corresponding Openwave browser displaying an error.

2001 Prentice Hall, Inc. All rights reserved.

7

13.4 Formatting Text

WML Ta g Description

<b> Specifies bold font.

<strong> Specifies emphasized text.

<big> Specifies that the text should be one font size larger than the default.

<small> Specifies that the text should be one font size smaller than the default.

<i> Specifies italic font.

<u> Underlines text.

<em> Specifies emphasized text.

Fig. 13.3 Description of WML formatting tags.

2001 Prentice Hall, Inc. All rights reserved.

Outline8

1 <?xml version="1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.5: fig13_5.wml -->6 <!-- WML formatting -->7 8 <wml>9 <card>10 <p>11 A <b>bold</b> statement<br />12 A <big>big</big> deal<br />13 A <small>small</small> problem<br />14 I <em>mean</em> it<br/>15 This is <i>fancy</i><br />16 <strong>Strong</strong>man<br />17 <u>Not</u> a link18 </p>19 </card> 20 </wml>

Fig13_5.wmlText marked up using formatting elements.

The break element places all remaining text on the next line in the display screen.

2001 Prentice Hall, Inc. All rights reserved.

Outline9

2001 Prentice Hall, Inc. All rights reserved.

Outline10

1 <?xml version="1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.6: fig13_6.wml -->6 <!-- Using images. -->7 8 <wml>9 <card>10 11 <!-- center paragraph tag’s contents -->12 <p align = "center">13 Images<br />14 15 <!-- insert image -->16 <img src = "Logo.wbmp" alt = "Logo image" height = "82"17 width = "84“ />18 </p>19 </card> 20 </wml>

Fig13_6.wmlSetting the paragraph element’s align attribute to center places all text and images in the center of the display screen.

The name of the image to display.

The value of the alt attribute will display if the image cannot be displayed.The height and width attributes define the size of the image.

2001 Prentice Hall, Inc. All rights reserved.

Outline11

2001 Prentice Hall, Inc. All rights reserved.

Outline12

1 <?xml version="1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.7: fig13_7.wml -->6 <!-- Using Links -->7 8 <wml>9 <card>10 <p>11 Search Engines:<br />12 13 <!-- create links -->14 <a accesskey = "1" href = "http://mobile.sports.com" 15 title = "Sports">16 Sports</a><br /> 17 <a accesskey = “2" 18 href = “http://info.wapjag.com/aliens" 18 title = "SciFi">SciFi</a><br /> 20 </p>21 </card> 22 </wml>

Fig13_7.wml

Link to mobile.sports.com.

The accesskey attribute programs a key on the keypad that can be used to select the link.The value of the title attribute will label the soft key on the phone that will activate the link.

2001 Prentice Hall, Inc. All rights reserved.

Outline13

2001 Prentice Hall, Inc. All rights reserved.

Outline14

Fig13_8.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 13.8: fig13_8.wml -->6 <!-- Internal Linking -->78 <wml>9 10 <!-- card named index -->11 <card id = "index" title = "Navigation">1213 <!-- program soft key to link to card2 -->14 <do type = "accept" label = "Go">15 <go href = "#card2" />16 </do>1718 <p>19 Go to the next card by pressing Go.<br />20 (This is card1)21 </p>22 </card> 2324 <!-- card named card2 -->25 <card id = "card2" title = "Navigation">2627 <!-- card named card2 -->28 <do type = "accept" label = "Back" > 29 <prev />30 </do> 3132 <P>33 This is card2. <br />34 Press Back to go back to card1.

Soft key that links to card2.Setting the type attribute to accept programs the soft key on the left side of the phone.

The prev element links back to the previous card.

2001 Prentice Hall, Inc. All rights reserved.

Outline15

Fig13_8.wml

35 </P>36 </card>37 </wml>

2001 Prentice Hall, Inc. All rights reserved.

Outline16

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.9: fig13_9.wml -->6 <!-- Using local icons -->7 8 <wml>9 <card id = "index" title = "Icons">10 <p>11 Local Icons<br />12 13 <!-- link to second card -->14 <a href = "#card2">15 16 <!-- insert local icon -->17 <img src = "" alt = "Link" localsrc = "link" />18 </a>Link<br />19 20 <!-- link to third card -->21 <a href = "#card3">22 <img src = "" alt = "Wrench" localsrc = "wrench" />23 </a>Wrench<br />24 25 <!--link to external card -->26 <a href = "fig13_10.wml#card4">27 <img src = "" alt = "Football" localsrc = "football" />28 </a>Football<br />

Fig13_9.wml

The localsrc attribute displays a local icon stored in the phone’s memory.

The football icon links to card4 in a separate WML deck.

2001 Prentice Hall, Inc. All rights reserved.

Outline17

29 30 <a href = "fig13_10.wml#card5">31 <img src = "" alt = "Boat" localsrc = "boat" />32 </a>Boat33 </p>34 </card> 35 36 <!-- card named card2 -->37 <card id = "card2" title = "Icons">38 <p>39 You chose the link!40 </p>41 </card> 42 43 <!-- card named card3 -->44 <card id = "card3" title = "Wrench Link">45 <p>46 You chose the wrench!47 </p>48 </card> 49 </wml>

Fig13_9.wml

The boat icon links to card5 in a separate WML deck.

2001 Prentice Hall, Inc. All rights reserved.

Outline18

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.10: fig13_10.wml -->6 <!-- Linking to an external card -->7 8 <wml>9 <card id = "card4" title = "Football Link">10 <p>11 You chose the football!12 </p>13 </card> 14 15 <card id = "card5" title = "Boat Link">16 <p>17 You chose the boat!18 </p>19 </card> 20 </wml>

Fig13_10.wmlIf the football link is chosen, card4 displays.

If the boat link is chosen, card5 displays.

2001 Prentice Hall, Inc. All rights reserved.

Outline19

2001 Prentice Hall, Inc. All rights reserved.

Outline20

1 <?xml version="1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 13.11: fig13_11.wml -->6 <!-- Special Characters -->7 8 <wml>9 <card title = "Special" >10 <p>11 Special Characters:<br/>12 13 <!–- special characters can be represented -->14 <!-- using character entities -->15 Experts suggest &shy; &quot; A person&apos;s16 daily diet should consist of &lt; 2000 calories &amp;17 not &gt; 20 grams of fat.&quot;18 </p>19 </card> 20 </wml>

Fig13_11.wml

Each character entity represents a special character.

2001 Prentice Hall, Inc. All rights reserved.

Outline21