Chapter 14: A Brief History Of QWeb¶

Поки що дизайн інтерфейсу нашого модуля нерухомості був досить обмеженим. Побудова перегляду списку проста, оскільки потрібен лише список полів. Те ж саме стосується представлення форми: незважаючи на використання кількох тегів, таких як <group> або <page>, з точки зору дизайну потрібно зробити дуже мало.

Однак, якщо ми хочемо надати унікального вигляду нашому додатку, необхідно піти далі й мати можливість створювати нові представлення. Крім того, для створення інших функцій, таких як PDF-звіти або сторінки веб-сайтів, потрібен ще один гнучкіший інструмент: механізм templating.

Можливо, ви вже знайомі з існуючими механізмами, такими як Jinja (Python), ERB (Ruby) або Twig (PHP). Odoo має власний вбудований механізм: Шаблони QWeb. QWeb є основною системою створення шаблонів, яку використовує Odoo. Це система шаблонів XML, яка використовується переважно для створення фрагментів HTML і сторінок.

Напевно, ви вже натрапляли на канбан-дошку в Odoo, де записи відображаються у формі картки. Ми побудуємо таке представлення для нашого модуля нерухомості.

Конкретний приклад: представлення канбан¶

Reference: the documentation related to this topic can be found in Канбан.

Примітка

Ціль: наприкінці цього розділу має бути створено представлення Канбану властивостей:

У нашому додатку нерухомості ми хотіли б додати представлення Канбан для відображення нашої власності. Представлення Канбан є стандартним представленням Odoo (як представлення форми та списку), але їхня структура набагато гнучкіша. Насправді структура кожної картки є сумішшю елементів форми (включаючи базовий HTML) і QWeb. Визначення представлення Канбан подібне до визначення представлень списку та форм, за винятком того, що їхнім кореневим елементом є <kanban>. У своїй найпростішій формі роедставлення Канбан виглядає так:

<kanban>
    <templates>
        <t t-name="kanban-box">
            <div class="oe_kanban_global_click">
                <field name="name"/>
            </div>
        </t>
    </templates>
</kanban>

Давайте розберемо цей приклад:

<templates>: визначає список шаблонів Шаблони QWeb. Представлення Канбан мають визначати принаймні один кореневий шаблон kanban-box, який буде відтворено один раз для кожного запису.
<t t-name="kanban-box">: <t> є елементом-заповнювачем для директив QWeb. У цьому випадку він використовується для встановлення name шаблону kanban-box
<div class="oe_kanban_global_click">: oe_kanban_global_click робить <div> доступним для відкриття запису.
<field name="name"/>: це додасть поле name до представлення.

Exercise

Створіть мінімальне представлення канбану.

Використовуючи наданий простий приклад, створіть мінімальне предстапвлення Канбан для властивостей. Єдиним полем для відображення є name.

Порада: ви повинні додати kanban у view_mode відповідного ir.actions.act_window.

Коли представлення Канбан запрацює, ми можемо почати його покращувати. Якщо ми хочемо відобразити елемент умовно, ми можемо використати директиву t-if (див. Умовні).

<kanban>
    <field name="state"/>
    <templates>
        <t t-name="kanban-box">
            <div class="oe_kanban_global_click">
                <field name="name"/>
                <div t-if="record.state.raw_value == 'new'">
                    This is new!
                </div>
            </div>
        </t>
    </templates>
</kanban>

Ми додали кілька речей:

t-if: елемент <div> відображається, якщо умова виконується.
record: об’єкт з усіма запитаними полями як його атрибутами. Кожне поле має два атрибути value і raw_value. Перший форматується відповідно до поточних параметрів користувача, а другий є прямим значенням із read().

У наведеному вище прикладі поле name було додано до елемента <templates>, але state знаходиться поза ним. Якщо нам потрібне значення поля, але ми не хочемо відображати його в поданні, можна додати його поза елементом <templates>.

Exercise

Покращити представлення Канбан.

Додайте такі поля до представлення Канбан: очікувана ціна, найкраща ціна, продажна ціна та теги. Зверніть увагу: найкраща ціна відображається лише тоді, коли надходить пропозиція, тоді як ціна продажу відображається лише тоді, коли пропозиція прийнята.

Зверніться до Цілі розділу для наочного прикладу.

Let’s give the final touch to our view: the properties must be grouped by type by default. You might want to have a look at the various options described in Канбан.

Exercise

Додати групування за умовчанням.

Використовуйте відповідний атрибут, щоб згрупувати властивості за типом за замовчуванням. Ви також повинні запобігти перетягуванню.

Зверніться до Цілі розділу для наочного прикладу.

Представлення Канбан є типовим прикладом того, що завжди корисно починати з існуючого представлення та точно його налаштовувати, а не починати з нуля. Є багато доступних варіантів і класів, тож… читайте та вчіться!

Edit on GitHub