[IMP] web module tutorial: start adding RPC stuff

bzr revid: xmo@openerp.com-20130131153100-gze86fbchz4tnrg3

addons/web/doc/module.rst

@@ -273,6 +273,36 @@ the button displayed in the UI. Then comes some actual logic:
 Starting and stopping the watch now works, and correctly tracks time
 since having started the watch, neatly formatted.
 
+Burning through the skies
+-------------------------
+
+All work so far has been "local" outside of the original impetus
+provided by the client action: the widget is self-contained and, once
+started, does not communicate with anything outside itself. Not only
+that, but it has no persistence: if the user leaves the stopwatch
+screen (to go and see his inbox, or do some well-deserved accounting,
+for instance) whatever was being timed will be lost.
+
+To prevent this irremediable loss, we can use OpenERP's support for
+storing data as a model, allowing so that we don't lose our data and
+can later retrieve, query and manipulate it. First let's create a
+basic OpenERP model in which our data will be stored:
+
+.. literalinclude:: module/__init__.py.1.diff
+    :language: diff
+
+then let's add saving times to the database every time the stopwatch
+is stopped, using :js:class:`the "high-level" Model API
+<openerp.web.Model.call>`:
+
+.. literalinclude:: module/static/src/js/first_module.js.7.diff
+    :language: diff
+
+A look at the "Network" tab of your preferred browser's developer
+tools while playing with the stopwatch will show that the save
+(creation) request is indeed sent (and replied to, even though we're
+ignoring the response at this point).
+
 .. [#DOM-building] they are not alternative solutions: they work very
                    well together. Templates are used to build "just
                    DOM", sub-widgets are used to build DOM subsections

addons/web/doc/module/__init__.py.1.diff

@@ -0,0 +1,16 @@
+--- web_example/__init__.py
++++ web_example/__init__.py
+@@ -1,1 +1,14 @@
++# __init__.py
++from openerp.osv import orm, fields
++
++
++class Times(orm.Model):
++    _name = 'web_example.stopwatch'
++
++    _columns = {
++        'time': fields.integer("Time", required=True,
++                               help="Measured time in milliseconds"),
++        'user_id': fields.many2one('res.users', "User", required=True,
++                                   help="User who registered the measurement")
++    }

addons/web/doc/module/static/src/js/first_module.js.7.diff

@@ -0,0 +1,71 @@
+--- web_example/static/src/js/first_module.js
++++ web_example/static/src/js/first_module.js
+@@ -1,52 +1,60 @@
+ // 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;
+         },
++        current: function () {
++            // Subtracting javascript dates returns the difference in milliseconds
++            return new Date() - this._start;
++        },
+-        update_counter: function () {
++        update_counter: function (time) {
+             var h, m, s;
+-            // Subtracting javascript dates returns the difference in milliseconds
+-            var diff = new Date() - this._start;
+-            s = diff / 1000;
++            s = time / 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();
++            this.update_counter(this.current());
+             // Update the counter at 30 FPS (33ms/frame)
+-            this._watch = setInterval(
+-                this.proxy('update_counter'),
++            this._watch = setInterval(function () {
++                    this.update_counter(this.current());
++                }.bind(this),
+                 33);
+         },
+         watch_stop: function () {
+             clearInterval(this._watch);
++            var time = this.current();
+-            this.update_counter();
++            this.update_counter(time);
+             this._start = this._watch = null;
+             this.$el.removeClass('oe_web_example_started')
+                     .addClass('oe_web_example_stopped');
++            new instance.web.Model('web_example.stopwatch').call('create', [{
++                user_id: instance.session.uid,
++                time: time,
++            }]);
+         },
+         destroy: function () {
+             if (this._watch) {
+                 clearInterval(this._watch);
+             }
+             this._super();
+         }
+     });
+ };