Chapter: Internet & World Wide Web HOW TO PROGRAM - Wireless Internet and m-Business

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Creating WML Documents

In this section, we begin to create WAP applications by marking up information using WML.

Creating WML Documents

 

In this section, we begin to create WAP applications by marking up information using WML. Figure 23.2 presents a WML document that displays a welcome message. The screen shot of the Openwave Simulator displays the WML document. The Phone Infor-mation window below the simulator displays the status of the simulator. If an error occurs during the rendering of the document, the error is listed in this window.

 

Like XHTML, WML is an XML vocabulary (i.e., a markup language that is created using XML). Line 1 is the optional XML declaration that specifies the version of XML to which this document’s syntax adheres. Lines 2–3 specify the Document Type Definition (DTD) to which the document conforms. The root element for every WML document is wml.

 

            <?xml version = "1.0"?>

            <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"

            "http://www.wapforum.org/DTD/wml12.dtd">

                       

            <!-- Fig. 23.2: fig23_2.wml -->

            <!-- Simple WML Page      -->

                       

            <wml>

            <card id = "index" title = "WML Title">

            <p>

            Welcome to wireless programming!

            </p>

            </card>

            </wml>


 

Fig. 23.2 Simple WML document.  (Image of UP.SDK courtesy of Openwave Systems Inc. Openwave, the Openwave logo, and UP.SDK are trademarks of Openwave Systems Inc. All rights reserved.)

 

Line 9 contains the opening card element. The card element has two important attributes: id, which uniquely identifies the card, and title, which displays a title at the top of most browser windows. The Openwave browser does not display card titles.

All text in a WML document is placed between <p> tags that are nested within <card> tags. Although the text occupies only one line in the document, the screen capture in Fig. 23.2 shows the text as displayed on two lines. When a line of text exceeds the width of the display, the Openwave browser wraps the text onto the next line.

 

Figure 23.2 also includes a screen capture of the Phone Information window. This window alerts the developer to any errors that occur during the testing of WML and WML-Script documents. For example, if we had left out the closing card element (line 13 of Fig. 23.2), the Openwave Simulator would display the error message, “Compile Error. See Info Window for Details. in the display window. Figure 23.3 shows a screen capture of the Phone Information window detailing the specifics of the error. Wireless devices do not contain this window.

 

The section labeled WML Errors lists each error, along with an accompanying line number. Below the list of errors, the window lists the WML code. Note that in this example, the closing card element is missing.

 

One of WML’s most important capabilities is its ability to create hyperlinks between WML documents on the Web. Both text and images can be used as links to other decks. Figure 23.4 creates both internal links (i.e., links to locations inside the same document) and external links (i.e., links to locations in separate documents), by using local icons, or small images stored in the wireless device’s memory. Figure 23.5 is a WML document which contains two cards. Figure 23.4 provides an external link to each card. These icons are part of the browser and do not have to be downloaded with the card. The Openwave browser supports over 175 different local icons, including such images as symbols, clouds, cell phones, cars and footballs. The WML Language Reference documentation that is included with the SDK download contains a complete list of local icons supported by the Openwave browser.

 


As in XHTML, WML links are marked up with the a (anchor) element. In line 14 (Fig. 23.4), the href attribute is assigned a card name in the current deck, preceded by a pound sign (#). This creates an internal link to a card that is inside the document’s deck. External linking to cards in other WML decks is specified by assigning to href the external doc-ument’s name, followed by a # and card name (i.e., href = "page.wml#cardname"). Line 26 links to card4 in fig23_5.wml (Fig. 23.5). If the card name is not specified, the first card in the deck is displayed.

 

            <?xml version = "1.0"?>

            <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"

            "http://www.wapforum.org/DTD/wml12.dtd">

                       

            <!-- Fig. 23.4: fig23_4.wml -->

            <!-- Using local icons         -->

                       

            <wml>

            <card id = "index" title = "Icons">

            <p>

            Local Icons<br />

           

            <!-- link to the second card -->

            <a href = "#card2">

           

            <!-- insert the local icon -->

            <img src = "" alt = "Link" localsrc = "link" />

            </a>Link<br />

           

            <!-- link to the third card -->

            <a href = "#card3">

            <img src = "" alt = "Wrench" localsrc = "wrench" />

            </a>Wrench<br />

           

            <!--link to an external card-->

            <a href = "fig23_5.wml#card4">

            <img src = "" alt = "Football" localsrc = "football" />

            </a>Football<br />

           

            <a href = "fig23_5.wml#card5">

            <img src = "" alt = "Boat" localsrc = "boat" />

            </a>Boat

            </p>

            </card>

 

            <card id = "card2" title = "Icons">

            <p>

            You chose the link!

            </p>

            </card>

      <card id = "card3" title = "Wrench Link">

      <p>

      You chose the wrench!

      </p>

      </card>

</wml>

 

Two types of images can be used as links—imported images and local icons. Imported images must be downloaded or created using software programs such as Paint Shop Pro (included on the CD at the back of this book), PhotoShop Elements (discussed in Chapter 3) or Paint. Imported images are referenced using the img element’s src attribute. Before an image can be rendered by the Openwave browser, it must be converted to wireless bitmap (wbmp) format by using a conversion program such as Pic2WBMP, which can be downloaded for free from www.gingco.de/wap.

Local icons are included as part of the Openwave browser and are referenced via the img element’s localsrc attribute. Although the height and width of an image can be specified in pixels, the size of an image is limited to the device’s display area.

Every img element requires an alt attribute that contains a short text description of the image. The alt attribute is used when an image cannot be displayed.

 

 

            <!-- Fig. 23.5: fig23_5.wml                     -->

            <!-- Linking to an external           card -->

                                   

            <wml>

            <card id = "card4" title = "Football Link">

            <p>

            You chose the football!

            </p>

            </card>

 

            <card id = "card5" title = "Boat Link">

            <p>

            You chose the boat!

            </p>

            </card>

            </wml>


Lines 14–18 (Fig. 23.4) contain an image hyperlink. By nesting the <img> tag in an <a> tag, the image becomes a hyperlink. In this case, we provide an internal link to card2 (line 14).

 

The src attribute of the img element in line 17 is empty because the image is speci-fied in the localsrc attribute, and we do not provide an alternate image to display if the browser does not support the local icon. The src attribute is also a required attribute of the img element, but can be left blank. The link local icon is specified in the localsrc attribute.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.