| |
ECMAScript
(Continued from Part 1)
Here is a an implementation of the form:
<form id="makeMeRich">
<var name="pizza_cost" expr="10.00"/>
<block>
<if cond="orderItem =='pizza'">
<prompt>
Your <value expr="orderItem"/> will cost
<value class="currency" expr="orderCount * pizza_cost"/>
</prompt>
<else>
<prompt>
We don't really sell <value expr="orderItem"/>
</prompt>
</if>
</block>
</form>
|
The interesting bits are:
- We define a variable to be used for calculation (pizza_cost); it is then accessible from within an ECMAScript expression;
- We are referring to the document-scoped variables orderItem and orderCount here (without their scope designator, as there is no overloading of the name);
- We use an ECMAScript expression to calculate the cost: namely "orderCount * pizza_cost". This expression refers to the ECMAScript variables pizza_cost and orderCount (which are the same as the VoiceXML variables of the same name).
A second implementation of this is shown below:
<script>
<! [CDATA [
function pizzaCost(pizzas) {
return ( dialog.pizza.cost * pizzas );
}
]]>
</script>
<form id="makeMeRichToo">
<var name="pizza_cost" expr="10.00"/>
<block>
<if cond="orderItem" == 'pizza'">
<prompt>
Your <value expr="orderItem"/> will cost
<value class="currency" expr="pizzaCost(orderCount)"/>
<else/>
<prompt>
We don't really sell <value expr="orderItem"/>
</prompt>
</if>
</block>
</form>
|
In this example, we've moved the calculation into an ECMAScript function called pizzaCost, declared within the <script> element. Note that we've wrapped it in an XML CDATA block so that we don't have to escape the various character entities used by XML. The interesting bits here are:
- We refer only to the ECMAScript function in the VoiceXML using the expr="pizzaCost(orderCount)" attribute.
- We pass the ECMAScript variable 'orderCount' as a parameter to the function;
- The 'pizzaCost' function is doing the same calculation we performed before;
- We refer to the dialog scoped variable 'dialog.pizza_cost' which is declared within the form (and so has dialog scope). We could also have declared this in ECMAScript, or at a document level (or in an application root document for that matter);
- We could also have referred to the ECMAScript function with a URI reference; for example:
<script src=http://pizza.voicexmlreview.org/scripts/getrich.js/>
There are lots of ways to implement this kind of thing in ECMAScript, but I think you have the idea. Some things to keep in mind with ECMAScript:
- Watch out for scoping; DON'T overload your variable names (don't do as I do, do as I say);
- Build reusable libraries where appropriate;
- Use ECMAScript to handle minor bits of data handling and validation; use the server for the 'heavy lifting' jobs;
- Remember, try to keep the interface and the business logic separate (don't embed your CRM system in ECMAScript embedded in your VoiceXML).
What's Next?
We were also planning to talk about caching this month, but I've prattled on too long about ECMAScript. So, next month, we'll talk about caching, and how you can take advantage of the caching-related features provided by VoiceXML.
Watch future issues of VoiceXML Review for more articles about getting started with VoiceXML.
Here is a complete copy of the VoiceXML with both ECMAScript forms included.
<?xml version="1.0"?>
<vxml version="1.0">
<!NEW: We need to have a copy of these that we can use for all forms -->
<var name"orderItem"/>
<var name="orderCount"/>
<form>
<catch event="cancel">
Cancelling your order.
<clear namelist="orderItem orderNumber"/>
<reprompt/>
</catch>
<block>
<prompt>
Welcome to the VoiceXML Review pizza franchise
</prompt>
</block>
<field name="orderItem">
<grammar>
pizza | drinks | salad | wings
</grammar>
<dtmf>
1 {pizza} | 2 {drinks} | 3 {salad} | 4 {wings}
</dtmf>
<prompt>
What would you like to order?
We have pizza, drinks, salad, or wings.
</prompt>
<noinput>
Say pizza, drinks, salad, or wings.
</noinput>
<nomatch>
You can say pizza, drinks, salad, or wings.
</nomatch>
<help>
<reprompt/>
</help>
</field>
<field>
<prompt>
How many <value expr="orderItem"/> would you like?
</prompt>
<noinput>
I need to know how many <value expr="orderItem"/> you want.
</noinput>
<nomatch>
Please say how many <value expr="orderItem"/> you want.
</nomatch>
<help>
You should tell me how many items you want.
</help>
</field>
<filled>
<prompt>
One moment while I add
<value expr="orderCount"/>
<value expr="orderItem"/>
to your order.
</prompt>
<!-- New: we need to save a copy of our results -->
<assign name="document.orderItem" expr="orderItem"/>
<assign name="document.orderCount" expr="orderCount"/>
<!-- Rather than submitting, we transition the next form -->
<goto next="#makeMeRich"/>
</filled>
</form>
<form id="makeMeRich">
<var name="pizza_cost" expr="10.00"/>
<block>
<if cond="orderItem == 'pizza'">
<prompt>
Your <value expr="orderItem"/> will cost
<value class="currency" expr="orderCount * pizza_cost"/>
</prompt>
<else/>
<prompt>
We don't really sell <value expr="orderItem"/>
</prompt>
</if>
</block>
</form>
<script>
<![CDATA[
function pizzaCost(pizzas) {
return ( dialog.pizza_cost * pizzas );
}
]]>
</script>
<form id="makeMeRichToo">
<var name="pizza_cost" expr="10.00"/>
<block>
<if cond="orderItem == 'pizza'">
<prompt>
Your <value expr="orderItem"/> will cost
<value class="currency" expr="pizzaCost(orderCount)"/>
</prompt>
<else/>
<prompt>
We don't really sell <value expr="orderItem"/>
</prompt>
</if>
</block>
</form>
</vxml>
|
back to the top
Copyright © 2001 VoiceXML Forum. All rights reserved.
The VoiceXML Forum is a program of the
IEEE Industry Standards and Technology Organization (IEEE-ISTO).
|
