Getting Started with Odoo in Qweb

Reference

can refer to the official website example https://doc.odoo.com/trunk/web/qweb/or

http://thierry-godin.developpez.com/openerp/tutorial-module-creation-pos-modification-english-version/

1 Qweb Official definition

Qweb is used as the Web Client template engine for OpenERP. It is an XML-based template language that is similar to Genshi, Thymeleaf, and facelets templates and has the following characteristics:

Complete rendering in the client browser;

A template file can contain multiple templates, usually a template file contains a template;

It is well supported for OPENERP Web Components and can also be used in other frameworks beyond the OpenERP web.

2 using Qweb in OpenERP

2.1 Get the Qweb example source code managed by bazaar in Odoo

BZR Branch Lp:~niv-openerp/+junk/oepetstore-r 1-ossl.cert_reqs=none

Copy the project from the script directory below the Python installation path oepetstore to the OpenERP plugin (addons) directory, start OpenERP, update and install the Oepetstore module:

When you're done, visit http://localhost:8069/under Chrome, then click menu: Pet storeàhome Page

Click Invalid, the system will prompt.

This is because the definition in the __openerp__.py file defines that the module needs to be loaded petstore.js not referenced to the system.

Temporarily did not find the reason, I use the odoo_8.0rc1-latest version, do not know whether the version from 7 to 8 after the change, the solution:

In the module directory to create an XML file (name can be arbitrarily like link.xml), by specifying the way to introduce JS and CSS,

The data content in the module definition is then modified to increase the Link.xml reference. (as far as JS and CSS do not take effect, you can remove the reference inside).

Link.xml content:

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

<!--vim:fdn=3:

-

<openerp>

<data>

<template id="assets_backend" name="Petstore " inherit_id="Web.assets_backend" >

<xpath expr="." position="Inside">

<link rel="stylesheet" href="/oepetstore/static/src/css/petstore.css"/>

<script type="Text/javascript"src="/oepetstore/static/src/js/petstore.js"></script >

</xpath>

</template>

</data>

</openerp>

Reboot the system after completion, upgrade the module, click the menu again: Pet storeàhomepage, the "Petstore home page Loaded" appears under the console to indicate that the module has been successfully run:

To this qweb has not yet begun to use, this is just through Odoo's simple application of widget components.

Official definition of Widgets, reference: https://doc.odoo.com/trunk/web/widget/

Class Openerp.web.Widget ()

This is the base class for all the visual components in Odoo. It corresponds to an MVC view. It handles some of the Web pages that provide a range of services:

Rendering through Qweb;

inheritance relationship;

Lifecycle management (including destruction of subclasses when parent objects are deleted);

DOM document insert operation, via jquery insertion method. The Insert object can be any corresponding jquery method (generic selector, Dom node, and jquery object).

2.2 Using Qweb with widget components

Goal:

Click on the menu on the left to query the table Message_of_the_day data in the module example, and present it as a list by Qweb.

(add some fake data with the menu from the example)

2.2.1 Writing JS Code

Add in Static/src/js/petstore.js

Messagelistpage parts extension from the Widget base class

Instance.oepetstore.MessageListPage = Instance.web.Widget.extend ({

Template: "Message",//Templates root node (corresponding to the XML template file)

Init: function() {

this. _super.apply (this, arguments);

},

Start: function() {

var = this ;

Module name for the Message_of_the_day table

Query plus field queries the specified column, not all columns can be queried

Query (). All () queries all data

Query (). First () queries for article One

New Instance.web.Model ("Message_of_the_day"). Query (["Message", "Create_date"]). All (). Then (function (Result) {

var ss= result.message + result.create_date

Messagelist the resulting josn array, which is parsed by the Qweb tag to a template named Messagelist (corresponding to the XML template file), and the template tag iterates through the Msglist

Self. $el. Append ($ (Qweb.render ("Messagelist", {msglist:result}));

$ (". Button-view"). Click (function(e) {

Alert ("View..");

});

$ (". Button-edit"). Click (function(e) {

Alert ("Edit..");

});

$ (". Button-cancel"). Click (function(e) {

Alert ("Cancel..");

});

});

},

});

Instance.web.client_actions.add (' Petstore.messagemenu ', ' instance.oepetstore.MessageListPage ');

2.2.2 Writing XML template files

Static/src/xml/message.xml

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

<templates xml:space="preserve">

<t t-name="message">

<div class="Oe_petstore_pettoyslist">

</div>

</t>

<t t-name="Messagelist">

<table class="Oe_list_content">

<thead>

<tr>

<th class="oe_list_header_textoe_sortable"> Messages </th>

<th class="oe_list_header_textoe_sortable"> Creation Time </th>

<th> Operations </th>

</tr>

</thead>

<t t-foreach="msglist" t-as="bo">

<tr class="Oe_list_header_columns">

<TD class="Oe_list_field_celloe_list_field_text" ><t t-esc="Bo.message"/></td >

<TD class="Oe_list_field_celloe_list_field_text" ><t t-esc="Bo.create_date"/></ Td>

<td>

<a class="Button-view" t-att-data="bo.id" name="detailbtn" href="#" >< I class="icon-zoom-in"></i> details </a>

<a class="Button-edit" t-att-data="bo.id" name="traceorderbtn" href="javascript: void (0); " ><iclass="fa fa-pencil"></i> edit </a>

<a class="Button-cancel" t-att-data="bo.id" class= "Red"name="Cancelorderbtn" href="javascript:void (0);" ><i class="Glyphicon glyphicon-remove"></i> cancel </a>

</td>

</tr>

</t>

</table>

</t>

</templates>

Here I have added some of Odoo's own CSS styles, after each column of data added a few can be manipulated buttons (where the button function is not implemented, only provide style)

2.2.3 Add menu links and actions to petstore.xml under module and path

<record id="message_day_action"model="Ir.actions.client">

<field name="name"> Information list </field>

<field name="tag">petstore.messagemenu</field>

</record>

<menuitem id="Message_day_action_menu"name="qwebmessagelist " parent= "Petstore_menu" action="message_day_action"/>

Through Qweb simple list of data query has been completed, restart Odoo, upgrade module, click the menu pet storeàqwebmessagelist, the results are as follows:

Tips:

1. In a single module

Openerp.oepetstore = function(instance) {

The function instance can only be defined by one, and is openerp. Module name (must be the same as the module name, otherwise the JS is not properly introduced)

2. The JS, CSS, and XML templates defined in the static directory change the module without the need to upgrade.

2.3 Key Point Description

2.3.1 Qweb Template Engine

The qweb template adds the prefix "T" to the XML attribute:

T-name: template name, such as:

<t t-name= "Message" ></t>

T-foreach=iterable: Looping through tags

<tt-foreach= "Msglist" t-as= "bo" > </t>

T-esc: Reference An instance parameter, you can use any JavaScript expression;

<tt-esc= "Bo.message"/>

T-att-attname: object property setting, such as setting value to input control:

<inputtype= "text" t-att-value= "Order.buyer_memo"/>

Other more tags can refer to https://doc.odoo.com/trunk/web/qweb/under defining Templates node

2.3.2 interaction with the server-read data (call and query)

The client uses Ajax to interact with the server, but the OPENERP framework provides a simplified way to access it through a data model. OpenERP automatically transforms the data model of the server into a client-side model, which can be called directly. The model inside the petstore.py on the server

The call () method applies:

Client calls:

Instance.oepetstore.HomePage =instance.web.widget.extend ({

Start:function () {

var = this;

var model = new Instance.web.Model ("Message_of_the_day");

Model.call ("My_method", [],{context:newinstance.web.compoundcontext ()}). Then (function (Result) {

Self. $el. Append ("<div>hello" +result["Hello"] + "</div>");

});//The page is displayed by reading the data to the server.

},

});

Call () method parameters for the model:
The first argument, name, is the name of the method;
The second parameter, args, is an array of arguments in order. The first three parameters (self, CR, UID) defined by OPENERP are fixed and generated by the framework, meaning that the passed parameter array is inserted from the fourth. And the context is special.

Example: Method definition:

def my_method2 (self, CR, UID, a, B, c,context=none):

Call:

Model.call ("My_method", [1, 2,3], ...//with this a=1, b=2 and C=3

The third parameter, Kwargs, is a named parameter, passed to the Python method parameter by name. For example:

Model.call ("My_method", [], {a:1, b:2, c:3}, ...//with this a=1, b=2 and C=3

The context in the OPENERP model is a special parameter that represents the caller's contexts and is generally used to create a new object instance using the Instance.web.CompoundContext () class provided by the client WebClient instance. The Compoundcontext class provides the user's language and time zone information. You can also add additional data to the constructor:

Model.call ("My_method", [], {context:new instance.web.CompoundContext ({' New_key ': ' Key_value '})}) Defdisplay_ Context (self, CR, UID, Context=none): Print context//would print:{' lang ': ' en_US ', ' new_key ': ' Key_value ', ' tz ': ' Eu Rope/brussels ', ' uid ': 1}

The query () method applies

The query method of mode used in this example

var model = new Instance.web.Model ("Message_of_the_day");

Model.query (["Message", "Create_date"]).

Filter ([[ID, ' = ', 1], [' company_id ', ' = ', Main_company]])

. Limit (All). Then (function (Result) {

Self. $el. Append ($ (Qweb.render ("Messagelist", {msglist:result}));

});

Model: The parameter of the query () method of the data model is a list of the names of the models that need to be read; The method returns a Query object instance of type Instance.web.Query (), including some ways to further define the results of the query. These methods return the same query object itself, so you can link:

Filter (): Specifies the OPENERP domain, which filters query results; limit (): Limits the number of records returned. Finally, the query object's all () method is called to execute the query. The query executes asynchronously, all () returns a deferred, so you use then () to provide a callback function to handle the result. The query for the data model is implemented through RPC calls.

Self. $el get the root node (div) of the message defined in the template, the Append () method assigns the finished page content to the root node.

$ (Qweb.render ("Messagelist", {Msglist:result})) is the result array passed to the Msglist object in the template Messagelist (here is passed to the object and traversed). Returns the full HTML code for the page content.

Getting Started with Odoo in Qweb