development - odoo javascript api
cliente web de openerp cómo personalizar el campo(ampliar el widget de campo básico) (1)
Soy nuevo en el openerp web de openerp , agradecería algo de ayuda. Quiero crear el widget del temporizador de conteo, por ejemplo en un textbox , con los botones de inicio y de detención (incluir en mi nuevo campo personalizado o por separado).
Hice una pequeña función de javascript para contar el tiempo.
¿Debería crear un nuevo widget ampliando el FieldChar básico? Crear un nuevo tipo de campo?
¿Dónde coloco mi código de contador y cómo mostrarlo en un campo de char (o un nuevo tipo de campo)?
Encontré algunos doc sobre cómo extender con algo como 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);
}
});
}
Necesito una guía para armar todo esto, incluso con openerp''s documento openerp''s sobre cómo funciona la interfaz.
Gracias por adelantado
Aquí es donde estoy: Módulo: 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>
mi prueba de temporizador de cuenta rápida:
<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>
Logré hacer mi temporizador como una acción de apertura para la prueba, el temporizador cuenta, la pantalla se actualiza, etc.
Ahora quiero que esto se convierta en un campo abierto que podría usar en formas:
Estoy cerca de eso, pero los botones ya no funcionan.
Aquí está mi código:
El nombre del módulo es 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: elimino <porque no encontré (rápidamente) una forma de mostrar el código html correctamente
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>