Make Your Web Applications Support Pocket PC

Article
10/26/2006

Even if Pocket PC has a real Web browser—the Microsoft Internet Explorer for the Pocket PC—the content can look even better with small adjustments. We will look into some of the limitations of the Pocket PC browser to make suitable adjustments to already existing dynamic Web pages.

Applies to:
   Microsoft Windows Powered Pocket PC 2000
   Microsoft Pocket Internet Explorer
   Your current Web application toolset
   Internet Information Services (IIS)
   Microsoft ActiveX Server Pages (ASP) included in any server version of Microsoft Windows since Microsoft Windows NT 4.0
   Microsoft Visual Studio
   Download 620-CF.exe

Gotchas

If you want to support multiple clients, be sure to test your client-sensitive content on all clients that you want to support.

Languages Supported

English

Web Application Platforms

The discussion in this article and accompanying samples are focused on the use of the Microsoft Web server, IIS, and ASP. However, most of the logic that is discussed could be applied to a Web application hosted on any server platform.

Who Is the Client?

In IIS, using ASP, there are ways to find out who is the client requesting a page. This is done by looking at some of the HTTP (Hypertext Transfer Protocol) information related to a request. From ASP you get to this information through the ServerVariables collection on the Request object. One that you could use is called HTTP_USER_AGENT, and we get the value like this:

UserAgent = Request.ServerVariables("HTTP_USER_AGENT")

And as the Pocket PC usually return the string:

Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; 240x320)

We could get a variable indicating that we have a Pocket PC client doing the request by:

IsPocketPC = (InStr(UserAgent, "Windows CE") > 0)

And as the Microsoft Mobile Explorer (MME) returns something like this:

Mozilla/1.22 (compatible; MMEF20; Cellphone; Generic Small)

(The "Generic Small" string is replaced by whichever phone MME is running on. An example is the Sony phone that reports "Sony CMD-Z5.") We could get a variable indicating that we have a MME client doing the request by:

IsMME = (InStr(UserAgent, "MME") > 0)

In the sample code (download 620-CF.exe), you find a testclient.asp file that you can put up in a virtual directory in your IIS (that allow script execution) and browse to the page from different clients to find out what values they generate.

For a more complete discussion on determining clients, please see the white paper Designing Web Sites for the Internet Explorer for Pocket PC.

Transforming Content

Let us start with a fairly common Web application page—an order entry form. This is the ASP page source (only HTML [Hypertext Markup Language] so far and somewhat simplified compared to the samples):

        <HTML><HEAD><TITLE>New Purchase Order</TITLE></HEAD>
        <BODY><FONT FACE="Tahoma">
 
        <!-- LOGO -->
        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
          <TR>
            <TD VALIGN="top" WIDTH="100%"><IMG SRC="line.gif"
              WIDTH="100%" HEIGHT="42"></TD>
            <TD VALIGN="top" WIDTH="93"><IMG SRC="logo.gif"
              WIDTH="93" HEIGHT="42"></TD>
          </TR>
        </TABLE>


        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"
          WIDTH="100%"><TR><TD VALIGN="top" WIDTH="100">
               <!-- MENU -->
        <B>Menu:</B><BR>
        <A HREF="">Home</A><BR>
        <A HREF="">About Us</A><BR>
        <A HREF="">Order</A>
        </TD><TD VALIGN="top">
        <H1>New Purchase Order</H1>
        <P><B>
          Fill in the information and create new Purchase Order.
        </B></P>
 
        <!-- MAIN -->
        <H2>Purchase Order Information</H2>
        <FORM ACTION="submit.asp" METHOD="POST" id=form1 name=form1>
        <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="3">
          <TR>
            <TD VALIGN="top"><B>Customer:</B></TD>
            <TD VALIGN="top"><INPUT TYPE="text" NAME="Customer" VALUE=""></TD>
          </TR>
          <TR>
            <TD VALIGN="top"><B>Order No:</B></TD>
            <TD VALIGN="top"><INPUT TYPE="text" NAME="OrderNo" VALUE=""></TD>
          </TR>
          <TR>
            <TD VALIGN="top"><B>Our Ref:</B></TD>
            <TD VALIGN="top"><INPUT TYPE="text" NAME="OurRef" VALUE=""></TD>
          </TR>
          <TR>
            <TD VALIGN="top"><B>Customer Ref:</B></TD>
            <TD VALIGN="top"><INPUT TYPE="text" NAME="CustRef" VALUE=""></TD>
          </TR>
          <TR>
            <TD VALIGN="top" COLSPAN="2"><INPUT TYPE="submit"
                                          VALUE="Create" id=submit1 name=submit1></TD>
          </TR>
        </TABLE>


        </FORM>
        </TD></TR></TABLE>
 
        </FONT></BODY></HTML>

And the page looks like this in Microsoft Internet Explorer 5.5.

Figure 1: Sample order entry form in Internet Explorer 5.5.

If you look at this page in Internet Explorer for the Pocket PC, you will see that even with the "Fit to Page" option enabled, you get a horizontal scroll bar. It is not very efficient to navigate horizontally with the stylus, so let us see what we can do about that. The menu is placed in a very common way for a normal Web application—in a separate column (created by a table) on the left. In a Pocket PC, we would like to place the menu as a row instead. This saves valuable horizontal space and converts it to compact vertical space instead. We start by adding code to get information about the client:

' Device Indicators
UserAgent = Request.ServerVariables("HTTP_USER_AGENT")
IsPocketPC = (InStr(UserAgent, "Windows CE") > 0)
IsMME = (InStr(UserAgent, "MME") > 0)
IsThin = (IsPocketPC Or IsMME)

With those variables available, we could modify the menu code to be something like this:

<% If Not IsThin Then %><B>Menu:</B><BR><% End If %>
<A HREF="">Home</A><% If IsThin Then %> <% Else %><BR><% End If %<
<A HREF="">About Us</A><% If IsThin Then %> <%Else%><BR><%End If%>
<A HREF="">Order</A>

In the same way we could remove the table that creates the extra column for the menu. Also, the first logo row could be changed to a simple logo on a Pocket PC client by:

<% If Not IsThin Then %>
  <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
    <TR>
      <TD VALIGN="top" WIDTH="100%"><IMG
        SRC="line.gif" WIDTH="100%" HEIGHT="42"></TD>
      <TD VALIGN="top" WIDTH="93"><IMG
        SRC="logo.gif" WIDTH="93" HEIGHT="42"></TD>
    </TR>
  </TABLE>


<% ElseIf IsPocketPC Then %>
  <IMG SRC="logo.gif" WIDTH="93" HEIGHT="42"><BR>
<% End If %>

You could even do abbreviations for certain clients by:

<H2>Purchase Order Info<%If Not IsThin Then%>rmation<%End If%></H2>

An interesting case is when you want to enter information. If you leave INPUT fields without any SIZE attribute, you will most probably get a field that is wider than the screen, resulting in a horizontal scroll bar again. Therefore it is a good suggestion to include a SIZE attribute, like this:

<INPUT TYPE="text" NAME="Customer" VALUE=""<% If IsThin Then Response.Write(" SIZE=""10""") %>>/PRE>

Let us look at how this looks in the Pocket PC now.

Figure 2: Sample order entry form in Internet Explorer for the Pocket PC.

And in the samples you will see that I have even added support for MME, and here are some screen shots of the same order form in the MME emulator.

Figure 3: Sample order entry form in MME.

For a complete example, please see the ordermulti.asp file in the sample code (download 620-CF.exe).

More Structure

The above example showed that you could easily update your existing pages with client-specific content. However, a large amount of your content is not real content, and that content you would probably want to put in one place to reuse on many pages. That place is called "server-side includes." For example, the logo and the menu in the above example would be perfect to put in a separate file (top.asp) and then include that file in all pages that need the standard header (logo + menu). Here is the code to do that:

<!--#INCLUDE FILE="top.asp"-->

You would probably do the same for the code to determine the client. If you do that, and you have a new client that should have the same content as the other "thin" clients (variable IsThin in the above example), you can just add that client type to the include page that determines the client type and all pages that use it will create "thin" content for the new client.

For a complete example, please see the files order.asp, global.asp, top.asp, and bottom.asp in the sample code (download 620-CF.exe).

Even More Structure

If you want to follow this logic all the way, you should start looking in the XML direction. With XML and Extensible Stylesheet Language (XSL) you can separate content from presentation (layout). You can have content in XML and use different XSL style sheets for different clients. You could do this with custom code in ASP or you could use ready-made software for this purpose from Microsoft called XSL ISAPI (Internet Server Application Programming Interface) Filter.

Conclusion

Much of your existing Web applications can be modified to better support the Internet Explorer in Pocket PC. As you have seen, there is not a need for complete rewrite, but rather a "simplification" of existing content.

Why don't you start modifying one of your existing Web applications to better support Pocket PCs and other thin clients today? Just do it a