diff options
| author | Victor Feyens <vfe@odoo.com> | 2021-04-30 13:24:57 +0000 |
|---|---|---|
| committer | Antoine Vandevenne (anv) <anv@odoo.com> | 2021-05-04 08:09:20 +0000 |
| commit | 27bad8c3e32049ec69a588df0558e57a0b928309 (patch) | |
| tree | b60e430163d486c8c1fd052738c9854aeb8300f5 /doc/reference/qweb.rst | |
| parent | 75a122bbae3a32bfa79da3506179fc63a8bced5d (diff) | |
[MOV] doc: move documentation to a dedicated repository
In odoo/documentation-user#945, the developer documentation is merged
with the user documentation in a single repository and build config.
This commit then removes source files for the developer documentation
from the odoo/odoo repository.
DOC PR: https://github.com/odoo/documentation-user/pull/945
task-2351938
task-2352371
task-2205684
task-2352544
Co-authored-by: Victor Feyens <vfe@odoo.com>
Co-authored-by: Antoine Vandevenne <anv@odoo.com>
Diffstat (limited to 'doc/reference/qweb.rst')
| -rw-r--r-- | doc/reference/qweb.rst | 686 |
1 files changed, 0 insertions, 686 deletions
diff --git a/doc/reference/qweb.rst b/doc/reference/qweb.rst deleted file mode 100644 index b224f46f2d4..00000000000 --- a/doc/reference/qweb.rst +++ /dev/null @@ -1,686 +0,0 @@ -:banner: banners/qweb.jpg - -.. highlight:: xml - -.. _reference/qweb: - -==== -QWeb -==== - -QWeb is the primary templating_ engine used by Odoo\ [#othertemplates]_. It -is an XML templating engine\ [#genshif]_ and used mostly to generate HTML_ -fragments and pages. - -Template directives are specified as XML attributes prefixed with ``t-``, -for instance ``t-if`` for :ref:`reference/qweb/conditionals`, with elements -and other attributes being rendered directly. - -To avoid element rendering, a placeholder element ``<t>`` is also available, -which executes its directive but doesn't generate any output in and of -itself:: - - <t t-if="condition"> - <p>Test</p> - </t> - -will result in:: - - <p>Test</p> - -if ``condition`` is true, but:: - - <div t-if="condition"> - <p>Test</p> - </div> - -will result in:: - - <div> - <p>Test</p> - </div> - -.. _reference/qweb/output: - -Data output -=========== - -QWeb has a primary output directive which automatically HTML-escape its -content limiting XSS_ risks when displaying user-provided content: ``esc``. - -``esc`` takes an expression, evaluates it and prints the content:: - - <p><t t-esc="value"/></p> - -rendered with the value ``value`` set to ``42`` yields:: - - <p>42</p> - -There is one other output directive ``raw`` which behaves the same as -respectively ``esc`` but *does not HTML-escape its output*. It can be useful -to display separately constructed markup (e.g. from functions) or already -sanitized user-provided markup. - -.. _reference/qweb/conditionals: - -Conditionals -============ - -QWeb has a conditional directive ``if``, which evaluates an expression given -as attribute value:: - - <div> - <t t-if="condition"> - <p>ok</p> - </t> - </div> - -The element is rendered if the condition is true:: - - <div> - <p>ok</p> - </div> - -but if the condition is false it is removed from the result:: - - <div> - </div> - -The conditional rendering applies to the bearer of the directive, which does -not have to be ``<t>``:: - - <div> - <p t-if="condition">ok</p> - </div> - -will give the same results as the previous example. - -Extra conditional branching directives ``t-elif`` and ``t-else`` are also -available:: - - <div> - <p t-if="user.birthday == today()">Happy birthday!</p> - <p t-elif="user.login == 'root'">Welcome master!</p> - <p t-else="">Welcome!</p> - </div> - - -.. _reference/qweb/loops: - -Loops -===== - -QWeb has an iteration directive ``foreach`` which take an expression returning -the collection to iterate on, and a second parameter ``t-as`` providing the -name to use for the "current item" of the iteration:: - - <t t-foreach="[1, 2, 3]" t-as="i"> - <p><t t-esc="i"/></p> - </t> - -will be rendered as:: - - <p>1</p> - <p>2</p> - <p>3</p> - -Like conditions, ``foreach`` applies to the element bearing the directive's -attribute, and - -:: - - <p t-foreach="[1, 2, 3]" t-as="i"> - <t t-esc="i"/> - </p> - -is equivalent to the previous example. - -``foreach`` can iterate on an array (the current item will be the current -value) or a mapping (the current item will be the current key). Iterating on an -integer (equivalent to iterating on an array between 0 inclusive and the -provided integer exclusive) is still supported but deprecated. - -In addition to the name passed via ``t-as``, ``foreach`` provides a few other -variables for various data points: - -.. warning:: ``$as`` will be replaced by the name passed to ``t-as`` - -:samp:`{$as}_all` (deprecated) - the object being iterated over - - .. note:: This variable is only available on JavaScript QWeb, not Python. - -:samp:`{$as}_value` - the current iteration value, identical to ``$as`` for lists and integers, - but for mappings it provides the value (where ``$as`` provides the key) -:samp:`{$as}_index` - the current iteration index (the first item of the iteration has index 0) -:samp:`{$as}_size` - the size of the collection if it is available -:samp:`{$as}_first` - whether the current item is the first of the iteration (equivalent to - :samp:`{$as}_index == 0`) -:samp:`{$as}_last` - whether the current item is the last of the iteration (equivalent to - :samp:`{$as}_index + 1 == {$as}_size`), requires the iteratee's size be - available -:samp:`{$as}_parity` (deprecated) - either ``"even"`` or ``"odd"``, the parity of the current iteration round -:samp:`{$as}_even` (deprecated) - a boolean flag indicating that the current iteration round is on an even - index -:samp:`{$as}_odd` (deprecated) - a boolean flag indicating that the current iteration round is on an odd - index - -These extra variables provided and all new variables created into the -``foreach`` are only available in the scope of the``foreach``. If the -variable exists outside the context of the ``foreach``, the value is copied -at the end of the foreach into the global context. - -:: - - <t t-set="existing_variable" t-value="False"/> - <!-- existing_variable now False --> - - <p t-foreach="[1, 2, 3]" t-as="i"> - <t t-set="existing_variable" t-value="True"/> - <t t-set="new_variable" t-value="True"/> - <!-- existing_variable and new_variable now True --> - </p> - - <!-- existing_variable always True --> - <!-- new_variable undefined --> - -.. _reference/qweb/attributes: - -attributes -========== - -QWeb can compute attributes on-the-fly and set the result of the computation -on the output node. This is done via the ``t-att`` (attribute) directive which -exists in 3 different forms: - -:samp:`t-att-{$name}` - an attribute called ``$name`` is created, the attribute value is evaluated - and the result is set as the attribute's value:: - - <div t-att-a="42"/> - - will be rendered as:: - - <div a="42"></div> -:samp:`t-attf-{$name}` - same as previous, but the parameter is a :term:`format string` - instead of just an expression, often useful to mix literal and non-literal - string (e.g. classes):: - - <t t-foreach="[1, 2, 3]" t-as="item"> - <li t-attf-class="row {{ (item_index % 2 === 0) ? 'even' : 'odd' }}"> - <t t-esc="item"/> - </li> - </t> - - will be rendered as:: - - <li class="row even">1</li> - <li class="row odd">2</li> - <li class="row even">3</li> -:samp:`t-att=mapping` - if the parameter is a mapping, each (key, value) pair generates a new - attribute and its value:: - - <div t-att="{'a': 1, 'b': 2}"/> - - will be rendered as:: - - <div a="1" b="2"></div> -:samp:`t-att=pair` - if the parameter is a pair (tuple or array of 2 element), the first - item of the pair is the name of the attribute and the second item is the - value:: - - <div t-att="['a', 'b']"/> - - will be rendered as:: - - <div a="b"></div> - -setting variables -================= - -QWeb allows creating variables from within the template, to memoize a -computation (to use it multiple times), give a piece of data a clearer name, -... - -This is done via the ``set`` directive, which takes the name of the variable -to create. The value to set can be provided in two ways: - -* a ``t-value`` attribute containing an expression, and the result of its - evaluation will be set:: - - <t t-set="foo" t-value="2 + 1"/> - <t t-esc="foo"/> - - will print ``3`` -* if there is no ``t-value`` attribute, the node's body is rendered and set - as the variable's value:: - - <t t-set="foo"> - <li>ok</li> - </t> - <t t-esc="foo"/> - - will generate ``<li>ok</li>`` (the content is escaped as we - used the ``esc`` directive) - - .. note:: using the result of this operation is a significant use-case for - the ``raw`` directive. - -calling sub-templates -===================== - -QWeb templates can be used for top-level rendering, but they can also be used -from within another template (to avoid duplication or give names to parts of -templates) using the ``t-call`` directive:: - - <t t-call="other-template"/> - -This calls the named template with the execution context of the parent, if -``other_template`` is defined as:: - - <p><t t-value="var"/></p> - -the call above will be rendered as ``<p/>`` (no content), but:: - - <t t-set="var" t-value="1"/> - <t t-call="other-template"/> - -will be rendered as ``<p>1</p>``. - -However this has the problem of being visible from outside the ``t-call``. -Alternatively, content set in the body of the ``call`` directive will be -evaluated *before* calling the sub-template, and can alter a local context:: - - <t t-call="other-template"> - <t t-set="var" t-value="1"/> - </t> - <!-- "var" does not exist here --> - -The body of the ``call`` directive can be arbitrarily complex (not just -``set`` directives), and its rendered form will be available within the called -template as a magical ``0`` variable:: - - <div> - This template was called with content: - <t t-raw="0"/> - </div> - -being called thus:: - - <t t-call="other-template"> - <em>content</em> - </t> - -will result in:: - - <div> - This template was called with content: - <em>content</em> - </div> - -Python -====== - -Exclusive directives --------------------- - -Asset bundles -''''''''''''' - -.. todo:: have fme write these up because I've no idea how they work - -"smart records" fields formatting -''''''''''''''''''''''''''''''''' - -The ``t-field`` directive can only be used when performing field access -(``a.b``) on a "smart" record (result of the ``browse`` method). It is able -to automatically format based on field type, and is integrated in the -website's rich text editing. - -``t-options`` can be used to customize fields, the most common option -is ``widget``, other options are field- or widget-dependent. - -Debugging ---------- - -``t-debug`` - invokes a debugger using PDB's ``set_trace`` API. The parameter should - be the name of a module, on which a ``set_trace`` method is called:: - - <t t-debug="pdb"/> - - is equivalent to ``importlib.import_module("pdb").set_trace()`` - -Helpers -------- - -Request-based -''''''''''''' - -Most Python-side uses of QWeb are in controllers (and during HTTP requests), -in which case templates stored in the database (as -:ref:`views <reference/views/qweb>`) can be trivially rendered by calling -:meth:`odoo.http.HttpRequest.render`: - -.. code-block:: python - - response = http.request.render('my-template', { - 'context_value': 42 - }) - -This automatically creates a :class:`~odoo.http.Response` object which can -be returned from the controller (or further customized to suit). - -View-based -'''''''''' - -At a deeper level than the previous helper is the ``render`` method on -``ir.ui.view``: - -.. py:method:: render(cr, uid, id[, values][, engine='ir.qweb][, context]) - - Renders a QWeb view/template by database id or :term:`external id`. - Templates are automatically loaded from ``ir.ui.view`` records. - - Sets up a number of default values in the rendering context: - - ``request`` - the current :class:`~odoo.http.WebRequest` object, if any - ``debug`` - whether the current request (if any) is in ``debug`` mode - :func:`quote_plus <werkzeug.urls.url_quote_plus>` - url-encoding utility function - :mod:`json` - the corresponding standard library module - :mod:`time` - the corresponding standard library module - :mod:`datetime` - the corresponding standard library module - `relativedelta <https://labix.org/python-dateutil#head-ba5ffd4df8111d1b83fc194b97ebecf837add454>`_ - see module - ``keep_query`` - the ``keep_query`` helper function - - :param values: context values to pass to QWeb for rendering - :param str engine: name of the Odoo model to use for rendering, can be - used to expand or customize QWeb locally (by creating - a "new" qweb based on ``ir.qweb`` with alterations) - -.. _reference/qweb/javascript: - -.. todo:: the members below are no longer relevant, section to rewrite - -.. API -.. --- - -.. It is also possible to use the ``ir.qweb`` model directly (and extend it, and -.. inherit from it): - -.. .. automodule:: odoo.addons.base.ir.ir_qweb -.. :members: QWeb, QWebContext, FieldConverter, QwebWidget - -Javascript -========== - -Exclusive directives --------------------- - -Defining templates -'''''''''''''''''' - -The ``t-name`` directive can only be placed at the top-level of a template -file (direct children to the document root):: - - <templates> - <t t-name="template-name"> - <!-- template code --> - </t> - </templates> - -It takes no other parameter, but can be used with a ``<t>`` element or any -other. With a ``<t>`` element, the ``<t>`` should have a single child. - -The template name is an arbitrary string, although when multiple templates -are related (e.g. called sub-templates) it is customary to use dot-separated -names to indicate hierarchical relationships. - -Template inheritance -'''''''''''''''''''' - -Template inheritance is used to either: - - Alter existing templates in-place, e.g. to add information to templates -created by other modules. - - Create a new template from a given parent template - -Template inheritance is performed via the use of two directives: - - ``t-inherit`` which is the name of the template to inherit from, - - ``t-inherit-mode`` which is the behaviour of the inheritance: it can either be - set to ``primary`` to create a new child template from the parented one or - to ``extension`` to alter the parent template in place. - -An optional ``t-name`` directive can also be specified. It will be the name of -the newly created template if used in primary mode, else it will be added as a -comment on the transformed template to help retrace inheritances. - -For the inheritance itself, the changes are done using xpaths directives. -See the XPATH_ documentation for the complete set of available instructions. - -Primary inheritance (child template):: - - <t t-name="child.template" t-inherit="base.template" t-inherit-mode="primary"> - <xpath expr="//ul" position="inside"> - <li>new element</li> - </xpath> - </t> - -Extension inheritance (in-place transformation):: - - <t t-inherit="base.template" t-inherit-mode="extension"> - <xpath expr="//tr[1]" position="after"> - <tr><td>new cell</td></tr> - </xpath> - </t> - -Old inheritance mechanism (deprecated) -'''''''''''''''''''''''''''''''''''''' - -Template inheritance is performed via the ``t-extend`` directive which takes -the name of the template to alter as parameter. - -The directive ``t-extend`` will act as a primary inheritance when combined with -``t-name`` and as an extension one when used alone. - -In both cases the alteration is then performed with any number of ``t-jquery`` -sub-directives:: - - <t t-extend="base.template"> - <t t-jquery="ul" t-operation="append"> - <li>new element</li> - </t> - </t> - -The ``t-jquery`` directives takes a `CSS selector`_. This selector is used -on the extended template to select *context nodes* to which the specified -``t-operation`` is applied: - -``append`` - the node's body is appended at the end of the context node (after the - context node's last child) -``prepend`` - the node's body is prepended to the context node (inserted before the - context node's first child) -``before`` - the node's body is inserted right before the context node -``after`` - the node's body is inserted right after the context node -``inner`` - the node's body replaces the context node's children -``replace`` - the node's body is used to replace the context node itself -``attributes`` - the nodes's body should be any number of ``attribute`` elements, - each with a ``name`` attribute and some textual content, the named - attribute of the context node will be set to the specified value - (either replaced if it already existed or added if not) -No operation - if no ``t-operation`` is specified, the template body is interpreted as - javascript code and executed with the context node as ``this`` - - .. warning:: while much more powerful than other operations, this mode is - also much harder to debug and maintain, it is recommended to - avoid it - -debugging ---------- - -The javascript QWeb implementation provides a few debugging hooks: - -``t-log`` - takes an expression parameter, evaluates the expression during rendering - and logs its result with ``console.log``:: - - <t t-set="foo" t-value="42"/> - <t t-log="foo"/> - - will print ``42`` to the console -``t-debug`` - triggers a debugger breakpoint during template rendering:: - - <t t-if="a_test"> - <t t-debug=""> - </t> - - will stop execution if debugging is active (exact condition depend on the - browser and its development tools) -``t-js`` - the node's body is javascript code executed during template rendering. - Takes a ``context`` parameter, which is the name under which the rendering - context will be available in the ``t-js``'s body:: - - <t t-set="foo" t-value="42"/> - <t t-js="ctx"> - console.log("Foo is", ctx.foo); - </t> - -Helpers -------- - -.. js:attribute:: core.qweb - - (core is the ``web.core`` module) An instance of :js:class:`QWeb2.Engine` with all module-defined template - files loaded, and references to standard helper objects ``_`` - (underscore), ``_t`` (translation function) and JSON_. - - :js:func:`core.qweb.render <QWeb2.Engine.render>` can be used to - easily render basic module templates - -.. _reference/qweb/api: - -API ---- - -.. js:class:: QWeb2.Engine - - The QWeb "renderer", handles most of QWeb's logic (loading, - parsing, compiling and rendering templates). - - Odoo Web instantiates one for the user in the core module, and - exports it to ``core.qweb``. It also loads all the template files - of the various modules into that QWeb instance. - - A :js:class:`QWeb2.Engine` also serves as a "template namespace". - - .. js:function:: QWeb2.Engine.render(template[, context]) - - Renders a previously loaded template to a String, using - ``context`` (if provided) to find the variables accessed - during template rendering (e.g. strings to display). - - :param String template: the name of the template to render - :param Object context: the basic namespace to use for template - rendering - :returns: String - - The engine exposes an other method which may be useful in some - cases (e.g. if you need a separate template namespace with, in - Odoo Web, Kanban views get their own :js:class:`QWeb2.Engine` - instance so their templates don't collide with more general - "module" templates): - - .. js:function:: QWeb2.Engine.add_template(templates) - - Loads a template file (a collection of templates) in the QWeb - instance. The templates can be specified as: - - An XML string - QWeb will attempt to parse it to an XML document then load - it. - - A URL - QWeb will attempt to download the URL content, then load - the resulting XML string. - - A ``Document`` or ``Node`` - QWeb will traverse the first level of the document (the - child nodes of the provided root) and load any named - template or template override. - - :type templates: String | Document | Node - - A :js:class:`QWeb2.Engine` also exposes various attributes for - behavior customization: - - .. js:attribute:: QWeb2.Engine.prefix - - Prefix used to recognize directives during parsing. A string. By - default, ``t``. - - .. js:attribute:: QWeb2.Engine.debug - - Boolean flag putting the engine in "debug mode". Normally, - QWeb intercepts any error raised during template execution. In - debug mode, it leaves all exceptions go through without - intercepting them. - - .. js:attribute:: QWeb2.Engine.jQuery - - The jQuery instance used during template inheritance processing. - Defaults to ``window.jQuery``. - - .. js:attribute:: QWeb2.Engine.preprocess_node - - A ``Function``. If present, called before compiling each DOM - node to template code. In Odoo Web, this is used to - automatically translate text content and some attributes in - templates. Defaults to ``null``. - -.. [#genshif] it is similar in that to Genshi_, although it does not use (and - has no support for) `XML namespaces`_ - -.. [#othertemplates] although it uses a few others, either for historical - reasons or because they remain better fits for the - use case. Odoo 9.0 still depends on Jinja_ and Mako_. - -.. _templating: - https://en.wikipedia.org/wiki/Template_processor - -.. _Jinja: http://jinja.pocoo.org -.. _Mako: https://www.makotemplates.org -.. _Genshi: https://genshi.edgewall.org -.. _XML namespaces: https://en.wikipedia.org/wiki/XML_namespace -.. _HTML: https://en.wikipedia.org/wiki/HTML -.. _XSS: https://en.wikipedia.org/wiki/Cross-site_scripting -.. _JSON: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON -.. _CSS selector: https://api.jquery.com/category/selectors/ -.. _XPATH: https://developer.mozilla.org/en-US/docs/Web/XPath |
