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 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字段。

练习--制作一个最小的看版视图

根据上述提供的简单例子,为房产创建一个最小化的看板视图。唯一展示的字段为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 class="oe_kanban_global_click"><field name="name"/></div></t></templates></kanban></field></record>

重启服务验证

一旦看板视图起作用, 我们可以开始改进它。如果我们想有条件的展示元素,可以使用 t-if指令(查看 Conditionals).

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

我们添加了几个东西:

  • t-if: 如果条件为真,渲染<div>元素
  • record: 拥有所有请求字段作为其属性的对象。每个字段都有两个属性 value 和raw_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 class="oe_kanban_global_click"><field name="name"/><field name="expected_price"/><!-- <field name="best_price" t-if="record.state.value == 'Offer Received'"/>--><div t-if="record.state.value == 'Offer Received'"><field name="best_price"/></div><div t-if="record.state.value == '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">

验证效果

看板视图是一个典型的例子,说明从现有视图开始并对其进行微调而不是从头开始总是一个好主意。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/70224.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vite+vue3项目配置cdn引入在线依赖

采用ejs的方式 安装语法依赖 npm install vite-plugin-ejs -D配置暴露数据 vite.config.js文件&#xff1a; import { fileURLToPath, URL } from node:url import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plug…

MySQL 索引为什么使用 B+ 树,而不使用红黑树 / B 树 ?

面试官问 &#xff1a;索引为什么使用 B 树&#xff0c;而不使用 B 树&#xff0c;不使用红黑树呢 首先 B 树和 B 树 都是多叉搜索树&#xff0c;然后我们先来观察一下 B 树和 B 树的数据结构&#xff1a; B 树的数据结构实现 >> B 树的数据结构实现 >> 【B 树相…

引领行业高质量发展|云畅科技参编《低代码开发平台创新发展路线图(2023)》

8月8日-9日&#xff0c;中国电子技术标准化研究院于北京顺利召开《低代码开发平台创新发展路线图&#xff08;2023&#xff09;》封闭编制会。云畅科技、浪潮、百度、广域铭岛等来自低代码开发平台解决方案供应商、用户方、科研院所等近30家相关单位的40余位专家参与了现场编制…

华为在ospf area 0单区域的情况下结合pbr对数据包的来回路径进行控制

配置思路&#xff1a; 两边去的包在R1上用mqc进行下一跳重定向 两边回程包在R4上用mqc进行下一跳重定向 最终让内网 192.168.10.0出去的数据包来回全走上面R-1-2-4 192.168.20.0出去的数据包来回全走 下面R1-3-4 R2和R3就是简单ospf配置和宣告&#xff0c;其它没有配置&#…

css学习3(三种样式表与样式控制优先级)

1、外部样式表&#xff1a;当样式需要应用于很多页面时&#xff0c;外部样式表将是理想的选择。在使用外部样式表的情况下&#xff0c;你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表&#xff0c;也要放到<head>中。 2、外部…

【云原生】【k8s】Kubernetes+EFK构建日志分析安装部署

目录 EFK安装部署 一、环境准备&#xff08;所有主机&#xff09; 1、主机初始化配置 2、配置主机名并绑定hosts&#xff0c;不同主机名称不同 3、主机配置初始化 4、部署docker环境 二、部署kubernetes集群 1、组件介绍 2、配置阿里云yum源 3、安装kubelet kubeadm …

Redis 十大数据类型

Redis数据类型都有哪些&#xff1f; Redis支持丰富的数据类型&#xff0c;那么具体在Redis7中都有哪些数据类型呢&#xff1f;请看下图&#xff1a; 官网介绍&#xff1a;https://redis.io/docs/data-types/。 其中&#xff0c;String、Hash、List、Set、Sorted Set等类型是大…

SkyEye操作指南:连接TI CCS的IDE调试

现代电力电子控制系统的开发中&#xff0c;DSP芯片以其优越的运算性能在控制算法领域得到越来越广泛的应用。传统的DSP开发过程往往需要在完成控制系统仿真与程序设计后&#xff0c;才能根据比对结果进行程序修改&#xff0c;全过程还需要硬件电路工程师的配合&#xff0c;开发…

近 2000 台 Citrix NetScaler 服务器遭到破坏

Bleeping Computer 网站披露在某次大规模网络攻击活动中&#xff0c;一名攻击者利用被追踪为 CVE-2023-3519 的高危远程代码执行漏洞&#xff0c;入侵了近 2000 台 Citrix NetScaler 服务器。 研究人员表示在管理员安装漏洞补丁之前已经有 1200 多台服务器被设置了后门&#x…

HTML(JavaEE初级系列12)

目录 前言&#xff1a; 1.HTML结构 1.1认识HTML标签 1.2HTML文件基本结构 1.3标签层次结构 1.4快速生成代码框架 2.HTML常见标签 2.1注释标签 2.2标题标签&#xff1a;h1-h6 2.3段落标签&#xff1a;p 2.4换行标签&#xff1a; br 2.5格式化标签 2.6图片标签&#…

Visual Studio 2019 c++ 自定义注释 ----doxygen

可加入C 也可自定义。 <?xml version"1.0" encoding"utf-8"?> <CodeSnippets xmlns"http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"><CodeSnippet Format"1.0.0"><Header><Title>注释…

IDEA常用工具配置

IDEA常用工具&配置 如果发现插件市场用不了&#xff0c;可以设置Http Proxy&#xff0c;在该界面上点击”Check connection“并输入的地址&#xff1a;https://plugins.jetbrains.com/ 。 一、常用插件 1、MybatisX Mybaits Plus插件&#xff0c;支持java与xml互转 2、F…