2013-01-10 13 views
5

Sono nuovo dello sviluppatore web di openerp, gradirei un po 'di aiuto. Voglio creare il widget del timer di conteggio, ad esempio in un textbox, con pulsante di avvio e arresto (includi nel mio nuovo campo personalizzato o separato).openerp web client come personalizzare il campo (estendere il widget di base del campo)

Ho eseguito una piccola funzione javascript per contare il tempo.

Devo creare un nuovo widget estendendo il numero FieldChar di base? Crea un nuovo tipo di campo?

Dove posso inserire il mio codice contatore e come visualizzarlo su un campo char (o un nuovo tipo di campo)?

ho trovato alcuni doc su come estendere con qualcosa di simile openerp.web.form.FieldChar:

openerp.web_mymodule = function(openerp) { 
    openerp.web.form.Field.include({ 
    init: function(view, node) { 
     console.log('mine'); 
     this._super(view, node); 
    } 
    }); 
} 

ho bisogno di qualche consiglio di mettere insieme tutto questo anche con openerp's doc su come funziona l'interfaccia.

Grazie in anticipo

Qui è dove mi trovo: Modulo: web_uptimer

web_uptimer.js:

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...'); 
     } 
    }); 
} 

web_uptimer.xml:

<?xml version="1.0" encoding="UTF-8"?> 
<templates id="template" xml:space="preserve"> 
<t t-name="uptimer.template"> 
      <html> 
      </html> 
</t> 
</templates> 

mio rapido conteggio up timer test:

<html> 
    <head> 
     <title></title> 
     <script type="text/javascript"> 
      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 < 10) 
       { 
        s2disp = "0" + counter; 
       } 
       else 
       { 
        s2disp = counter; 
       } 
       if(minutes < 10) 
       { 
        m2disp = "0" + minutes; 
       } 
       else 
       { 
        m2disp = minutes; 
       } 
       if(hours < 10) 
       { 
        h2disp = "0" + hours; 
       } 
       else 
       { 
        h2disp = hours; 
       } 
       todisplay = h2disp + ":" + m2disp + ":" + s2disp; 
       document.getElementById("timer_container").innerHTML = todisplay; 
      } 
     </script> 
    </head> 
    <body onload='timer=setInterval("countUP()", 1000);'> 
     <div id="timer_container">00:00:00</div> 
     <div> 
      <button onclick='clearInterval(timer);'>Stop Timer</button> 
      <button onclick='timer=setInterval("countUP()", 1000);'>Continue Timer</button> 
     </div> 
    </body> 
</html> 
+0

siete sulla strada giusta. Dai un'occhiata alla documentazione qui: http: //doc.openerp.com/trunk/developers/web/module/alla fine capita di avere un esempio di un widget del timer! : D L'ho provato, ma sembra abbastanza esplicativo. – TimoSolo

+0

Grazie per la risposta Timothy. Sto provando il web_esempio che mi hai indicato. Dopo alcuni problemi (errore di analisi del tag menuitem) Riesco a visualizzare il contatore (che è un inizio !!!) ma i pulsanti non chiamano le funzioni ... Funziona su 6.1? (Mi chiedo come il documento che mi hai collegato si trovi nel bagagliaio) Sto cercando di semplificare il codice (un pulsante e un avviso) ma non funziona. sembra che gli "eventi" non funzionino o non siano ascoltati ... Qualche idea? Grazie in anticipo, sto ancora andando avanti, quindi va bene –

risposta

2

sono riuscito a fare il mio timer come azione OpenERP per il processo, il timer conta fino, visualizzazione viene aggiornata ecc ...

Ora voglio che questo diventi un campo di OpenERP che ho potuto usare in forme :

Sono vicino, ma i pulsanti non funzionano più.

Ecco il mio codice:

nome del modulo è web_example:

src/js/first_module.js:

openerp.web_example = function (openerp) { 
     openerp.web.form.widgets.add('FieldUpTimer',  'openerp.web.form.FieldUpTimer'); 
     openerp.web.form.FieldUpTimer = openerp.web.form.FieldChar.extend({ 
     template: 'web_example.action', 
     init: function() { 
      this._super.apply(this, arguments); 
      this._start = null; 
      this._watch = null; 

     }, 

    start: function() { 
     this.$element.find('button#bstart').click(_.bind(this.mystart, this)); 
     this.$element.find('button#bstart').click(this.mystart); 
     this._start = null; 
    }, 

    countUP: function (counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp) 
      { 
     var h, m, s; 
     // Subtracting javascript dates returns the difference in milliseconds 
     var diff = new Date() - this._start; 
     s = diff/1000; 
     m = Math.floor(s/60); 
     s -= 60*m; 
     h = Math.floor(m/60); 
     m -= 60*h; 
       todisplay = _.str.sprintf("%02d:%02d:%02d", h, m, s); 
       document.getElementById("extimer").innerHTML = todisplay; 
      }, 

    mystart: function() { 
      alert('pffff ça marche'); 
      this.$element.addClass('oe_web_example_started') 
          .removeClass('oe_web_example_stopped'); 
      //timer=setInterval(this.countUP(counter,minutes,hours,timer,todisplay,h2disp,m2disp,s2disp), 1000); 
      this._start = new Date(); 
        this._watch = setInterval(this.proxy('countUP'),33); 
    }, 



      destroy: function() { 
     if (this._watch) { 
      clearInterval(this._watch); 
     } 
     this._super(); 
    } 
}); 

};

src/css/web_example.css:

.openerp .oe_web_example { 
    color: black; 
    background-color: white; 
    height: 100%; 
} 
.openerp .oe_web_example h4 { 
    margin: 0; 
    font-size: 100%; 
} 
.openerp .oe_web_example.oe_web_example_started .oe_web_example_start button, 
.openerp .oe_web_example.oe_web_example_stopped .oe_web_example_stop button { display: none }, 

src/xml/web_example.xml: rimuovo < come non l'ho fatto (velocemente) trovare un modo per visualizzare il codice HTML correttamente

templates> 
    div t-name="web_example.action" class="oe_web_example"> 
    p> 
     button type="button" id="bstart">start</button> 

     h4 class="oe_web_example_timer" id="extimer">00:00:00</h4> 
    /p> 
    button type="button" id="bstop">Stop</button> 
/div> 
/templates> 

/web_example.xml

<?xml version="1.0" encoding="utf-8"?> 
<openerp> 
<data> 
    <record model="ir.actions.act_window" id="action_web_example_form"> 
     <field name="name">web_example_class</field> 
     <field name="res_model">web_example_class</field> 
    </record> 

    <record model="ir.ui.view" id="action_web_example_form_view"> 
     <field name="name">web_example.form</field> 
     <field name="model">web_example_class</field> 
     <field name="type">form</field> 
     <field name="arch" type="xml"> 
      <form string="Web Example View"> 
       <field name="test2" widget="FieldUpTimer"/> 
      </form> 
     </field> 
    </record> 

<menuitem name="WEB EXAMPLE" action="action_web_example_form" id="web_example_menu"/> 
</data> 
</openerp>