[imp] partially nivified the pos

bzr revid: nicolas.vanhoren@openerp.com-20111122061617-yk74cqmd61wrb8uw

2 files changed, 335 insertions, 374 deletions

diff --git a/addons/point_of_sale/static/src/js/pos.js b/addons/point_of_sale/static/src/js/pos.js
index 59c13e0553c..d1611cd87d8 100644
--- a/addons/point_of_sale/static/src/js/pos.js
+++ b/addons/point_of_sale/static/src/js/pos.js
@@ -162,11 +162,11 @@ openerp.point_of_sale = function(db) {
     /* global variable */
     var pos;
 
-    var App, CashRegister, CashRegisterCollection, Category, CategoryCollection, CategoryView,
-    NumpadState, NumpadView, Order, OrderButtonView, OrderCollection, OrderView, Orderline,
-    OrderlineCollection, OrderlineView, PaymentButtonView, PaymentView, Paymentline,
-    PaymentlineCollection, PaymentlineView, PaypadView, Product, ProductCollection,
-    ProductListView, ProductView, ReceiptLineView, ReceiptView, Shop, ShopView, StepsView;
+    var App, CashRegister, CashRegisterCollection, Category, CategoryCollection, CategoryWidget,
+    NumpadState, NumpadWidget, Order, OrderButtonView, OrderCollection, OrderWidget, Orderline,
+    OrderlineCollection, OrderlineWidget, PaymentButtonWidget, PaymentWidget, Paymentline,
+    PaymentlineCollection, PaymentlineWidget, PaypadWidget, Product, ProductCollection,
+    ProductListWidget, ProductWidget, ReceiptLineWidget, ReceiptWidget, Shop, ShopView, StepsWidget;
 
     /*
      ---
@@ -530,57 +530,48 @@ openerp.point_of_sale = function(db) {
      Views
      ---
      */
-    NumpadView = (function() {
-        __extends(NumpadView, Backbone.View);
-        function NumpadView() {
-            NumpadView.__super__.constructor.apply(this, arguments);
-        }
-
-        NumpadView.prototype.initialize = function(options) {
-            return this.state = options.state;
-        };
-        NumpadView.prototype.events = {
-            'click button#numpad-backspace': 'clickDeleteLastChar',
-            'click button#numpad-minus': 'clickSwitchSign',
-            'click button.number-char': 'clickAppendNewChar',
-            'click button.mode-button': 'clickChangeMode'
-        };
-        NumpadView.prototype.clickDeleteLastChar = function() {
+    NumpadWidget = db.web.Widget.extend({
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.state = options.state;
+        },
+        start: function() {
+            this.$element.find('button#numpad-backspace').click(_.bind(this.clickDeleteLastChar, this));
+            this.$element.find('button#numpad-minus').click(_.bind(this.clickSwitchSign, this));
+            this.$element.find('button.number-char').click(_.bind(this.clickAppendNewChar, this));
+            this.$element.find('button.mode-button').click(_.bind(this.clickChangeMode, this));
+        },
+        clickDeleteLastChar: function() {
             return this.state.deleteLastChar();
-        };
-        NumpadView.prototype.clickSwitchSign = function() {
+        },
+        clickSwitchSign: function() {
             return this.state.switchSign();
-        };
-        NumpadView.prototype.clickAppendNewChar = function(event) {
+        },
+        clickAppendNewChar: function(event) {
             var newChar;
             newChar = event.currentTarget.innerText;
             return this.state.appendNewChar(newChar);
-        };
-        NumpadView.prototype.clickChangeMode = function(event) {
+        },
+        clickChangeMode: function(event) {
             var newMode;
             $('.selected-mode').removeClass('selected-mode');
             $(event.currentTarget).addClass('selected-mode');
             newMode = event.currentTarget.attributes['data-mode'].nodeValue;
             return this.state.changeMode(newMode);
-        };
-        return NumpadView;
-    })();
+        }
+    });
     /*
      Gives access to the payment methods (aka. 'cash registers')
      */
-    PaypadView = (function() {
-        __extends(PaypadView, Backbone.View);
-        function PaypadView() {
-            PaypadView.__super__.constructor.apply(this, arguments);
-        }
-
-        PaypadView.prototype.initialize = function(options) {
-            return this.shop = options.shop;
-        };
-        PaypadView.prototype.events = {
-            'click button': 'performPayment'
-        };
-        PaypadView.prototype.performPayment = function(event) {
+    PaypadWidget = db.web.Widget.extend({
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.shop = options.shop;
+        },
+        start: function() {
+            this.$element.find('button').click(_.bind(this.performPayment, this));
+        },
+        performPayment: function(event) {
             var cashRegister, cashRegisterCollection, cashRegisterId;
             /* set correct view */
             $('.step-screen').hide();
@@ -592,32 +583,26 @@ openerp.point_of_sale = function(db) {
                 return (item.get('id')) === parseInt(cashRegisterId, 10);
             }, this));
             return (this.shop.get('selectedOrder')).addPaymentLine(cashRegister);
-        };
-        PaypadView.prototype.render = function() {
-            $(this.el).empty();
+        },
+        render_element: function() {
+            this.$element.empty();
             return (this.shop.get('cashRegisters')).each(__bind( function(cashRegister) {
-                return $(this.el).append((new PaymentButtonView({
-                        model: cashRegister
-                    })).render());
+                var button = new PaymentButtonWidget();
+                button.model = cashRegister;
+                button.appendTo(this.$element);
             }, this));
-        };
-        return PaypadView;
-    })();
-    PaymentButtonView = (function() {
-        __extends(PaymentButtonView, Backbone.View);
-        function PaymentButtonView() {
-            PaymentButtonView.__super__.constructor.apply(this, arguments);
         }
-
-        PaymentButtonView.prototype.template = qweb_template('pos-payment-button-template');
-        PaymentButtonView.prototype.render = function() {
-            return $(this.el).html(this.template({
+    });
+    PaymentButtonWidget = db.web.Widget.extend({
+        template_fct: qweb_template('pos-payment-button-template'),
+        render_element: function() {
+            this.$element.html(this.template_fct({
                 id: this.model.get('id'),
                 name: (this.model.get('journal_id'))[1]
             }));
-        };
-        return PaymentButtonView;
-    })();
+            return this;
+        }
+    });
     /*
      There are 3 steps in a POS workflow:
      1. prepare the order (i.e. chose products, quantities etc.)
@@ -626,112 +611,101 @@ openerp.point_of_sale = function(db) {
      It should be possible to go back to any step as long as step 3 hasn't been completed.
      Modifying an order after validation shouldn't be allowed.
      */
-    StepsView = (function() {
-        __extends(StepsView, Backbone.View);
-        function StepsView() {
-            StepsView.__super__.constructor.apply(this, arguments);
-        }
-
-        StepsView.prototype.initialize = function(options) {
-            return this.step = "products";
-        };
-        StepsView.prototype.events = {
-            'click input.step-button': 'clickChangeStep'
-        };
-        StepsView.prototype.clickChangeStep = function(event) {
+    StepsWidget = db.web.Widget.extend({
+        init: function(parent, element_id) {
+            this._super(parent, element_id);
+            this.step = "products";
+        },
+        start: function() {
+            this.$element.find('input.step-button').click(_.bind(this.clickChangeStep, this));
+        },
+        clickChangeStep: function(event) {
             var newStep;
             newStep = event.currentTarget.attributes['data-step'].nodeValue;
             $('.step-screen').hide();
             $('#' + newStep + '-screen').show();
             return this.step = newStep;
-        };
-        return StepsView;
-    })();
+        }
+    });
     /*
      Shopping carts.
      */
-    OrderlineView = (function() {
-        __extends(OrderlineView, Backbone.View);
-        function OrderlineView() {
-            OrderlineView.__super__.constructor.apply(this, arguments);
-        }
-
-        OrderlineView.prototype.tagName = 'tr';
-        OrderlineView.prototype.template = qweb_template('pos-orderline-template');
-        OrderlineView.prototype.initialize = function(options) {
+    OrderlineWidget = db.web.Widget.extend({
+        tagName: 'tr',
+        template_fct: qweb_template('pos-orderline-template'),
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.model = options.model;
             this.model.bind('change', __bind( function() {
-                $(this.el).hide();
-                return this.render();
+                this.$element.hide();
+                this.render_element();
             }, this));
             this.model.bind('remove', __bind( function() {
-                return $(this.el).remove();
+                return this.$element.remove();
             }, this));
             this.order = options.order;
-            return this.numpadState = options.numpadState;
-        };
-        OrderlineView.prototype.events = {
-            'click': 'clickHandler'
-        };
-        OrderlineView.prototype.clickHandler = function() {
+            this.numpadState = options.numpadState;
+        },
+        start: function() {
+            this.$element.click(_.bind(this.clickHandler, this));
+        },
+        clickHandler: function() {
             this.numpadState.reset();
             return this.select();
-        };
-        OrderlineView.prototype.render = function() {
+        },
+        render_element: function() {
             this.select();
-            return $(this.el).html(this.template(this.model.toJSON())).fadeIn(400, function() {
+            return this.$element.html(this.template_fct(this.model.toJSON())).fadeIn(400, function() {
                 return $('#current-order').scrollTop($(this).offset().top);
             });
-        };
-        OrderlineView.prototype.select = function() {
+        },
+        select: function() {
             $('tr.selected').removeClass('selected');
-            $(this.el).addClass('selected');
+            this.$element.addClass('selected');
             return this.order.selected = this.model;
-        };
-        return OrderlineView;
-    })();
-    OrderView = (function() {
-        __extends(OrderView, Backbone.View);
-        function OrderView() {
-            OrderView.__super__.constructor.apply(this, arguments);
-        }
-
-        OrderView.prototype.initialize = function(options) {
+        },
+    });
+    OrderWidget = db.web.Widget.extend({
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
             this.shop = options.shop;
             this.numpadState = options.numpadState;
             this.shop.bind('change:selectedOrder', this.changeSelectedOrder, this);
-            return this.bindOrderLineEvents();
-        };
-        OrderView.prototype.changeSelectedOrder = function() {
+            this.bindOrderLineEvents();
+        },
+        changeSelectedOrder: function() {
             this.currentOrderLines.unbind();
             this.bindOrderLineEvents();
-            return this.render();
-        };
-        OrderView.prototype.bindOrderLineEvents = function() {
+            return this.render_element();
+        },
+        bindOrderLineEvents: function() {
             this.currentOrderLines = (this.shop.get('selectedOrder')).get('orderLines');
             this.currentOrderLines.bind('add', this.addLine, this);
-            this.currentOrderLines.bind('change', this.render, this);
+            this.currentOrderLines.bind('change', this.render_element, this);
             return this.currentOrderLines.bind('remove', this.render, this);
-        };
-        OrderView.prototype.addLine = function(newLine) {
-            $(this.el).append((new OrderlineView({
+        },
+        addLine: function(newLine) {
+            var line = new OrderlineWidget(null, null, {
                     model: newLine,
                     order: this.shop.get('selectedOrder'),
                     numpadState: this.numpadState
-                })).render());
+            });
+            line.appendTo(this.$element);
             return this.updateSummary();
-        };
-        OrderView.prototype.render = function() {
-            $(this.el).empty();
+        },
+        render_element: function() {
+            this.$element.empty();
             this.currentOrderLines.each(__bind( function(orderLine) {
-                return $(this.el).append((new OrderlineView({
+                var line = new OrderlineWidget(null, null, {
                         model: orderLine,
                         order: this.shop.get('selectedOrder'),
                         numpadState: this.numpadState
-                    })).render());
+                });
+                line.appendTo(this.$element);
             }, this));
             return this.updateSummary();
-        };
-        OrderView.prototype.updateSummary = function() {
+        },
+        updateSummary: function() {
             var currentOrder, tax, total, totalTaxExcluded;
             currentOrder = this.shop.get('selectedOrder');
             total = currentOrder.getTotal();
@@ -740,31 +714,25 @@ openerp.point_of_sale = function(db) {
             $('#subtotal').html(totalTaxExcluded.toFixed(2)).hide().fadeIn();
             $('#tax').html(tax.toFixed(2)).hide().fadeIn();
             return $('#total').html(total.toFixed(2)).hide().fadeIn();
-        };
-        return OrderView;
-    })();
+        },
+    });
     /*
      "Products" step.
      */
-    CategoryView = (function() {
-        __extends(CategoryView, Backbone.View);
-        function CategoryView() {
-            CategoryView.__super__.constructor.apply(this, arguments);
-        }
-        
-        CategoryView.prototype.events = {
-            'click .oe-pos-categories-list a': 'changeCategory'
-        };
-
-        CategoryView.prototype.template = qweb_template('pos-category-template');
-        CategoryView.prototype.render = function(ancestors, children) {
+    CategoryWidget = db.web.Widget.extend({
+        start: function() {
+            this.$element.find(".oe-pos-categories-list a").click(_.bind(this.changeCategory, this));
+        },
+        template_fct: qweb_template('pos-category-template'),
+        render_element: function() {
+            var self = this;
             var c;
-            return $(this.el).html(this.template({
+            this.$element.html(this.template_fct({
                 breadcrumb: (function() {
                     var _i, _len, _results;
                     _results = [];
-                    for (_i = 0, _len = ancestors.length; _i < _len; _i++) {
-                        c = ancestors[_i];
+                    for (_i = 0, _len = self.ancestors.length; _i < _len; _i++) {
+                        c = self.ancestors[_i];
                         _results.push(pos.categories[c]);
                     }
                     return _results;
@@ -772,88 +740,77 @@ openerp.point_of_sale = function(db) {
                 categories: (function() {
                     var _i, _len, _results;
                     _results = [];
-                    for (_i = 0, _len = children.length; _i < _len; _i++) {
-                        c = children[_i];
+                    for (_i = 0, _len = self.children.length; _i < _len; _i++) {
+                        c = self.children[_i];
                         _results.push(pos.categories[c]);
                     }
                     return _results;
                 })()
             }));
-        };
-        CategoryView.prototype.changeCategory = function(a) {
+        },
+        changeCategory: function(a) {
             var id = $(a.target).data("category-id");
-            this.trigger("changeCategory", id);
-        };
-        return CategoryView;
-    })();
-    ProductView = (function() {
-        __extends(ProductView, Backbone.View);
-        function ProductView() {
-            ProductView.__super__.constructor.apply(this, arguments);
-        }
-
-        ProductView.prototype.tagName = 'li';
-        ProductView.prototype.className = 'product';
-        ProductView.prototype.template = qweb_template('pos-product-template');
-        ProductView.prototype.events = {
-            'click a': 'addToOrder'
-        };
-        ProductView.prototype.initialize = function(options) {
-            return this.shop = options.shop;
-        };
-        ProductView.prototype.addToOrder = function(event) {
+            this.on_change_category(id);
+        },
+        on_change_category: function(id) {},
+    });
+    ProductWidget = db.web.Widget.extend({
+        tag_name:'li',
+        template_fct: qweb_template('pos-product-template'),
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.model = options.model;
+            this.shop = options.shop;
+        },
+        start: function(options) {
+            $("a", this.$element).click(_.bind(this.addToOrder, this));
+        },
+        addToOrder: function(event) {
             /* Preserve the category URL */
             event.preventDefault();
             return (this.shop.get('selectedOrder')).addProduct(this.model);
-        };
-        ProductView.prototype.render = function() {
-            return $(this.el).html(this.template(this.model.toJSON()));
-        };
-        return ProductView;
-    })();
-    ProductListView = (function() {
-        __extends(ProductListView, Backbone.View);
-        function ProductListView() {
-            ProductListView.__super__.constructor.apply(this, arguments);
-        }
-
-        ProductListView.prototype.tagName = 'ol';
-        ProductListView.prototype.className = 'product-list';
-        ProductListView.prototype.initialize = function(options) {
+        },
+        render_element: function() {
+            this.$element.addClass("product");
+            this.$element.html(this.template_fct(this.model.toJSON()));
+            return this;
+        },
+    });
+    ProductListWidget = db.web.Widget.extend({
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.model = options.model;
             this.shop = options.shop;
-            return (this.shop.get('products')).bind('reset', this.render, this);
-        };
-        ProductListView.prototype.render = function() {
-            $(this.el).empty();
+            this.shop.get('products').bind('reset', this.render_element, this);
+        },
+        render_element: function() {
+            this.$element.empty();
             (this.shop.get('products')).each(__bind( function(product) {
-                return $(this.el).append((new ProductView({
+                var p = new ProductWidget(null, null, {
                         model: product,
                         shop: this.shop
-                    })).render());
+                });
+                p.appendTo(this.$element);
             }, this));
-            return $('#products-screen').append(this.el);
-        };
-        return ProductListView;
-    })();
+            return this;
+        },
+    });
     /*
      "Payment" step.
      */
-    PaymentlineView = (function() {
-        __extends(PaymentlineView, Backbone.View);
-        function PaymentlineView() {
-            PaymentlineView.__super__.constructor.apply(this, arguments);
-        }
-
-        PaymentlineView.prototype.tagName = 'tr';
-        PaymentlineView.prototype.className = 'paymentline';
-        PaymentlineView.prototype.template = qweb_template('pos-paymentline-template');
-        PaymentlineView.prototype.initialize = function() {
-            return this.model.bind('change', this.render, this);
-        };
-        PaymentlineView.prototype.events = {
-            'keyup input': 'changeAmount'
-        };
-        PaymentlineView.prototype.changeAmount = function(event) {
+    PaymentlineWidget = db.web.Widget.extend({
+        tag_name: 'tr',
+        template_fct: qweb_template('pos-paymentline-template'),
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.model = options.model;
+            this.model.bind('change', this.render_element, this);
+        },
+        start: function () {
+            this.$element.addClass('paymentline');
+            $('input', this.$element).keyup(_.bind(this.changeAmount, this));
+        },
+        changeAmount: function(event) {
             var newAmount;
             newAmount = event.currentTarget.value;
             if (newAmount && !isNaN(newAmount)) {
@@ -861,164 +818,155 @@ openerp.point_of_sale = function(db) {
                     amount: parseFloat(newAmount)
                 });
             }
-        };
-        PaymentlineView.prototype.render = function() {
-            return $(this.el).html(this.template({
+        },
+        render_element: function() {
+            this.$element.html(this.template_fct({
                 name: (this.model.get('journal_id'))[1],
                 amount: this.model.get('amount')
             }));
-        };
-        return PaymentlineView;
-    })();
-    PaymentView = (function() {
-        __extends(PaymentView, Backbone.View);
-        function PaymentView() {
-            PaymentView.__super__.constructor.apply(this, arguments);
-        }
-
-        PaymentView.prototype.initialize = function(options) {
+            return this;
+        },
+    });
+    PaymentWidget = db.web.Widget.extend({
+        init: function(parent, element_id, options) {
+            this._super(parent, element_id);
+            this.model = options.model;
             this.shop = options.shop;
             this.shop.bind('change:selectedOrder', this.changeSelectedOrder, this);
             this.bindPaymentLineEvents();
-            return this.bindOrderLineEvents();
-        };
-        PaymentView.prototype.paymentLineList = function() {
-            return $(this.el).find('#paymentlines');
-        };
-        PaymentView.prototype.events = {
-            'click button#validate-order': 'validateCurrentOrder'
-        };
-        PaymentView.prototype.validateCurrentOrder = function() {
+            this.bindOrderLineEvents();
+        },
+        paymentLineList: function() {
+            return this.$element.find('#paymentlines');
+        },
+        start: function() {
+            $('button#validate-order', this.$element).click(_.bind(this.validateCurrentOrder, this));
+        },
+        validateCurrentOrder: function() {
             var callback, currentOrder;
             currentOrder = this.shop.get('selectedOrder');
-            callback = __bind( function() {
+            callback = __bind(function() {
                 return currentOrder.set({
                     validated: true
                 });
             }, this);
-            return pos.push('pos.order', currentOrder.exportAsJSON(), callback);
-        };
-        PaymentView.prototype.bindPaymentLineEvents = function() {
+            pos.push('pos.order', currentOrder.exportAsJSON(), callback);
+        },
+        bindPaymentLineEvents: function() {
             this.currentPaymentLines = (this.shop.get('selectedOrder')).get('paymentLines');
             this.currentPaymentLines.bind('add', this.addPaymentLine, this);
-            this.currentPaymentLines.bind('change', this.render, this);
-            this.currentPaymentLines.bind('remove', this.render, this);
-            return this.currentPaymentLines.bind('all', this.updatePaymentSummary, this);
-        };
-        PaymentView.prototype.bindOrderLineEvents = function() {
+            this.currentPaymentLines.bind('all', this.updatePaymentSummary, this);
+        },
+        bindOrderLineEvents: function() {
             this.currentOrderLines = (this.shop.get('selectedOrder')).get('orderLines');
-            return this.currentOrderLines.bind('all', this.updatePaymentSummary, this);
-        };
-        PaymentView.prototype.changeSelectedOrder = function() {
+            this.currentOrderLines.bind('all', this.updatePaymentSummary, this);
+        },
+        changeSelectedOrder: function() {
             this.currentPaymentLines.unbind();
             this.bindPaymentLineEvents();
             this.currentOrderLines.unbind();
             this.bindOrderLineEvents();
-            return this.render();
-        };
-        PaymentView.prototype.addPaymentLine = function(newPaymentLine) {
-            return this.paymentLineList().append((new PaymentlineView({
+            this.render_element();
+        },
+        addPaymentLine: function(newPaymentLine) {
+            var x = new PaymentlineWidget(null, null, {
                     model: newPaymentLine
-                })).render());
-        };
-        PaymentView.prototype.render = function() {
+                });
+            x.appendTo(this.paymentLineList());
+        },
+        render_element: function() {
             this.paymentLineList().empty();
             this.currentPaymentLines.each(__bind( function(paymentLine) {
-                return this.paymentLineList().append((new PaymentlineView({
-                        model: paymentLine
-                    })).render());
+                var x = new PaymentlineWidget(null, null, {
+                    model: paymentLine
+                });
+                this.paymentLineList().append(x);
             }, this));
-            return this.updatePaymentSummary();
-        };
-        PaymentView.prototype.updatePaymentSummary = function() {
+            this.updatePaymentSummary();
+        },
+        updatePaymentSummary: function() {
             var currentOrder, dueTotal, paidTotal, remaining, remainingAmount;
             currentOrder = this.shop.get('selectedOrder');
             paidTotal = currentOrder.getPaidTotal();
             dueTotal = currentOrder.getTotal();
-            $(this.el).find('#payment-due-total').html(dueTotal.toFixed(2));
-            $(this.el).find('#payment-paid-total').html(paidTotal.toFixed(2));
+            this.$element.find('#payment-due-total').html(dueTotal.toFixed(2));
+            this.$element.find('#payment-paid-total').html(paidTotal.toFixed(2));
             remainingAmount = dueTotal - paidTotal;
             remaining = remainingAmount > 0 ? 0 : (-remainingAmount).toFixed(2);
-            return $('#payment-remaining').html(remaining);
-        };
-        return PaymentView;
-    })();
+            $('#payment-remaining').html(remaining);
+        },
+    });
     /*
      "Receipt" step.
      */
-    ReceiptLineView = (function() {
-        __extends(ReceiptLineView, Backbone.View);
-        function ReceiptLineView() {
-            ReceiptLineView.__super__.constructor.apply(this, arguments);
-        }
-
-        ReceiptLineView.prototype.tagName = 'tr';
-        ReceiptLineView.prototype.className = 'receiptline';
-        ReceiptLineView.prototype.template = qweb_template('pos-receiptline-template');
-        ReceiptLineView.prototype.initialize = function() {
-            return this.model.bind('change', this.render, this);
-        };
-        ReceiptLineView.prototype.render = function() {
-            return $(this.el).html(this.template(this.model.toJSON()));
-        };
-        return ReceiptLineView;
-    })();
-    ReceiptView = (function() {
-        __extends(ReceiptView, Backbone.View);
-        function ReceiptView() {
-            ReceiptView.__super__.constructor.apply(this, arguments);
-        }
-
-        ReceiptView.prototype.initialize = function(options) {
+    ReceiptLineWidget = db.web.Widget.extend({
+        tag_name: 'tr',
+        template_fct: qweb_template('pos-receiptline-template'),
+        init: function(parent, options) {
+            this._super(parent);
+            this.model = options.model;
+            this.model.bind('change', this.render_element, this);
+        },
+        render_element: function() {
+            this.$element.addClass('receiptline');
+            this.$element.html(this.template_fct(this.model.toJSON()));
+        },
+    });
+    ReceiptWidget = db.web.Widget.extend({
+        init: function(parent, options) {
+            this._super(parent);
+            this.model = options.model;
             this.shop = options.shop;
             this.shop.bind('change:selectedOrder', this.changeSelectedOrder, this);
             this.bindOrderLineEvents();
-            return this.bindPaymentLineEvents();
-        };
-        ReceiptView.prototype.events = {
-            "click button#pos-finish-order": "finishOrder"
-        };
-        ReceiptView.prototype.finishOrder = function() {
+            this.bindPaymentLineEvents();
+        },
+        start: function () {
+            $('button#pos-finish-order', this.$element).click(_.bind(this.finishOrder, this));
+        },
+        finishOrder: function() {
             $('.step-screen').hide();
             $('#products-screen').show();
             this.shop.get('selectedOrder').destroy();
-        };
-        ReceiptView.prototype.receiptLineList = function() {
-            return $(this.el).find('#receiptlines');
-        };
-        ReceiptView.prototype.bindOrderLineEvents = function() {
+        },
+        receiptLineList: function() {
+            return this.$element.find('#receiptlines');
+        },
+        bindOrderLineEvents: function() {
             this.currentOrderLines = (this.shop.get('selectedOrder')).get('orderLines');
             this.currentOrderLines.bind('add', this.addReceiptLine, this);
-            this.currentOrderLines.bind('change', this.render, this);
-            return this.currentOrderLines.bind('remove', this.render, this);
-        };
-        ReceiptView.prototype.bindPaymentLineEvents = function() {
+            this.currentOrderLines.bind('change', this.render_element, this);
+            this.currentOrderLines.bind('remove', this.render_element, this);
+        },
+        bindPaymentLineEvents: function() {
             this.currentPaymentLines = (this.shop.get('selectedOrder')).get('paymentLines');
-            return this.currentPaymentLines.bind('all', this.updateReceiptSummary, this);
-        };
-        ReceiptView.prototype.changeSelectedOrder = function() {
+            this.currentPaymentLines.bind('all', this.updateReceiptSummary, this);
+        },
+        changeSelectedOrder: function() {
             this.currentOrderLines.unbind();
             this.bindOrderLineEvents();
             this.currentPaymentLines.unbind();
             this.bindPaymentLineEvents();
-            return this.render();
-        };
-        ReceiptView.prototype.addReceiptLine = function(newOrderItem) {
-            this.receiptLineList().append((new ReceiptLineView({
+            this.render_element();
+        },
+        addReceiptLine: function(newOrderItem) {
+            var x = new ReceiptLineWidget(null, {
                     model: newOrderItem
-                })).render());
-            return this.updateReceiptSummary();
-        };
-        ReceiptView.prototype.render = function() {
-            this.receiptLineList().empty();
+            });
+            x.appendTo(this.receiptLineList());
+            this.updateReceiptSummary();
+        },
+        render_element: function() {
+            this.$element.html(qweb_template('pos-receipt-view'));
             this.currentOrderLines.each(__bind( function(orderItem) {
-                return this.receiptLineList().append((new ReceiptLineView({
+                var x = new ReceiptLineWidget(null, {
                         model: orderItem
-                    })).render());
+                });
+                x.appendTo(this.receiptLineList());
             }, this));
-            return this.updateReceiptSummary();
-        };
-        ReceiptView.prototype.updateReceiptSummary = function() {
+            this.updateReceiptSummary();
+        },
+        updateReceiptSummary: function() {
             var change, currentOrder, tax, total;
             currentOrder = this.shop.get('selectedOrder');
             total = currentOrder.getTotal();
@@ -1026,10 +974,9 @@ openerp.point_of_sale = function(db) {
             change = currentOrder.getPaidTotal() - total;
             $('#receipt-summary-tax').html(tax.toFixed(2));
             $('#receipt-summary-total').html(total.toFixed(2));
-            return $('#receipt-summary-change').html(change.toFixed(2));
-        };
-        return ReceiptView;
-    })();
+            $('#receipt-summary-change').html(change.toFixed(2));
+        },
+    });
     OrderButtonView = (function() {
         __extends(OrderButtonView, Backbone.View);
         function OrderButtonView() {
@@ -1087,38 +1034,45 @@ openerp.point_of_sale = function(db) {
             this.numpadState = new NumpadState({
                 shop: this.shop
             });
-            this.productListView = new ProductListView({
+            this.productListView = new ProductListWidget(null, "products-screen-ol", {
                 shop: this.shop
             });
-            this.paypadView = new PaypadView({
-                shop: this.shop,
-                el: $('#paypad')
+            this.productListView.render_element();
+            this.productListView.start();
+            this.paypadView = new PaypadWidget(null, 'paypad', {
+                shop: this.shop
             });
-            this.paypadView.render();
-            this.orderView = new OrderView({
+            this.paypadView.render_element();
+            this.paypadView.start();
+            this.orderView = new OrderWidget(null, 'current-order-content', {
                 shop: this.shop,
-                numpadState: this.numpadState,
-                el: $('#current-order-content')
+                numpadState: this.numpadState
             });
-            this.paymentView = new PaymentView({
-                shop: this.shop,
-                el: $('#payment-screen')
+            this.orderView.start();
+            this.paymentView = new PaymentWidget(null, 'payment-screen', {
+                shop: this.shop
             });
-            this.receiptView = new ReceiptView({
+            this.paymentView.render_element();
+            this.paymentView.start();
+            this.receiptView = new ReceiptWidget(null, {
                 shop: this.shop,
-                el: $('#receipt-screen')
-            });
-            this.numpadView = new NumpadView({
-                state: this.numpadState,
-                el: $('#numpad')
             });
-            return this.stepsView = new StepsView({
-                el: $('#steps')
+            debugger;
+            this.receiptView.replace($('#receipt-screen'));
+            this.numpadView = new NumpadWidget(null, 'numpad', {
+                state: this.numpadState
             });
+            this.numpadView.start();
+            this.stepsView = new StepsWidget(null, 'steps');
+            this.stepsView.start();
+            this.start();
         };
         ShopView.prototype.events = {
             'click button#neworder-button': 'createNewOrder'
         };
+        ShopView.prototype.start = function() {
+            this.productListView.start();
+        };
         ShopView.prototype.createNewOrder = function() {
             var newOrder;
             newOrder = new Order;
@@ -1149,10 +1103,9 @@ openerp.point_of_sale = function(db) {
                 shop: this.shop,
                 el: $element
             });
-            this.categoryView = new CategoryView;
-            this.categoryView.bind("changeCategory", this.category, this);
+            this.categoryView = new CategoryWidget(null, 'products-screen-categories');
+            this.categoryView.on_change_category.add_last(_.bind(this.category, this));
             this.category();
-            return this.categoryView;
         };
         App.prototype.category = function(id) {
             var c, products;
@@ -1160,8 +1113,10 @@ openerp.point_of_sale = function(db) {
                 id = 0;
             }
             c = pos.categories[id];
-            $('#products-screen').html(this.categoryView.render(c.ancestors, c.children));
-            this.categoryView.delegateEvents();
+            this.categoryView.ancestors = c.ancestors;
+            this.categoryView.children = c.children;
+            this.categoryView.render_element();
+            this.categoryView.start();
             products = pos.store.get('product.product').filter( function(p) {
                 var _ref;
                 return _ref = p.pos_categ_id[0], __indexOf.call(c.subtree, _ref) >= 0;
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index b9148395cbe..74ff2229729 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -88,7 +88,10 @@
                 </footer>
             </div>
             <div id="rightpane">
-                <div id="products-screen" class="step-screen selected-step"></div>
+                <div id="products-screen" class="step-screen selected-step">
+                    <div id="products-screen-categories"/>
+                    <ol id="products-screen-ol" class="product-list"></ol>
+                </div>
                 <div id="payment-screen" class="step-screen" style="display:none">
                     <header><h2>Payment</h2></header>
                     <div class="pos-step-container">
@@ -114,28 +117,7 @@
                         </div>
                     </div>
                 </div>
-                <div id="receipt-screen" class="step-screen" style="display:none">
-                    <header><h2>Receipt</h2></header>
-                    <div class="pos-step-container">
-                        <div class="pos-receipt-container">
-                            <div class="pos-sale-ticket">
-                                OpenERP Point of Sale<br />
-                                <br />
-                                <div class="pos-rigth-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
-                                    Date.CultureInfo.formatPatterns.longTime)"/></div>
-                                <br />
-                                <table id="receiptlines"></table>
-                                <br />
-                                <table>
-                                    <tr><td>Total:</td><td class="pos-rigth-align"><span id="receipt-summary-total"></span> €</td></tr>
-                                    <tr><td>Tax:</td><td class="pos-rigth-align"><span id="receipt-summary-tax"></span> €</td></tr>
-                                    <tr><td>Change:</td><td class="pos-rigth-align"><span id="receipt-summary-change"></span> €</td></tr>
-                                </table>
-                            </div>
-                        </div>
-                        <button id="pos-finish-order">Next Order</button>
-                    </div>
-                </div>
+                <span id="receipt-screen"></span>
             </div>
         </div>
     </div>
@@ -237,4 +219,28 @@
         <button class="select-order">Order</button>
         <button class="close-order">X</button>
     </t>
+    <t t-name="pos-receipt-view">
+        <div id="receipt-screen" class="step-screen" style="display:none">
+            <header><h2>Receipt</h2></header>
+            <div class="pos-step-container">
+                <div class="pos-receipt-container">
+                    <div class="pos-sale-ticket">
+                        OpenERP Point of Sale<br />
+                        <br />
+                        <div class="pos-rigth-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
+                            Date.CultureInfo.formatPatterns.longTime)"/></div>
+                        <br />
+                        <table id="receiptlines"></table>
+                        <br />
+                        <table>
+                            <tr><td>Total:</td><td class="pos-rigth-align"><span id="receipt-summary-total"></span> €</td></tr>
+                            <tr><td>Tax:</td><td class="pos-rigth-align"><span id="receipt-summary-tax"></span> €</td></tr>
+                            <tr><td>Change:</td><td class="pos-rigth-align"><span id="receipt-summary-change"></span> €</td></tr>
+                        </table>
+                    </div>
+                </div>
+                <button id="pos-finish-order">Next Order</button>
+            </div>
+        </div>
+    </t>
 </templates>
\ No newline at end of file