基于VXML的视频类业务的流程交互设计
该部分涉及视频合成服务器（Media Builder，MBD）的一些功能。MBD可以动态地把提供给它的网页合成视频文件，然后在3G终端进行播放。网页URL在VXML标签中的位置如阴影部分代码（URL即为标签audio>所包括部分）所示。
prompt>
audio expr="''">
http：//192.168.2.89：8080/testVXML/index.jsp
!--即为提供给MBD的URL-->
/audio>
/prompt>
当VXML文档经过VXML解析器进行解析后，得到URL，此处为http：//192.168.2.89:8080/testVXML/index.jsp，然后将该URL提供给MBD，MBD将相应网页进行截图，最后合成.mov文件。视频显示效果如下图所示：
视频显示效果图之一
视频显示效果图之二
基于VXML的视频类业务流程交互设计的实例代码如下。
mainAudioMenu.vxml：
?xml version="1.0"encoding="UTF-8"?>
vxml version="2.1"xmlns="http：//www.w3.org/2001/vxml"
xmlns：xsi="http：//www.w3.org/2001/XML Schema-instance"
xsi：schemaLocation="http：//www.w3.org/2001/vxml
http：//www.w3.org/TR/2004/WD-voicexml21-20040728/vxml.xsd">
form id="idMainMenu">
field name="user_choice">
prompt>
audio expr="''">
http：//192.168.2.89：8080/testVXML/index.jsp
/audio>
!--该URL是提供给视频合成器的截图地址-->
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice=='1'">
goto next="videoEnjoy.jsp"/>
!--本实例主要是涉及这个分支，其他代码省略-->
elseif cond="user_choice=='2'"/>
goto next="imageEnjoy.jsp"/>
elseif cond="user_choice=='3'"/>
goto next="stockQuery.jsp"/>
elseif cond="user_choice=='4'"/>
goto next="telHLRQuery.jsp"/>
elseif cond="user_choice=='5'"/>
goto next="addGame.jsp"/>
else/>
goto next="#idMainMenu"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
/vxml>
videoEnjoy.jsp：
?xml version="1.0"encoding="UTF-8"?>
vxml version="2.1"xmlns="http：//www.w3.org/2001/vxml"
xmlns：xsi="http：//www.w3.org/2001/XMLSchema-instance"
xsi：schemaLocation="http：//www.w3.org/2001/vxml
http：//www.w3.org/TR/2004/WD-voicexml21-20040728/vxml.xsd">
form id="idVedioEnjoyMenu">
field name="user_choice0">
prompt>
audio expr="''">
http：//192.168.2.89：8080/testVXML/videoIndex.jsp
/audio>
!--该URL是提供给视频合成器的截图地址-->
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice0=='0'">
goto next="mainAudioMenu.vxml"/>
elseif cond="user_choice0=='1'"/>
goto next="#form1"/>
elseif cond="user_choice0=='2'"/>
goto next="#form2"/>
elseif cond="user_choice0=='3'"/>
goto next="#form3"/>
elseif cond="user_choice0=='4'"/>
goto next="#form4"/>
else/>
clear namelist="user_choice0"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form1">
field name="user_choice1">
prompt>
audio expr="'80001.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice1=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form1"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form2">
field name="user_choice2">
prompt>
audio expr="'80002.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice2=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form2"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form3">
field name="user_choice3">
prompt>
audio expr="'80003.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice3=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form3"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
form id="form4">
field name="user_choice4">
prompt>
audio expr="'80004.mov'"/>
/prompt>
grammar mode="dtmf">builtin：dtmf/grammar>
filled>
if cond="user_choice4=='0'">
goto next="#idVedioEnjoyMenu"/>
else/>
goto next="#form4"/>
/if>
/filled>
catch event="error.badfetch">
exit/>
/catch>
/field>
/form>
/vxml>
下面是一个简单的JSP页面实例，在该实例中，引用了style.css中的样式。显示了一个栏目列表，代码如下所示。
%@page language="java"contentType="text/html；charset=UTF-8"pageEncoding="UTF-8"%>
!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
meta http-equiv="Content-Type"content="text/html；charset=UTF-8"/>
title>主页/title>
link href="%=request.getContextPath（）%>/css/style.css"type="text/css"rel="stylesheet">
meta http-equiv="pragma"content="no-cache">
meta http-equiv="cache-control"content="no-cache">
meta http-equiv="expires"content="0">
/head>
body>
div class="bodyDiv">
table>
tr>
td valign="bottom"align="left"
style="width:176px;background:url（%=request.getContextPath() %>/images/line2_bg.gif）repeat-x；border-bottom:1px solid#b0bec7；"height="19">
span class="titleFont">
font color="orange">b>请选择栏目/b>/font>
/span>
/td>
/tr>
tr>
td>1.视频欣赏/td>
/tr>
tr>
td>2.图片欣赏/td>
/tr>
tr>
td>3.股票查询/td>
/tr>
tr>
td>4.手机归属地查询/td>
/tr>
tr>
td>5.加法游戏/td>
/tr>
tr>
td align="center">
按序号#确认选择
/td>
/tr>
/table>
/div>
/body>
/html>
运行效果如下图所示。
JSP栏目列表运行效果
下面是另一个简单的JSP页面实例，在该实例中，引用了style_cif.css中的样式。该页面是一个图片展示页面，代码如下所示。
%@page language="java"contentType="text/html；charset=UTF-8"pageEncoding="UTF-8"%>
!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
%
String contextPath=request.getContextPath()；
%>
html>
head>
meta http-equiv="Content-Type"content="text/html；charset=UTF-8"/>
title>图片欣赏展示页/title>
link
href="%=request.getContextPath()%>/css/style_cif.css"
type="text/css"rel="stylesheet">
meta http-equiv="pragma"content="no-cache">
meta http-equiv="cache-control"content="no-cache">
meta http-equiv="expires"content="0">
/head>
body>
div class="bodyDiv">
table>
tr>
td valign="bottom"align="left"
style="width:352px;background:url（%=request.getContextPath() %>/images/line2_bg.gif）repeat-x；border-bottom：1px solid#b0bec7;"height="19">
span class="titleFont">
font color="orange">b>颐和园/b>/font>
/span>
/td>
/tr>
tr>
td align="center">
img
src="%=contextPath %>/images/yiheyuan.jpg"height="230">
/td>
/tr>
tr>
td align="center">
font color="green">1#上一张，2#下一张，0#返回/font>
/td>
/tr>
/table>
/div>
/body>
/html>
运行效果如下图。
JSP图片展示页面效果
咨 询 客 服
