[ADD] readonly & movable form view

bzr revid: xmo@openerp.com-20110930081247-wl1d0i7hz206244o

addons/web/static/src/js/view_form.js

@@ -74,16 +74,23 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView#
         });
         this._super();
     },
+    reposition: function ($e) {
+        this.$element = $e;
+        this.on_loaded();
+    },
     on_loaded: function(data) {
         var self = this;
-        this.fields_view = data;
-        var frame = new (this.registry.get_object('frame'))(this, this.fields_view.arch);
+        if (data) {
+            this.fields_view = data;
+            var frame = new (this.registry.get_object('frame'))(this, this.fields_view.arch);
 
-        this.$element.html(QWeb.render(this.form_template, { 'frame': frame, 'view': this }));
+            this.rendered = QWeb.render(this.form_template, { 'frame': frame, 'view': this });
+        }
+        this.$element.html(this.rendered);
         _.each(this.widgets, function(w) {
             w.start();
         });
-        this.$form_header = this.$element.find('#' + this.element_id + '_header');
+        this.$form_header = this.$element.find('.oe_form_header:first');
         this.$form_header.find('div.oe_form_pager button[data-pager-action]').click(function() {
             var action = $(this).data('pager-action');
             self.on_pager_action(action);
@@ -94,6 +101,17 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView#
         this.$form_header.find('button.oe_form_button_cancel').click(this.do_cancel);
         this.$form_header.find('button.oe_form_button_new').click(this.on_button_new);
         this.$form_header.find('button.oe_form_button_duplicate').click(this.on_button_duplicate);
+        this.$form_header.find('button.oe_form_button_toggle').click(function () {
+            self.translatable_fields = [];
+            self.widgets = {};
+            self.fields = {};
+            self.$form_header.find('button').unbind('click');
+            self.registry = self.registry === openerp.web.form.widgets
+                    ? openerp.web.form.readonly
+                    : openerp.web.form.widgets;
+            self.on_loaded(self.fields_view);
+            self.reload();
+        });
 
         if (this.options.sidebar && this.options.sidebar_id) {
             this.sidebar = new openerp.web.Sidebar(this, this.options.sidebar_id);
@@ -197,7 +215,7 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView#
         }
     },
     do_update_pager: function(hide_index) {
-        var $pager = this.$element.find('#' + this.element_id + '_header div.oe_form_pager');
+        var $pager = this.$form_header.find('div.oe_form_pager');
         var index = hide_index ? '-' : this.dataset.index + 1;
         $pager.find('span.oe_pager_index').html(index);
         $pager.find('span.oe_pager_count').html(this.dataset.ids.length);
@@ -625,6 +643,7 @@ openerp.web.form.compute_domain = function(expr, fields) {
 
 openerp.web.form.Widget = openerp.web.Widget.extend(/** @lends openerp.web.form.Widget# */{
     template: 'Widget',
+    identifier_prefix: 'formview-widget-',
     /**
      * @constructs openerp.web.form.Widget
      * @extends openerp.web.Widget
@@ -638,11 +657,13 @@ openerp.web.form.Widget = openerp.web.Widget.extend(/** @lends openerp.web.form.
         this.modifiers = JSON.parse(this.node.attrs.modifiers || '{}');
         this.type = this.type || node.tag;
         this.element_name = this.element_name || this.type;
-        this.element_id = [this.view.element_id, this.element_name, this.view.widgets_counter++].join("_");
+        this.element_class = [
+            'formview', this.view.view_id, this.element_name,
+            this.view.widgets_counter++].join("_");
 
-        this._super(view, this.element_id);
+        this._super(view);
 
-        this.view.widgets[this.element_id] = this;
+        this.view.widgets[this.element_class] = this;
         this.children = node.children;
         this.colspan = parseInt(node.attrs.colspan || 1, 10);
         this.decrease_max_width = 0;
@@ -655,7 +676,7 @@ openerp.web.form.Widget = openerp.web.Widget.extend(/** @lends openerp.web.form.
         this.width = this.node.attrs.width;
     },
     start: function() {
-        this.$element = $('#' + this.element_id);
+        this.$element = this.view.$element.find('.' + this.element_class);
     },
     process_modifiers: function() {
         var compute_domain = openerp.web.form.compute_domain;
@@ -759,13 +780,24 @@ openerp.web.form.WidgetNotebook = openerp.web.form.Widget.extend({
         for (var i = 0; i < node.children.length; i++) {
             var n = node.children[i];
             if (n.tag == "page") {
-                var page = new openerp.web.form.WidgetNotebookPage(this.view, n, this, this.pages.length);
+                var page = new openerp.web.form.WidgetNotebookPage(
+                        this.view, n, this, this.pages.length);
                 this.pages.push(page);
             }
         }
     },
     start: function() {
+        var self = this;
         this._super.apply(this, arguments);
+        this.$element.find('> ul > li').each(function (index, tab_li) {
+            var page = self.pages[index],
+                id = _.uniqueId(self.element_name + '-');
+            page.element_id = id;
+            $(tab_li).find('a').attr('href', '#' + id);
+        });
+        this.$element.find('> div').each(function (index, page) {
+            page.id = self.pages[index].element_id;
+        });
         this.$element.tabs();
         this.view.on_button_new.add_last(this.do_select_first_visible_tab);
     },
@@ -787,11 +819,11 @@ openerp.web.form.WidgetNotebookPage = openerp.web.form.WidgetFrame.extend({
         this.index = index;
         this.element_name = 'page_' + index;
         this._super(view, node);
-        this.element_tab_id = this.element_id + '_tab';
     },
     start: function() {
         this._super.apply(this, arguments);
-        this.$element_tab = $('#' + this.element_tab_id);
+        this.$element_tab = this.notebook.$element.find(
+                '> ul > li:eq(' + this.index + ')');
     },
     update_dom: function() {
         if (this.invisible && this.index === this.notebook.$element.tabs('option', 'selected')) {
@@ -803,9 +835,9 @@ openerp.web.form.WidgetNotebookPage = openerp.web.form.WidgetFrame.extend({
 });
 
 openerp.web.form.WidgetSeparator = openerp.web.form.Widget.extend({
+    template: 'WidgetSeparator',
     init: function(view, node) {
         this._super(view, node);
-        this.template = "WidgetSeparator";
         this.orientation = node.attrs.orientation || 'horizontal';
         if (this.orientation === 'vertical') {
             this.width = '1';
@@ -815,9 +847,9 @@ openerp.web.form.WidgetSeparator = openerp.web.form.Widget.extend({
 });
 
 openerp.web.form.WidgetButton = openerp.web.form.Widget.extend({
+    template: 'WidgetButton',
     init: function(view, node) {
         this._super(view, node);
-        this.template = "WidgetButton";
         if (this.string) {
             // We don't have button key bindings in the webclient
             this.string = this.string.replace(/_/g, '');
@@ -869,6 +901,7 @@ openerp.web.form.WidgetButton = openerp.web.form.Widget.extend({
 });
 
 openerp.web.form.WidgetLabel = openerp.web.form.Widget.extend({
+    template: 'WidgetLabel',
     init: function(view, node) {
         this.element_name = 'label_' + node.attrs.name;
 
@@ -879,7 +912,6 @@ openerp.web.form.WidgetLabel = openerp.web.form.Widget.extend({
             this.template = "WidgetParagraph";
             this.colspan = parseInt(this.node.attrs.colspan || 1, 10);
         } else {
-            this.template = "WidgetLabel";
             this.colspan = 1;
             this.width = '1%';
             this.decrease_max_width = 1;
@@ -898,7 +930,7 @@ openerp.web.form.WidgetLabel = openerp.web.form.Widget.extend({
         var self = this;
         this.$element.find("label").dblclick(function() {
             var widget = self['for'] || self;
-            console.log(widget.element_id , widget);
+            console.log(widget.element_class , widget);
             window.w = widget;
         });
     }
@@ -1040,10 +1072,7 @@ openerp.web.form.Field = openerp.web.form.Widget.extend(/** @lends openerp.web.f
 });
 
 openerp.web.form.FieldChar = openerp.web.form.Field.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldChar";
-    },
+    template: 'FieldChar',
     start: function() {
         this._super.apply(this, arguments);
         this.$element.find('input').change(this.on_ui_change);
@@ -1052,6 +1081,7 @@ openerp.web.form.FieldChar = openerp.web.form.Field.extend({
         this._super.apply(this, arguments);
         var show_value = openerp.web.format_value(value, this, '');
         this.$element.find('input').val(show_value);
+        return show_value;
     },
     update_dom: function() {
         this._super.apply(this, arguments);
@@ -1076,10 +1106,7 @@ openerp.web.form.FieldChar = openerp.web.form.Field.extend({
 });
 
 openerp.web.form.FieldEmail = openerp.web.form.FieldChar.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldEmail";
-    },
+    template: 'FieldEmail',
     start: function() {
         this._super.apply(this, arguments);
         this.$element.find('button').click(this.on_button_clicked);
@@ -1090,18 +1117,11 @@ openerp.web.form.FieldEmail = openerp.web.form.FieldChar.extend({
         } else {
             location.href = 'mailto:' + this.value;
         }
-    },
-    set_value: function(value) {
-        this._super.apply(this, arguments);
-        this.$element.find('a').attr('href', 'mailto:' + this.$element.find('input').val());
     }
 });
 
 openerp.web.form.FieldUrl = openerp.web.form.FieldChar.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldUrl";
-    },
+    template: 'FieldUrl',
     start: function() {
         this._super.apply(this, arguments);
         this.$element.find('button').click(this.on_button_clicked);
@@ -1252,10 +1272,7 @@ openerp.web.form.FieldDate = openerp.web.form.FieldDatetime.extend({
 });
 
 openerp.web.form.FieldText = openerp.web.form.Field.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldText";
-    },
+    template: 'FieldText',
     start: function() {
         this._super.apply(this, arguments);
         this.$element.find('textarea').change(this.on_ui_change);
@@ -1288,10 +1305,7 @@ openerp.web.form.FieldText = openerp.web.form.Field.extend({
 });
 
 openerp.web.form.FieldBoolean = openerp.web.form.Field.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldBoolean";
-    },
+    template: 'FieldBoolean',
     start: function() {
         var self = this;
         this._super.apply(this, arguments);
@@ -1322,10 +1336,7 @@ openerp.web.form.FieldBoolean = openerp.web.form.Field.extend({
 });
 
 openerp.web.form.FieldProgressBar = openerp.web.form.Field.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldProgressBar";
-    },
+    template: 'FieldProgressBar',
     start: function() {
         this._super.apply(this, arguments);
         this.$element.find('div').progressbar({
@@ -1348,10 +1359,10 @@ openerp.web.form.FieldTextXml = openerp.web.form.Field.extend({
 });
 
 openerp.web.form.FieldSelection = openerp.web.form.Field.extend({
+    template: 'FieldSelection',
     init: function(view, node) {
         var self = this;
         this._super(view, node);
-        this.template = "FieldSelection";
         this.values = this.field.selection;
         _.each(this.values, function(v, i) {
             if (v[0] === false && v[1] === '') {
@@ -1458,9 +1469,9 @@ openerp.web.form.dialog = function(content, options) {
 };
 
 openerp.web.form.FieldMany2One = openerp.web.form.Field.extend({
+    template: 'FieldMany2One',
     init: function(view, node) {
         this._super(view, node);
-        this.template = "FieldMany2One";
         this.limit = 7;
         this.value = null;
         this.cm_id = _.uniqueId('m2o_cm_');
@@ -1785,10 +1796,10 @@ var commands = {
     }
 };
 openerp.web.form.FieldOne2Many = openerp.web.form.Field.extend({
+    template: 'FieldOne2Many',
     multi_selection: false,
     init: function(view, node) {
         this._super(view, node);
-        this.template = "FieldOne2Many";
         this.is_started = $.Deferred();
         this.form_last_update = $.Deferred();
         this.disable_utility_classes = true;
@@ -1967,9 +1978,8 @@ openerp.web.form.FieldOne2Many = openerp.web.form.Field.extend({
     },
     validate: function() {
         this.invalid = false;
-        var self = this;
-        var view = self.viewmanager.views[self.viewmanager.active_view].controller;
-        if (self.viewmanager.active_view === "form") {
+        var view = this.viewmanager.views[this.viewmanager.active_view].controller;
+        if (this.viewmanager.active_view === "form") {
             for (var f in view.fields) {
                 f = view.fields[f];
                 if (!f.is_valid()) {
@@ -2043,10 +2053,10 @@ openerp.web.form.One2ManyListView = openerp.web.ListView.extend({
 });
 
 openerp.web.form.FieldMany2Many = openerp.web.form.Field.extend({
+    template: 'FieldMany2Many',
     multi_selection: false,
     init: function(view, node) {
         this._super(view, node);
-        this.template = "FieldMany2Many";
         this.list_id = _.uniqueId("many2many");
         this.is_started = $.Deferred();
     },
@@ -2390,9 +2400,9 @@ openerp.web.form.FormOpenDataset = openerp.web.ReadOnlyDataSetSearch.extend({
 });
 
 openerp.web.form.FieldReference = openerp.web.form.Field.extend({
+    template: 'FieldReference',
     init: function(view, node) {
         this._super(view, node);
-        this.template = "FieldReference";
         this.fields_view = {
             fields: {
                 selection: {
@@ -2527,10 +2537,7 @@ openerp.web.form.FieldBinary = openerp.web.form.Field.extend({
 });
 
 openerp.web.form.FieldBinaryFile = openerp.web.form.FieldBinary.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldBinaryFile";
-    },
+    template: 'FieldBinaryFile',
     set_value: function(value) {
         this._super.apply(this, arguments);
         var show_value = (value != null && value !== false) ? value : '';
@@ -2558,10 +2565,7 @@ openerp.web.form.FieldBinaryFile = openerp.web.form.FieldBinary.extend({
 });
 
 openerp.web.form.FieldBinaryImage = openerp.web.form.FieldBinary.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldBinaryImage";
-    },
+    template: 'FieldBinaryImage',
     start: function() {
         this._super.apply(this, arguments);
         this.$image = this.$element.find('img.oe-binary-image');
@@ -2636,6 +2640,93 @@ openerp.web.form.FieldStatus = openerp.web.form.Field.extend({
     }
 });
 
+openerp.web.form.WidgetNotebookReadonly = openerp.web.form.WidgetNotebook.extend({
+    template: 'WidgetNotebook.readonly'
+});
+openerp.web.form.FieldReadonly = openerp.web.form.Field.extend({
+
+});
+openerp.web.form.FieldCharReadonly = openerp.web.form.FieldReadonly.extend({
+    template: 'FieldChar.readonly',
+    set_value: function (value) {
+        this._super.apply(this, arguments);
+        var show_value = openerp.web.format_value(value, this, '');
+        this.$element.find('div').text(show_value);
+        return show_value;
+    }
+});
+openerp.web.form.FieldURIReadonly = openerp.web.form.FieldCharReadonly.extend({
+    template: 'FieldURI.readonly',
+    scheme: null,
+    set_value: function (value) {
+        var displayed = this._super.apply(this, arguments);
+        this.$element.find('a')
+                .attr('href', this.scheme + ':' + displayed)
+                .text(displayed);
+    }
+});
+openerp.web.form.FieldEmailReadonly = openerp.web.form.FieldURIReadonly.extend({
+    scheme: 'mailto'
+});
+openerp.web.form.FieldUrlReadonly = openerp.web.form.FieldURIReadonly.extend({
+    set_value: function (value) {
+        var s = /(\w+):(\.+)/.match(value);
+        if (!(s[0] === 'http' || s[0] === 'https')) { return; }
+        this.scheme = s[0];
+        this._super(s[1]);
+    }
+});
+openerp.web.form.FieldBooleanReadonly = openerp.web.form.FieldCharReadonly.extend({
+    set_value: function (value) {
+        this._super(value ? '\u2714' : '\u2718');
+    }
+});
+openerp.web.form.FieldSelectionReadonly = openerp.web.form.FieldReadonly.extend({
+    template: 'FieldChar.readonly',
+    init: function(view, node) {
+        // lifted straight from r/w version
+        var self = this;
+        this._super(view, node);
+        this.values = this.field.selection;
+        _.each(this.values, function(v, i) {
+            if (v[0] === false && v[1] === '') {
+                self.values.splice(i, 1);
+            }
+        });
+        this.values.unshift([false, '']);
+    },
+    set_value: function (value) {
+        value = value === null ? false : value;
+        value = value instanceof Array ? value[0] : value;
+        var option = _(this.values)
+            .detect(function (record) { return record[0] === value; });
+        this._super(value);
+        this.$element.find('div').text(option ? option[1] : this.values[0][1]);
+    }
+});
+openerp.web.form.FieldMany2OneReadonly = openerp.web.form.FieldCharReadonly.extend({
+    set_value: function (value) {
+        value = value || null;
+        this.invalid = false;
+        var self = this;
+        this.tmp_value = value;
+        self.update_dom();
+        self.on_value_changed();
+        var real_set_value = function(rval) {
+            self.$element.find('div').text(rval ? rval[1] : '');
+        };
+        if(typeof(value) === "number") {
+            var dataset = new openerp.web.DataSetStatic(
+                    this, this.field.relation, self.build_context());
+            dataset.name_get([value], function(data) {
+                real_set_value(data[0]);
+            }).fail(function() {self.tmp_value = undefined;});
+        } else {
+            setTimeout(function() {real_set_value(value);}, 0);
+        }
+    }
+});
+
 /**
  * Registry of form widgets, called by :js:`openerp.web.FormView`
  */
@@ -2668,6 +2759,22 @@ openerp.web.form.widgets = new openerp.web.Registry({
     'binary': 'openerp.web.form.FieldBinaryFile',
     'statusbar': 'openerp.web.form.FieldStatus'
 });
+openerp.web.form.readonly = openerp.web.form.widgets.clone({
+    'notebook': 'openerp.web.form.WidgetNotebookReadonly',
+    'char': 'openerp.web.form.FieldCharReadonly',
+    'email': 'openerp.web.form.FieldEmailReadonly',
+    'url': 'openerp.web.form.FieldUrlReadonly',
+    'text': 'openerp.web.form.FieldCharReadonly',
+    'text_wiki' : 'openerp.web.form.FieldCharReadonly',
+    'date': 'openerp.web.form.FieldCharReadonly',
+    'datetime': 'openerp.web.form.FieldCharReadonly',
+    'selection' : 'openerp.web.form.FieldSelectionReadonly',
+    'many2one': 'openerp.web.form.FieldMany2OneReadonly',
+    'boolean': 'openerp.web.form.FieldBooleanReadonly',
+    'float': 'openerp.web.form.FieldCharReadonly',
+    'integer': 'openerp.web.form.FieldCharReadonly',
+    'float_time': 'openerp.web.form.FieldCharReadonly'
+});
 
 };
 

addons/web/static/src/xml/base.xml

@@ -642,7 +642,7 @@
     <t t-raw="frame.render()"/>
 </t>
 <t t-name="FormView">
-    <div class="oe_form_header" t-att-id="view.element_id + '_header'">
+    <div class="oe_form_header">
         <div class="oe_form_buttons" t-if="view.options.action_buttons !== false">
             <!--<button type="button" class="oe_form_button_save">
                 <span class="oe_form_on_update">Save</span>
@@ -655,6 +655,7 @@
             <!--<button type="button" class="oe_form_button_cancel">Cancel</button>-->
             <button type="button" class="oe_form_button_new">New</button>
             <button type="button" class="oe_form_button_duplicate oe_form_on_update">Duplicate</button>
+            <button type="button" class="oe_form_button_toggle">Readonly/Editable</button>
         </div>
         <div class="oe_form_pager" t-if="view.options.pager !== false">
             <button type="button" data-pager-action="first">First</button>
@@ -714,8 +715,7 @@
                 t-att-width="td.width"
                 t-att-nowrap="td.nowrap or td.is_field_m2o? 'true' : undefined"
                 t-att-valign="td.table ? 'top' : undefined"
-                t-att-id="td.element_id"
-                t-attf-class="oe_form_frame_cell #{td.classname}"
+                t-attf-class="oe_form_frame_cell #{td.classname} #{td.element_class}"
             >
                 <t t-raw="td.render()"/>
             </td>
@@ -725,8 +725,8 @@
 </t>
 <t t-name="WidgetNotebook">
     <ul>
-        <li t-foreach="widget.pages" t-as="page" t-att-id="page.element_tab_id">
-            <a t-att-href="'#' + page.element_id">
+        <li t-foreach="widget.pages" t-as="page">
+            <a href="#">
                 <t t-esc="page.string"/>
             </a>
         </li>
@@ -736,17 +736,23 @@
     </t>
 </t>
 <t t-name="WidgetNotebookPage">
-    <div t-att-id="widget.element_id">
+    <div>
         <t t-call="WidgetFrame"/>
     </div>
 </t>
+<t t-name="WidgetNotebook.readonly">
+    <t t-foreach="widget.pages" t-as="page">
+        <h3><t t-esc="page.string"/></h3>
+        <t t-raw="page.render()"/>
+    </t>
+</t>
 <t t-name="WidgetSeparator">
     <div t-if="widget.orientation !== 'vertical'" t-att-class="'separator ' + widget.orientation">
         <t t-esc="widget.string"/>
     </div>
 </t>
 <t t-name="WidgetLabel">
-    <label t-att-for="widget.element_id + '_field'"
+    <label t-att-for="widget.element_id"
            t-att-class="'oe_label' + (widget.help ? '_help' : '')"
            t-att-title="widget.help">
         <t t-esc="widget.string"/>
@@ -760,12 +766,22 @@
 <t t-name="FieldChar">
     <input type="text" size="1"
         t-att-name="widget.name"
-        t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"
+        t-att-id="widget.element_id"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
         t-attf-style="width: #{widget.field.translate ? '99' : '100'}%"
     />
     <img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>
 </t>
+<t t-name="FieldChar.readonly">
+    <div
+        t-att-id="widget.element_id"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
+        t-attf-style="width: #{widget.field.translate ? '99' : '100'}%">
+    </div>
+</t>
+<t t-name="FieldURI.readonly">
+    <a href="#">#</a>
+</t>
 <t t-name="FieldEmail">
     <table cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
@@ -797,8 +813,8 @@
 <t t-name="FieldText">
     <textarea rows="6"
         t-att-name="widget.name"
-        t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"
+        t-att-id="widget.element_id"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
         t-attf-style="width: #{widget.field.translate ? '99' : '100'}%"
     ></textarea>
     <img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>
@@ -818,7 +834,7 @@
     <select
         t-att-name="widget.name"
         t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"
+        t-attf-class="field_#{widget.type} #{widget.element_class}"
         style="width: 100%">
             <t t-foreach="widget.values" t-as="option">
                 <option><t t-esc="option[1]"/></option>
@@ -826,9 +842,9 @@
     </select>
 </t>
 <t t-name="FieldMany2One">
-    <div t-att-id="widget.element_id" class="oe-m2o">
-        <input t-att-id="widget.element_id + '_input'" type="text" size="1" style="width: 100%;"/>
-        <span class="oe-m2o-drop-down-button" t-att-id="widget.element_id + '_drop_down'">
+    <div t-att-class="widget.element_class" class="oe-m2o">
+        <input type="text" size="1" style="width: 100%;"/>
+        <span class="oe-m2o-drop-down-button">
             <img src="/web/static/src/img/down-arrow.png" /></span>
         <span class="oe-m2o-cm-button" t-att-id="widget.name + '_open'">
             <img src="/web/static/src/img/icons/gtk-index.png"/></span>
@@ -851,8 +867,6 @@
     </ul>
 </t>
 <t t-name="FieldOne2Many">
-    <div t-att-id="widget.element_id">
-    </div>
 </t>
 <t t-name="FieldMany2Many">
     <div t-att-id="widget.list_id"></div>
@@ -860,10 +874,10 @@
 <t t-name="FieldReference">
     <table border="0" width="100%" cellpadding="0" cellspacing="0" class="oe_frame oe_forms">
     <tr>
-        <td t-att-id="widget.selection.element_id" class="oe_form_frame_cell oe_form_selection">
+        <td t-attf-class="oe_form_frame_cell oe_form_selection #{widget.selection.element_class}">
             <t t-raw="widget.selection.render()"/>
         </td>
-        <td t-att-id="widget.m2o.element_id" class="oe_form_frame_cell oe_form_many2one" nowrap="true">
+        <td class="oe_form_frame_cell oe_form_many2one #{widget.selection.element_class}" nowrap="true">
             <t t-raw="widget.m2o.render()"/>
         </td>
     </tr>
@@ -873,7 +887,7 @@
     <input type="checkbox"
         t-att-name="widget.name"
         t-att-id="widget.element_id + '_field'"
-        t-att-class="'field_' + widget.type"/>
+        t-attf-class="field_#{widget.type} #{widget.element_class}"/>
 </t>
 <t t-name="FieldProgressBar">
     <div t-opentag="true" class="oe-progressbar">
@@ -888,7 +902,7 @@
                 t-att-border="widget.readonly ? 0 : 1"
                 t-att-id="widget.element_id + '_field'"
                 t-att-name="widget.name"
-                t-att-class="'field_' + widget.type"
+                t-attf-class="field_#{widget.type} #{widget.element_class}"
                 t-att-width="widget.node.attrs.img_width || widget.node.attrs.width"
                 t-att-height="widget.node.attrs.img_height || widget.node.attrs.height"
             />
@@ -936,7 +950,7 @@
             <input type="text" size="1"
                 t-att-name="widget.name"
                 t-att-id="widget.element_id + '_field'"
-                t-att-class="'field_' + widget.type" style="width: 100%"
+                t-attf-class="field_#{widget.type} #{widget.element_class}" style="width: 100%"
             />
         </td>
         <td class="oe-binary" nowrap="true">
@@ -981,7 +995,7 @@
 </t>
 <t t-name="WidgetButton">
     <button type="button"
-        t-att-id="widget.element_id + '_button'"
+        t-attf-class="#{widget.element_class}"
         t-att-title="widget.help"
         style="width: 100%" class="button">
         <img t-if="widget.node.attrs.icon" t-att-src="'/web/static/src/img/icons/' + widget.node.attrs.icon + '.png'" width="16" height="16"/>

addons/web_tests/__init__.py

@@ -0,0 +1 @@
+# -*- coding: utf-8 -*-

addons/web_tests/__openerp__.py

@@ -0,0 +1,8 @@
+{
+    "name": "Tests",
+    "version": "2.0",
+    "depends": [],
+    "js": ["static/src/js/*.js"],
+    "css": ['static/src/css/*.css'],
+    'active': True,
+}

addons/web_tests/static/src/css/web_tests.css

@@ -0,0 +1,3 @@
+.oe-bunchaforms > div {
+    float: left;
+}

addons/web_tests/static/src/js/web_tests.js

@@ -0,0 +1,37 @@
+openerp.web_tests = function (db) {
+    db.web.client_actions.add(
+        'buncha-forms', 'instance.web_tests.BunchaForms');
+    db.web_tests = {};
+    db.web_tests.BunchaForms = db.web.Widget.extend({
+        init: function (parent) {
+            this._super(parent);
+            this.dataset = new db.web.DataSetSearch(this, 'test.listview.relations');
+            this.form = new db.web.FormView(this, this.dataset, false, {
+                action_buttons: false,
+                pager: false
+            });
+            this.form.registry = db.web.form.readonly;
+        },
+        render: function () {
+            return '<div class="oe-bunchaforms"></div>';
+        },
+        start: function () {
+            $.when(
+                this.dataset.read_slice(),
+                this.form.appendTo(this.$element)).then(this.on_everything_loaded);
+        },
+        on_everything_loaded: function (slice) {
+            var records = slice[0].records;
+            if (!records.length) {
+                this.form.on_record_loaded({});
+                return;
+            }
+            this.form.on_record_loaded(records[0]);
+            _(records.slice(1)).each(function (record, index) {
+                this.dataset.index = index+1;
+                this.form.reposition($('<div>').appendTo(this.$element));
+                this.form.on_record_loaded(record);
+            }, this);
+        }
+    });
+};

openerp-web.py

@@ -38,7 +38,7 @@ server_options.add_option('--no-serve-static', dest='serve_static',
                           default=True, action='store_false',
                           help="Do not serve static files via this server")
 server_options.add_option('--multi-threaded', dest='threaded',
-                          default=False, action='store_true',
+                          default=True, action='store_true',
                           help="Spawn one thread per HTTP request")
 server_options.add_option('--proxy-mode', dest='proxy_mode',
                           default=False, action='store_true',