飛奔嘅蝸牛 – Page 57

Upload File from WAP Cell Phone

Many wireless devices like cell phones can be used as a digital camera or as a music player. With them, you can take pictures, record video clips and listen to your favorite MP3 songs at any time and in any place.

However, your cell phone may not have enough space to store all your pictures, video clips, music files, ringtones, etc. To solve this, you can upload some files to a server through a WAP connection. When you need them, you can download them back to your cell phone.

For example, if you are traveling in a beautiful country, you will definitely take many photos and record many video clips with your cell phone. You can upload some of the image files and video files to a server to share with your friends and at the same time make room for more photos and videos along the journey.

Some cell phones support both file upload and 3G wireless network. The upload speed will be very fast if you are using a 3G connection.

How to Upload Files from WAP Cell Phones

Both WML (the markup language of WAP 1.x) and XHTML MP (the markup language of WAP 2.0) do not support file upload. But fortunately the browser on some WAP 2.0 cell phones support the <input type=”file”> element as an extension of XHTML MP. Some HTML-capable WAP browsers also support the <input type=”file”> element.

The <input type=”file”> element will be rendered as a button on a WAP browser. When it is clicked, the list of files stored on the wireless device and the memory card will be displayed. You can then choose a file to upload to the server.

At the server-side, you use a server-side technology like ASP / ASP.NET, ColdFusion, Java Servlet / JSP, Perl and PHP to extract the file from the HTTP request, just like what you will do to handle HTML file upload. Then you can process the file or save it to a directory or a database system.

Nokia Cell Phones that Support WAP Upload

Below shows some of the cell phone models from Nokia that support WAP upload at the time of writing (last updated: 23 Nov 2006). If you know a cell phone model (of any brand) that supports WAP upload but is not listed in the following table, you may report to us using the feedback form at the end of this web page.

Nokia cell phone model	Platform
Nokia 2650	Series 40 Platform 1st Edition
Nokia 3200	Series 40 Platform 1st Edition
Nokia 3220	Series 40 Platform 2nd Edition
Nokia 3250	S60 Platform 3rd Edition (formerly called Series 60)
Nokia 5140	Series 40 Platform 2nd Edition
Nokia 6020	Series 40 Platform 2nd Edition
Nokia 6021	Series 40 Platform 2nd Edition
Nokia 6030	Series 40 Platform 2nd Edition
Nokia 6060	Series 40 Platform 2nd Edition
Nokia 6070	Series 40 Platform 2nd Edition
Nokia 6101	Series 40 Platform 2nd Edition
Nokia 6103	Series 40 Platform 2nd Edition
Nokia 6111	Series 40 Platform 2nd Edition
Nokia 6112	Series 40 Platform 2nd Edition
Nokia 6125	Series 40 Platform 3rd Edition
Nokia 6131	Series 40 Platform 3rd Edition
Nokia 6136	Series 40 Platform 3rd Edition
Nokia 6170	Series 40 Platform 2nd Edition
Nokia 6220	Series 40 Platform 1st Edition
Nokia 6230	Series 40 Platform 2nd Edition
Nokia 6230i	Series 40 Platform 2nd Edition
Nokia 6233	Series 40 Platform 3rd Edition
Nokia 6270	Series 40 Platform 3rd Edition
Nokia 6280	Series 40 Platform 2nd Edition
Nokia 6282	Series 40 Platform 3rd Edition
Nokia 6630	S60 Platform 2nd Edition Feature Pack 2 (formerly called Series 60)
Nokia 6680	S60 Platform 2nd Edition Feature Pack 2 (formerly called Series 60)
Nokia 6681	S60 Platform 2nd Edition Feature Pack 2 (formerly called Series 60)
Nokia 6682	S60 Platform 2nd Edition Feature Pack 2 (formerly called Series 60)
Nokia 6810	Series 40 Platform 1st Edition
Nokia 6820	Series 40 Platform 1st Edition
Nokia 6822	Series 40 Platform 2nd Edition
Nokia 7200	Series 40 Platform 1st Edition
Nokia 7250i	Series 40 Platform 1st Edition
Nokia 7260	Series 40 Platform 2nd Edition
Nokia 7270	Series 40 Platform 2nd Edition
Nokia 7360	Series 40 Platform 2nd Edition
Nokia 7370	Series 40 Platform 3rd Edition
Nokia 7380	Series 40 Platform 3rd Edition
Nokia 7600	Series 40 Platform 1st Edition
Nokia 8800	Series 40 Platform 2nd Edition
Nokia 9300	Series 80 Platform 2nd Edition
Nokia 9500	Series 80 Platform 2nd Edition
Nokia E60	S60 Platform 3rd Edition (formerly called Series 60)
Nokia E61	S60 Platform 3rd Edition (formerly called Series 60)
Nokia E70	S60 Platform 3rd Edition (formerly called Series 60)
Nokia N70	S60 Platform 2nd Edition Feature Pack 3 (formerly called Series 60)
Nokia N71	S60 Platform 3rd Edition (formerly called Series 60)
Nokia N72	S60 Platform 2nd Edition Feature Pack 3 (formerly called Series 60)
Nokia N73	S60 Platform 3rd Edition (formerly called Series 60)
Nokia N80	S60 Platform 3rd Edition (formerly called Series 60)
Nokia N90	S60 Platform 2nd Edition Feature Pack 3 (formerly called Series 60)
Nokia N91	S60 Platform 3rd Edition (formerly called Series 60)
Nokia N92	S60 Platform 3rd Edition (formerly called Series 60)
Nokia N93	S60 Platform 3rd Edition (formerly called Series 60)

XHTML MP Input Elements

Like HTML, XHTML MP provides numerous input element types for obtaining data from users. The following input element types are available in XHTML MP:

Text field
Password field
Checkbox
Radio button
Hidden field

All of the above input elements are created with the <input> element. To send the user data to the server, the <input> element has to be used in conjunction with the <form> element. The <form> element will be mentioned in more detail later at the “Sending Data to the Server in XHTML MP” section.

The type attribute of the <input> element defines the input element type in XHTML MP.

The name attribute of the <input> element specifies the name of the input element. The name will be used to retrieve the user data at the server.

XHTML MP Selection Lists

A selection list is a list of options that a user can select. The <select></select> tags define a selection list in XHTML MP. One or more <option></option> tag pairs are enclosed within the <select></select> tags. The <option></option> tag pair defines a list item.

To send the value of the selected item to the server, the <select> tag has to be used in conjunction with the <form> tag. You can learn how to use the <form> tag and how to read the value of the selected item at the server later in the “Sending Data to the Server in XHTML MP” section of this tutorial.

The name attribute of the <select> tag specifies the name of a selection list. At the server-side, the name will be used to retrieve the value of the selected item. The value of an item is specified with the value attribute of the <option> tag.

Let’s take a look at the following XHTML MP example. It can help you understand better what we are talking about.

The result of the above XHTML MP example in WAP browsers is shown below.

Sony Ericsson T610	Nokia Mobile Browser 4.0

If you select the selection list, the options available will be displayed like this:

Sony Ericsson T610	Nokia Mobile Browser 4.0

The selected attribute of the <option> tag can be used to set the default option. The default option will be initially selected. The selected attribute only accepts the value “selected”. Here is an example that shows how to pre-select the second option “XHTML MP Tutorial Part B”:

<option value=”tutorial_B” selected=”selected”>XHTML MP Tutorial Part B</option>

Selecting Multiple Options

In the previous XHTML MP example, a user can only select one option of the selection list. To allow a user to select multiple options, you need to make use of the multiple attribute of the <select> tag. The multiple attribute can only be assigned with the value “multiple”. Options in such kind of selection lists are displayed as check boxes on the screen.

Let’s take a look at the following XHTML MP example:

The result of the above XHTML MP code is shown below:

Sony Ericsson T610

Nokia Mobile Browser 4.0

When the multiple attribute is present in the <select> tag, it is possible to specify multiple default options. To do so, add selected=”selected” to each of the <option> tags that should be selected by default. Here is an example:

<select name=”selectionList” multiple=”multiple”>
  <option value=”tutorial_A” selected=”selected”>XHTML MP Tutorial Part A</option>
  <option value=”tutorial_B” selected=”selected”>XHTML MP Tutorial Part B</option>
  <option value=”tutorial_C”>XHTML MP Tutorial Part C</option>
</select>

The above lines of code tell the WAP browser that the first and second options of the selection list should be pre-selected.

Organizing Options in XHTML MP Selection Lists

If an XHTML MP selection list contains too many options, it will look disorganized. To tackle this, you can arrange options into groups. You define an option group using the <optgroup></optgroup> tag pair. The label attribute of the <optgroup> tag specifies the title of an option group.

The usage of the <optgroup></optgroup> tags is shown in this XHTML MP example:

This is the result of the above XHTML MP example in WAP browsers:

Sony Ericsson T610

Nokia Mobile Browser 4.0

Submitting Form Data to the Server in XHTML MP

In the previous sections of this XHTML MP tutorial, we have mentioned about how to use selection lists and various input elements to obtain data from a user in XHTML MP. However, the user data has no use if it is not posted to the server for further processing. To post data to the server in XHTML MP, you need the <form></form> tags and a submit button. Let’s first have a look at the following XHTML MP example. Then we will go into the details.

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <h1>Registration Form</h1>
    <form method=”get” action=”processing.asp”>
      <p>
        Username:<br/>
        <input name=”username”/><br/>

        Password:<br/>
        <input type=”password” name=”password”/><br/>

        Gender:<br/>
        <input type=”radio” name=”gender” value=”m”/>Male
        <input type=”radio” name=”gender” value=”f”/>Female<br/>

        Country:<br/>
        <select name=”country”>
          <option value=”ca”>Canada</option>
          <option value=”cn”>China</option>
          <option value=”fr”>France</option>
          <option value=”de”>Germany</option>
          <option value=”in”>India</option>
          <option value=”it”>Italy</option>
          <option value=”jp”>Japan</option>
          <option value=”kr”>Korea</option>
          <option value=”uk”>United Kingdom</option>
          <option value=”us”>United States</option>
        </select><br/>

        Which part of our XHTML MP tutorial do you like?<br/>
        <input type=”checkbox” name=”tutorial_part” value=”1″/>Part 1
        <input type=”checkbox” name=”tutorial_part” value=”2″/>Part 2
        <input type=”checkbox” name=”tutorial_part” value=”3″/>Part 3
        <input type=”checkbox” name=”tutorial_part” value=”4″/>Part 4

        <input type=”hidden” name=”temp_id” value=”123456″/>
      </p>

      <hr/>

      <p>
        <input type=”submit”/>
        <input type=”reset”/>
      </p>
    </form>
  </body>
</html>

Sony Ericsson T610

Nokia Mobile Browser 4.0

Anchor Links in XHTML MP

Anchor links are used for navigation. You select an anchor link to go to another resource such as an XHTML MP page, or to scroll to a location in the current XHTML MP document. Anchor links are created with the <a></a> tag pair.

The href attribute of the <a> tag is used to specify the URL (Uniform Resource Locator) to the link target. The protocol used is HTTP. A URL has the form:

http://host_name/path/file_name#offset?parameter1=value1&parameter2=value2…

You should be very familiar with it if you have programmed HTML or WML before.

Going to a Location in the Current XHTML MP Page

As said earlier, you can make use of an anchor link to scroll to a location in the current XHTML MP page. To do this, first you have to set a link destination (target anchor) within the document. Second, you have to point an anchor link to the destination.

To set a link destination within an XHTML MP document, the id attribute should be used. Most XHTML MP tags contain the id attribute. Here are some examples:

<h1 id=”destination_id“>XHTML MP Tutorial</h1>

<p id=”destination_id“>Some text in a paragraph</p>

To point an anchor link to the link destination, you need to construct a URL using the id of the link destination as the offset (Note that an offset begins with the # character), and then specify this URL as the href attribute value of the anchor link, like this:

<a href=”#destination_id“>Select here to go to a location in the current XHTML MP document</a>

As the link destination is in the current XHTML MP document, there is no need to specify the host name, path and file name in the URL. Only the offset is needed.

The following XHTML MP example demonstrates how to go to a location within the current document:

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p><a id=”top”>Table of Contents:</a></p>
    <ul>
      <li>Part 1 XHTML MP Introduction</li>
      <li>Part 2 Development of Wireless Markup Languages</li>
      <li>Part 3 Advantages of XHTML MP</li>
      <li>Part 4 WML Features Lost in XHTML MP</li>
    </ul>
    <p><a href=”#top”>Back to top</a></p>
  </body>
</html>

This is the result of the above XHTML MP example in a mobile phone browser:

Nokia Mobile Browser 4.0

If you select the “Back to top” link, the page will be scrolled to show the text “Table of Contents”.

Nokia Mobile Browser 4.0

For Sony Ericsson mobile phones, going to a link destination in the current XHTML MP page is not supported until browser version 4.0, which is first included in Sony Ericsson Z1010 mobile phones. Hence, earlier mobile phone models such as T610 and T68i do not support this feature.

XHTML MP Tables

To create a table in XHTML MP, you need the <table>, <tr> and <td> tags. Data in a cell is enclosed in <td></td> tags. Cells in the same row are enclosed in <tr></tr> tags. All rows are enclosed in <table></table> tags. So, <td></td> should be enclosed in <tr></tr> and <tr></tr> should be enclosed in <table></table>. The following XHTML MP example demonstrates how to create tables:

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Table in XHTML MP</title>
  </head>

  <body>
    <table>
      <tr>
        <td>Cell A</td>
        <td>Cell B</td>
        <td>Cell C</td>
      </tr>

      <tr>
        <td>Cell D</td>
        <td>Cell E</td>
        <td rowspan=”2″>Cell F</td>
      </tr>

      <tr>
        <td colspan=”2″>Cell G</td>
      </tr>
    </table>
  </body>
</html>

The result of the above XHTML MP markup code in mobile phone emulators is shown below:

Sony Ericsson T610	Nokia Mobile Browser 4.0

WAP CSS is required to control the presentation aspect of a table. For example, if you want to add a border to the table or specify the color of a table cell, you have to make use of WAP CSS. To let you see clearly the effect of the rowspan and colspan attributes in the previous XHTML MP example, we specify black borders to the table cells with the WAP CSS border property, like this:

td {
border: thin solid black
}

Sony Ericsson T610	Nokia

XHTML MP Images

Displaying an Image in XHTML MP

The <img> tag is used to display an image in XHTML MP. This is the same as in HTML. WAP browsers will display the text assigned to the alt attribute of the <img> tag if it cannot display the image for reasons such as file not found or image format not supported. The height and width attributes of the <img> tag, as their names suggested, are used to specify the height and width (in pixels) of an image’s display area. You can make use of these two attributes to scale up or down the size of an image on the screen.

Besides the old WBMP image format, WAP 2.0 wireless devices should be able to support image formats commonly used on the web such as GIF, animated GIF, JPG, and PNG. However, this is device-specific. Some WAP 2.0 wireless devices can only support a subset of the above image formats.

One simple way to find out whether a particular image format is supported on a wireless device is to check the accept HTTP header, like what we have done in the “Choosing MIME Types Dynamically” section of this XHTML MP tutorial. For example, if “image/gif”, “image/jpg” and “image/png” are found in the accept HTTP header, it means the wireless device supports the GIF, JPG and PNG image formats.

The following example demonstrates how to display an image in XHTML MP:

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Image in XHTML MP</title>
  </head>

  <body>
    <p>
      <img src=”smile.gif” alt=”Smile” height=”62″ width=”60″ /><br/>
      Hello, welcome to our XHTML MP tutorial.
    </p>
  </body>
</html>

The result of the above XHTML MP code in some WAP browsers is shown below:

Sony Ericsson T610	Nokia Mobile Browser 4.0

If the image file does not exist, the result of the same XHTML MP code will become:

Sony Ericsson T610	Nokia Mobile Browser 4.0

XHTML MP Lists

The <ul>, <ol> and <li> elements are used to create lists in XHTML MP.

To create an unordered list, use the <ul> element. Each list item in an unordered list begins with a bullet. The <li></li> tags are used to enclose every list item. This XHTML MP example demonstrates how to create an unordered list:

Sony Ericsson T610

Nokia Mobile Browser 4.0

To create an ordered list, use the <ol> element. An ordered list has list numbering. List items are enclosed within <li></li> tags. The following XHTML MP example demonstrates how to create an ordered list.

Sony Ericsson T610

Nokia Mobile Browser 4.0

You can make use of the start attribute of the <ol> element to specify the starting number of the sequence, like this:

The result of the above XHTML MP example in some WAP browsers is shown below:

Sony Ericsson T610

Nokia Mobile Browser 4.0

With WAP CSS, you can have more precise control over the outlook of a list. For example, you can control the bullet shape of unordered lists and the list numbering of ordered lists (for example, changing the list numbering from “1, 2, 3…” to “i, ii, iii…”).

XHTML MP Preformatted Text

In XHTML MP, leading and trailing whitespaces of a paragraph is not displayed. Furthermore, two or more whitespaces in a paragraph are shown as one whitespace on the screen of mobile devices. This behavior is demonstrated in the following XHTML MP example.

Sony Ericsson T610	Nokia Mobile Browser 4.0

To preserve the formatting of the text in XHTML MP, you have to use the <pre> element, like this example:

Sony Ericsson T610

Nokia Mobile Browser 4.0

Font Style in XHTML MP

You can use tags to change the font style of the text in XHTML MP. However, some WAP browsers only support a subset of these tags, even though these tags are defined by the XHTML MP specification. This is because the WAP browser can only make use of the fonts available on the mobile device. For example, if the italic font is not available, the italic style is not supported. Unsupported XHTML MP tags will be ignored by WAP browsers and will not cause any errors.

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Font Style</title>
  </head>

  <body>
    <p>
      <b>Bold</b><br/>
      <i>Italic</i><br/>
      <b><i>Bold italic</i></b><br/>
      <small>Small</small><br/>
      <big>Big</big><br/>
      <em>Emphasis</em><br/>
      <strong>Strong</strong>
    </p>
  </body>
</html>

The <b> and <i> tags means bold and italic respectively. The <small> tag reduces the text size. The <big> tag increases the text size. The <em> and <strong> styles are similar. The WAP browser will display text with emphasis (<em>) or strong (<strong>) style in some way that makes it more noticeable. The effect depends on the actual wireless device.

The following screenshots show the output of the above XHTML MP markup code in some WAP browsers. The result will be somewhat different on other mobile phone models.

Sony Ericsson T610	Nokia Mobile Browser 4.0

You can have more precise control over font formats with WAP CSS. For example, you can control the font family to be used or set a specific font size (e.g. 12pt) to some text.

The <u> tag of HTML does not exist in XHTML MP. So, if you want to underline some text, WAP CSS has to be used.