In this article I'd like to show you a method of how to build applications so that the presentation tier can be changed depending upon the requesting client and its capability of handling the application.

The application used to demonstrate this method is a simple one of enabling your stock details to reach you either through the web or through your mobile.

Application Overview

Let's start the application with its architecture and basic table design. We'll call the table scrips and assume that the table consists of one record per scrip with its:

• Name
• Code
• opening price
• high price
• low price
• current price
• change with respect to last traded price
• and last traded date time stamp.

This table or view can be populated in different ways depending upon your application implementation.

Table Name: scrips

In this example, I will use some dummy data available in the download code. The application itself will consist of an Online Price Finder and Top 5 Gainers / Losers in the series.

Now look at the architecture of this application. As shown in the figure below, the application has a SQL Server and VBS file to extract the data from the database and convert them into XML format. Most developers might wonder why the data is being converted into XML format. Lets explain.

Since this is a stock application, its assumed that hits to this application will be frequent and many and simultaneously the interaction with database will keep on increasing so if the same page is accessed by about 100 users then the same data is accessed 100 times from the database (although not necessarily 100 connections if we used ADODB Object pooling).

Instead of this, it makes sense to create an XML file on our server's filesystem and update this every minute update through a scheduled VBS file, reducing the connection to the database to 1 per minute. To avoid concurrency issues of clients accessing the XML file as it is being generated, the VBS file creates the XML file in a temp folder and once finished, it is copied to the required folder and deleted from the temp folder as shown in the code below.

I implemented this method since the application that I was building introduced the concept of a 15-minute delay for non-registered users and a 5-minute delay for registered users in the data. So adding a delay of a few more seconds did not affect the users, but it increased the functionality of the whole application as the data was available in XML format and therefore we could use the same XML file to distribute data to web portals and to other parts of the application.

Once the data is available in XML format, it depends on the client request as to how it needs the data or in what format the data can be best viewed on the client. So depending on which client has requested the data, we can decide what format of the data should be sent to the client.

As shown above, if the request comes from IE 3.x and Netscape, the data is totally processed at the server and the resultant HTML is sent to the client. If the request comes from IE 4.x then the XML data can be sent to the client and using the Data Binding support of the browser, XML can be bound directly to the HTML controls at the client thus reducing the processing of the data at the server.

If the request comes from IE 5.x, which has direct XML support along with XSL, then the XML data file along with the corresponding XSL file, can be sent directly to the browser and again the process will be done on the client end instead of the server.

Instead of converting the data for different types of browsers as discussed above, we could also process the data at the server completely using XSL and send HTML for all the browsers, but this won't give us the flexibility of using the client resources if we want to. So this again depends on how you want to implement your application for various clients.

If the request comes from a mobile, then the server side data process is done using XSL and WML is sent to the client for mobile interface. This way of implementation not only makes the maintenance easy but also increases the flexibility of adding more interfaces to the same application just by adding different styles for different clients.

I will explain these interfaces in the following article along with sample codes wherever possible. But first let's look at how can we generate the XML file using VBS.

Generating the XML

Generating XML can be done in different ways:

• we can write a function which accepts a recordset and generates XML with user defined tags
• the in-built save method of ADO can be used to persist the recordset in XML format.

In our application, we will work with in-built methods that help us in getting the functionality required for our sample application.

Lets have a look at the VBS file code:

File Name: stocks.vbs

   ' VBS file to generate xml files..
   Const adPersistXML = 1
   tempPath = "c:\wml\article\temp-data\"
   finalPath = "c:\wml\article\"
   Set fso = CreateObject("Scripting.FileSystemObject")
   Set objConn = CreateObject("ADODB.Connection")
   strConnection = "Driver=sql server; server=alma; database=webmaster;uid=sa;pwd=;"
   objConn.open strConnection
   sql = "select * from scrips"
   sql1 = "select top 5 * from scrips order by change_percent desc"
   sql2 = "select top 5 * from scrips order by change_percent asc"
   createXML sql,"scrips.xml"
   createXML sql1,"top5gainers.xml"
   createXML sql2,"top5losers.xml"
   objConn.close
   Set objConn = nothing
   Set fso = nothing

   Sub createXML (query, filename)
      Set rs = objConn.Execute (query)
         If not (rs.eof and rs.bof) then
            Call deleteXMLFile (filename)
            rs.save "c:/wml/article/temp-data/"&filename, adPersistXML
            Call moveXmlFile (filename)
         End If
      Set rs = nothing
   End Sub

   Sub deleteXMLFile (filename)
      If fso.FileExists (tempPath&filename) then
         fso.DeleteFile tempPath&filename
      End If
   End Sub

   Sub moveXMLFile (filename)
         fso.CopyFile tempPath&filename, finalPath&filename, true
         fso.DeleteFile tempPath&filename
   End Sub

The above code uses the Built-in Save method of the ADO Recordset to convert the available recordset into XML and saves it in the temp-data folder. The XML is then copied from that folder to the required folder and deleted from temp-data.

Three different XML files are created for this sample application so that it can be easily represented to the client without doing any further processing on the same. This can also be done using only one XML file and processing the data in ASP/XSL but that will be repeated for every request. In order to minimize that processing on the server, three separate XML files are created.

Lets now have a look at one of the XML files - top5gainers.xml - that is persisted using the ADO Save method. The XML file that is generated contains the schema, which specifies both the structure of an XML document and constraints on its content:

   <s:ElementType name='row' content='eltOnly'>
      <s:attribute type='scrip_cd'/>
      <s:attribute type='scrip_name'/>
      <s:attribute type='open_price'/>
      <s:attribute type='high_price'/>
      <s:attribute type='low_price'/>
      <s:attribute type='current_price'/>
      <s:attribute type='change_percent'/>
      <s:attribute type='last_traded_dt'/>
      <s:extends type='rs:rowbase'/>
   </s:ElementType>

The above XML declares that the scrip_cd, scrip_name, open_price, high_price, low_price, current_price, change_percent and last_traded_dt are the only attributes allowed in the row element.

   <s:AttributeType name='scrip_cd' rs:number='1'>
      <s:datatype dt:type='int' dt:maxLength='4' rs:precision='10' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='scrip_name' rs:number='2' rs: writeunknown='true'>
      <s:datatype dt:type='string' dt:maxLength='30' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='open_price' rs:number='3' rs: writeunknown='true'>
      <s:datatype dt:type='number' dt:maxLength='19' rs:scale='2' _
rs:precision='10' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='high_price' rs:number='4' rs: writeunknown='true'>
      <s:datatype dt:type='number' dt:maxLength='19' rs:scale='2' _
rs:precision='10' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='low_price' rs:number='5' rs: writeunknown='true'>
      <s:datatype dt:type='number' dt:maxLength='19' rs:scale='2' _
rs:precision='10' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='current_price' rs:number='6' rs: writeunknown='true'>
      <s:datatype dt:type='number' dt:maxLength='19' rs:scale='2' _
rs:precision='10' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='change_percent' rs:number='7' rs:writeunknown='true'>
      <s:datatype dt:type='number' dt:maxLength='19' rs:scale='2' _
rs:precision='5' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>
   <s:AttributeType name='last_traded_dt' rs:number='8' rs:writeunknown='true'>
      <s:datatype dt:type='dateTime' dt:maxLength='16' rs:scale='3' _
rs:precision='23' rs:fixedlength='true' rs:maybenull='false'/>
   </s:AttributeType>

The above XML defines the properties for each of the row element's attributes. This gives access to all the information required pertaining to the persisted recordset's field object.

   <z:row scrip_cd='3' scrip_name='scrip3' open_price='423.00' high_price='425.50' _
       low_price='420.10' current_price='421.00' change_percent='97.50' _
last_traded_dt='2000-11-27T12:44:57.467000000'/>
   <z:row scrip_cd='5' scrip_name='scrip5' open_price='90.00' high_price='102.00' _
low_price='99.00' current_price='100.00' change_percent='92.00' _
last_traded_dt='2000-11-27T12:44:57.483000000'/>
   <z:row scrip_cd='6' scrip_name='scrip6' open_price='600.45' high_price='604.00' _
low_price='599.00' current_price='602.00' change_percent='86.50' _
last_traded_dt='2000-11-27T12:44:57.483000000'/>
   <z:row scrip_cd='4' scrip_name='scrip4' open_price='219.00' high_price='221.00' _
low_price='219.00' current_price='220.10' change_percent='80.10' _
last_traded_dt='2000-11-27T12:44:57.467000000'/>
   <z:row scrip_cd='11' scrip_name='scrip11' open_price='530.00' high_price='531.00' _
low_price='530.00' current_price='530.00' change_percent='60.40' _
last_traded_dt='2000-11-27T12:44:57.530000000'/>

The persisted rows in the recordset are as shown above. The row count will equal the z:row element count. The attribute names are the field names and the attribute values are the field values.

This VBS file can be scheduled in the SQL Server 7.0 in jobs under SQL Server Agent, so that the XML file is generated at every minute. To do this, Open the Management | Jobs folder in SQL Enterprise Manager. Right-click and then New Job. You will need to specify the Job Name, frequency, database to affect and the script to use.

Using the above architecture, it's very easy to add an additional interface to the same application. In future, it might be possible that our watch is the client and to present the stock on watch interface will just require an additional XSL on the server.

We have seen the basic architecture of the web-based application with multiple interfaces and also the conversion of data into XML format using the save method of Recordset. Now I will explain different methods of using this XML data for the stocks application with different interfaces.

Determining the Client

The first thing, which the server requires is to identify which client has requested the page. This can be implemented using Server Variables of the Request object in ASP as shown below. The first course of action is to determine whether the client is a conventional or a mobile browser. The following code fragment displays how this is done.

<%@ Language=VBScript %>
<%
user_agent = Request.ServerVariables("HTTP_USER_AGENT")
if InStr(user_agent, "Mozilla") then
   if InStr(user_agent, "MSIE 5.") then
      Response.Write user_agent & "<br>Browser : Internet Explorer 5.x"
   elseif InStr(user_agent, "MSIE 4.") then
      Response.Write user_agent & "<br>Browser : Internet Explorer 4.x"
   else
      Response.Write user_agent & "<br>Browser : Internet Explorer 3.x or Netscape Navigator or any another."
   end if
else
%>
<% Response.ContentType = "text/vnd.wap.wml" %><?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="home" title="Reach Your Stocks">
      <p align = center><br/><b><%Response.Write user_agent%></b><br/></p>
   </card>
</wml>
<% end if %>

The code above checks whether the HTTP_USER_AGENT server variable contains "Mozilla" which is sent in an HTTP Request by the browser. By using this, we can detect whether a browser is accessing the application or a wap-enabled device.

If the browser sends the request, then it can be further checked for the type of browsers as shown in the above code.

As I mentioned earlier, the only check made is whether the request is coming from a mobile or from a browser. The output on Nokia 7110 wapalizer at http://www.gelon.net/?WROXEMPTOKEN=1660022ZdTEJwhMff8Sqb6OsAA is as shown below with basic deck and a card displaying the user agent. I assume that readers are familiar with basic WML code and if not then they can refer to articles listed below.

Now we have to just format the data accordingly for the particular client. In this article, I will consider the browser request and will accordingly format the data for different clients.

Since the site's data is already in XML format, our next step is to access the file and display it in a format which is compatible with the browser requesting it.

This can be done in different ways as:

• The XML recordset can be directly read into ActiveX Data Objects and then formatted accordingly for the required client.
• The XML recordset can be formatted using XSL.

Lets consider top5gainers.xml file to be formatted using both of the above methods.

Using ActiveX Data Object Method:

<%@ Language=VBScript %>
<%
   Set objRs = Server.CreateObject ("ADODB.Recordset")
   objRs.Open Server.MapPath("top5gainers.xml")
      if not (objRs.EOF and objRs.BOF) then
         Response.Write "<table cellpadding=1 cellspacing=1 border=1>"
         Response.Write "<tr>"
         For i = 0 to objRs.Fields.Count-1
            Response.Write "<td><b>" & objRs.Fields(i).Name & "</b></td>"
         Next
         Response.Write "</tr>"
         Do while not objRs.EOF 
            Response.Write "<tr>"
            For i = 0 to objRs.Fields.Count-1
               Response.Write "<td>" & objRs(i) & "</td>"
            Next
            Response.Write "</tr>"
            objRs.MoveNext 
         Loop
         Response.Write "</table>"
      end if
   objRs.Close
   Set objRs = nothing
%>

In the above code, the only important method is the Recordset's Open method, which directly reads the XML file and converts it into the recordset and then can be easily formatted into HTML or any required format.

Using XSL Method:

As we know, XML defines the data and XSL formats the data. Using XSL along with XML data, we can format the XML data files into the required HTML format for the web browser at the server so that the client's browser just receives HTML code and no processing takes place at the client. IE 5.x however, supports XSL, and it may be preferential to send the XML to the client to do the processing and free up server resources.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
   <xsl:template match="/">
   <HTML>
   <BODY>
   <TABLE BORDER="2">
      <TR>
         <TD><b>Scrip Code</b></TD>
         <TD><b>Scrip Name</b></TD>
         <TD><b>Open Price</b></TD>
         <TD><b>High Price</b></TD>
         <TD><b>Low Price</b></TD>
         <TD><b>Current Price</b></TD>
         <TD bgcolor="lightblue"><b>Change Percent</b></TD>
         <TD><b>Last Traded At</b></TD>
      </TR>
      <xsl:for-each select="xml/rs:data/z:row">
         <TR>
            <TD><xsl:value-of select="@scrip_cd"/></TD>
            <TD><xsl:value-of select="@scrip_name"/></TD>
            <TD><xsl:value-of select="@open_price"/></TD>
            <TD><xsl:value-of select="@high_price"/></TD>
            <TD><xsl:value-of select="@low_price"/></TD>
            <TD><xsl:value-of select="@current_price"/></TD>
            <TD bgcolor="lightblue"><xsl:value-of select="@change_percent"/></TD>
            <TD><xsl:value-of select="@last_traded_dt"/></TD>
         </TR>
      </xsl:for-each>
   </TABLE>
   </BODY>
   </HTML>
   </xsl:template>
</xsl:stylesheet>

The above code consists of the basic XSL code to just loop through the provided XML file and display the data in a tabular format. For more detailed information of XSL refer the articles listed below. The code for the server side in ASP to process the XML data file with this XSL file is shown below:

<%@ LANGUAGE = VBScript %>
<%
  ' Set the source and style sheet locations here
  Dim sourceFile, styleFile, source, style
  sourceFile = Server.MapPath("top5gainers.xml")
  styleFile = Server.MapPath("top5scrips.xsl")
  
  ' Load the XML 
  set source = Server.CreateObject("Microsoft.XMLDOM")
  source.async = false
  source.load(sourceFile)

  ' Load the XSL
  set style = Server.CreateObject("Microsoft.XMLDOM")
  style.async = false
  style.load(styleFile)

  Response.Write(source.transformNode(style))
%>

The above code transforms the required XML data into HTML format, which is sent to any browser since its just HTML and doesn't have any browser specific code.

The above methods can be used to format the XML data and also if needed for Internet Explorer 5.x, the XML file can be formatted at the client end itself as shown below:

<html>
<body>
<script language="javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("top5gainers.xml")

// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("top5scrips.xsl")

// Transform
document.write(xml.transformNode(xsl))
</script>

</body>
</html>

Both the above methods of formatting XML data using XSL are same except the transformation step is taking place at server in the first case and at the client in the second case. This depends on the developers or the requirements whether to use the server side scripting for the transformation or to use the client end if available.

These methods shown above have the basic code to generate HTML output but it depends on developers to add the DHTML related code for the required browsers to add additional functionalities.

Stock Exchange Application Demo:

Lets have a look at the stock exchange application that we discussed at the start of the article. The entire flow is shown below and the code is available in the download.

As shown in the above figure, the XML data tier consists of the data that's required on the site and is generated and updated at regular intervals by scheduling the VBS files as discussed earlier. Top 5 Gainers and Top 5 Losers are formatted using the respective XSL files and the Online Price Finder is implemented using ADO by first reading the XML data into a Recordset and then using the Filter property of the ADO Recordset object.

The way we implemented our application as discussed so far, has kept the presentation separate from the data. This not only helps us to generate multiple views of the same data using different formats but also gives us the flexibility of using the same data elsewhere on the site and also if required to distribute the data to other portal sites for their use in their own way.

In the next section we will look further into how to make some changes to the above implementation to make the application available for mobile devices..

Wireless Application Protocol (WAP)

WAP enables wireless devices to access the Internet directly through a micro-browser. This technology turns wireless phones and other portable devices such as personal digital assistants (PDA's), pagers and television-based web browsers into information platforms.

These devices can be used to conduct business by connecting via the Internet. They can access Web based applications such as online stock details, email, weather and traffic alerts, news, e-commerce and banking services and many more provided the applications support and generate the mark-up language that is used on their micro-browsers.

Instead of maintaining different versions of web applications for different clients, the best way is to generate the output of the application depending upon the request from the particular device or user agent. XML plays an important role in this mobile computing. It helps to define the data and then transform it in the required format as per the request of the client.

Previously, I explained basic architecture for web applications and how XML has been used between the layers to help in presenting the data to different clients.

Now let's see how to access the same web based stock application through a mobile interface. The micro-browsers understand WML (Wireless Markup Language), which is to WAP as HTML is to web. The basic introduction and details of WAP and WML basics can be found in the articles listed below.

Accessing Stock Application Using WAP:

In this sample application, introduced above, the data that is to be presented to the client is stored in XML format and updated every minute by the VBS file that is scheduled at SQL Server 7.0. Depending on the user agent request, the XML data is transformed into HTML for browsers and WML for micro-browsers. To test the web application for mobile, I used the Nokia 7110 Wapalizer at http://www.gelon.net/?WROXEMPTOKEN=1660022ZdTEJwhMff8Sqb6OsAA.

Let's have a look at the block diagram shown below for a part of a stock application to access Top 5 Gainers using Web Browser and Mobile:

In the above block diagram, the default page is the URL of the web application, which can be accessed using a web browser as seen above. But now the same can be accessed using a mobile interface also.

In the default page code as shown below, the request is identified as coming from browser or from some other device by accessing HTTP_USER_AGENT of the Server Variables of the Request Object. The browser checks for Mozilla in its HTTP_USER_AGENT value and accordingly the corresponding file is included. For the browser request, the home.asp file is included and for other requests home_wml.asp is included.

<%@ Language=VBScript %>
<%
user_agent = Request.ServerVariables("HTTP_USER_AGENT")
if InStr(user_agent, "Mozilla") then
%>
   <!-- #include file = "home.asp" -->
<%else%>
   <!-- #include file = "home_wml.asp" -->
<%end if%>

The code for home.asp is just plain HTML and hence not discussed in this article. The output of that file on the browser is as shown below:

The same URL when accessed using Nokia 7110 wapalizer, includes home_wml.asp and the output is as shown below:

The code for home_wml.asp is as shown:

<% Response.ContentType = "text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
   <template>
      <do type="prev" label="back">
         <prev/>
      </do>
   </template>
   <card id="home" title="Reach Stocks" ontimer="#menu">
      <timer value="50" />
      <br/>
      <anchor>
         <p align = center><strong><b>Welcome <br/>@ <br/>Stocks</b></strong><br/></p>
         <go href="#menu" />
      </anchor>
   </card>
   <card id="menu" title="Reach Stocks">
      <br/>
      <p>
         <a href="top5gainers.asp">Top 5 Gainers</a><br/>
         <a href="top5losers.asp">Top 5 Losers</a><br/>
         <a href="price_finder.asp">Online Price Finder</a>
      </p>
   </card>
</wml>

In the above code, the first line sets the content-type of the document that follows. The above code contains pure WML code except for the first line, which sets the content type in ASP because some web servers may not allow the setting of MIME type. Remaining part of the WML is the basic code where a wml deck is created using two cards, the first with the timer element that automatically moves to the next card after an interval of 5 seconds. This is used just to present an intro card that can be a company logo if required. The second card has just 3 links similar to that of the browser output.

Since both interfaces have their links on the default page, it falls on the development team to implement the interface in their best way.

• In the first method, top5gainers.asp can be two different files in different locations, one for browsers and another for the mobile device.
• Another way of doing it is to check browser type in top5gainers.asp itself and then the corresponding XSL file can be used.

In this demo application I have considered again both the interfaces requesting the same top5gainers.asp file for the Top 5 Gainers in the Stocks, the code for which is shown below:

<%@ LANGUAGE = VBScript %>
<%
   ' Set the source and style sheet locations here
   dim sourceFile, styleFile, source, style
   user_agent = Request.ServerVariables("HTTP_USER_AGENT")
   sourceFile = Server.MapPath("top5gainers.xml")
   ' Load the XML 
   set source = Server.CreateObject("Microsoft.XMLDOM")
   source.async = false
   source.load(sourceFile)
   ' Load the XSL
   set style = Server.CreateObject("Microsoft.XMLDOM")
   style.async = false
   if InStr(user_agent, "Mozilla") then
      styleFile = Server.MapPath("top5gainers.xsl")
      style.load(styleFile)
      Response.Write(source.transformNode(style))
   else
      styleFile = Server.MapPath("top5gainerswml.xsl")
      style.load(styleFile)
      Response.ContentType = "text/vnd.wap.wml"
      Response.Write(source.transformNode(style))
   end if
%>

In the above code, again the check is made for the user agent and depending upon the request, the corresponding XSL file is used in the above code. For a web interface, top5gainers.xsl style sheet is used whereas for a Mobile interface top5gainerswml.xsl is used, both accessing the same top5gainers.xml data file and transforming the data to the required format.

The code for top5gainerswml.xsl is as shown below:

<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
                xmlns="http://www.w3.org/TR/wbxml">
<xsl:template match="/">
<xsl:pi name="xml">version='1.0'</xsl:pi>
<xsl:eval no-entities="true">
'<![CDATA[<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">]]>'
</xsl:eval>  
<wml>
<card id="home" title="Top 5 Gainers">
   <table border="1">
     <tr>
       <td><small><b>Scrip Name</b></small></td>
       <td><small><b>Current Price</b></small></td>
     </tr>
     <xsl:for-each select="xml/rs:data/z:row">
       <tr>
         <td><small><xsl:value-of select="@scrip_name"/></small></td>
         <td><small><xsl:value-of select="@current_price"/></small></td>
       </tr>
     </xsl:for-each>
   </table>
</card>
</wml>
</xsl:template>
  <xsl:template match="p">
    <xsl:apply-templates/><br />
  </xsl:template>
</xsl:stylesheet>

The code at the top generates the DOCTYPE that is difficult to generate through XSL but I found the solution after going through Building WAP Services by Luca Passani. The remaining part of the style sheet just loops through the XML data file and displays the records with just scrip (company) details, just scrip name and current price of the scrip as the mobile interface has a limited display area.

The mobile interface output for the Top 5 Gainers and also for the Top 5 Losers generated in the same way is as shown below:

Above we had seen how to access the Top 5 Gainers and Top 5 Losers on the mobile device; but for the last link "Online Price Finder", I have implemented it differently to the web interface as discussed below.

When Online Price Finder is clicked on mobile interface, price_finder.asp is accessed, the code for which is as shown below:

<% Response.ContentType = "text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
   <template>
      <do type="prev" label="back">
         <prev/>
      </do>
   </template>
   <card id="menu" title="Online Prices">
      <br/>
      <do type="accept" label="submit">
         <go href="pf_dbwml.asp" method="post">
            <postfield name="scrip_name" value="$(scrip_name)">
         </go>
      </do>
      <small><b><strong>Scrip Name : </strong></b></small>
      <input type="text" name="scrip_name" size=4/>
   </card>
</wml>

In the above code, a form is displayed on the interface as shown below, with a text box to enter the scrip name, for which the last traded price is to be viewed.

When scrip name or its starting characters are entered, and Menu is clicked, a submit link is available as shown above. Different interfaces can also be provided with a Submit link below the text box if required. Once the form is submitted, the action page pf_dbwml.asp is accessed, the code for which is shown below:

<%@ Language=VBScript %>
<%
   scrip_name = Trim(Request ("scrip_name"))
%>
<% Response.ContentType = "text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
   <template>
      <do type="prev" label="back">
         <prev/>
      </do>
   </template>
   <card id="menu" title="Online Prices">
      <table columns="2">
      <%
      if scrip_name <> "" then 
         Set objRs = Server.CreateObject("ADODB.Recordset")
         objRs.Open Server.MapPath("scrips.xml")
         objRs.MoveFirst 
         objRs.Filter = "scrip_name like '"&scrip_name&"%'"
         If Not (objRs.EOF) Then
            Response.Write "<tr><td><b><small>Scrip Name</small></b></td>"
            Response.Write "<td><b><small>Current Price</small></b></td></tr>"
            Do While not objRs.EOF
               Response.Write "<tr><td>" & objRs("scrip_name") & "</td><td>" & _
                                           objRs("current_price") & "</td></tr>"
               objRs.MoveNext 
            Loop
            Response.Write "</table>"
         Else
            Response.Write "<tr><td colspan=2>No Records Found.</td></tr>"
         End If
         objRs.Close 
         Set objRs = nothing
      end if
      %>
      </table>
   </card>
</wml>

In the above code, XML data is opened into the recordset using ADO's Open method and filters the data by scrip name starting with the entered text. Once it finds the data, it is displayed using ASP. Another interface with options similar to the web interface is left as an assignment for the readers.

The results of the price finder is as shown below:

Thus, the same stock application can be accessed by mobile with either similar interfaces or different interfaces as required for the mobile device.

Sample Code

The sample code is available for the download. The setup required to execute is just to copy all the files into the web and then access the default page though the browser or through the wapalizer. Also basic mime type settings are to be done on the web server as discussed in the articles listed below.

Conclusion

In this article, we have discussed accessing the stock application through web browsers and a mobile interface. Also from this we can conclude that developing a web application with multiple interfaces adds to the application's functionality and flexibility. In the near future, we might require the same stocks information on a watch display, and the data can be accessed and transformed into the required format using just the techniques discussed in this article.

Links

The Wapalizer
http://www.gelon.net/?WROXEMPTOKEN=1660022ZdTEJwhMff8Sqb6OsAA

Building WAP Services
http://www.webtechniques.com/archives/2000/03/passani/?WROXEMPTOKEN=1660022ZdTEJwhMff8Sqb6OsAA