Sample Applications

In this last section, we will focus on two practical applications of WMLScript. The first application is an animation. Using <timer> and WMLScript, we'll bounce back and forth between a WML deck (which will display each frame of the animation), and a WMLScript file, which will control the inter-frame delay and set the new frame in the sequence.

The second application will be a currency exchange calculator. It allows users to convert between five different currencies without requiring an application server to process the logic.

Animation with WMLScript

The image files associated with the following animation sequence can all be found on the CD-ROM. Rather than walk through the code one line at a time, we will step through the logic of the application to analyze its functions and logic (see Listing 9.7).

The card in the animate.wml deck is contained in just a launch for the animation sequence, and a place to return to once the animation is completed.

The action starts in card1. The variable image is set to the first frame of the animation, and the cells variable is set to indicate the number of frames in the animation sequence. The <timer> element is used to load animate.wmls and pass in the first image number. The WMLScript file determines the current value of cells (the number of steps left in the sequence), and decrements it. If the number of remaining cells is greater than 0, the value of image is incremented and control is passed back to the browser to load the next image. This sequence works because the image files are numbered sequentially. When the cells value reaches 0, the loop stops, and the user is returned back to the start card.

Listing 9.7 Simple Animation with WML and WMLScript
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
           "http://www.wapforum.org/DTD/wml12.dtd">

<wml>
      <card id="start">
       <do type="accept" label="Go!">
          <go href="#card1"/>
        </do>
        <p>
         Sample Animation Code
        </p>
    </card>

    <card id="card1">
     <onevent type="onenterforward">
      <go href="#card2">
       <setvar name="cells" value="13"/>
       <setvar name="image" value="1"/>
      </go>
     </onevent>
     <onevent type="ontimer">
      <go href="animate.wmls#main($image)"/>
     </onevent>
     <timer value="20"/>
    </card>

    <card id="card2">
       <onevent type="ontimer">
        <go href="animate.wmls#main($image)"/>
       </onevent>
       <timer value="20"/>
       <p align="center"><img alt="animate $image" src="$(image).bmp"/></p>
       <p align="center">Sample Animation</p>
    </card>
</wml>




extern function main(imageno){
    var remainingCells = Lang.parseInt(WMLBrowser.getVar("cells"));
    remainingCells -= 1;
    WMLBrowser.setVar("cells", remainingCells);

    if (remainingCells > 0)
       {
       imageno++;
       WMLBrowser.setVar("image", imageno);
       WMLBrowser.go("animate.wml#card2");
       }
    else {
       WMLBrowser.go("animate.wml#start");
       }
}

Currency Converter

This next application lets you select a denomination to convert from, the amount, and the denomination you want to convert to. This is an example of using WMLScript to perform a routine, practical task without the need for an application server. The only load on your content server will be to load the files into the client WAP browser.

We ask the user for all the information up front and then pass it into the WMLScript for processing. The conversion rate values are all hard-coded. In a real application, you want them to be dynamic, but you still want to avoid application server processing for each hit. You could use your application server to generate the WMLScript file once or more a day with the exchange rates embedded.

Once the WMLScript determines the result, it returns it to the WML deck that called it, which displays the value on the screen.

In order to keep the code efficient, the application considers the U.S. dollar as the base currency. When the user selects a start currency other than the U.S. dollar, the value is converted first to U.S. dollars, and then to the destination currency. This WMLScript file contains two functions within it:

  • convert() serves as the entry and exit point into the script functionality. It makes the WMLBrowser.getVar() and WMLBrowser.setVar calls, and also calls convertVal() to perform the math function.

  • convertVal(scur, ecur, curVal) does the math work by converting the value.

This currency converter application has error checking built in a couple of locations. First of all, the <input> element contains a format mask of *N. This allows the user to enter only numeric data. The script checks to see that the value entered was not 0 to avoid divide by zero errors. Listing 9.8 contains both the WML and WMLScript that drive the application. The WML file is currency.wml and the WMLScript is converter.wmls.

Listing 9.8 Currency Conversion Using WML and WMLScript
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
           "http://www.wapforum.org/DTD/wml12.dtd">

<wml>

 <card id="first" >
 <onevent type="onenterforward">
    <refresh>
     <setvar name="startCur" value=""/>
     <setvar name="endCur" value=""/>
     <setvar name="cur" value=""/>
    </refresh>
   </onevent>

  <p>
   <do type="accept" label="conv">
    <go href="#destVal"/>
   </do>
     Currency converter!
     Convert from?
     <select name="startCur">
       <option  value="USD">USD</option>
       <option  value="Euro">Euro</option>
       <option  value="GBP">Pound</option>
       <option  value="DMark">D-Mark</option>
       <option  value="Franc">Franc</option>
       <option  value="Lira">Lira</option>
     </select>
  </p>
 </card>

 <card id="destVal">

  <p>
  <do type="accept" label="dest">
   <go href="#valCard"/>
  </do>

  Convert from $startCur to:
   <select name="endCur">
       <option  value="USD">USD</option>
       <option  value="Euro">Euro</option>
       <option  value="GBP">Pound</option>
       <option  value="DMark">D-Mark</option>
       <option  value="Franc">Franc</option>
       <option  value="Lira">Lira</option>
     </select>
  </p>
 </card>

 <card id="valCard">
  <onevent type="onenterforward">
   <refresh>
       <setvar name="cur" value=""/>
       <setvar name="ans" value=""/>
  </refresh> 
</onevent>
  <p>
  <do type="accept" label="conv">
   <go href="converter.wmls#convert()"/>
  </do>
   $startCur? (whole number)
   <input type="text" name="cur" format="*N"/>
 </p>
</card>

<card id="convD">
<p>
<do type="accept" label="new">
  <go href="#first">
  <setvar name="startCur" value=""/>
  <setvar name="endCur" value=""/>
  <setvar name="cur" value=""/>
  </go>
 </do>

 <do type="options" label="again">
  <go href="#valCard"/>
 </do>

  $cur in $startCur is $ans $endCur
 </p>
</card>
 </wml>

// converter.wmls
extern function convert(){
       var scur = WMLBrowser.getVar("startCur");
       var ecur = WMLBrowser.getVar("endCur");
       var cur = WMLBrowser.getVar("cur");
       var curVal = Lang.parseInt(cur);
       if(curVal){
        if(scur != ecur){  //if you're not converting, don't bother...
            var endval = convertVal(scur, ecur, curVal);
         }
        else {  endval = cur;}
        endval = String.format("%1.2f", endval);
        WMLBrowser.setVar("ans", endval);
        WMLBrowser.go("currency.wml#convD");
        }
       else{
               error(cur);
       }
}

function convertVal(scur, ecur, val){
        // set the conversion values
        var usd = 1;
        var euro = 1.0484;
        var lira = 2030.01;
        var dmark = 2.0505;
        var franc = 6.8771;
        var gbp = 0.6554;

        // convert it all to usd
        if (scur == "USD"){
        }  else if (scur == "Lira"){
               val = val / lira;
        }  else if (scur == "DMark"){
               val = val / dmark;
        }  else if (scur == "Franc"){
               val = val / franc;
        }  else if (scur == "GBP"){
               val = val / gbp;
        }  else if (scur == "Euro"){
               val = val / euro
        }


        // convert to dest currency
        if (ecur == "Lira"){           // going to Lira
               return(val*lira);
        } else if (ecur == "DMark"){    // going to Deutch Mark
               return(val*dmark);
        } else if (ecur == "Franc"){    // going to French Franc
               return(val*franc);
        } else if (ecur == "GBP"){      // going to Pound
               return(val*gbp);
        } else if (ecur == "Euro"){     // going to Euro
               return(val*euro);
        } else{                         // going to US Dollar
               return(val);
        }

}

}

The convert() function calls WMLBrowser.getVar to obtain the starting currency, the ending currency, and the value to convert. If the value is not zero, if(curVal), and the starting currency is not the same as the ending currency, if(scur != ecur), the conversion takes place.

var endval = convertVal(scur, ecur, curVal);

In the preceding statement, the return value of the convertVal function is assigned to a new variable endval. Since the operation takes place with floating point numbers, before the result is returned, String.format("%1.2f", endval) is used to trim the extra decimal places off of the result. I don't care that 20 dollars gets me 2.096800e+001 euros; 20.96 is good enough for me.

While arguable, it takes time for the WMLScript to be loaded up into the device, and theoretically, this time could have been used to simply serve up the values directly. Using WMLScript, however, repeated conversions can be completed without any data passing over the air.

Note

A more complete WMLScript Currency Converter is presented in Chapter 15.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.131.72