Handling Form-based File Upload with Java Servlet or JSP

Unlike PHP, Java Servlet and JSP do not have build-in mechanisms for handling form-based file uploads. One solution to this problem is to implement a function yourself to extract uploaded files contained in an HTTP request. However, a better choice is to make use of a third-party library that can help us handle file uploads.


One robust library available is the Apache Jakarta Commons FileUpload package. It is open-source and can be downloaded free of charge over the Internet. We will demonstrate how to use the Apache Jakarta Commons FileUpload package to extract uploaded files submitted from a form. The techniques are the same for HTML and XHTML. If you are not familiar with JSP or Java Servlet, you may want to read some introductory tutorials before going through this section.


At the time of writing, the most up-to-date version of the Apache Jakarta Commons FileUpload library is 1.1.1. So, we assume you are using Commons FileUpload 1.1.1 in this tutorial. For other versions of Commons FileUpload, the procedures may be slightly different but the principle is the same.




Downloading the Apache Jakarta Commons FileUpload and Commons IO Libraries


To download the Apache Jakarta Commons FileUpload library, go to the home page of the Apache Jakarta Commons FileUpload project and navigate to the download section. The binaries are available in two file formats: zip format and tar-gzip format. Download either one of them and uncompress the file. Then go to the home page of the Apache Jakarta Commons IO project and repeat the same steps. We need the Commons IO library since Commons FileUpload uses it internally. Now you have two JAR files, “commons-fileupload-version.jar” and “commons-io-version.jar”, where version is the version number. At the time of writing, the latest version of the Commons FileUpload library and that of the Commons IO library are 1.1.1 and 1.2 respectively. So, the JAR files we obtain are “commons-fileupload-1.1.1.jar” and “commons-io-1.2.jar”.




Installing Apache Jakarta Commons FileUpload and Commons IO into a Servlet/JSP Container Like Tomcat


Next, we need to install the Apache Jakarta Commons FileUpload library and the Apache Jakarta Commons IO library into a Servlet/JSP container such as Apache Tomcat. To do this, copy the JAR files “commons-fileupload-1.1.1.jar” and “commons-io-1.2.jar” to the /WEB-INF/lib/ directory in the document root of your web application.


Note that JAR libraries stored in /WEB-INF/lib/ will be available to the containing web application only. If you want to share the libraries among all web applications installed in Tomcat (suppose you are using Tomcat 5 or Tomcat 4), the JAR files should be copied to the $CATALINA_HOME/shared/lib/ directory, where $CATALINA_HOME is the root of your Tomcat installation.




Checking If an HTTP Request is Encoded in Multipart Format


Now that you have installed the Apache Jakarta Commons FileUpload library, you can start writing the code. First, we have to make sure the HTTP request is encoded in multipart format. This can be done using the static method isMultipartContent() of the ServletFileUpload class of the org.apache.commons.fileupload.servlet package:




if (ServletFileUpload.isMultipartContent(request)){
  // Parse the HTTP request…
}




In the above Java code snippet, request is a javax.servlet.http.HttpServletRequest object that encapsulates the HTTP request. It should be very familiar to you if you know Java Servlet or JSP.




Parsing Form Data with Java Servlet / JSP


Second, we will parse the form data contained in the HTTP request. Parsing the form data is very straightforward with the Apache Jakarta Commons FileUpload library:




ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
List fileItemsList = servletFileUpload.parseRequest(request);




(In the above Java code snippet, DiskFileItemFactory is a class contained in the org.apache.commons.fileupload.disk package and List is an interface contained in the java.util package.)


If everything works fine, fileItemsList will contain a list of file items that are instances of FileItem of the org.apache.commons.fileupload package. A file item may contain an uploaded file or a simple name-value pair of a form field. (More details about FileItem will be provided later.)


By default, the ServletFileUpload instance created by the above Java code uses the following values when parsing the HTTP request:




  • Size threshold = 10,240 bytes. If the size of a file item is smaller than the size threshold, it will be stored in the memory. Otherwise it will be stored in a temporary file on disk.



  • Maximum HTTP request body size = -1, which means the server will accept HTTP request bodies of any size.



  • Repository = System default temp directory, whose value can be found by the Java code System.getProperty(“java.io.tmpdir”). Temporary files will be stored there.


If you do not like the default settings, you can change them using the methods setSizeThreshold() and setRespository() of the DiskFileItemFactory class and the setSizeMax() method of the ServletFileUpload class, like this:




DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
diskFileItemFactory.setSizeThreshold(40960); /* the unit is bytes */

File repositoryPath = new File(“/temp”);
diskFileItemFactory.setRepository(repositoryPath);

ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
servletFileUpload.setSizeMax(81920); /* the unit is bytes */




(In the above Java code snippet, File is a class of the java.io package.)


If the size of the HTTP request body exceeds the maximum you set, the SizeLimitExceededException exception (fully qualified name: org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException) will be thrown when you call the parseRequest() method:




try {
  List fileItemsList = servletFileUpload.parseRequest(request);
  /* Process file items… */
}
catch (SizeLimitExceededException ex) {
  /* The size of the HTTP request body exceeds the limit */
}




Iterating through File Items



Third, we will iterate through the file items and process each of them. The isFormField() method of the FileItem interface is used to determine whether a file item contains a simple name-value pair of a form field or an uploaded file:




Iterator it = fileItemsList.iterator();
while (it.hasNext()){
  FileItem fileItem = (FileItem)it.next();
  if (fileItem.isFormField()){
    /* The file item contains a simple name-value pair of a form field */
  }
  else{
    /* The file item contains an uploaded file */
  }
}




(In the above Java code snippet, Iterator is an interface in the java.util package and FileItem is an interface in the org.apache.commons.fileupload package.)

XHTML MP Example Demonstrating File Upload

The following example demonstrates how to upload a file from a Nokia 6230 cell phone. Here is the XHTML MP document of the example. As XHTML MP is compatible with HTML/XHTML, this XHTML MP document can also be opened with web browsers such as Microsoft Internet Explorer and Mozilla Firefox.



<?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>File Upload Example</title>
  </head>

  <body>
    <h1>Welcome to our photo album.</h1>

    <form action=”file_upload.php” method=”post” enctype=”multipart/form-data”>
      <p><br/>
        Choose a photo to upload to the WAP server:
        <input name=”myFile” type=”file”/><br/>
        On the WAP server, save the file as: (Enter something here if you want the file to be saved in a different file name.)
        <input name=”filename” type=”text”/>
      </p>

      <hr/>

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




The above XHTML MP document enables the user to choose a photo to upload and specify a different name for the file if he/she wants to do so.


If you have read our XHTML MP tutorial, the tags and attributes in the above XHTML MP document should be very familiar to you, with the exception of the enctype attribute of the <form> tag. The enctype attribute is used to specify how the form data should be encoded in the HTTP request when the method attribute value is post. The default value of the enctype attribute is “application/x-www-form-urlencoded”. It has to be changed to “multipart/form-data” to enable file upload.


In most cases, that’s all we need to know about “multipart/form-data” since we will not parse the form data encoded in HTTP requests ourselves but to use functions provided by a server-side technology. Writing the functions by our own is error-prone and is not recommended. If you need to learn the details of the “multipart/form-data” format, please refer to the Form-based File Upload in HTML (RFC 1867) document.


Note that the above XHTML MP document does not conform to the XHTML MP specification since “file” is not a valid value of the type attribute of the <input> tag in standard XHTML MP. Thus, the document cannot pass the check of an XHTML MP validator.


The screenshots below show what you will see on the screen of the Nokia 6230 cell phone:





















Nokia 6230




If you click the file select field, you will see something like this:





















Nokia 6230




Select the “Memory card” item in the above menu and you will see something like this:













Nokia 6230




Select the “Options” softkey in the bottom left-hand corner of the screen of the cell phone and you will see:













Nokia 6230




Select the “Select” option. The mobile browser will go back to the first page and the name of the file chosen will be displayed in the file select field, like this:













Nokia 6230




If you click the submit button of the form, the form data will be posted to the WAP server.


Now the only thing left is to write a server-side script to extract the uploaded file from the HTTP request and save it to the local file system or a database.


In the following sections, we will introduce to you how to handle file uploads with PHP and Java Servlet / JSP. If you use a server-side technology other than PHP and Java Servlet / JSP, the code will be different but the idea is the same.

Handling Form-based File Upload with PHP

In this section, we will introduce to you how to handle form-based file uploads with a PHP script. The techniques are the same for HTML and XHTML. At the time of writing, the latest version of PHP is 5.2.0. So, we assume you are using PHP 5.2.0 in this tutorial. For other versions of PHP, the procedures should be similar. If you are not familiar with PHP, you may want to read some introductory tutorials before going through this section.




Parsing Form Data and Getting Information about the Uploaded File with PHP


To extract an uploaded file from an HTTP request, we need to parse the form data that is encoded in the “multipart/form-data” format. In PHP, the form data in an HTTP request is automatically parsed. The PHP engine stores the information of the uploaded files in the $_FILES array.


Now let’s say the name attribute value of the <input type=”file”> element in a certain HTML/XHTML/XHTML MP document is myFile. To obtain the information about the uploaded file, use the following lines of PHP script:




/* Get the size of the uploaded file in bytes. */
$fileSize = $_FILES[‘myFile’][‘size’];

/* Get the name (including path information) of the temporary file created by PHP that contains the same contents as the uploaded file. */
$tmpFile = $_FILES[‘myFile’][‘tmp_name’];

/* Get the name of the uploaded file at the client-side. Some browsers include the whole path here (e.g. e:\files\myFile.txt), so you may need to extract the file name from the path. This information is provided by the client browser, which means you should be cautious since it may be a wrong value provided by a malicious user. */
$fileName = $_FILES[‘myFile’][‘name’];

/* Get the content type (MIME type) of the uploaded file. This information is provided by the client browser, which means you should be cautious since it may be a wrong value provided by a malicious user. */
$contentType = $_FILES[‘myFile’][‘type’];




Nokia cell phones such as Nokia 6230 determine the content type (MIME type) of the file to be uploaded by its file extension. The following table lists some of the file extensions that are recognized by Nokia 6230:




























File extension


Content type / MIME type


.jpg


image/jpeg


.gif


image/gif


.png


image/png


.wbmp


image/vnd.wap.wbmp


.txt


text/plain




If the Nokia 6230 cell phone does not recognize a file extension, it will specify “application/octet-stream” as the content type / MIME type of the file in the HTTP request.


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:




  1. Text field



  2. Password field



  3. Checkbox



  4. Radio button



  5. 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.



<?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>
    <form method=”get” action=”xhtml_mp_tutorial_proc.asp”>
      <p>
        <select name=”selectionList”>
          <option value=”tutorial_A”>XHTML MP Tutorial Part A</option>
          <option value=”tutorial_B”>XHTML MP Tutorial Part B</option>
          <option value=”tutorial_C”>XHTML MP Tutorial Part C</option>
        </select>

      </p>
    </form>
  </body>
</html>




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:


<?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>
    <form method=”get” action=”xhtml_mp_tutorial_proc.asp”>
      <p>
        <select name=”selectionList” multiple=”multiple”>
          <option value=”tutorial_A”>XHTML MP Tutorial Part A</option>
          <option value=”tutorial_B”>XHTML MP Tutorial Part B</option>
          <option value=”tutorial_C”>XHTML MP Tutorial Part C</option>
        </select>
      </p>
    </form>
  </body>
</html>




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:


<?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>
    <form method=”get” action=”xhtml_mp_tutorial_proc.asp”>
      <p>
        <select name=”selectionList”>
          <optgroup label=”Tutorial Ch1″>
            <option value=”tutorial_1A”>Part 1A</option>
            <option value=”tutorial_1B”>Part 1B</option>
            <option value=”tutorial_1C”>Part 1C</option>
          </optgroup>
          <optgroup label=”Tutorial Ch2″>
            <option value=”tutorial_2A”>Part 2A</option>
            <option value=”tutorial_2B”>Part 2B</option>
            <option value=”tutorial_2C”>Part 2C</option>
          </optgroup>
          <optgroup label=”Tutorial Ch3″>
            <option value=”tutorial_3A”>Part 3A</option>
            <option value=”tutorial_3B”>Part 3B</option>
            <option value=”tutorial_3C”>Part 3C</option>
          </optgroup>
        </select>
      </p>
    </form>
  </body>
</html>




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:




<a id=”destination_id></a>


<a id=”destination_id />


<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