~jri-openerp/openerp-web-training/openerp-web-training

 

.. topic:: Exercise - Usage of QWeb in Widgets

 

    Create a widget whose constructor contains two parameters aside from ``parent``: ``product_names`` and ``color``.

    ``product_names`` is a list of strings, each one being a name of product. ``color`` is a string containing a color

    in CSS color format (ie: ``#000000`` for black). That widget should display the given product names one under the

    other, each one in a separate box with a background color with the value of ``color`` and a border. You must use

    QWeb to render the HTML. This exercise will necessitate some CSS that you should put in

    ``oepetstore/static/src/css/petstore.css``. Display that widget in the ``HomePage`` widget with a list of five

    products and green as the background color for boxes.

 

.. only:: not nosolutions

 

    **Solution:**

 

    ::

 

        openerp.oepetstore = function(instance) {

            var _t = instance.web._t,

                _lt = instance.web._lt;

            var QWeb = instance.web.qweb;

 

            instance.oepetstore = {};

 

            instance.oepetstore.HomePage = instance.web.Widget.extend({

                start: function() {

                    var products = new instance.oepetstore.ProductsWidget(this, ["cpu", "mouse", "keyboard", "graphic card", "screen"], "#00FF00");

                    products.appendTo(this.$el);

                },

            });

 

            instance.oepetstore.ProductsWidget = instance.web.Widget.extend({

                template: "ProductsWidget",

                init: function(parent, products, color) {

                    this._super(parent);

                    this.products = products;

                    this.color = color;

                },

            });

            

            instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');

        }

 

    ::

 

        <?xml version="1.0" encoding="UTF-8"?>

 

        <templates xml:space="preserve">

            <t t-name="ProductsWidget">

                <div>

                    <t t-foreach="widget.products" t-as="product">

                        <span class="oe_products_item" t-att-style="'background-color: ' + widget.color + ';'"><t t-esc="product"/></span><br/>

                    </t>

                </div>

            </t>

        </templates>

 

    ::

 

        .oe_products_item {

            display: inline-block;

            padding: 3px;

            margin: 5px;

            border: 1px solid black;

            border-radius: 3px;

        }

 

    .. image:: img/qweb.png

       :align: center

       :width: 70%