WML 16

Reset Buttons

HTML provides a way for you to create reset buttons. When a reset button is clicked, the form is reset to its default values. Unlike HTML, WML does not support the creation of reset buttons. However, you can use a way similar to what we described in the last section to create an anchor link that works like a reset button. Here is an example:

(resetButtonsEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="WML Form">
    <p>
      User name:<br/>
      <input name="myUserName"/><br/>

      Password:<br/>
      <input name="myPassword" type="password"/><br/><br/>

      <anchor>
        <go method="get" href="resetButtonsProc.asp">
          <postfield name="name" value="$(myUserName)"/>
          <postfield name="password" value="$(myPassword)"/>
        </go>
        Submit Data
      </anchor><br/>

      <anchor>
        <refresh>
          <setvar name="myUserName" value=""/>
          <setvar name="myPassword" value=""/>
        </refresh>
        Reset Form
      </anchor>
    </p>
  </card>
</wml>

The result of the above WML example in some mobile phone browsers is shown below:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

Enter something in the input fields, like this:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you click the "Reset Form" anchor link, the input fields will be reset to their default values.

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer

WML 15

Clearing a Saved Form in WML

As you may notice, after you have inputted some data in a form, the form data is saved. The data you inputted in the form remains there no matter you refresh or navigate backwards/forwards to the WML card.

As mentioned earlier, each input field or selection list created is associated with a variable. The data entered in the input field or the value of the option chosen in a selection list is stored in the variable. For example, if you include the line <input name="myName"/> in a card, the characters entered into the input field will be stored in the variable myName.

WML variables have a global scope. Once a value is assigned to a variable, it will remain there even if you navigate to another card. When an earlier form is displayed again, the WAP browser will take the values saved in the variables and use them as the initial values of the input fields or selection lists. For example, if you include the line <input name="myName"/> in a card, the value assigned to the myNamevariable earlier will be used to initialize the input field.

Hence, to clear a saved form, you have to write some markup code to clear the variables associated with the input fields and selection lists of the form.

The following WML examples demonstrate several ways to clear a saved form. Below is the markup code of the first example. What we want to do is to ensure our form is in the default state every time it is displayed.

(clearSavedFormEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="Clear Saved Forms">
    <onevent type="onenterforward">
      <refresh>
        <setvar name="myName" value=""/>
        <setvar name="myGender" value=""/>
        <setvar name="favorite_tutorial_part" value=""/>
      </refresh>
    </onevent>
    <onevent type="onenterbackward">
      <refresh>
        <setvar name="myName" value=""/>
        <setvar name="myGender" value=""/>
        <setvar name="favorite_tutorial_part" value=""/>
      </refresh>
    </onevent>

    <p>
      Hello, welcome to our WML tutorial.<br/>

      What's your name?<br/>
      <input name="myName"/><br/>

      Are you a boy or a girl?<br/>
      <select name="myGender">
        <option value="Boy">I am a boy</option>
        <option value="Girl">I am a girl</option>
      </select><br/>

      Which part of our WML tutorial do you like?<br/>
      <select name="favorite_tutorial_part" multiple="true">
        <option value="Part 1">Part 1</option>
        <option value="Part 2">Part 2</option>
        <option value="Part 3">Part 3</option>
        <option value="Part 4">Part 4</option>
      </select><br/><br/>

      <anchor>
        <go method="get" href="clearSavedFormEg1Proc.asp">
          <postfield name="name" value="$(myName)"/>
          <postfield name="gender" value="$(myGender)"/>
          <postfield name="tutorial_part" value="$(favorite_tutorial_part)"/>
        </go>
        Submit Data
      </anchor>
    </p>
  </card>
</wml>

Here is the ASP file that handles the form data submitted to the server. It simply prints out the name-value pairs received.

(clearSavedFormEg1Proc.asp)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<% Response.ContentType = "text/vnd.wap.wml" %>

<wml>
  <card id="card1" title="Submission Result">
    <p>
      Data received at the server:<br/>
      Name: <% =Request.QueryString("name") %><br/>
      Gender: <% =Request.QueryString("gender") %><br/>
      Which part of our WML tutorial do you like?
      <% =Request.QueryString("tutorial_part") %><br/>
    </p>
  </card>
</wml>

In the above WML example, the WAP browser clears the variables myName, myGender andfavorite_tutorial_part when the onenterforward event or the onenterbackward event occurs. We make use of both the onenterforward and onenterbackward events so that no matter if a user reaches the card in the forward or backward direction, the form variables will be reset to an empty string.

The drawback of the above method is that if the user does not go back to the original card, the saved form is not cleared. In some situations such as when the form data is confidential, it is better to clear the saved form as soon as possible. In our second WML example, we clear the saved form in the submission result card. The markup is shown below:

(clearSavedFormEg2.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="Clear Saved Forms">
    <p>
      Hello, welcome to our WML tutorial.<br/>

      What's your name?<br/>
      <input name="myName"/><br/>

      Are you a boy or a girl?<br/>
      <select name="myGender">
        <option value="Boy">I am a boy</option>
        <option value="Girl">I am a girl</option>
      </select><br/>

      Which part of our WML tutorial do you like?<br/>
      <select name="favorite_tutorial_part" multiple="true">
        <option value="Part 1">Part 1</option>
        <option value="Part 2">Part 2</option>
        <option value="Part 3">Part 3</option>
        <option value="Part 4">Part 4</option>
      </select><br/><br/>

      <anchor>
        <go method="get" href="clearSavedFormEg2Proc.asp">
          <postfield name="name" value="$(myName)"/>
          <postfield name="gender" value="$(myGender)"/>
          <postfield name="tutorial_part" value="$(favorite_tutorial_part)"/>
        </go>
        Submit Data
      </anchor>
    </p>
  </card>
</wml>

(clearSavedFormEg2Proc.asp)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<% Response.ContentType = "text/vnd.wap.wml" %>

<wml>
  <card id="card1" title="Submission Result">
    <onevent type="onenterforward">
      <refresh>
        <setvar name="myName" value=""/>
        <setvar name="myGender" value=""/>
        <setvar name="favorite_tutorial_part" value=""/>
      </refresh>
    </onevent>

    <p>
      Data received at the server:<br/>
      Name: <% =Request.QueryString("name") %><br/>
      Gender: <% =Request.QueryString("gender") %><br/>
      Which part of our WML tutorial do you like?
      <% =Request.QueryString("tutorial_part") %><br/>
    </p>
  </card>
</wml>

In the above WML example, the onenterforward event is triggered when the card in the ASP file is loaded. The event action is to clear the variables myName, myGender and favorite_tutorial_part.

An alternative is to use the newcontext attribute of the <card> tag. If the newcontext attribute value is set to true, the WAP browser will be reset to the initial state. All WML variables (and the navigational history) will be cleared as a result.

(clearSavedFormEg3Proc.asp)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<% Response.ContentType = "text/vnd.wap.wml" %>

<wml>
  <card id="card1" title="Submission Result" newcontext="true">
    <p>
      Data received at the server:<br/>
      Name: <% =Request.QueryString("name") %><br/>
      Gender: <% =Request.QueryString("gender") %><br/>
      Which part of our WML tutorial do you like?
      <% =Request.QueryString("tutorial_part") %><br/>
    </p>
  </card>
</wml>

The drawback of clearing a saved form in the submission result card is that we do not know which card a user will browse next. If a user types some data in the form but does not select the submit anchor link (for example, he/she may press the Back button of the mobile phone or may enter the URL of another WAP site), the submission result card will not be reached and so the saved form will remain in the memory.

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer

WML 14

Submitting Form Data to the Server in WML

In the earlier sections of this WML tutorial, we have mentioned about how to use input fields and selection lists to create forms and obtain data from a user. In many situations, you need to submit the form data to the server for further processing. To submit data to the server in WML, you need the <go></go> and <postfield/> tags. The <postfield/> tag should be enclosed in the <go></go> tag pair. Let's first have a look at the following WML example before we go into the details:

(sendDataEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="WML Form">
    <onevent type="onenterforward">
      <refresh>
        <setvar name="my_temp_id" value="123456"/>
      </refresh>
    </onevent>

    <p>
      Hello, welcome to our WML tutorial.<br/>

      What's your name?<br/>
      <input name="myName"/><br/>

      Are you a boy or a girl?<br/>
      <select name="myGender">
        <option value="Boy">I am a boy</option>
        <option value="Girl">I am a girl</option>
      </select><br/>

      Which part of our WML tutorial do you like?<br/>
      <select name="favorite_tutorial_part" multiple="true">
        <option value="Part 1">Part 1</option>
        <option value="Part 2">Part 2</option>
        <option value="Part 3">Part 3</option>
        <option value="Part 4">Part 4</option>
      </select><br/><br/>

      <anchor>
        <go method="get" href="processing.asp">
          <postfield name="name" value="$(myName)"/>
          <postfield name="gender" value="$(myGender)"/>
          <postfield name="tutorial_part" value="$(favorite_tutorial_part)"/>
          <postfield name="temp_id" value="$(my_temp_id)"/>
        </go>
        Submit Data
      </anchor>
    </p>
  </card>
</wml>

The following screenshots show what you will see if you open the above WML document in some mobile phone browsers:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

In the above WML example, one input field and two selection lists are created to obtain user data. If a user clicks the "Submit Data" anchor link, the form data will be submitted to the server. Unlike HTML, WML does not support the creation of submit buttons.

The method attribute of the <go> tag specifies which HTTP method should be used to send the form data. We use the HTTP GET method in the above WML example. If you want to use the HTTP POST method, you should assign the value post to the method attribute, like this:

<go method="post" ...>

If the HTTP POST method is used, the form data to be sent will be placed in the message body of the request. If the HTTP GET method is used, the form data to be sent will be appended to the URL. Since a URL can only contain a limited number of characters, the GET method has the disadvantage that there is a size limit for the data to be sent. If the user data contains non-ASCII characters, you should make use of the POST method to avoid encoding problems.

The href attribute of the <go> tag specifies the URL to submit the form data to. In the above WML example, we instruct the WAP browser to submit the form data to "processing.asp" for processing when the "Submit Data" anchor link is selected.

Four <postfield/> tags has been enclosed in the <go></go> tags in the above WML example. The <postfield/> tag is used to specify the name-value pairs to be submitted to the server.

The <postfield/> tag has two attributes, name and value. As their names suggest, the name attribute specifies the name of the parameter to be sent and the value attribute specifies the value of the parameter.

Notice the difference between HTML and WML here. In HTML, the name attribute of the <input> and <select> tags is used to specify the name of the parameter to be sent, while in WML the name attribute of the <postfield> tag is used to do the same thing. In WML, the name attribute of <input> and <select> is used to specify the name of the variable for storing the form data.

At the beginning of the above WML document, a value is assigned to the my_temp_id variable. When the "Submit Data" anchor link is clicked, it is sent to the server as part of the form. We use it to simulate the function of a hidden field in HTML.

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer

WML 13

WML Input Fields

Input fields are used to obtain alphanumeric data from users. The <input/> tag is used to create input fields. Let's first take a look at the following WML example. Then we will mention about some of the commonly used attributes of the <input> element.

(inputEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="WML Input Fields">
    <p>
      Hello, welcome to our WML tutorial.<br/>
      What's your name?
      <input name="myname" maxlength="16"/>
    </p>
  </card>
</wml>

Like a selection list, an input field is associated with a variable, which stores the data entered by the user. The variable name is specified with the name attribute of the <input> element. In the above WML example, a variable myname is associated with the input field. If you enter Tom in the input field, the variable myname will contain the value Tom. Further details about variables will be discussed in the section "WML Variables" of this tutorial.

The maxlength attribute of the <input> element limits the number of characters that a user can enter in an input field. In the above WML example, a user can enter at most 16 characters in the input field.

The following screenshots show the result of the above WML example in some mobile phone browsers:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

In the above WML example, we have not set a default value to the input field. So, as you can see in the screenshots, the input field is empty at the beginning. If you want to set a default value to the input field, you need to specify the value attribute in the <input> element. For example, if we change the following line:

<input name="myname" maxlength="16"/>

to:

<input name="name" maxlength="16" value="Jack"/>

Then the input field will contain the word "Jack" by default.

WML Variables

A major difference between WML and HTML is that WML has build-in support of variables. You can assign a value to a variable or output the value of a variable in WML without involving any scripting languages. To use variables in HTML, a client-side scripting language (e.g. JavaScript and VBScript) is required.

Setting Variable Values in WML

In WML, variables do not have to be declared explicitly. You can choose a variable name you like and assign a value to it directly. If you read a variable without assigning a value to it earlier, you will obtain an empty string.

Variable names in WML are case-sensitive. The first character of a variable name must be a letter or an underscore. The rest of the characters can be letters, numbers or underscores. Other characters, such as punctuations, are not permitted.

All variables are stored as string. They have a global scope, which means once you have set the value of a variable, you can read it in any cards and decks.

You can set the value of a variable in the following ways:

1. Using the <setvar/> tag
2. Using data collection tags <select> and <input/>
3. Using the setVar() function of WMLScript's WMLBrowser standard library

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer

WML 12

WML Selection Lists and the onpick Event

The onpick event is used together with the <option></option> WML tags, which are used to specify an item of a selection list. Before we discuss the onpick event, let us first introduce to you what selection lists are and how to use them in mobile Internet browsing applications.

Creating Selection Lists (Radio Buttons): <select><option>

A selection list is a list of options that a user can select. The <select></select> WML tags are used to define a selection list and the <option></option> tags are used to define an item in a selection list. Items are presented as radio buttons in some WAP browsers. The <option></option> tag pair should be enclosed within the <select></select> tags. The following WML example demonstrates how to create a selection list:

(selListEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="Selection List">
    <p>
      This is a selection list:<br/>
      <select name="selection_list">
        <option value="tutorial_A">WML Tutorial A</option>
        <option value="tutorial_B">WML Tutorial B</option>
        <option value="tutorial_C">WML Tutorial C</option>
      </select>
    </p>
  </card>
</wml>

In WML, a selection list is associated with a variable, which stores the value of the item selected. The variable name is specified with the name attribute of the <select> element and the value of an item is specified with the value attribute of the <option> element. In the above WML example, a variableselection_list is associated with the selection list. If a user selects the third option, the variableselection_list will be assigned the value tutorial_C. Further details about variables will be discussed later in the section "WML Variables" of this tutorial.

The result of the above WML example in mobile phone browsers is shown below:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you select the selection list, a number of radio buttons will be displayed:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

The value attribute of the <select> tag can be used to set the default option that will be selected initially. The <option> tag that has the same value attribute value as that of the <select> tag will be the default option. Here is an example that shows how to specify the second option "WML Tutorial B" as the default option:

<select name="selection_list" value="tutorial_B">
  <option value="tutorial_A">WML Tutorial A</option>
  <option value="tutorial_B">WML Tutorial B</option>
  <option value="tutorial_C">WML Tutorial C</option>
</select>

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer

WML 11

WML Event: onenterbackward

The onenterbackward event is triggered if a user goes back to a previous card through the WAP browser's URL history, and the WML code placed in the event handler will be executed.

The following WML example shows a situation in which the onenterbackward event has to be used. It is used to prevent a user from going back to a particular card. What we want to do is like this: We want to place an advertisement in an intermediate card between the table of contents and the chapters of a WML tutorial. If a user navigates to a chapter from the table of contents, an advertisement will appear for a few seconds. Later if the user presses the Back button to go back to the table of contents, the WAP browser will not display the advertisement again so as to reduce the disturbance to the user.

(onenterbackwardEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="tutorial_tc" title="WML Tutorial">
    <p>
      Hello, welcome to our WML tutorial.<br/><br/>
      Table of Contents:<br/>

      <a href="#tutorial_ch1_ad">Chapter 1: WML Introduction</a><br/>

      <a href="#tutorial_ch2_ad">Chapter 2: WML Deck and Card</a><br/><br/>

      ...
    </p>
  </card>

  <card id="tutorial_ch1_ad" title="Advertisement">
    <onevent type="onenterbackward">
      <prev/>
    </onevent>
    <onevent type="ontimer">
      <go href="#tutorial_ch1"/>
    </onevent>
    <timer value="30"/>
    <p>
      <a href="http://12345site.com/">Click here to download our free ringtones, wallpapers, mobile games and MP3 songs now.</a><br/><br/>
      <a href="#tutorial_ch1">Skip</a>
    </p>
  </card>

  <card id="tutorial_ch2_ad" title="Advertisement">
    <onevent type="onenterbackward">
      <prev/>
    </onevent>
    <onevent type="ontimer">
      <go href="#tutorial_ch2"/>
    </onevent>
    <timer value="30"/>
    <p>
      <a href="http://67890site.com/">Click here to buy WAP-enabled cell phones online now. Free shipping.</a><br/><br/>
      <a href="#tutorial_ch2">Skip</a>
    </p>
  </card>

  <card id="tutorial_ch1" title="WML Tutorial Ch1">
    <p>
      <em>Chapter 1: WML Introduction</em><br/><br/>
      ...<br/>
      <anchor>
        <prev/>
        Go Back
      </anchor>
    </p>
  </card>

  <card id="tutorial_ch2" title="WML Tutorial Ch2">
    <p>
      <em>Chapter 2: WML Deck and Card</em><br/><br/>
      ...<br/>
      <anchor>
        <prev/>
        Go Back
      </anchor>
    </p>
  </card>
</wml>

Below shows the screenshots of the first card in some mobile phone browsers. This card contains the table of contents of the tutorial.

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you select the "Chapter 1: WML Introduction" anchor link, you will see an advertisement in the mobile phone browser, like this:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you do not select the "Skip" anchor link, the mobile phone browser will display Chapter 1 of the tutorial automatically after 3 seconds:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you select the "Go Back" anchor link, the onenterbackward event will be triggered when the advertisement card is loaded. The WML code associated with the onenterbackward event, that is <prev/>, will be executed. So, the mobile phone browser will go backwards once more and you will see the table of contents instead of the advertisement.

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

WML Event: onenterforward

The onenterforward event is triggered when a user goes to a card in the forward direction. For example, if you go to a card by entering the URL directly or by following an anchor link of which the action is <go>, the onenterforward event will be triggered and the WML code associated with the event will be executed.

The onenterforward event will be useful to you if you want to do something before a card is displayed. For example, you need the onenterforward event if you want to assign a value to a variable before a card is displayed. (We will cover the usage of variables later in this WML tutorial.)

Another example is the calling of a WMLScript function when a card is loaded. Let's say you want to display a random number in your WML card. To do this, you can write a WMLScript function that generates a random number and assigns it to a variable. Then the function is placed in theonenterforward event handler. When the card is loaded, the function is called automatically and you can print out the variable value in the WML card.

Remember that the onenterforward event is not raised when you go backwards to a card. If a task has to be done every time a certain card is loaded, you need to place the task in the onenterbackward event handler in addition to the onenterforward event handler.

The following WML example demonstrates how to use the onenterforward event. We make use of theonenterforward and onenterbackward events to hide an intermediate card from the user.

(onenterforwardEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="Onenterforward Test">
    <p>
      This is Card 1.<br/><br/>
      <a href="#card2">Next Card</a>
    </p>
  </card>

  <card id="card2" title="Onenterforward Test">
    <onevent type="onenterforward">
      <go href="#card3"/>
    </onevent>
    <onevent type="onenterbackward">
      <prev/>
    </onevent>
    <p>
      This is Card 2 (the intermediate card). It cannot be seen by users.
    </p>
  </card>

  <card id="card3" title="Onenterforward Test">
    <p>
      This is Card 3.<br/><br/>
      <anchor>
        <prev/>
        Go Back
      </anchor>
    </p>
  </card>
</wml>

If you view the above WML example in a WAP browser, you should see something like this:

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you select the "Next Card" anchor link, the WAP browser will display Card 3. Card 2 is not shown because when the WAP browser loads Card 2, the onenterforward event is triggered and the WML code <go href="#card3"/> is executed, which brings you to Card 3.

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

If you select the "Go Back" anchor link, the WAP browser will display Card 1. When you select the "Go Back" anchor link, you are actually brought back to Card 2. The onenterbackward event is triggered this time and the WML code <prev/> is executed, which instructs the WAP browser to go backwards. Hence, you will see Card 1 but not Card 2.

Sony Ericsson T610	Sony Ericsson T68i	Nokia Mobile Browser 4.0

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer