[ADD] bit o' tutorial for web modules

bzr revid: xmo@openerp.com-20121205132854-j0r8qgh5u2qwlqj1

18 files changed, 245 insertions, 0 deletions

diff --git a/addons/web/doc/module/__init__.py b/addons/web/doc/module/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/addons/web/doc/module/__init__.py
diff --git a/addons/web/doc/module/__openerp__.py b/addons/web/doc/module/__openerp__.py
new file mode 100644
index 00000000000..d8c23c34f10
--- /dev/null
+++ b/addons/web/doc/module/__openerp__.py
@@ -0,0 +1,7 @@
+# __openerp__.py
+{
+    'name': "Web Example",
+    'description': "Basic example of a (future) web module",
+    'category': 'Hidden',
+    'depends': ['base'],
+}
diff --git a/addons/web/doc/module/__openerp__.py.1.diff b/addons/web/doc/module/__openerp__.py.1.diff
new file mode 100644
index 00000000000..dbab2e65437
--- /dev/null
+++ b/addons/web/doc/module/__openerp__.py.1.diff
@@ -0,0 +1,11 @@
+--- web_example/__openerp__.py
++++ web_example/__openerp__.py
+@@ -1,7 +1,7 @@
+ # __openerp__.py
+ {
+     'name': "Web Example",
+     'description': "Basic example of a (future) web module",
+     'category': 'Hidden',
+-    'depends': ['base'],
++    'depends': ['web'],
+ }
diff --git a/addons/web/doc/module/__openerp__.py.2.diff b/addons/web/doc/module/__openerp__.py.2.diff
new file mode 100644
index 00000000000..77025f11512
--- /dev/null
+++ b/addons/web/doc/module/__openerp__.py.2.diff
@@ -0,0 +1,11 @@
+--- web_example/__openerp__.py
++++ web_example/__openerp__.py
+@@ -1,7 +1,8 @@
+ # __openerp__.py
+ {
+     'name': "Web Example",
+     'description': "Basic example of a (future) web module",
+     'category': 'Hidden',
+     'depends': ['web'],
++    'js': ['static/src/js/first_module.js'],
+ }
diff --git a/addons/web/doc/module/__openerp__.py.3.diff b/addons/web/doc/module/__openerp__.py.3.diff
new file mode 100644
index 00000000000..e100098bce9
--- /dev/null
+++ b/addons/web/doc/module/__openerp__.py.3.diff
@@ -0,0 +1,12 @@
+--- web_example/__openerp__.py
++++ web_example/__openerp__.py
+@@ -1,8 +1,9 @@
+ # __openerp__.py
+ {
+     'name': "Web Example",
+     'description': "Basic example of a (future) web module",
+     'category': 'Hidden',
+     'depends': ['web'],
++    'data': ['web_example.xml'],
+     'js': ['static/src/js/first_module.js'],
+ }
diff --git a/addons/web/doc/module/__openerp__.py.4.diff b/addons/web/doc/module/__openerp__.py.4.diff
new file mode 100644
index 00000000000..78fc90c4b1c
--- /dev/null
+++ b/addons/web/doc/module/__openerp__.py.4.diff
@@ -0,0 +1,13 @@
+--- web_example/__openerp__.py
++++ web_example/__openerp__.py
+@@ -1,9 +1,10 @@
+ # __openerp__.py
+ {
+     'name': "Web Example",
+     'description': "Basic example of a (future) web module",
+     'category': 'Hidden',
+     'depends': ['web'],
+     'data': ['web_example.xml'],
+     'js': ['static/src/js/first_module.js'],
++    'css': ['static/src/css/web_example.css'],
+ }
diff --git a/addons/web/doc/module/__openerp__.py.5.diff b/addons/web/doc/module/__openerp__.py.5.diff
new file mode 100644
index 00000000000..c9492420ee8
--- /dev/null
+++ b/addons/web/doc/module/__openerp__.py.5.diff
@@ -0,0 +1,14 @@
+--- web_example/__openerp__.py
++++ web_example/__openerp__.py
+@@ -1,10 +1,11 @@
+ # __openerp__.py
+ {
+     'name': "Web Example",
+     'description': "Basic example of a (future) web module",
+     'category': 'Hidden',
+     'depends': ['web'],
+     'data': ['web_example.xml'],
+     'js': ['static/src/js/first_module.js'],
+     'css': ['static/src/css/web_example.css'],
++    'qweb': ['static/src/xml/web_example.xml'],
+ }
diff --git a/addons/web/doc/module/static/src/css/web_example.css b/addons/web/doc/module/static/src/css/web_example.css
new file mode 100644
index 00000000000..b861af8d517
--- /dev/null
+++ b/addons/web/doc/module/static/src/css/web_example.css
@@ -0,0 +1,6 @@
+.openerp .oe_web_example {
+    color: white;
+    background-color: black;
+    height: 100%;
+    font-size: 400%;
+}
diff --git a/addons/web/doc/module/static/src/css/web_example.css.1.diff b/addons/web/doc/module/static/src/css/web_example.css.1.diff
new file mode 100644
index 00000000000..442211a252b
--- /dev/null
+++ b/addons/web/doc/module/static/src/css/web_example.css.1.diff
@@ -0,0 +1,17 @@
+--- web_example/static/src/css/web_example.css
++++ web_example/static/src/css/web_example.css
+@@ -1,6 +1,13 @@
+ .openerp .oe_web_example {
+     color: white;
+     background-color: black;
+     height: 100%;
+-    font-size: 400%;
+ }
++.openerp .oe_web_example h4 {
++    margin: 0;
++    font-size: 200%;
++}
++.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
++}
diff --git a/addons/web/doc/module/static/src/js/first_module.js b/addons/web/doc/module/static/src/js/first_module.js
new file mode 100644
index 00000000000..74580d1c0ca
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js
@@ -0,0 +1,2 @@
+// static/src/js/first_module.js
+console.log("Debug statement: file loaded");
diff --git a/addons/web/doc/module/static/src/js/first_module.js.1.diff b/addons/web/doc/module/static/src/js/first_module.js.1.diff
new file mode 100644
index 00000000000..53c153e1971
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js.1.diff
@@ -0,0 +1,8 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,2 +1,4 @@
+ // static/src/js/first_module.js
+-console.log("Debug statement: file loaded");
++openerp.web_example = function (instance) {
++    console.log("Module loaded");
++};
diff --git a/addons/web/doc/module/static/src/js/first_module.js.2.diff b/addons/web/doc/module/static/src/js/first_module.js.2.diff
new file mode 100644
index 00000000000..88a80f50fff
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js.2.diff
@@ -0,0 +1,11 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,4 +1,7 @@
+ // static/src/js/first_module.js
+ openerp.web_example = function (instance) {
+-    console.log("Module loaded");
++    instance.web.client_actions.add('example.action', 'instance.web_example.action');
++    instance.web_example.action = function (parent, action) {
++        console.log("Executed the action", action);
++    };
+ };
diff --git a/addons/web/doc/module/static/src/js/first_module.js.3.diff b/addons/web/doc/module/static/src/js/first_module.js.3.diff
new file mode 100644
index 00000000000..295e90b6840
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js.3.diff
@@ -0,0 +1,18 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,7 +1,11 @@
+ // static/src/js/first_module.js
+ openerp.web_example = function (instance) {
+-    instance.web.client_actions.add('example.action', 'instance.web_example.action');
+-    instance.web_example.action = function (parent, action) {
+-        console.log("Executed the action", action);
+-    };
++    instance.web.client_actions.add('example.action', 'instance.web_example.Action');
++    instance.web_example.Action = instance.web.Widget.extend({
++        className: 'oe_web_example',
++        start: function () {
++            this.$el.text("Hello, world!");
++            return this._super();
++        }
++    });
+ };
diff --git a/addons/web/doc/module/static/src/js/first_module.js.4.diff b/addons/web/doc/module/static/src/js/first_module.js.4.diff
new file mode 100644
index 00000000000..78a192147e6
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js.4.diff
@@ -0,0 +1,15 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,11 +1,7 @@
+ // static/src/js/first_module.js
+ openerp.web_example = function (instance) {
+     instance.web.client_actions.add('example.action', 'instance.web_example.Action');
+     instance.web_example.Action = instance.web.Widget.extend({
++        template: 'web_example.action'
+-        className: 'oe_web_example',
+-        start: function () {
+-            this.$el.text("Hello, world!");
+-            return this._super();
+-        }
+     });
+ };
diff --git a/addons/web/doc/module/static/src/js/first_module.js.5.diff b/addons/web/doc/module/static/src/js/first_module.js.5.diff
new file mode 100644
index 00000000000..f345ea319ef
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js.5.diff
@@ -0,0 +1,23 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,7 +1,19 @@
+ // static/src/js/first_module.js
+ openerp.web_example = function (instance) {
+     instance.web.client_actions.add('example.action', 'instance.web_example.Action');
+     instance.web_example.Action = instance.web.Widget.extend({
+-        template: 'web_example.action'
++        template: 'web_example.action',
++        events: {
++            'click .oe_web_example_start button': 'watch_start',
++            'click .oe_web_example_stop button': 'watch_stop'
++        },
++        watch_start: function () {
++            this.$el.addClass('oe_web_example_started')
++                    .removeClass('oe_web_example_stopped');
++        },
++        watch_stop: function () {
++            this.$el.removeClass('oe_web_example_started')
++                    .addClass('oe_web_example_stopped');
++        },
+     });
+ };
diff --git a/addons/web/doc/module/static/src/js/first_module.js.6.diff b/addons/web/doc/module/static/src/js/first_module.js.6.diff
new file mode 100644
index 00000000000..7dd17af0e18
--- /dev/null
+++ b/addons/web/doc/module/static/src/js/first_module.js.6.diff
@@ -0,0 +1,55 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,19 +1,52 @@
+ // static/src/js/first_module.js
+ openerp.web_example = function (instance) {
+     instance.web.client_actions.add('example.action', 'instance.web_example.Action');
+     instance.web_example.Action = instance.web.Widget.extend({
+         template: 'web_example.action',
+         events: {
+             'click .oe_web_example_start button': 'watch_start',
+             'click .oe_web_example_stop button': 'watch_stop'
+         },
++        init: function () {
++            this._super.apply(this, arguments);
++            this._start = null;
++            this._watch = null;
++        },
++        update_counter: function () {
++            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;
++            this.$('.oe_web_example_timer').text(
++                _.str.sprintf("%02d:%02d:%02d", h, m, s));
++        },
+         watch_start: function () {
+             this.$el.addClass('oe_web_example_started')
+                     .removeClass('oe_web_example_stopped');
++            this._start = new Date();
++            // Update the UI to the current time
++            this.update_counter();
++            // Update the counter at 30 FPS (33ms/frame)
++            this._watch = setInterval(
++                this.proxy('update_counter'),
++                33);
+         },
+         watch_stop: function () {
++            clearInterval(this._watch);
++            this.update_counter();
++            this._start = this._watch = null;
+             this.$el.removeClass('oe_web_example_started')
+                     .addClass('oe_web_example_stopped');
+         },
++        destroy: function () {
++            if (this._watch) {
++                clearInterval(this._watch);
++            }
++            this._super();
++        }
+     });
+ };
diff --git a/addons/web/doc/module/static/src/xml/web_example.xml b/addons/web/doc/module/static/src/xml/web_example.xml
new file mode 100644
index 00000000000..b5a9918f2f0
--- /dev/null
+++ b/addons/web/doc/module/static/src/xml/web_example.xml
@@ -0,0 +1,11 @@
+<templates>
+<div t-name="web_example.action" class="oe_web_example oe_web_example_stopped">
+    <h4 class="oe_web_example_timer">00:00:00</h4>
+    <p class="oe_web_example_start">
+        <button type="button">Start</button>
+    </p>
+    <p class="oe_web_example_stop">
+        <button type="button">Stop</button>
+    </p>
+</div>
+</templates>
diff --git a/addons/web/doc/module/web_example.xml b/addons/web/doc/module/web_example.xml
new file mode 100644
index 00000000000..dfcc1614df4
--- /dev/null
+++ b/addons/web/doc/module/web_example.xml
@@ -0,0 +1,11 @@
+<!-- web_example/web_example.xml -->
+<openerp>
+    <data>
+        <record model="ir.actions.client" id="action_client_example">
+            <field name="name">Example Client Action</field>
+            <field name="tag">example.action</field>
+        </record>
+        <menuitem action="action_client_example"
+                  id="menu_client_example"/>
+    </data>
+</openerp>