| |
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).
|
