2013-01-10 17 views
5

私はopenerpのwebデベロッパーを初めて利用しています。私は、開始ボタンと停止ボタン(私の新しいカスタムフィールドに含めるか、別々)を使って、例えば、textboxにカウントアップタイマーウィジェットを作成したいと思います。openerpウェブクライアントフィールドをカスタマイズする方法(基本フィールドウィジェットを拡張する)

私は小さな時間をカウントアップするjavascript機能を作った。

FieldCharを拡張して新しいウィジェットを作成する必要がありますか?新しいタイプのフィールドを作成しますか?

カウンターコードはどこに置くのですか。それはcharフィールド(または新しいタイプのフィールド)に表示する方法はありますか?

私は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); 
    } 
    }); 
} 

私もインターフェースがどのように機能するかについてopenerp'sドキュメントと一緒にこのすべてを置くためにいくつかのガイダンスを必要としています。ここで

は私がされて

事前に

ありがとう: モジュール: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> 

私の迅速な回数アップタイマーテスト:

<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

あなたが正しい軌道に乗っています。 http://doc.openerpのドキュメントをご覧ください。com/trunk/developers/web/module /には、タイマウィジェットの例があります。 :D私はそれをテストしましたが、かなり説明されているようです。 – TimoSolo

+0

ティモシーに感謝します。 私が指摘したweb_exampleを試しています。 いくつかの問題の後で(menuitemタグの解析エラー) 私はカウンタを表示することができますが(これはスタートです!!!)、ボタンは関数を呼び出すことはありません... 6.1で動作していますか? (リンク先の医者がトランクに位置していると思います) 私はコードを簡略化しようとしていますが(ボタンとアラート)、動作していません。 「イベント」が機能しない、または聞かれないようです... アイデアはありますか? 事前に感謝、私はまだ進んでいるので、それは良いです –

答えて

2

私は裁判のためopenerpアクションとしての私のタイマーを行うために管理タイマーがカウントアップし、表示がなどに更新されています...

今、私はこれは私がフォームで使用することができopenerpフィールドになりたいです:

私はそれに近いですが、ボタンはもう機能しません。ここで

は私のコードです:

モジュール名は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: 私はしなかったように私は(すぐに)<を削除正しく

HTMLコードを表示する方法を見つけます
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> 
関連する問題