title: openerp web client how to customize field (extend basic field widget)
body: <p>I'm new to <code>openerp</code>'s web dev, I would appreciate some help. I want to create count up timer widget, for example in a <code>textbox</code>, with start and a stop button (include in my new custom field or separate).</p>
  
  <p>I made a small <code>javascript</code> function to count up time.</p>
  
  <p>Should I create a new widget by extending basic <code>FieldChar</code> ? Create a new type of field ?</p>
  
  <p>Where do I put my counter code, and how to display it on a <code>char</code> field (or new type of field) ?</p>
  
  <p>I found some doc about how to extend with something like <code>openerp.web.form.FieldChar</code> :</p>
  
  <pre><code>openerp.web_mymodule = function(openerp) {
    openerp.web.form.Field.include({
      init: function(view, node) {
          console.log('mine');
          this._super(view, node);
      }
    });
  }
  </code></pre>
  
  <p>I need some guidance to put all this together even with <code>openerp's</code> doc about how interface works.</p>
  
  <p>Thanks in advance</p>
  
  <p>Here is where I am:
  Module : web_uptimer</p>
  
  <p>web_uptimer.js:</p>
  
  <pre><code>openerp.web_uptimer = function (openerp)
  {  
      openerp.web.form.widgets.add('uptimer', 'openerp.web_uptimer.CountUp');
      openerp.web_uptimer.CountUp = openerp.web.form.FieldChar.extend(
          {
          template : "uptimer.template",
          init: function (view, code) {
              this._super(view, code);
              console.log('counting...');
              alert('counting...');
          }
      });
  }
  </code></pre>
  
  <p>web_uptimer.xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;templates id="template" xml:space="preserve"&gt;
  &lt;t t-name="uptimer.template"&gt;
              &lt;html&gt;
              &lt;/html&gt;  
  &lt;/t&gt;
  &lt;/templates&gt; 
  </code></pre>
  
  <p>my quick count up timer test:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
              var counter = 0;
              var minutes = 0;
              var hours = 0;
              var timer;
              var todisplay;
              var h2disp;
              var m2disp;
              var s2disp;
  
              function countUP ()
              {
                  counter = counter + 1;//increment the counter by 1
                  if(counter == 60)
                  {
                      counter = 0;
                      minutes = minutes + 1;
                      if(minutes == 60)
                      {
                          minutes = 0;
                          hours = hours + 1
                      }
                  }
                  if(counter &lt; 10)
                  {
                      s2disp = "0" + counter;
                  }
                  else
                  {
                      s2disp = counter;
                  }
                  if(minutes &lt; 10)
                  {
                      m2disp = "0" + minutes;
                  }
                  else
                  {
                      m2disp = minutes;
                  }
                  if(hours &lt; 10)
                  {
                      h2disp = "0" + hours;
                  }
                  else
                  {
                      h2disp = hours;
                  }
                  todisplay = h2disp + ":" + m2disp + ":" + s2disp;
                  document.getElementById("timer_container").innerHTML = todisplay;
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload='timer=setInterval("countUP()", 1000 );'&gt;
          &lt;div id="timer_container"&gt;00:00:00&lt;/div&gt;
          &lt;div&gt;
              &lt;button onclick='clearInterval(timer);'&gt;Stop Timer&lt;/button&gt;
              &lt;button onclick='timer=setInterval("countUP()", 1000 );'&gt;Continue Timer&lt;/button&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>