162 Chapter 4 • Enhancing Client-Side Functionality with WMLScript Using WMLScript and Microsoft Active Server Pages (ASP): Case Study We have seen how WMLScript can be used to perform client-side validation and to complement WML applications that run on a WAP device. One particular appli- cation that is very popular is a currency converter. However, the conventional cur- rency converter usually hardcodes the exchange rate in the WMLScript program. Once the WMLScript is downloaded onto the device, it is cached and any changes to the currency conversion rate would not be reflected in the application. In this case study, we will illustrate how you can use ASP to create a truly dynamic WMLScript program using the currency converter application as a case study. Our currency converter is able to reflect the daily changes in the exchange rates. Designing the Application A currency converter application often is used to illustrate the use of WMLScript. For this example, we will use the UP.Simulator provided by Openwave. Figure 4.16 and Figure 4.17 illustrate the desired outcome of our application. www.syngress.com Figure 4.16 Selecting the USD Option to Convert from, and Keying the Amount to Convert Figure 4.17 Selecting the SIN Option to Convert to, and Viewing the Result of the Conversion 159_wg_wi_04 10/22/01 4:34 PM Page 162 Enhancing Client-Side Functionality with WMLScript • Chapter 4 163 The user simply chooses the currency to convert from, keys in the amount to be converted, and selects the target currency.The converted currency would then be displayed. Creating the Database Our application makes use of a database containing a single table named Conversion.The database table can be seen in Figure 4.18. This table simply contains the exchange rate of currencies.The exchange rate is tagged to a fixed currency, the Singapore dollar in this case. For example: 1 USD (US Dollar) = 1.73 SIN (Singapore Dollar) 1 RM (Malaysian Ringgit)= 0.48 SIN Converting from one currency to another is a two-step process. For example: 1. To convert 15 USD to RM, first convert the USD to SIN: 15 * 1.73 = 25.95 SIN 2. Then convert the SIN to RM: 25.95 / 0.48 = 54.0625 RM The Conversion table contains two fields: Currency and SinEquiv.The Currency field contains the currency name and the SinEquiv field contains the equivalent amount of the currency in Singapore dollar. The WML Deck Let’s take a look at the WML deck that loads the application.The code can be seen in Figure 4.19. www.syngress.com Figure 4.18 Our Database Contains One Table Named Conversion 159_wg_wi_04 10/22/01 4:34 PM Page 163 164 Chapter 4 • Enhancing Client-Side Functionality with WMLScript Figure 4.19 Currency.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="card1" title="Currency"> <p> Currency to convert from: <select name="fromCurrency"> <option value="USD">US$$</option> <option value="SIN">S$$</option> <option value="RM">RM</option> </select> Enter Currency: <input type="text" name="amount" format="*N"/> Currency to convert to: <select name="toCurrency"> <option value="USD">US$$</option> <option value="SIN">S$$</option> <option value="RM">RM</option> </select> <do type="accept" label="Calculate"> <go href="Calculate.asp#Convert($(amount))"/> </do> </p> </card> <card id="card2" title="Note"> <p> Please select a different currency. </p> </card> </wml> There are two cards within the deck.The first card takes care of user input, and once the user is done with it, links to the WMLScript: <go href="Calculate.asp#Convert($(amount))"/> www.syngress.com 159_wg_wi_04 10/22/01 4:34 PM Page 164 Enhancing Client-Side Functionality with WMLScript • Chapter 4 165 Notice that we did not link to a WMLScript file with the .wmls file exten- sion. Instead, we have pointed the deck to an ASP file.We are going to use Microsoft Active Server Pages to dynamically generate the WMLScript program. The amount to be converted is also passed as an input parameter to the function named Convert(). Generating the WMLScript Program from ASP In the early days of the Web, most of the pages were static—content remains the same unless it was changed by a webmaster or a Web designer. However, with the explosive growth of the Internet (and the World Wide Web), people have realized the importance and necessity of dynamic content.And very soon after, different technologies were developed to enable Web sites to publish content that was dynamic, through the use of server-side technologies.A good example would be CGI scripts that return stock pages when requested.These pages often contain information stored in a database. Some of the other server-side technologies/products include: ■ Microsoft Active Server Pages (ASP) ■ Java Server Pages (JSP) ■ ColdFusion Application Server ■ PHP Hypertext Preprocessor (PHP) In this example, we will illustrate server-side processing using Microsoft ASP. Readers who are not familiar with ASP could refer to the following sources for learning ASP: ■ www.w3schools.com/asp/default.asp ■ www.learnasp.com The listing in Figure 4.20 shows the ASP document generating the WMLScript program. Figure 4.20 Calculate.asp <!—#INCLUDE file="adovbs.inc" —> <% Response.ContentType="text/vnd.wap.wmlscript" if hour(time())>=0 AND minute(time())>=00 AND hour(time())<8 AND minute(time())<=59 then www.syngress.com Continued 159_wg_wi_04 10/22/01 4:34 PM Page 165 166 Chapter 4 • Enhancing Client-Side Functionality with WMLScript Response.ExpiresAbsolute = MonthName( month(date()) , true) & " " & day(date()) & " 8:00:00" else Response.ExpiresAbsolute = MonthName( month(date()+1) , true) & " " & day(date() + 1) & " 8:00:00" end if %> extern function Convert(amount){ var origAmt=amount; var fromCurrency = WMLBrowser.getVar("fromCurrency"); var toCurrency = WMLBrowser.getVar("toCurrency"); if (String.compare(fromCurrency,toCurrency)==0) { WMLBrowser.go("currency.wml#card2"); return; } <% Dim rs Set rs = Server.CreateObject("ADODB.Recordset") connStr = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("currency.mdb") & ";" rs.Open "Conversion", connStr, adOpenKeySet, adLockOptimistic %> var USD =<% rs.Find "Currency = 'USD'" response.write rs("SinEquiv") %>; var SIN =<% rs.MoveFirst rs.Find "Currency = 'SIN'" response.write rs("SinEquiv") %>; var RM = <% rs.MoveFirst rs.Find "Currency = 'RM'" response.write rs("SinEquiv") %>; if (fromCurrency=="USD") { www.syngress.com Figure 4.20 Continued Continued 159_wg_wi_04 10/22/01 4:34 PM Page 166 Enhancing Client-Side Functionality with WMLScript • Chapter 4 167 amount = USD * amount; } else if (fromCurrency=="RM") { amount = RM * amount; } if (toCurrency=="USD") { amount = amount / USD; } else if (toCurrency=="RM") { amount = amount / RM; } amount *=1.0; var str = origAmt + " " + fromCurrency + " is " ; Dialogs.alert(str + String.format("%.2f",amount) + " " + toCurrency); } We use ASP to dynamically generate the WMLScript program.The reason for this is that we want to load the currency exchange rate from a database so that it is always current. By doing that, the user is always using the latest exchange rate for conversion. However, there is a little problem is doing this.As database access is required, it could be a time-consuming affair if we generate the WMLScript program every time someone needs to use the application. In a Web environment where concurrency is an important factor in determining the success of your site, this problem is going to drastically slow down your server. Fortunately, the nature of this application does not require that the user require up-to-the-minute exchange rates. It would be reasonable if the exchange rates were updated once a day. To solve this problem, we make use of the caching property of WMLScript on the device.What we could do is to set the expiration date of the WMLScript to every morning at 8:00 A.M.When a user accesses the application after 8:00 A.M., or loads the application for the first time, the WMLScript is fetched from the server and cached for later use. Subsequent usage would then be loaded from the cache. www.syngress.com Figure 4.20 Continued 159_wg_wi_04 10/22/01 4:34 PM Page 167 168 Chapter 4 • Enhancing Client-Side Functionality with WMLScript Let’s now take a closer look at our WMLScript file: <!—#INCLUDE file="adovbs.inc" —> Since we are using ActiveX Data Objects (ADO) for database access, we need to include the adovbs.inc file containing all the ADO constants used by VBScript. <% Response.ContentType="text/vnd.wap.wmlscript" Remember that since we are generating the WMLScript file dynamically, we need to explicitly set the MIME type in the ASP document using the Response.ContentType property. Note that a pair of <% %> tags encloses the ASP codes (VBScript in this case). if hour(time())>=0 AND minute(time())>=00 AND hour(time())<8 AND minute (time())<=59 then Response.ExpiresAbsolute = MonthName( month(date()) , true) & " " & day(date()) & " 8:00:00" else Response.ExpiresAbsolute = MonthName( month(date()+1) , true) & " " & day(date() + 1) & " 8:00:00" end if The next portion of the code determines the expiration date of the WMLScript.The checking is simple: if the user loads the ASP document after 12 midnight, the expiration date would be set to 8:00 A.M the same day. If the ASP document is loaded after 8:00 A.M., the expiration date would then be set to 8:00 A. M. the next day.To set the expiration date, use the Response.ExpiresAbsolute property.The date format looks like this:“Oct 21 8:00:00”. function Convert(amount){ var origAmt=amount; var fromCurrency = WMLBrowser.getVar("fromCurrency"); var toCurrency = WMLBrowser.getVar("toCurrency"); Next we have the Convert() function. For a WMLScript function to be callable from WML, it needs to have the extern keyword.Within the function we defined three variables using the var keyword.The first variable is used to store the original amount to be converted, and the next two variables retrieve the two currencies involved in the conversion. In order for WMLScript to interact with WML, you can use the WMLBrowser library.There are a number of functions www.syngress.com 159_wg_wi_04 10/22/01 4:34 PM Page 168 Enhancing Client-Side Functionality with WMLScript • Chapter 4 169 within the library that allow you to communicate with the WML deck.The getVar() function retrieves the values of WML variables. Before we start the conversion, we want to make sure that the two currencies involved are not identical. For string comparisons, use the compare() function from the String library. If they are identical, load the second card in the WML deck and exit the WMLScript function using the return keyword. if (String.compare(fromCurrency,toCurrency)==0) { WMLBrowser.go("currency.wml#card2"); return; } Because we are getting the conversion rates from a database, we need to use ADO for data access. <% Dim rs Set rs = Server.CreateObject("ADODB.Recordset") connStr = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("currency.mdb") & ";" rs.Open "Conversion", connStr, adOpenKeySet, adLockOptimistic %> Once the records in the database are retrieved, we proceed to assign the indi- vidual rate to the respective variables. var USD =<% rs.Find "Currency = 'USD'" response.write rs("SinEquiv") %>; var SIN =<% rs.MoveFirst rs.Find "Currency = 'SIN'" response.write rs("SinEquiv") %>; var RM = <% rs.MoveFirst rs.Find "Currency = 'RM'" response.write rs("SinEquiv") %>; www.syngress.com 159_wg_wi_04 10/22/01 4:34 PM Page 169 170 Chapter 4 • Enhancing Client-Side Functionality with WMLScript The Find() method of the Recordset object is used to locate the correct record to assign to the variables. Note that after the first variable is assigned, you need to perform a MoveFirst() operation so as to ensure that the search always begin from the first record.Also, recall earlier that we opened the recordset using the adOpenKeyset cursor: rs.Open "Conversion", connStr, adOpenKeySet, adLockOptimistic This is important because using the default cursor (adOpenForwardOnly) will cause the MoveFirst() method to fail. Finally, we perform the conversion: if (fromCurrency=="USD") { amount = USD * amount; } else if (fromCurrency=="RM") { amount = RM * amount; } if (toCurrency=="USD") { amount = amount / USD; } else if (toCurrency=="RM") { amount = amount / RM; } The result is then displayed using the alert() function from the Dialogs library. amount *= 1.0; var str = origAmt + " " + fromCurrency + " is " ; Dialogs.alert(str + String.format("%.2f",amount) + " " + toCurrency); } The format() function from the String library formats the result to two decimal places. Debugging the WMLScript One of the difficulties that we found when coding this application is deciding how to troubleshoot your WMLScript when you are faced with problems. Since we are using the UP.Simulator for this application, we naturally turn to the Phone Information window for help when it comes to debugging. www.syngress.com 159_wg_wi_04 10/22/01 4:34 PM Page 170 Enhancing Client-Side Functionality with WMLScript • Chapter 4 171 Apart from some of the syntax errors that would quite often emerge, another tricky problem is with caching.You need to ensure that the WMLScript file is cached and used at the right time. Let’s discuss the first problem, syntax error. Syntax error can be detected easily using the Phone Information window. For example, assume we have the fol- lowing error in our WMLScript program: var USD =<% rs.Find "Currency = 'USD'" response.write rs("SinEquiv") %> // missing ";" This error will generate an error in the compilation process, and the deck shown in Figure 4.21 would be displayed. Looking into the Phone Information window (see Figure 4.22) reveals the following source of error. (25) : error: syntax error at "var" missing ; www.syngress.com Figure 4.21 The UP.Simulator Displaying an Error Message Figure 4.22 Looking into the Phone Information Window for Sources of Error 159_wg_wi_04 10/22/01 4:34 PM Page 171 . currency to another is a two-step process. For example: 1. To convert 15 USD to RM, first convert the USD to SIN: 15 * 1.73 = 25.95 SIN 2. Then convert the SIN to RM: 25.95 / 0.48 = 54.0625 RM The. if The next portion of the code determines the expiration date of the WMLScript .The checking is simple: if the user loads the ASP document after 12 midnight, the expiration date would be set to. set to 8:00 A.M the same day. If the ASP document is loaded after 8:00 A.M., the expiration date would then be set to 8:00 A. M. the next day .To set the expiration date, use the Response.ExpiresAbsolute property.The