|
Wireless markup language (WML)
Aug 28,2007 00:00
by
admin
218 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 219 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.1 Introduction In Chapter 13, we discussed some basic WML features. We built several complete WAP applications featuring text, hyperlinks, images and formatting elements such as line breaks. In this chapter, we discuss more powerful WML elements and features. We examine how to present information in tables and discuss how to use forms to collect information from people browsing a site. We explain how to use internal linking to make decks more navigable. By the end of this chapter, you will be familiar with the most commonly used WML tags and features, and will be able to create more complex WAP applications. 14.2 Basic WML Tables WML tables are used to mark up tabular data, such as data stored in a database. The data contained in WML tables is organized into horizontal sections called rows and vertical sections called columns. The table in Fig. 14.1 organizes data into rows and columns. Outline 14.1 Introduction 14.2 Basic WML Tables 14.3 Internal Linking 14.4 Basic WML Forms 14.5 Creating Templates With The template Element 14.7 Event Handling With The onevent Element 14.8 Internet and World Wide Web Resources Summary • Terminology • Self-Review Exercises • Answers to Self-Review Exercises • Exercises 1 <?xml version="1.0"?> 23 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 4 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 56 <!-- Fig. 14.1: fig14_1.wml --> 7 <!-- Basic Table Design --> 89 <wml> 10 <card id="index" title="Table"> 11 <p> 12 13 <!-- columns attribute is required --> 14 <table columns="2"> 15 <tr> Fig. 14.1 Creating a table in WML. 220 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. All tags and text that apply to the table go inside the <table> element, which begins on line 14 <table columns="2"> 16 <td><b>Jean</b></td> 17 <td><b>President</b></td> 18 </tr> 19 20 <tr> 21 <td>Jim</td> 22 <td>Vice President</td> 23 </tr> 24 </table> 25 </p> 26 </card> 27 </wml> Fig. 14.1 Creating a table in WML. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 221 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. The columns attribut is required when using the table element. The columns attribute defines the number of columns in the table. Tables can be split into distinct horizontal and vertical sections. The first of these sections, appears in lines 15–18 <tr> <td><b>Jean</b></td> <td><b>President</b></td> </tr> The tr (or table row) element, is used to create rows of table cells. All the cells in a row belong in the <tr> element for that row. The smallest unit of the table is the data cell. The td (or table data) element is located in the table body, inside the table row elements. Common Programming Error 14.1 It is a programming error if a table row is constructed consisting of more columns than the number specified in the table element. Doing so does not stop the page from being displayed. When a table row is created, each data cell (<td>) is placed in a column. If a situation occurs where there are more data cells than columns, all data cells remaining when there is only one column left are placed in that last column. 14.1 Fig. 14.2 shows an example of having too many data cell elements. 1 <?xml version="1.0"?> 12 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 14.2: fig14_2.wml --> 6 <!-- Demonstrating tables in WML --> 78 <wml> 9 <card id="index" title="Table"> 10 <p> 11 <table columns="2"> 12 <tr> 13 <td>Col 1</td> 14 <td>Col 2</td> 15 </tr> 16 17 <tr> 18 19 <!-- Too many cells for the row --> 20 <td>Col 1</td> 21 <td>Col 2</td> 22 <td>Col 3</td> 23 </tr> 24 </table> 25 </p> 26 </card> Fig. 14.2 WML table showing too many data cells for a row. 222 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Look-and-Feel Observation 14.1 Use tables in your WML documents to mark up tabular data. 14.1 We see the error in this example on lines 17–23 <tr> <!-- Too many cells for the row --> <td>Col 1</td> <td>Col 2</td> <td>Col 3</td> </tr> where we have three data cells in one table row. This is an error because we set the value of the columns attribute to 2 on line 11. Although it may not be evident from the screen 27 </wml> Fig. 14.2 WML table showing too many data cells for a row. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 223 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. shot in Fig. 14.2, the data cells containing the text Col 2 and Col 3 are placed in the second column together. 14.3 Internal Linking In the last chapter, we discussed how to link to other Internet sites and WAP applications using text and image anchors. Figure 14.3 introduces internal linking, which lets you reference card id attributes as hyperlinks to navigate to particular parts of a WML deck. In this example, we introduce the use of the <do> and <go> elements to create a link or soft key. One of the attributes of the do element is type. The two most common values for the type attribute are accept and options. When the do element is used to create a link, a soft key is created. These soft keys are the two keys just below the display window of a device. When a soft key is created, it is labeled using the value of the label attribute defined in the do tag. If the value of the type attribute is accept, the corresponding soft key is the key on the left side of the device. Similarly, if the value of the type attribute is options, the corresponding soft key is the key on the right side of the device. 1 <?xml version="1.0"?> 23 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 4 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 56 <!-- Fig. 14.3: fig14_3.wml --> 7 <!-- Internal Linking --> 89 <wml> 10 <card id="index" title="Navigation"> 11 <do type="accept" label="Go"> 12 <go href="#card2"/> 13 </do> 14 15 <p> 16 Go to the next card by pressing Go.<br/> 17 (This is card1) 18 </p> 19 20 </card> 21 22 <card id="card2" title="Navigation"> 23 <do type="accept" label="Back"> 24 <prev /> 25 </do> 26 27 <p> 28 This is card2.<br/> 29 Press Back to go back to card1. 30 </p> 31 </card> Fig. 14.3 Using internal hyperlinks to make WML pages more navigable. 224 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Line 10 <card id="index" title="Navigation"> shows a card element with an id attribute. The value of the id attribute is used as a card identifier when using internal linking. Lines 11–13 <do type="accept" label="Go"> <go href="#card2"/> </do> shows the creation of a link using the do and the go elements. Because the value of the type attribute is accept, the value of the label attribute will be placed at the bottomleft- hand side of the display window. On line 11, we set the label of the soft key to Go. The action provided by the go element will be performed when the user presses the soft key. The go element is similar to the a element. The href attribute is used to define the address 32 </wml> Fig. 14.3 Using internal hyperlinks to make WML pages more navigable. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 225 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. of the link. Here, we see the difference between linking and internal linking. On line 12, the value of the href attribute is the name of the card we want to link to preceded by the pound sign (#). Because we are not linking to a card outside the deck, we do not need to specify the WML document where the card is found. Figure 14.3 shows two different screen captures from the same deck, each is a different card. You can also link to a card located in another WML deck using the URL of that location— href="page.wml#cardname"). 14.4 Basic WML Forms WML provides several mechanisms to collect information from people viewing your site; one is the form (Fig. 14.4). In this section, we introduce the input and select elements. The input element (similar to the HTML input element) creates a text field for the user to input text, such as a name. The select element is used to create a selection list providing the user different options from which to choose. Figure 14.4 shows how these elements are used to build a WML form. 1 <?xml version="1.0"?> 12 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 14.4: fig14_4.wml --> 6 <!-- Demonstrating a simple WML form --> 7 8 <wml> 9 <card id="index" title="Forms"> 10 11 <do type="accept" label="Enter"> 12 <go href="#card2"/> 13 </do> 14 15 <p> 16 Enter your name: 17 18 <!-- a simple input box for the name--> 19 <input name="firstName" value="" maxlength="20"/> 20 21 Enter your social secuity #: 22 <!-- an input box using the format attribute --> 23 <input name="ssNumber" value="" format="NNN-NN-NNNN"/> 24 25 Gender: 26 27 <select name="gender"> 28 <option value="Male">Male</option> 29 <option value="Female">Female</option> 30 </select> 31 32 Interests: (multiple) Fig. 14.4 Building a WML form. 226 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 33 34 <!-- a slection list allowing more than one selection --> 35 <select name="interests" multiple="true"> 36 <option value="skiing">Skiing</option> 37 <option value="biking">Biking</option> 38 <option value="sailing">Sailing</option> 39 </select> 40 </p> 41 </card> 42 43 <card id="card2" title="Form"> 44 <p> 45 Your entries:<br/> 46 $firstName <br/> 47 $ssNumber <br/> 48 $gender <br/> 49 $interests 50 </p> 51 </card> 52 </wml> Fig. 14.4 Building a WML form. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 227 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Fig. 14.4 Building a WML form. 228 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Line 19 <input name="firstName" value="" maxlength="20"/> is the first element of the form. We use the input element to create a text field where the name of the user can be input. The value attribute is used to supply a default value. We set the value attribute to an empty string (""). The maxlength attribute limits the number of characters that can be entered into the field. Good Programming Practice 14.1 When using input elements in forms, be sure to leave enough space with the maxlength attribute for users to input the pertinent information. 14.1 The next element on line 26 <input name="ssNumber" value="" format="NNN-NN-NNNN"/> Fig. 14.4 Building a WML form. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 229 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. is another input box where the input is restricted to the specified format of the format attribute. The format attribute defines valid input for this field as any numeric digit (signified by the letter N) separated by a hyphen after the third and fifth digits. There are many possible values for the format attribute. Figure 14.5 shows all of the possibilities and explains their usage. Lines 27–30 <select name="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> create a selection list. The list items are created using the option element in lines 28 and 29. The value of the value attribute is returned when the item is selected. When an item is selected, the selection list gender is given the value of that item. Lines 35–39 <select name="interests" multiple="true"> <option value="skiing">Skiing</option> <option value="biking">Biking</option> <option value="sailing">Sailing</option> </select> define another selection list similar to the gender selection list. The main difference is the use of the multiple attribute on line 35. By setting the value to true, we allow for the selection of one or more items of the list. When an item in the list is selected by the user, an asterisk is placed next to it by the browser to show that it has been selected. We use card2 to display the information provided by the user in the first card. We reference each input field and selection list by referencing to the name of the form element preceded by a dollar sign ($). This is where the value attribute of the option element is used. This value is displayed when the selection list is referenced. Good Programming Practice 14.2 When adding monetary values to your content, be careful not to use the dollar sign ($) directly. The dollar sign is reserved by WML to reference variables. To add a dollar sign use $$. The double dollar sign is converted to a single dollar sign when it appears in the body of a card. 14.2 Possible format attribute values Description A Any uppercase letter or symbol; cannot be a digit. a Any lowercase letter or symbol; cannot be a digit. M Any character (uppercase characters take precedence) m Any character (lowercase characters take precedence) N Any numeric character or decimal point Fig. 14.5 Possible values for the format attribute of the input element. 230 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.5 Creating Templates With The template Element When creating WML decks, multiple cards often share common elements and attributes, e.g., a soft key that sends the user to the previous card. Redundant code can significantly increase file sizes and development time. WML offers a solution—the template element. The template element can be used to add common elements to all cards in a deck. For instance, adding the soft key to the deck using the template element will add the key to each card. When created at the deck level, the contents of the template element will be part of each card, unless otherwise specified. A deck may contain many cards, some of which may not need the template. In such cases, the contents of the template element can be shut off or removed using the noop (or no operation) element. For instance, in Fig. 14.6 we use a template to add a home button to each page except the home page itself. On the home page we use the noop element to keep the template from being added. X Uppercase characters only x Lowercase characters only *Value If any of the above values (A,a,M,m,N,X,x) are proceeded by an astrix (*) they are interpreted as any number of occurrences of that value. For instance, *X would allow the user to input any number of uppercase characters. nValue If any of the above values (A,a,M,m,N,X,x) are proceeded by a digit n, such that n is equal to an digit (1-9), exactly n occurrences of that value will be accepted. For instance, 5x would only accept an input of exactly three lowercase characters. \character If the backslash character (\) is followed my any character (not value), that character is automatically added to the value of the input. For instance, in Fig. 14.4 we could have set the format to NNN\-NNN\- NNN. This would have automatically added the hyphens when the user inputted a Social Security number. 1 <?xml version="1.0"?> 23 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 4 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 56 <!-- Fig. 14.6: fig14_6.wml --> 7 <!-- Using templates --> 89 <wml> 10 <template> Fig. 14.6 Creating a soft key using the template element. Possible format attribute values Description Fig. 14.5 Possible values for the format attribute of the input element. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 231 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 11 <do type="options" label="Home"> 12 <go href="#index"/> 13 </do> 14 </template> 15 16 <card id="index" title="Template"> 17 <do type="options"> 18 <noop/> 19 </do> 20 21 <p> 22 Card 1 used the noop element to avoid adding the template. 23 It does not have the Home button.<br/> 24 <a href="#card2">Next Card</a> 25 </p> 26 </card> 27 28 <card id="card2" title="Template"> 29 <p> 30 Card 2 used the template to add the Home button.<br/> 31 <a href="#card3">Next Card</a> 32 </p> 33 34 </card> 35 36 <card id="card3" title="Template"> 37 <p> 38 Card 3 also used the template to add the Home button.<br/> 39 <a href="#card1">Return Home</a> 40 </p> 41 </card> 42 </wml> Fig. 14.6 Creating a soft key using the template element. 232 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. We see the creation of a Back soft key in lines 10–14. <template> <do type="options" label="Home"> <go href="#index"/> </do> </template> We use the template element at the deck level which will place the soft key in every card of the deck. This soft key provides the user with the means to return to the first card which has the label index. The example in Fig. 14.3 is a small example consisting of two cards. In this case, the template element would not be used. The programmer would simply place the code for the Back button in the second card. The template element is used by developers where the same element exists in many cards. The template element can be used to add any elements to a deck. For instance, it could be used to add help buttons to each page that would allow the user to access a help page at any time. Fig. 14.6 Creating a soft key using the template element. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 233 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. On lines 17–19 <do type="options"> <noop/> </do> the noop element is used to stop the template from being added to the page. Notice that using a noop element inside of the do element does not create a new soft key. Instead, it cancels the soft key created in the template element. 14.6 Using setvar To Declare and Initialize Variables In WML This section introduces two new elements—the refresh element and the setvar element. The elements work together to store information in variables. A variable is a location in a computer’s memory where a value can be stored for later use by a script or program. The refresh element is used to reload the current card, causing the setvar element to perform a variable assignment. Variables declared using the setvar element are global to the WML document. That is, the value can be referenced by all cards in the deck. The setvar element has two attributes—name and value. Later we will display the variable by referencing its name just as we did with our input elements in the Fig. 14.4. The value attribute specifies the data that we wish to store. Fig. 14.7 uses and provides an example of how the refresh and setvar elements can be used to store data in a WML document. 1 <?xml version="1.0"?> 23 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 4 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 5 6 <!-- Fig. 14.7: fig14_7.wml --> 7 <!-- Setting variables in WML --> 89 <wml> 10 <card id="index" title="Set"> 11 <do type="options" label="Set"> 12 <refresh> 13 <setvar name="var1" value="hello"/> 14 <setvar name="var2" value="world"/> 15 </refresh> 16 </do> 17 18 <do type="accept" label="Next"> 19 <go href="#card2"/> 20 </do> 21 22 <p> 23 Press Set to set the variables. 24 Press Next to go to card 2. <br/> 25 var1: $var1 <br/> 26 var2: $var2 27 </p> Fig. 14.7 Declaring and initializing variables in WML. 234 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Lines 11-16 <do type="options" label="Set"> <refresh> 28 </card> 29 30 <card id="card2" title="Display"> 31 <do type="accept" label="Back"> 32 <prev/> 33 </do> 34 35 <p> 36 These variables were set in the last card: <br/> 37 var1: $var1 <br/> 38 var2: $var2 39 </p> 40 </card> 41 </wml> Fig. 14.7 Declaring and initializing variables in WML. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 235 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. <setvar name="var1" value="hello"/> <setvar name="var2" value="world"/> </refresh> </do> add a soft key to our card that sets two variables when pressed. The do element creates an options soft key and labels it set. Next, the refresh and setvar elements are used for the first time. We declaring and initialize two separate variables with the two setvar elements in this section. The first variable, var1, stores the string hello. The second, var2 stores the string world. The variables are only set when the user presses the Set soft key. Until then the variables remain undeclared. After setting the variables, we must reload the card so that they will appear. We ensure that the page will be reloaded when the variables are set by placing the setvar element within the refresh element. On lines 25 and 26, we display the variable values using $var1 and $var2. Notice that these values are left blank when the page is loaded because they have yet to be initialized. Their values are set only when the Set button is pressed. Pressing Next forwards the user to the second card. This card illustrates that variables are accessible from any card within a deck regardless of where they are declared. On lines 37 and 38 we display the value of var1 and var2 once again. It is important to note that if the user moves to the second card before setting the variables using the Set soft key on the first card, the variables would not appear. 14.7 Event Handling With The onevent Element The onevent element performs several tasks. Unlike many of the WML elements discussed thus far, the onevent element may be unfamiliar to Web developers because it does not have an HTML equivalent. It has one attribute—the type attribute. The onevent element can be used to trigger actions based on four different events. The type attribute specifies which event will cause an action to occur. Possible values for the type attribute are: onpick, ontimer, onenterforward and onenterbackward. Figure 14.8 illustrates how each of the four event types is used to cause a variety of actions to occur. 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. 14.8: fig14_8.wml --> 6 <!-- Event Handling --> 78 <wml> 9 <card id="index" title="Home"> 10 <onevent type="onenterbackward"> 11 <go href="#card3"/> 12 </onevent> 13 14 <do type="accept" label="Next"> 15 <go href="#card2"/> Fig. 14.8 Event handling with WML 236 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 16 </do> 17 18 <p> 19 This is card 1. Entering it with the Back button 20 causes an onenterbackward event that sends you to card 3. 21 </p> 22 </card> 23 24 <card id="card2" title="Form"> 25 <p> 26 Choosing an option causes an onpick event 27 that links you to the proper page. 28 <select name="location"> 29 <option value="index"> 30 <onevent type="onpick"> 31 <prev /> 32 </onevent> 33 34 Go to Card 1 35 </option> 36 37 <option value="card3"> 38 <onevent type="onpick"> 39 <go href="#card3" /> 40 </onevent> 41 42 Go to Card 3 43 </option> 44 </select> 45 </p> 46 </card> 47 48 <card id="card3" title="Enter Forward"> 49 <onevent type="onenterforward"> 50 <refresh> 51 <setvar name="var1" value= 52 "This is card 3. This text was 53 created by an onenterforward event."/> 54 </refresh> 55 56 </onevent> 57 <p> 58 $var1 59 60 <a href="#card4">Go to Card 4</a> 61 </p> 62 </card> 63 64 <card id="card4" title="Timed Page"> 65 <onevent type="ontimer"> 66 <go href="#index"/> 67 </onevent> 68 69 <timer value="30"/> Fig. 14.8 Event handling with WML Chapter 14 Introduction to Wireless Markup Language (WML): Part II 237 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. Figure 14.8 is a WML document which contains four cards. Each card features an onevent element. The example uses all four possible values of the type attribute. On lines 10–12 <onevent type="onenterbackward"> <go href="#card3"/> </onevent> an onevent element is used for the first time. Its type attribute is onenterbackward. A go element is used inside of the onevent element to redirect the user to a card called card3. This code will send the user to card3 whenever this card is accessed via the back button. Thus keeping the user from being able to return to the first card, Lines 29–35 <option value="index"> <onevent type="onpick"> <prev /> </onevent> Go to Card 1 70 <p> 71 This page uses the ontimer event to redirect you. 72 This card will redirect you to the index in 3 seconds. 73 </p> 74 </card> 75 </wml> Fig. 14.8 Event handling with WML 238 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. </option> shows the first option element of a select element (lines 28–44). Notice that inside of the option element there is an onevent element with its type attribute set to onpick. The onpick event is used exclusively with the option element. When the onevent element is used, it indicates that an action should occur when that option is chosen by the user. In this example, when the index option is chosen, the onpick event occurs which causes the prev (or previous) element to redirect the user to the previous page. The prev element has the same effect as the back button. Accessing a page via prev would cause a onenterbackward event to occur for that page. For instance, returning to the index page containing the onenterbackward event mentioned earlier would forward the user to card3. An onevent element of type onpick is used again later in the card (lines 43- 45). This time a go element is used to forward the user directly to card3. An onevent element of type onenterforward is used on lines 49 through 56. This event occurs each time the user enters the page, except when using the back button or linking via a prev element. Lines 50-54 introduce a few important new elements. <refresh> <setvar name="var1" value= "This is card 3. This text was created by an onenterforward event."/> </refresh> This example uses the refresh and setvar elements that we introduced in Fig. 14.7. In this example the setvar element’s name attribute assigns the name var1 to our variable. The value attribute specifies the data that we wish to store. In this case the string This is card 3. is stored in the variable var1. When the page loads, the onenterforward event is invoked causing the refresh element to reload the page. The variable var1 is then set and is displayed in place of $var1 on the card. The final card in the deck introduces the last type option of the onevent element. WML has the ability to start a timer that can be used to generate actions at specific times. The onevent element of type ontimer allows the developer to specify that an action should occur after a given period of time. On lines 65–69 <onevent type="ontimer"> <go href="#index"/> </onevent> <timer value="30"/> the onevent section is defined, and a timer is set. The timer element is used to start a timer. Its value attribute expects a time value in tenths of seconds. In this case we set value to 30, which is equivalent to 3 seconds. After three seconds, the ontimer event occurs which causes the go element to send the user back to the card called index. In other words, three seconds after the page loads, the user is automatically redirected to the first card. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 239 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.8 Internet and World Wide Web Resources There are many Internet sites that cover the more advanced and difficult features of WML. Several of these sites are featured here. www.webtools.com/story/html/TLS20000913S0001 This is a short tutorial on different aspect of WML forms. The tutorial covers such topics as obtaining user input and detecting user interaction. www.wirelessdevnet.com/channels/wap/training/wml.html This is a good tutorial on the basics of WML. From this tutorial, the user will be able to create a WML deck and perform some basic operations using WML. SUMMARY • WML tables are used to mark up tabular data, such as data stored in a database. • The data contained in WML tables is organized into horizontal sections called rows and vertical sections called columns. • All tags and text that apply to the table go inside the <table> element. • The columns attribute is required when using the table element. • The columns attribute defines the number of columns in the table. • The tr, or table row element, is used to create rows of table cells. • All the cells in a row belong in the <tr> element for that row. • The smallest unit of the table is the data cell. • It is a programming error if a table row is constructed consisting of more columns than the number specified in the table element. • Internal linking lets you reference card id attributes as hyperlinks to navigate to particular parts of a WML deck. • When the do element is used to create a link, a soft key is created. • Soft keys are the two keys just below the display window of a device. • When a soft key is created, these keys are labeled using the value of the label attribute defined in the do tag. • If the value of the type attribute is accept, the corresponding soft key is the key on the lefthand side of the device. Similarly, if the value of the type attribute is options, the corresponding soft key is the key on the right-hand side of the device. • You can also link to a card located in another WML deck using the URL of that location– href="page.wml#cardname"). • The input element is similar to the HTML input element in that it creates a text field for the user to input text, such as a name. • The select element is used to create a selection list providing the user different options from which to choose. • The maxlength attribute sets a limit to the amount of characters that can be entered into the field. TERMINOLOGY card card element column 240 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. columns attribute data cell database deck display window do element form format attribute go element href attribute hyperlink id attribute image anchor input element internal linking label attribute line break link maxlength attribute pound sign (#) row select element selection list soft key table table element tabular data td (table data) element text field tr (table row) element type attribute value attribute WAP application WML (Wireless Markup language) WML form SELF-REVIEW EXERCISES 14.1 State whether the following are true or false. If false, explain why. a) The columns attribute is required when using the table element. b) A table is split into horizontal and vertical sections called rooms and halls. c) The smallest unit of the table is the data atom. d) You are limited to a maximum of 5 internal links per page. e) When performing internal linking, the title attribute of a card is referenced. f) Soft keys are the two keys just below the display window of a device. g) The href attribute is used to define the address of a link. 14.2 Fill in the blanks in each of the following statements. a) The attribute in an input element provides a default value for the field. b) The amount of columns in a table is set by the attribute. c) The element inserts a new item in a selection list. Chapter 14 Introduction to Wireless Markup Language (WML): Part II 241 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. d) The element causes actions to occur based on specific events. e) The attribute of the selection element is used to allow for the selection of one or more elements of the list. ANSWERS TO SELF-REVIEW EXERCISES 14.1 a) True. b) False. The sections of a table are called rows and columns. c) False. The smallest unit of a table is a data cell. d) False. You can have an unlimited number of hyperlink locations on any page. e) False. The id attribute is referenced when performing internal linking. f) True. g) True. 14.2 a) value. b) columns c) option. d) onevent. e) multiple. EXERCISES 14.3 Categorize each of the following as an element or an attribute: a) table b) td c) tr d) do e) go f) href g) name h) input 14.4 Use the search engine found at http://wap.fast.no/html/ to find three sites that offer weather news. Create a WML document that contains three links to these WAP pages. 14.5 Modify the code you used in Exercise 14.4 to incorporate a selection list. Use two of the links as list items that when selected, the user is sent to the respective weather site. 14.6 Use the same search engine as in Exercise 14.4 to find two more sites, one that offers sports news and another that offers world news. Use the local icons provided by the UP.SDK browser to create links to these news sites along with one of the weather sites you used in Exercise 14.4. 14.7 Use the <template> tag to create a soft key which will appear on each card of the deck that will bring the user to a specific card. Include on the final card a link back to the first page. 14.8 Modify the code used in Exercise 14.7 to use the <noop> tag to cancel the creation of the soft key in the first card created by the template in Exercise 14.7. 14.9 Create a WML document containing two cards. The first card should include two input fields where the user is asked to input their first and last names into the repective fields. The second card should display the user's input. 14.10 Create a WML document that uses the onevent and timer elements to send a user to a second card after 5 seconds. Also, use the onevent element to send the user to a third page as a result of entering the second. 242 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. EXERCISES 14.4 Use the search engine found at http://wap.fast.no/html/ to find three sites that offer weather news. Create a WML document that contains three links to these WAP pages. 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 <!-- Exercise 14.4: exercise14_4.wml --> 67 <wml> 8 <card id="index" title="Linking"> 9 <p> 10 Weather Links:<br/> 11 12 <a href="http://mobile.excite.co.uk/wap/weather/"> 13 Excite Weather 14 </a> 15 16 <a href="http://www.wapreb.com/Weather/Weather.wml"> 17 Oceanroutes 18 </a> 19 20 <a href="http://wap.breathe.com/weather_0.wml"> 21 breathe.com 22 </a> 23 </p> 24 </card> 25 </wml> Chapter 14 Introduction to Wireless Markup Language (WML): Part II 243 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.5 Modify the code you used in Exercise 14.4 to incorporate a selection list. Use two of the links as list items that when selected, the user is sent to the respective weather site. 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 <!-- Exercise 14.5: exercise14_5.wml --> 67 <wml> 8 <card id="index" title="Misc"> 9 <p> 10 Weather Links:<br/> 11 12 <select name="weatherList"> 13 14 <option onpick="http://mobile.excite.co.uk/wap/weather/"> 15 Excite Weather 16 </option> 244 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.6 Use the same search engine as in Exercise 14.4 to find two more sites, one that offers sports news and another that offers world news. Use the local icons provided by the UP.SDK browser to create links to these news sites along with one of the weather sites you used in Exercise 14.4. 17 18 <option onpick="http://wap.breathe.com/weather_0.wml"> 19 breathe.com 20 </option> 21 </select> 22 </p> 23 </card> 24 </wml> 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 <!-- Exercise 14.6: exercise14_6.wml --> 6 Chapter 14 Introduction to Wireless Markup Language (WML): Part II 245 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 7 <wml> 8 <card id="index" title="Misc"> 9 <p> 10 Weather Links:<br/> 11 <select name="weatherList"> 12 13 <option onpick= 14 "http://mobile.excite.co.uk/wap/weather/"> 15 Excite Weather 16 </option> 17 18 <option onpick= 19 "http://www.totalsports.net/wml/index.wml"> 20 Totalsports 21 </option> 22 23 <option onpick= 24 "http://www.wapplepie.com/newsmenu.wml"> 25 WPie News 26 </option> 27 </select> 28 </p> 29 </card> 30 </wml> 246 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.7 Use the <template> tag to create a soft key which will appear on each card of the deck that will bring the user to a specific card. Include on the final card a link back to the first page. 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 <!-- Exercise 14.7: exercise14_7.wml --> 67 <wml> 8 <template> 9 <do type="options" label="Card 4"> 10 <go href="#card4" /> 11 </do> 12 </template> 13 14 <card id="index" title="Template"> 15 <p> 16 Choose a card to view:<br/> Chapter 14 Introduction to Wireless Markup Language (WML): Part II 247 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 17 18 <a href="#card2">Card 2</a><br/> 19 20 <a href="#card3">Card 3</a> 21 </p> 22 </card> 23 24 <card id="card2" title="Template"> 25 <p> 26 This is Card 2. 27 </p> 28 </card> 29 30 <card id="card3" title="Template"> 31 <p> 32 This is Card 3. 33 </p> 34 </card> 35 36 <card id="card4" title="Template"> 37 <p> 38 This is Card 4.<br/> 39 40 <a href="#index">Home</a> 41 </p> 42 </card> 43 </wml> 248 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.8 Modify the code used in Exercise 14.7 to use the <noop> tag to cancel the creation of the soft key in the first card created by the template in Exercise 14.7. 1 <?xml version="1.0"?> 2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD 3 WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Exercise 14.8: exercise14_8.wml --> 67 <wml> 8 <template> 9 <do type="options" label="Card 4"> 10 <go href="#card4" /> 11 </do> 12 </template> 13 14 <card id="index" title="Template"> 15 <do type="options"> Chapter 14 Introduction to Wireless Markup Language (WML): Part II 249 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 16 <noop /> 17 </do> 18 19 <p> 20 Choose a card to view:<br/> 21 22 <a href="#card2">Card 2</a><br/> 23 24 <a href="#card3">Card 3</a> 25 </p> 26 </card> 27 28 <card id="card2" title="Template"> 29 <p> 30 This is Card 2. 31 </p> 32 </card> 33 34 <card id="card3" title="Template"> 35 <p> 36 This is Card 3. 37 </p> 38 </card> 39 40 <card id="card4" title="Template"> 41 <p> 42 This is Card 4.<br/> 43 44 <a href="#index">Home</a> 45 </p> 46 </card> 47 </wml> 250 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.9 Create a WML document containing two cards. The first card should include two input fields where the user is asked to input their first and last names into the repective fields. The second card should display the user's input. 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 <!-- Exercise 14.9: exercise14_9.wml --> 67 <wml> 8 <card id="index" title="Template"> 9 <do type="accept"> 10 <go href="#card2" /> 11 </do> 12 13 <p> 14 Input your first name:<br/> 15 Chapter 14 Introduction to Wireless Markup Language (WML): Part II 251 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 16 <input name="firstName" value="" /><br/> 17 18 Input your last name:<br/> 19 20 <input name="lastName" value="" /> 21 </p> 22 </card> 23 24 <card id="card2" title="Template"> 25 <p> 26 First Name: $firstName <br/> 27 Last Name: $lastName 28 </p> 29 </card> 30 </wml> 252 Introduction to Wireless Markup Language (WML): Part II Chapter 14 © Copyright 2001 by Deitel & Associates, Inc. All Rights Reserved. Review Packet 3/21/01. 14.10 Create a WML document that uses the onevent and timer elements to send a user to a second card after 5 seconds. Also, use the onevent element to send the user to a third page as a result of entering the second. 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 <!-- Exercise 14.10: exercise14_10.wml --> 67 <wml> 8 <card id="index" title="Template"> 9 <onevent type="ontimer"> 10 <go href="#card2" /> 11 </onevent> 12 <timer value="50" /> 13 14 <p> 15 After 5 seconds, you will be linked 16 to the second card. 17 </p> 18 </card> 19 20 <card id="card2" title="Template"> 21 <onevent type="onenterforward"> 22 <go href="#card3" /> 23 </onevent> 24 25 <p> 26 This is card 2. 27 </p> 28 </card> 29 30 <card id="card3" title="Template"> 31 <do type="accept" label="Home"> 32 <go href="#index" /> 33 </do> 34 35 <p> 36 This is card 3. 37 </p> 38 </card> 39 </wml> |