主頁 > 後端開發 > odoo 開發入門教程系列-QWeb簡史

odoo 開發入門教程系列-QWeb簡史

2023-04-22 07:32:12 後端開發

QWeb簡史

到目前為止,我們的房地產模塊的界面設計相當有限,構建串列視圖很簡單,因為只需要欄位串列,表單視圖也是如此:盡管使用了一些標記,如<group><page>,但在設計方面幾乎沒有什么可做的,

然而,如果我們想給我們的應用程式一個獨特的外觀,就必須更進一步,能夠設計新的視圖,此外,PDF報告或網站頁面等其他功能需要另一個更靈活的工具:模板引擎,

您可能已經熟悉現有的引擎,如Jinja(Python)、ERB(Ruby) 或Twig(PHP),Odoo自帶內置引擎:QWeb模板,QWeb是Odoo使用的主要模板引擎,它是一個XML模板引擎,主要用于生成HTML片段和頁面,

你可能已經在Odoo見過 看板,其中的記錄以卡片狀結構顯示,我們將為我們的房地產模塊構建這樣的視圖,

一個具體的示例: 一個看板視圖

參考: 本主題關聯檔案可以查看Kanban.

目標: 本節結束時創建一個房產的看板視圖

在我們的地產應用程式中,我們希望添加一個看板視圖來顯示我們的房產,看板視圖是標準的Odoo視圖(如表單和串列視圖),但其結構更靈活,事實上,每張卡片的結構是表單元素(包括基本HTML)和QWeb的混合,看板視圖的定義與串列視圖和表單視圖的定義相似,只是它們的根元素是kanban,看板視圖最簡單的形式如下:

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

讓我們分解一下這個例子:

  • <templates>:定義QWeb 模板串列,看板視圖必須至少定義一個根模板kanban-box,每個記錄將呈現一次,
  • <t t-name="kanban-box"><t>是QWeb指令的占位符元素,在本例中,它用于將模板的name設定為kanban-box
  • <div >oe_kanban_global_click<div>可點擊,以打開記錄
  • <field name="name"/>:這向視圖中添加name欄位,

練習--制作一個最小的看版視圖

根據上述提供的簡單例子,為房產創建一個最小化的看板視圖,唯一展示的欄位為name.

提示: 必須在ir.actions.act_window對應的view_mode中添加 kanban

修改odoo14\custom\estate\views\estate_property_views.xml(注意:以下未展示檔案中的所有內容,其它內容保持不變)

    <record id="link_estate_property_action" model="ir.actions.act_window">
        <field name="name">Properties</field>
        <field name="res_model">estate.property</field>
        <field name="view_mode">kanban,tree,form</field><--本次改動新增kanban-->
        <field name="context">{'search_default_state': True}</field>
    </record>
   
    <!-- 本次新增 -->
    <record id="estate_property_kanban" model="ir.ui.view">
        <field name="model">estate.property</field>
        <field name="arch" type="xml">
            <kanban>
                <templates>
                    <t t-name="kanban-box">
                        <div >
                            <field name="name"/>
                        </div>
                    </t>
                </templates>
            </kanban>
        </field>
    </record>

重啟服務驗證

一旦看板視圖起作用, 我們可以開始改進它,如果我們想有條件的展示元素,可以使用 t-if指令(查看 Conditionals).

<kanban>
    <field name="state"/>
    <templates>
        <t t-name="kanban-box">
            <div >
                <field name="name"/>
            </div>
            <div t-if="record.state.raw_value =https://www.cnblogs.com/shouke/archive/2023/04/21/='new'">
                This is new!
            </div>
        </t>
    </templates>
</kanban>

我們添加了幾個東西:

  • t-if: 如果條件為真,渲染<div>元素
  • record: 擁有所有請求欄位作為其屬性的物件,每個欄位都有兩個屬性 valueraw_value,前者是根據當前用戶引數格式化的,后者則是直接通過read()讀取的,

在上面的示例中,欄位name被添加到<templates>元素中,但state在它之外,當我們需要欄位的值但不想在視圖中顯示它時,可以將其添加到<templates>元素之外,

練習--改善看板視圖

添加以下欄位到看板視圖:expected price, best price, selling price 和tags,注意:best price僅在收到報價時展示,而selling price僅在接受報價時展示

修改odoo14\custom\estate\views\estate_property_views.xml estate_property_kanban

    <record id="estate_property_kanban" model="ir.ui.view">
        <field name="model">estate.property</field>
        <field name="arch" type="xml">
            <kanban>
                <field name="state"/>
                <templates>
                    <t t-name="kanban-box">
                        <div >
                            <field name="name"/>
                            <field name="expected_price"/>
                            <!-- <field name="best_price" t-if="record.state.value =https://www.cnblogs.com/shouke/archive/2023/04/21/='Offer Received'"/>-->
                            <div t-if="record.state.value =https://www.cnblogs.com/shouke/archive/2023/04/21/='Offer Received'">
                                <field name="best_price"/>
                            </div>
                            <div t-if="record.state.value =https://www.cnblogs.com/shouke/archive/2023/04/21/='Offer Accepted'">
                                <field name="selling_price" />
                            </div>
                            <field name="tag_ids"/>
                        </div>
                    </t>
                </templates>
            </kanban>
        </field>
    </record>

注意:這里必須添加<field name="state"/>,否則界面會報類似以下錯誤:

odoo TypeError: Cannot read properties of undefined (reading 'value')

驗證效果

讓我們對視圖做最后的修改:默認情況下,財產必須按型別分組,您可能想看看Kanban中描述的各種選項,

練習--添加默認分組

使用合適的屬性對房產分組,默認按型別分組,你必須阻止拖拽和洗掉,

修改odoo14\custom\estate\views\estate_property_views.xml estate_property_kanban,給<kanban>增加屬性

            <kanban default_group_by="state" records_draggable="false">

驗證效果

看板視圖是一個典型的例子,說明從現有視圖開始并對其進行微調而不是從頭開始總是一個好主意,

參考鏈接

https://www.odoo.com/documentation/14.0/zh_CN/developer/howtos/rdtraining.html

https://fontawesome.dashgame.com/

作者:授客
微信/QQ:1033553122
全國軟體測驗QQ交流群:7156436

Git地址:https://gitee.com/ishouke
友情提示:限于時間倉促,文中可能存在錯誤,歡迎指正、評論!
作者五行缺錢,如果覺得文章對您有幫助,請掃描下邊的二維碼打賞作者,金額隨意,您的支持將是我繼續創作的源動力,打賞后如有任何疑問,請聯系我!!!
           微信打賞                        支付寶打賞                  全國軟體測驗交流QQ群  
              

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/550772.html

標籤:其他

上一篇:win10環境下 VMware Workstation Pro 安裝centos7無法上網

下一篇:返回列表

標籤雲
其他(157785) Python(38089) JavaScript(25379) Java(17985) C(15215) 區塊鏈(8256) C#(7972) AI(7469) 爪哇(7425) MySQL(7135) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4555) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1959) Web開發(1951) python-3.x(1918) HtmlCss(1917) 弹簧靴(1913) C++(1910) xml(1889) PostgreSQL(1872) .NETCore(1854) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • odoo 開發入門教程系列-QWeb簡史

    QWeb簡史 到目前為止,我們的房地產模塊的界面設計相當有限。構建串列視圖很簡單,因為只需要欄位串列。表單視圖也是如此:盡管使用了一些標記,如<group>或<page>,但在設計方面幾乎沒有什么可做的。 然而,如果我們想給我們的應用程式一個獨特的外觀,就必須更進一步,能夠設計新的視圖。此外,PDF ......

    uj5u.com 2023-04-22 07:32:12 more
  • win10環境下 VMware Workstation Pro 安裝centos7無法上網

    一、安裝centos7 網上類似的教程太多了,我就不一一寫了,提供兩個網址,先按照教程安裝 VMware Workstation Pro ,秘鑰在第二個鏈接里面(親測可用), 安裝完VMware在根據教程安裝centos7,網路配置安裝教程中不全,可參考如下 虛擬機安裝教程 VMware Works ......

    uj5u.com 2023-04-22 07:31:39 more
  • Active Record Associations

    The Types of Associations 在 Rails 中,可以通過 ActiveRecord 來定義不同型別的關聯關系(Associations),包括以下幾種: belongs_to:表示該模型 belongs_to 另一個模型,即該模型擁有一個外鍵(foreign key)指向另一 ......

    uj5u.com 2023-04-22 07:31:20 more
  • jdk1.8 LocalTime、LocalDate、LocalDateTime 使用大全

    LocalTime、LocalDate、LocalDateTime 區別 LocalTime、LocalDate、LocalDateTime是java8對日期、時間提供的新介面。 jdk1.8 之前的 SimpleDateFormat 是執行緒不安全的。 DateTimeFormatter是執行緒安全的 ......

    uj5u.com 2023-04-22 07:31:14 more
  • SpringBoot自定義cron運算式注冊定時任務

    springBoot自定義cron運算式注冊定時任務 一、原理 1、使用Spring自帶的TaskScheduler注冊任務 2、注冊后回傳:ScheduledFuture,用于取消定時任務 3、注冊任務后不會馬上取消任務,所以將任務快取。在需要取消任務的時候呼叫取消介面取消 4、cron運算式可以 ......

    uj5u.com 2023-04-22 07:31:08 more
  • 從原理聊JVM(一):染色標記和垃圾回收演算法

    本篇介紹了JVM中垃圾回收器相關的基礎知識,后續會深入介紹CMS、G1、ZGC等不同垃圾收集器的運作流程和原理,歡迎關注。 ......

    uj5u.com 2023-04-22 07:30:35 more
  • 記一次jedis連接池頑固問題排查與修改

    這輩子不想再看到jedisBrokenPipe!! 測驗環境運行16天后報錯資訊: 05:42:32.629 [http-nio-8093-exec-2] ERROR o.a.c.c.C.[.[.[.[dispatcherServlet] - [log,175] - Servlet.service( ......

    uj5u.com 2023-04-22 07:30:16 more
  • 我的OpenAI庫發布了!!!

    chatGPT正式發布已經有段時間了,這段時間我也深度體驗了chatGPT的魅力。 OpenAI除了提供網頁版的chatGPT,還通過api的形式提供了很多其它服務,包括文字糾錯、圖片生成、音頻轉換等等。 作為程式員,即使有現成的openai庫,但還是免不了想自己造輪子,所以就有這個openai庫。 ......

    uj5u.com 2023-04-22 07:30:10 more
  • MDC輕量化日志鏈路跟蹤的若干種應用場景

    "If debugging is the process of removing software bugs, then programming must be the process of putting them in." - Edsger Dijkstra “如果除錯是消除軟體Bug的程序,那 ......

    uj5u.com 2023-04-22 07:30:06 more
  • WCF教程_編程入門自學教程_菜鳥教程-免費教程分享

    教程簡介 Windows通訊開發平臺(Windows Communication Foundation,簡稱WCF)是由微軟開發的一系列支持資料通信的應用程式框架,可以翻譯為Windows通訊開發平臺。 整合了原有的windows通訊的 .net Remoting,WebService,Socket ......

    uj5u.com 2023-04-22 07:30:01 more