Hi want a notebook in my open erp web page.My xml is

<?xml version="1.0" encoding="UTF-8"?>
  2 <templates xml:space="preserve">
  3     <t t-name="WLANHomePageTemplate">
  4         <div style="background-color: red;">welcome to my site</div>
  5        <!-- <select>
  6           <option value="">AP Mode</option>
  7         </select> -->
  8
  9         <ul class="tabs">
 10             <li><a href="#">Tab 1</a></li>
 11             <li><a href="#">Tab 2</a></li>
 12             <li><a href="#">Tab 3</a></li>
 13         </ul>
 14         <!-- tab "panes" -->
 15         <div class="panes">
 16             <div>pane 1 content</div>
 17             <div>pane 2 content</div>
 18             <div>pane 3 content</div>
 19         </div>
 20     </t>
 21 </templates>

My js is
  1 openerp.WLAN = function(instance) {
  2     var QWeb = instance.web.qweb;
  3     instance.WLAN = {};
  4     instance.WLAN.HomePage = instance.web.Widget.extend({
  5         start: function() {
  6             //this.$el.append("<div>Hello dear OpenERP user!</div>");
  7             this.$el.append(QWeb.render("WLANHomePageTemplate"));
  8         },
  9     });
 10     instance.web.client_actions.add('WLAN.homepage', 'instance.WLAN.HomePage');
 11     $("ul.tabs").tabs("div.panes > div");
 12 }
Any one please help!!