Give your widgets a voice

By Ola P. Kleiven

Prerequisites: knowledge of XHTML+Voice and how to make a basic Opera widget

X+V uses namespaces and it is therefore neccessary to make the widget using XML documents. However, the widget engine will only look for index.html. Thus, the XML file needs to be embedded in a normal HTML document. The index.html file body section could look something like this:

<body>
 <iframe src="main.xml"></iframe>
</body>

Now to the more interesting bit - adding voice to the widget. An example main.xml may look like this:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//VoiceXML Forum//DTD XHTML+Voice 1.2//EN"
"http://www.vxmlforum.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:vxml="http://www.w3.org/2001/vxml">

<head>
 <title>Hello world!</title>

  <vxml:form id="helloworld">
   <vxml:block >
    <vxml:prompt src="#srctext" />
   </vxml:block >
  </vxml:form >
</head>

<body ev:event="load" ev:handler="#helloworld">
 <h2 id="srctext">Hello World!</h2>
</body>

</html>

Now wrap your config.xml, index.html and main.xml into a zipped widget file and you have your first voice enabled widget. You can also add interaction just as you would with a normal X+V application. The widget is available for input as long as it has focus.

If you want to voice enable an existing widget, make sure to convert your main document to a well-formed XML document, add the X+V markup and wrap it in an iframe.

Ola P. Kleiven

Working in Opera's coreQA, making sure that Opera behaves on all kinds of websites. Previous experience as tester of the X+V technology and various embedded projects. Opera user since 1998, Opera worker since 2002.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Give your widgets a voice

Ola P. Kleiven

Comments