VoiceGap

Filling the space between You and Your Apps

How to Build the VoiceGap Demo – Part 1

The first Capt. Expendable demonstration is built upon two very well written How-To pages and I would hate to duplicate them here.   The first is a description of using JQuery Mobile Toolbars and the second is how to add the Voice Recognition plugin to PhoneGap.   So instead, I will walk through the code elements in an order that you can follow along at home without needing a device.

This is the header:

<div data-role="header" data-position="fixed" data-theme="a">
  <h1>Capt. Expendable</h1>
  <a href="../../" data-direction="reverse" data-iconpos="notext" data-icon="home">Home</a>
</div>

This is the navbar:

<div data-role="footer" data-position="fixed" data-id="foo1">
< div id="tabs" data-role="navbar">
   <ul id="foot">
	<li><a id="bar-1" href="#tab-1">Think</a></li>
	<li><a id="bar-2" href="#tab-2">Say</a></li>
	<li><a id="bar-3" href="#tab-3">Act</a></li>
   </ul>
 </div> <!-- /navbar -->
</div> <!-- /footer -->

Lastly, the navbar needs to control the view; so let’s add the named DIVs so that NavBar will select one of these.

<div id="container">
    <div id="tab-1">
      <h3>Please tap on Capt. Expendable and ask him to search for something</h3>
      <p> </p>
    </div>
    <div id="tab-2">
      <h3>Tab 2</h3>
      <p> </p>
    </div>
    <div id="tab-3">
      <h3>Search Results</h3>
    </div>
  </div>

In order to activate the DIVs and see the Black and Blue theme of the NavBar, we will need some javascript. This code will add click events to the NavBar.

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#container div').hide();
$('#container div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a:first').addClass('ui-btn-active');
$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active');
$('#tabs ul li a').removeClass('ui-btn-active');
$(this).parent().addClass('active');
$(this).addClass('ui-btn-active');
var currentTab = $(this).attr('href'); 
$('#container div').hide();
$(currentTab).show();
return false;
});
});
</script>

The whole thing! This is the simplest way to see it. All the JQuery Mobile files are pulled from the internet, no need to download them (yet). Just copy the text below into a file called expendable.html:

<!DOCTYPE html>
<html>
    <head>
    <title>No Voice Yet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script type="text/javascript" language="javascript">
 $(document).ready(function(){
   $('#container div').hide();
   $('#container div:first').show();
   $('#tabs ul li:first').addClass('active');
   $('#tabs ul li a:first').addClass('ui-btn-active');
   $('#tabs ul li a').click(function(){
   $('#tabs ul li').removeClass('active');
   $('#tabs ul li a').removeClass('ui-btn-active');
   $(this).parent().addClass('active');
   $(this).addClass('ui-btn-active');
   var currentTab = $(this).attr('href');
   $('#container div').hide();
   $(currentTab).show();
   return false;
   });
 });
</script>

</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
 <h1>Capt. Expendable</h1>
 <a href="../../" data-direction="reverse" data-iconpos="notext" data-icon="home">Home</a>
</div>



<div id="container">
    <div id="tab-1">
      <h3>Please tap on Capt. Expendable and ask him to search for something</h3>
      <p> </p>
    </div>
    <div id="tab-2">
      <h3>Tab 2</h3>
      <p> </p>
    </div>
    <div id="tab-3">
      <h3>Search Results</h3>
    </div>
  </div>

 
<div data-role="footer" data-position="fixed" data-id="foo1">
<div id="tabs" data-role="navbar">
   <ul id="foot">
    <li><a id="bar-1" href="#tab-1">Think</a></li>
    <li><a id="bar-2" href="#tab-2">Say</a></li>
    <li><a id="bar-3" href="#tab-3">Act</a></li>
   </ul>
 </div> <!-- /navbar -->
</div> <!-- /footer -->
</body>
</html>

It should look something like this:

You can download this code here

Comments are currently closed.