第14章: QWeb の歴史を振り返る

これまでのところ、不動産モジュールのインターフェース設計はかなり限られていました。 リストビューを構築することは簡単です。なぜなら、フィールドのリストだけが必要だからです。 ビューの形式についても同じことが言えます。 <group> や <page> などのいくつかのタグを使用しているにもかかわらず。 デザインに関してはほとんどすることはありません。

しかし、アプリケーションに独自の外観を持たせたい場合は、さらに一歩進んで、新しいビューをデザインできるようにする必要があります。また、PDFレポートやウェブサイトのページなどの他の機能をより柔軟に作成するためには、テンプレートエンジンという別のツールが必要です。

あなたは既に、Jinja(Python)、ERB(Ruby)、Twig(PHP)などの既存のエンジンに慣れ親しんでいるかもしれません。Odooには独自のエンジンが組み込まれています。それは、 QWeb テンプレート です。QWeb は、Odoo で使用される主要なテンプレートエンジンです。これは、XML テンプレートエンジンであり、主に HTML フラグメントやページの生成に使用されます。

皆さんは、Odoo の kanban board で、レコードがカードのような構造で表示されているのを見たことがあると思います。今回はこのようなビューを不動産モジュール用に作成します。

具体例: Kanban ビュー

参照: このトピックに関連するドキュメントは、 かんばん にあります。

注釈

目標: このセクションの最後には、物件情報の Kanban ビューが作成されていることになります。

かんばんビュー

不動産アプリケーションでは、物件を表示するために Kanban ビューを追加したいと考えています。Kanban ビューは、Odooの標準的なビュー(フォームビューやリストビューと同様) ですが、その構造はより柔軟です。実際、各カードの構造は、フォーム要素(基本的なHTMLを含む) とQWebを組み合わせたものになっています。Kanbanビューの定義は、そのルート要素が <kanban> であることを除けば、リストビューやフォームビューの定義と似ています。最もシンプルな形では、Kanbanビューは次のようになります。

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

この例をブレークダウンしてみましょう。

  • <templates>: QWeb テンプレート テンプレートのリストを定義します。 Kanban ビューでは、少なくとも 1 つのルート テンプレート kanban-box を定義する必要があります。これは各レコード毎に1 回レンダリングされます。

  • <t t-name="kanban-box">: <t> は QWeb ディレクティブのプレースホルダ要素です。 この場合、テンプレートの name を kanban-box に設定します。

  • <field name="name"/>: name フィールドをビューに追加します。

Exercise

最小限で Kanban ビューを作成してみましょう。

簡単な例を使用して、最小限で、物件情報の Kanban ビューを作成します。表示するフィールドは name だけです。

ヒント: ir.actions.action_window の view_mode に kanban を追加する必要があります。

Kanban ビューが動作するようになったら、改良を始めましょう。ある要素を条件付きで表示したい場合は、 t-if ディレクティブを使います(条件 を参照)。

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

いくつか追加してみました。

  • t-if: 条件が true の場合、<div> 要素がレンダリングされます。

  • record: 要求されたすべてのフィールドを属性として持つオブジェクト。各フィールドには value と raw_value の 2 つの属性があります。 前者は現在のユーザーパラメータに従ってフォーマットされており、後者は read() からの直接的な値です。

上の例では、フィールド name は <templates> 要素に追加されましたが、state はその外側にあります。 フィールドの値が必要でも、ビューに表示したくない場合は、 `` <templates>`` 要素の外側に追加することが可能です。

Exercise

Kanban ビューを改善してみましょう。

Kanbanビューに次のフィールドを追加します：予想価格（expected price）、最高価格（best price）、販売価格（selling price）、タグ（tags）。特記事項：最高価格（best price）はオファーを受けた時にのみ表示され、販売価格（selling price）はオファーを受け入れた時にのみ表示されます。

見た目の例については、セクションの 目標 を参照してください。

最後にビューに触れてみましょう。プロパティはデフォルトでタイプ別にグループ化されている必要があります。 かんばん で説明されているさまざまなオプションを見てみましょう。

Exercise

デフォルトのグループ化を追加してみましょう。

適切な属性を使用して、デフォルトで物件情報をタイプ別にグループ化します。尚、ドラッグ＆ドロップができないようにする必要があります。

見た目の例については、セクションの 目標 を参照してください。

Kanban ビューは、最初から始めるのではなく、常に既存のビューから始め、微調整することをお勧めする典型的な例です。 利用可能な多くのオプションとクラスがありますので、それで読んで学んでください!