Creating a WML phone directory

Mobile devices are the way of the future for information sharing. A drawback is that mobile devices don't quite have the power of a standard desktop computer. This prevents you from developing feature-rich sites that are easily navigable through the use of images and JavaScript. However, with Wireless Markup Language (WML) and careful planning, you can create a nice wireless solution.

One solution you can develop is a company directory. Let's say that you've already provided your company with an internal directory, and now you want to open that directory up to other possible users (e.g., vendors, suppliers, etc.). Before doing so, you should understand how WML works.

How WML works
WML is based on a deck-of-cards concept, in which you control how many cards are within a deck. When a mobile device makes a request to the WAP server, it requests a deck rather than a page. This deck is loaded in the mobile device, and the user can navigate between cards without requiring another request to the server.

WML is similar to HTML, except WML is based on the XML 1.0 standard, so tags are case-sensitive and all tags require closing tags. WML is also stricter than HTML with a smaller set of tags available. Also, the user of tables and images is restricted.

Creating a solution
First, figure out what functionality you want to provide your users. Be sure to keep in mind how much information is necessary to make your wireless solution navigable without incurring too much traffic; also, remember that your users have to pay for airtime.

In my case, I want the user to be able to look up employee information based on last name, first name, location, or department. For first name or last name, it only requires the user input the first or last name of the person for whom they're searching. However, for location or department, the user will get a list of options.

WML files based on the WML 1.1 standard begin with the following:

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

This specifies that it's an XML document and a WML doctype. A deck is composed of the following:

. . .
<wml>
<card/>
</wml>

Let's start with our first deck:

. . .
<wml>
<card id="main" title="Directory" newcontext="true">
<p>
Search By...<br/>
<anchor>Last Name
<go href="#ln"/>
</anchor><br/>
<anchor>First Name
<go href="#fn"/>
</anchor><br/>
<anchor>Location
<go href="search.asp" method="post">
<postfield name="qt" value="loc"/>
<postfield name="qv" value=""/>
</go>
</anchor><br/>
<anchor>Department
<go href="search.asp" method="post">
<postfield name="qt" value="dpt"/>
<postfield name="qv" value=""/>
</go>
</anchor><br/>
</p>
</card>

<card id="ln" title="Last Name">
<p>
Enter Last Name:<br/>
<input name="qv"/>
</p>
<p>
<anchor>Submit
<go href="search.asp" method="post">
<postfield name="qt" value="ln"/>
<postfield name="qv" value="$qv"/>
</go>
</anchor>
</p>
</card>

<card id="fn" title="First Name">
<p>
Enter First Name:<br/>
<input name="qv"/>
</p>
<p>
<anchor>Submit
<go href="search.asp" method="post">
<postfield name="qt" value="fn"/>
<postfield name="qv" value="$qv"/>
</go>
</anchor>
</p>
</card>

</wml>

What this code creates
When the first card displays on the phone, it shows a list of search options. Each of these options is an <anchor> with an associated <go> tag. The <go> tags tell the microbrowser where to go. Any href beginning with # refers to another card within the current deck; otherwise, it refers to another WML file.

When you click on First Name or Last Name, the microbrowser navigates to the associated cards in the deck. However, if you click on Location or Department, the microbrowser will request the WML located at "search.asp". This is necessary because we're going to provide the user with a list of either locations or departments from which to select as search criteria. The reason for separating this is because the phone's resources are limited, and there's no reason to inundate the phone with data that may or may not be used. If the user selects Location or Department, we can supply that data at that time.

The Last Name and First Name cards contain an <input> element and another <anchor> to submit the search data to the server. If you notice in the <go> element on the Last Name and First Name cards, there are a couple of <postfield> elements that are used to send data to the server. The <input> elements in WML are used to set global variables with the same names as the <input> name attribute. This is a big difference from the way normal HTML pages work. When you want to submit this data to the server, you create <postfield> elements and set their values using WML variables. You'll notice the value of the "qv" <postfield> element is set to "$qv". You refer to the variables in this manner.

Once you have the necessary data, you pass that data through the <go> element back to the server. It's a good practice to use the method attribute of the <go> element to submit data as post data.

Next, I'll collect the data and provide a return WML page to provide the locations and departments and to provide a list of results from the search criteria. Clicking on an element in the results list will return full information for that particular directory entry.The ASP page takes the form input from the mobile device and uses that information to provide a list of results from the search. However, for the location and department searches, a list of locations and departments are provided if one hasn't already been selected.

I'm using a Microsoft Access database as the underlying data. Here's the code to take the search criteria and create the output necessary:

<%@ Language=VBScript %> <% Response.ContentType = "text/vnd.wap.wml" Response.Expires = -1 Dim qt, qv, n Dim rs, conn Set conn = Server.CreateObject("ADODB.Connection") conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("../test.mdb") & ";User Id=;Password=;" Set rs = Server.CreateObject("ADODB.Recordset") Set rs.ActiveConnection = conn qt = Request("qt") qv = Request("qv") %> <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="main" title="Select"> <do type="prev"> <go href="wap1.asp"/> </do> <p> <% If qt = "loc" Then If qv = "" Then rs.Open "SELECT * FROM tblLocation" Response.Write "<select name=""qv"">" & vbCrLf Do While Not rs.EOF Response.Write vbTab & "<option value=""" & rs.Fields("location_id") & """>" & _ rs.Fields("location") & "</option>" & vbCrLf rs.MoveNext Loop Response.Write "</select><br/>" & vbCrLf Response.Write "<anchor>Submit" & vbCrLf & _ "<go href=""search.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""qt"" value=""dpt""/>" & vbCrLf & _ "<postfield name=""qv"" value=""$qv""/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor>" Else sql = "SELECT tblPhone.* " & _ "FROM tblPhone " & _ "INNER JOIN tblLocation " & _ "ON tblLocation.location_id = tblPhone.location_id " & _ "WHERE tblLocation.location_id = " & qv If Request("pid") > 0 Then sql = sql & " AND phone_id > " & Request("pid") sql = sql & " ORDER BY tblPhone.last_name" rs.Open sql n = 0 Do While n < 5 And Not rs.EOF n = n + 1 Response.Write "<anchor>" & rs.Fields("last_name") & ", " & _ rs.Fields("first_name") & vbCrLf & _ "<go href=""data.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor><br/>" rs.MoveNext Loop If Not rs.EOF Then Response.Write "<anchor>More..." & vbCrLf & _ "<go href=""search.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""qt"" value=""loc""/>" & vbCrLf & _ "<postfield name=""qv"" value=""" & qt & """/>" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor>" End If End If ElseIf qt = "dpt" Then If qv = "" Then rs.Open "SELECT * FROM tblDepartment" Response.Write "<select name=""qv"">" & vbCrLf Do While Not rs.EOF Response.Write vbTab & "<option value=""" & rs.Fields("deptid") & """>" & _ rs.Fields("dept") & "</option>" & vbCrLf rs.MoveNext Loop Response.Write "</select><br/>" & vbCrLf Response.Write "<anchor>Submit" & vbCrLf & _ "<go href=""search.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""qt"" value=""dpt""/>" & vbCrLf & _ "<postfield name=""qv"" value=""$qv""/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor>" Else sql = "SELECT tblPhone.* " & _ "FROM tblPhone " & _ "INNER JOIN tblDepartment " & _ "ON tblDepartment.deptid = tblPhone.location_id " & _ "WHERE tblDepartment.deptid = " & qv If Request("pid") > 0 Then sql = sql & " AND phone_id > " & Request("pid") sql = sql & " ORDER BY tblPhone.last_name" rs.Open sql n = 0 Do While n < 5 And Not rs.EOF n = n + 1 Response.Write "<anchor>" & rs.Fields("last_name") & ", " & _ rs.Fields("first_name") & vbCrLf & _ "<go href=""data.asp"" method=""post"">" & vbCrLf & _</p> "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor><br/>" rs.MoveNext Loop If Not rs.EOF Then Response.Write "<anchor>More..." & vbCrLf & _ "<go href=""search.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""qt"" value=""dpt""/>" & vbCrLf & _ "<postfield name=""qv"" value=""" & qt & """/>" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor>" End If End If ElseIf qt = "fn" Then sql = "SELECT tblPhone.* " & _ "FROM tblPhone " & _ "INNER JOIN tblDepartment " & _ "ON tblDepartment.deptid = tblPhone.location_id " & _ "WHERE tblPhone.first_name LIKE '" & qv & "%'" If Request("pid") > 0 Then sql = sql & " AND phone_id > " & Request("pid") sql = sql & " ORDER BY tblPhone.phone_id" rs.Open n = 0 Do While n < 5 And Not rs.EOF n = n + 1 Response.Write "<anchor>" & rs.Fields("last_name") & ", " & _ rs.Fields("first_name") & vbCrLf & _ "<go href=""data.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor><br/>" rs.MoveNext Loop If Not rs.EOF Then Response.Write "<anchor>More..." & vbCrLf & _ "<go href=""search.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""qt"" value=""fn""/>" & vbCrLf & _ "<postfield name=""qv"" value=""" & qv & """/>" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor>" End If ElseIf qt = "ln" Then sql = "SELECT tblPhone.* " & _ "FROM tblPhone " & _ "INNER JOIN tblDepartment " & _ "ON tblDepartment.deptid = tblPhone.location_id " & _ "WHERE tblPhone.last_name LIKE '" & qv & "%'" If Request("pid") > 0 Then sql = sql & " AND phone_id >= " & Request("pid") sql = sql & " ORDER BY tblPhone.phone_id" rs.Open sql n = 0 Do While n < 5 And Not rs.EOF n = n + 1 Response.Write "<anchor>" & rs.Fields("last_name") & ", " & _ rs.Fields("first_name") & vbCrLf & _ "<go href=""data.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor><br/>" rs.MoveNext Loop If Not rs.EOF Then Response.Write "<anchor>More..." & vbCrLf & _ "<go href=""search.asp"" method=""post"">" & vbCrLf & _ "<postfield name=""qt"" value=""ln""/>" & vbCrLf & _ "<postfield name=""qv"" value=""" & qv & """/>" & vbCrLf & _ "<postfield name=""pid"" value=""" & rs.Fields("phone_id") & """/>" & vbCrLf & _ "</go>" & vbCrLf & _ "</anchor>" End If End If %> </p> </card> </wml> <% On Error Resume Next rs.Close Set rs = Nothing conn.Close Set conn = Nothing %>

First, this page sets the Content-type of the response to "text/vnd.wap.wml", which is the MIME-type that mobile devices (and WAP gateways) understand. Then, I open a connection to the database through ADO. I create a couple of local variables to hold my query type (qt) and query value (qv) form values. Then, I write out the top portion of the WML page to the Response buffer.

In the next bunch of VBScript, I check the query type for the appropriate action. If the query type is "loc" for location, I check the query value variable to see if it's set. If the query type isn't "loc", I return a list from which the user will select a location. Then I do the same thing for "dpt" or department.

When the user enters the query type and query value, I create a list of anchors from the names in the data; this is also true for last name and first name search. Because of the limitations of WAP and WML, I restrict my output to five names. If there are more than five names in the result set, I pass another anchor that says "More. . .". This anchor also provides the last identity column from the underlying data. This information is used to supply the next group of results from the query.

When the user selects the name anchor, they're sent to the final page that displays the information on the selected name. Here's the code that accomplishes this:

<%@ Language=VBScript %> <% Response.ContentType = "text/vnd.wap.wml" Response.Expires = -1 Dim rs, conn Set conn = Server.CreateObject("ADODB.Connection") conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("../test.mdb") & ";User Id=;Password=;" Set rs = Server.CreateObject("ADODB.Recordset") Set rs.ActiveConnection = conn %> <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="main" title="Select"> <do type="prev"> <go href="wap1.asp"/> </do> <p> <% rs.Open "SELECT tblPhone.first_name, " & _ "tblPhone.last_name, " & _ "tblPhone.phone, " & _ "tblDepartment.dept, " & _ "tblLocation.location " & _ "FROM (" & _ "tblPhone " & _ "LEFT JOIN tblDepartment " & _ "ON tblDepartment.deptid = tblPhone.deptid " & _ ") LEFT JOIN tblLocation " & _ "ON tblLocation.location_id = tblPhone.location_id " & _ "WHERE tblPhone.phone_id = " & Request("pid") If Not rs.EOF Then Response.Write "<b>" & rs.Fields("last_name") & ", " & rs.Fields("first_name") & "</b><br/>" & _ "Phone: <input name=""phone"" size=""9"" value=""" & rs.Fields("phone") & """/>" & _ "Department: " & rs.Fields("dept") & "<br/>" & _ "Location: " & rs.Fields("location") & "<br/><br/>" End If %> </p> </card></p> </wml> <% On Error Resume Next rs.Close Set rs = Nothing conn.Close Set conn = Nothing %>

This code looks into the underlying data to find the person that matches the identity column data (tblPhone.phone_id). The result is a line that displays the person's name, a line for the phone number, a line for the department, and a line for the location. I also provide the phone number in an <input> element, so when the user focuses on this field, the user's phone may give them the option to use that number.

When you provide your output as the result of a scripting language such as ASP, you need to set the Content-type on the result; this lets the WAP gateway know that it's dealing with WML data. Also, keep your information to a minimum, since phones' resources may be limited.

In order to create this code and test it without incurring severe cell phone charges, I used the downloadable Nokia Mobile Internet Toolkit (which is listed under the Content Authoring heading).

Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client server to corporate intranet applications.