VoiceXML Developer Series: A Tour Through VoiceXML, Part III
Last time in VoiceXML Developer, we focused on creating a voice user interfaces with menus. In this edition of the VoiceXML Developer, we will introduce new VoiceXML elements and learn how to get user input with form fields, so buckle your seat belt, 'cause here we go!
Create metadata with <meta>
Like HTML, we can create metadata for VoiceXML documents by setting values with the <meta> element. This information may be used by search engines or other applications that access information such as author, copyright, and date.
<vxml version="1.0"> <meta content="Jonathan Eisenzopf" name="author" /> <meta name="maintainer" content="firstname.lastname@example.org" /> <meta content="Copyright 2001, VoiceXML Planet" name="copyright" /> <meta content="VoiceXML, tutorial, eisen, developer" name=" keywords" /> </vxml>
Set/access local variables with <var>, <value>, and <assign>
VoiceXML uses the <var> element for declaring variables in VoiceXML applications. To create a new variable for my email address, we would use the statement below:
<var name="email">We can define an initial value for the variable in the expr attribute. The example below initializes my name, address, and phone number with default values (that can be changed later):
<vxml version="1.0"> <var name="name" expr="'Jonathan Eisenzopf'" /> <var name="address" expr="'555 Hard Wood Lane'" /> <var name="phone" expr="'703-555-1212'" /> </vxml>
You can retreive the value of a variable by specifying the name in the expr attribute of the <value> element:
<vxml version="1.0"> <form id="form1"> <block>my name is <value expr="name" />I live at <value expr="address" />My phone number is <value expr="phone" /> </block> </form> </vxml>If you were to run the example above, you would here:
My name is Jonathan Eisenzopf I live at five five five hard wood lane my phone number is seven zero three five five five one two one two.
To set the value of a variable after it has been declared, name the variable in the name attribute of the <assign> element and specify the new value inside the expr attribute. For example, to change my phone number to 800-555-1212, I would use the assignment below:
<assign name="phone" expr="800-555-1212">
Set the application attribute of <vxml> to access global variables
We may want to make some variables globally accessible to a number of VoiceXML documents that make up a VoiceXML application. But first, let's introduce the concept of a multi-document application. The diagram below depicts a VoiceXML application whose root is main.vxml.
There are two other documents in the application as well; login.vxml and account_info.vxml. Both of these documents are able to access and manipulate the variables in main.vxml by setting the application attribute of the vxml element to main.vxml. Let's take a look at the source of two of these files to see how we create and access global variables.
This VoiceXML file is the root document, thus all global variables will be initialized and stored here. Below, you'll notice that main.vxml contains only one statement, which is the variable named valid_pin. There's no need to include any other elements in this for our example here.
<vxml version="1.0"> <var name="valid_pin" expr="2516" /> </vxml>
The first thing you should notice about login.vxml is that the application attribute of the vxml element is main.vxml. This makes all of the variables and grammars available within login.vxml. To access a variable in the root document, pre-pend the application. keyword to the variable name contained in the root document:
<vxml version="1.0" application="main.vxml"> <form id="pin"> <block name="block1">The valid PIN code is <value expr="application.valid_pin" /> </block> </form> </vxml>
Now we can call on the value of the valid_pin variable in main.vxml by referring to it with a <value> element. When this VoiceXML document is executed, the output will be:
The valid PIN code is two five one six.
Use the <field> element to gather input from the user
VoiceXML forms are very similar to HTML forms except that VoiceXML uses the <field> element whereas HTML uses the <input> element (there are other field types as well which we'll cover later). Each VoiceXML form contains one or more <field> elements. Each field must have an associated grammar or built-in type defined in the type attribute of the <field> element. For example, to get a user's credit card number, we can use the digit type for the field and set the expected length to 16 by adding ?length=16 after specifying digit as our built-in grammar type.
<vxml version="1.0"> <form> <field name="ccnum" type="digits?length=16"> <prompt bargein="true">Please say your sixteen digit credit card number now.</prompt> </field> <block name="block1">You said <value expr="ccnum" /> </block> </form> </vxml>
The example above will ask for the users credit card number and wait for a response. If the user says or enters (via the keypad) exactly 16 digits, the computer will repeat the value that was entered and exit. If the user did not enter or say 16 digits, the system will either reprompt the user or exit the program depending on your platform. The value of the input is converted to text and stored in the ccnum variable, which can be referenced as described earlier with the <value> element.
Alternatively, we could have left off the length parameter as part of the value for the field type attribute, and the system would match any number of digits:
<field name="ccnum" type="digits">
Or, we can specify a minimum and/or maximum number of digits to match:
<field name="ccnum" type="digits?minlength=16; maxlength=17">