Lesson 4: Navigating to a New Page

Before you start this lesson, be sure you understand the concepts presented in Lessons 1, 2, and 3.

In this lesson, we will explore three different ways to navigate to a new page, or document within an application:

  1. <link> is usually used as a way to have two or more grammars active at a given time.
  2. <submit> fetches a new page from the server and transfers control to a dialog on that page. You can submit selected fields or all fields in the form.
  3. <goto> is similar to <submit> except that no field values are transmitted.
  4. All three of the above are similar to the idea of a "hyperlink" in html.

Step 1: Start with the code from Lesson 2:



<?xml version="1.0"?>
<vxml version="2.0" xmlns="http://www.w3.org/2001/vxml">
<meta name="maintainer" content="yourname@yourserver.com"/>
<property name="bargein" value="false"/>
<property name="loglevel" value="3"/>
<property name="metricslevel" value="2"/>
   <form id="Choices">
      <field name="choice">
         <prompt>
            Please choose from the following: 
            To add a course, say add.
            To drop a course, say drop.
            To check your schedule, say check.
         </prompt>
         <grammar type="application/srgs+xml" version="1.0" root="root">
           <rule id="root">
             <one-of>
               <item>add</item>
               <item>drop</item>
               <item>change</item>
             </one-of>
           </rule>
         </grammar>
         <noinput>
            I didn't hear you.
            <reprompt/>
         </noinput>
         <nomatch>
            I didn't quite understand you.
            <reprompt/>
         </nomatch>
         <filled>
            <if cond="choice=='add'">
               OK let's add a course.
            <elseif cond="choice=='drop'"/>
               OK let's drop a course.
            <else/>
               OK let's check your schedule.
            </if>
         </filled>
      </field>
   </form>
</vxml>

Step 2: Create a link to a new page

The <link> tag lets you define a speech and/or dtmf grammar which, when recognized, will cause the interpreter to transition to a specified page. In this case, we are going to allow the caller to say "restart" in order to go back to the same page.



<link next="http://www.freewebsite.com/yourname/lesson4.vxml">
   <grammar type="application/srgs+xml" version="1.0" root="root">
         <rule id="root">
           <one-of>
             <item>restart</item>
           </one-of>
         </rule>
      </grammar>
</link>
Notes:
  1. Of course, using the exact same syntax but with a different URL, you could call a completely different page using this link.
  2. Links can be defined within different tags, and its location determines its scope. This means that if a link is defined as a child of <vxml>, the recognizer will accept words from the link grammar(s) anywhere input is accepted inside the <vxml>. Similarly, if defined inside a <form> or <field>, the words will be accepted only within that <form> or <field>.

Step 3: Use <submit> to obtain a new document.

Let's take the <if> structure from our code and rewrite it using <submit>:



<if cond="choice=='add'">
   <submit next="add.jsp"/>
<elseif cond="choice=='drop'"/>
   <submit next="drop.jsp"/>
<else/>
   <submit next="check.jsp"/>
</if>
Notes:
  1. By default, if multiple fields have been visited prior to the <submit> tag, <submit> will pass all field values to the new page.
  2. On the other hand, you can use the "namelist" attribute to pass only selected field values.
  3. Using the "expr" attribute with <submit>, it is possible to generate the URL dynamically from an expression.
  4. The assumption with the example above is that there is a "jsp" application on the server, in the same directory as the current application, that is being called. Of course the "next=" could just as well be followed by a complete URL beginning with "http://www. ... "

Step 4: Using <goto>

As mentioned in the introduction, the <goto> tag is similar to <submit>, except that no field values are transmitted. One other difference with <goto> is that it can also be used to jump to another form or menu in the same page.



<if cond="choice=='add'">
   <!-- Transitions to another page -->
   <goto next="add.jsp"/>
<elseif cond="choice=='drop'"/>
   <!-- Transitions to another item in this form -->
   <goto nextitem="dropcourse"/>
<else/>
   <!-- Transitions to another form or menu on this page -->
   <goto next="#checkschedule"/>
</if>
Notes:
  1. Since we conveniently happen to have three choices in the code above, and there are three ways of using <goto>, we chose to use all three syntaxes in the same example (normally you would probably use the same structure for all three choices).
  2. The "<goto next="add.jsp"/>" syntax, like the similar syntax that used <submit> above, requires there to be a document in the same directory as this application, called "add.jsp".
  3. The "<goto nextitem= ...>" syntax directed the flow to another item in the same form. The "<goto next=# ...>" syntax directed the flow to another form in the same document. Notice that the form was named "checkschedule" but was called using "next=#checkschedule". The "#" is called an "anchor" notation.

Step 5: Putting it together - save this code as lesson4.vxml



<?xml version="1.0"?>
<vxml version="2.0" xmlns="http://www.w3.org/2001/vxml">
<meta name="maintainer" content="yourname@yourserver.com"/>
<property name="bargein" value="false"/>
<property name="loglevel" value="3"/>
<property name="metricslevel" value="2"/>
   <!-- Change the specified URL to the URL for this page -->
   <link next="http://www.freewebsite.com/yourname/lesson4.vxml">
     <grammar type="application/srgs+xml" version="1.0" root="root_link">
       <rule id="root_link">
         <one-of>
           <item>restart</item>
         </one-of>
       </rule>
     </grammar>
   </link>
   <form id="Choices">
      <field name="choice">
         <prompt>
            Please choose from the following: 
            To add a course, say add.
            To drop a course, say drop.
            To check your schedule, say check.
         </prompt>
         <grammar type="application/srgs+xml" version="1.0" root="root1">
           <rule id="root1">
             <one-of>
               <item>add</item>
               <item>drop</item>
               <item>change</item>
             </one-of>
           </rule>
         </grammar>
         <noinput>
            I didn't hear you.
            <reprompt/>
         </noinput>
         <nomatch>
            I didn't quite understand you.
            <reprompt/>
         </nomatch>
         <filled>
            <if cond="choice=='add'">
               <goto next="add.jsp"/>
            <elseif cond="choice=='drop'"/>
               <goto nextitem="dropcourse"/>
            <else/>
               <goto next="#checkschedule"/>
            </if>
         </filled>
      </field>
      <block name="dropcourse">
         OK let's drop a course.
      </block>
   </form>
   <form id="checkschedule">
      <block>
         OK let's check
      </block>
   </form>
</vxml>

Note:

Unless you create a page called add.jsp (or change the code to <goto next="add.vxml"/> and create a page called add.vxml), you will hear "The requested page cannot be found" if you say "add".

What did we learn in Lesson 4?

  1. <link>, <submit> and <goto> each function somewhat similarly to an html hyperlink in that the control of the program is transferred to a new document or dialog.
  2. It is possible to have several grammars active at the same time. Using <link> is one way to achieve this.
  3. It is important to know how your application is using caching, when you are calling a program repeatedly from the same machine.