odoo15 owl 组件实验

已于 2022-01-22 08:16:06 修改
阅读量1.1k 收藏
点赞数
分类专栏： odoo15 实战分享 odoo15 owl学用笔记 文章标签： javascript xml vue.js
于 2022-01-21 16:20:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fqfq123456/article/details/122622339
版权
本文介绍了如何在Odoo15中使用新的前端框架Owl进行视图开发。Owl的模板语法与Odoo的XML模板相同，允许开发者保留 Odoo 视图的可配置性和继承性。通过详细步骤，从创建新模块到在myowl.js中编写代码，再到处理绑定对象、添加关闭事件和自定义事件及按钮，展示了Owl组件的实践过程。在实践中遇到的问题如DOM未准备好和错误的绑定节点也进行了说明。
摘要由CSDN通过智能技术生成

视图有两种形式，一种是利用odoo MVC框架的QWeb模板引擎进行渲染，另一种是独立于odoo的模板引擎，利用前端框架搭建视图与用户交互，并调用odoo的控制器与odoo交互。

odoo15提供了一套全新的前端框架owl， 最主要的是owl的模板与odoo的XML模板一致，这是vue等其他主流框架所不支持的。 

odoo的MVC框架中，视图使用XML模板编写，并保存在数据库中，这样做的好处是使视图具有高度的可配置性，即使不熟悉HTML、JS、CSS等，也可以配置出理想的视图。odoo的视图具有可继承性，若通过前端框架进行视图开发，则可以通过owl获取odoo的已有视图，owl与odoo的模板引擎一致，从而保持了odoo视图可继承的特性，这就是vue等其他主流框架所不具备的能力。

目录

1、搭建新模块

2、在js下建立我们今天的重点myowl.js

3、并加载js文件

4、安装更新模块，查看效果

5、更改 绑定对象

6、增加关闭事件

7、增加自定义事件及按钮

1、搭建新模块

此部分省略，如不清楚可参照odoo官方文档

载图如下

了解本专栏 订阅专栏 解锁全文 超级会员免费看
信息化未来
关注
专栏目录
订阅专栏
Odoo Owl学习笔记15-- 使用插槽创建通用组件
fqfq123456的专栏
05-16 254
Odoo Owl学习笔记15-- 使用插槽创建通用组件 我们在这里展示如何使用插槽创建通用组件。 const { Component, useState, mount } = owl; class Card extends Component { static template = "Card"; setup() { this.state = useState({ showContent: true }); } toggleDisplay() { ...
odoo15 owl 全局图
fqfq123456的专栏
01-11 504
通过此图，可以很好的理解owl browser Component misc Context AsyncRoot QWeb Portal mount router Store ...
odoo17 JS框架3——OWL组件
Xodoo开源市场
07-04 873
但是，如果您考虑一下，就会发现一个问题：实际的 html 元素 创建组件时，组件不存在。因此，返回一个包含（for element）键的对象，该键仅在 组件已挂载。粗略地说，一个组件被创建，然后更新（可能很多次），然后被销毁。实现以检查是否按下了回车键 （），并在其中 情况下，创建一个新的待办事项，以输入的当前内容作为描述，并清除 输入所有内容。在 的情况下，它会生成一个链接到当前组件的代理对象。在任务的 id 之前添加具有属性的输入，该输入必须 检查状态是否为 true。确保待办事项具有唯一的 ID。
揭秘Odoo OWL的魔法：reactive vs useState
最新发布
清水欧度 Odoo ERP
07-21 379
这时，OWL框架的响应式系统就像是你的得力助手，而reactive和useState则是其中的两大法宝。reactive就像是一个神奇的变形金刚，能够将普通的JavaScript对象转化为具有超能力的响应式对象。如果说reactive是变形金刚，那么useState就像是每个组件的私人管家，专门负责管理组件内部的状态。useState就像是一个尽职尽责的管家，不仅管理状态，还会在状态变化时自动整理房间（更新UI）。这种方法结合了全局状态管理的灵活性和局部状态管理的简洁性，是构建大型Odoo应用的有力武器。
owl 库主要部件概览
数字化老司机
02-11 263
onWillUpdateProps: 钩子来定义应该在组件更新之前执行的代码。onWillStart: 钩子来定义应该在渲染组件之前执行的异步代码。onWillUnmount: 钩子来定义在卸载组件之前应该执行的代码。onWillRender: 钩子来定义应该在渲染组件之前执行的代码。status: 获取组件状态的实用函数（新的、已安装的或已销毁的）onWillPatch: 钩子来定义在修补组件之前应该执行的代码。onPatched: 钩子来定义在修补组件时应该执行的代码。
【odoo15】猫头鹰owl使用eCharts详细教程
Hello, World！！！
08-25 128
odoo15用owl插入图表
odoo14OWL开发指导.pdf
02-22
Odoo 14 引入了一套新的 JavaScript 框架，名为OWL（Odoo Web Library），这是一套基于组件的 UI 框架，使用 QWeb 模板来构建结构。相较于 Odoo 的传统小部件系统，OWL 拥有更好的性能，并且引入了诸多新特性，如...
odoo15 owl main.js分析
fqfq123456的专栏
01-27 857
看看odoo如何使用owl /** @odoo-module **/ import { startWebClient } from "./start"; import { WebClient } from "./webclient/webclient"; /** * This file starts the webclient. It is in its own file to allow its replacement * in enterprise. The enterprise versi
Odoo 15 前端框架 OWL官方文档 中文版--边学边练笔记1
fqfq123456的专栏
12-30 1479
Odoo Web 库 (OWL) 是一个小型UI 框架，从odoo14起成为OdooWeb 客户端的基础。Owl 是一个现代框架，用 Typescript 写，以简单且符合的方式从 React 和 Vue 中汲取了最佳创意。猫头鹰的主要特点是： 声明式组件系统， 关于钩子的反应系统， 自然同时模式， 一个商店和一个前端主机 Owl 组件使用 ES6 类定义，它们的 QWeb 模板，共享虚拟 DOM，与钩子完整集成，并且渲染是使用的。 在线实用吧！OWL Playground提供了一个在线游戏，..
手把手带你学习Odoo OWL组件开发（1）：认识 OWL
在数字化道路无限探索
04-14 3786
在讲解Odoo OWL组件开发之前，我们先来认识一下Odoo OWL概况。什么是OWLOWL（Odoo Web Library）是一个由 Odoo为其产品构建的小型 (gzip压缩后<20kb) 前端UI框架，它是一个用 Typescript 编写的，以简单且连贯的方式从 React 和 Vue 中吸取最佳编程思想的现代架构。OWL是从Odoo14版本开始集成到Odoo中的。OWL设计用于高度动态的应用：基于XML：模板基于XML格式，这可以创建出有趣的应用。例如，可以在数据库中进行存储并使用xpat
odoo 编译好的 owl js文件 owl.js
02-26
odoo 编译好的 owl js文件
Odoo owl 学习笔记之11—slots 目录 插槽概述... 1 命名槽... 2 渲染上下文
05-10
Odoo owl 学习笔记之11—slots 目录 插槽..... 1 概述... 1 命名槽... 2 渲染上下文... 3 默认插槽... 3 默认内容... 4 动态插槽... 5 插槽和道具... 5 插槽参数... 5 插槽范围... 7 单个插槽 | 默认插槽 | 匿名插槽... 9 概述 Owl 是一个基于模板的组件系统。因此需要能够制造通用组件。例如，想象一个通用Navbar 组件，它显示一个导航栏，但有一些可定制的内容。由于具体内容只有 的用户知道Navbar，所以最好在使用的模板中指定它Navbar
OWL教程3 OWL五大组成部分之二组件系统
jiafeitutu的博客
07-13 625
OWL教程3 OWL五大组成部分之二组件系统
Odoo 15 前端框架 OWL与odoo结合--边学边练笔记 3
fqfq123456的专栏
12-30 1161
Odoo 15 前端框架 OWL与odoo结合，参照官网及网上大佬的见解，边学边练笔记 3 从Odoo 14开始内置有OWL，因此不需要再进行额外的安装。上次没配置成功，这次我要新建一个模块来进行 OWL 开发的演示 OWL的通过定义Component类的方式来进行编码，可以看成是 web 组件。组件中有模板、数据绑定及子组件。 我们都熟知在 HTML中有header,div,span,textarea等标签。在 OWL 中，我们可以自己创造这些标签，比如在项目管理系统中可以使用pro...
odoo owl解释
weixin_44565926的博客
06-19 1006
odoo owl解释
手把手带你学会Odoo OWL组件开发（6）：API
在数字化道路无限探索
05-27 883
Owl 模板使用QWeb规范进行描述。它基于 XML 格式，主要用于生成 HTML。在 OWL 中，QWeb 模板被编译为生成 HTML 的虚拟 dom 表示的函数。此外，由于 Owl 是一个实时组件系统，因此还有其他特定于 Owl 的指令（例如t-on）。 模板指令被指定为以 为前缀的 XML 属性t-，例如t-if对于条件，元素和其他属性直接呈现。 为了避免元素渲染，还可以使用占位符元素，它执行其指令但不会在其自身中生成任何输出。 我们在本节中介绍模板语言，包括其 Owl 特定的扩展。 在owl中和vu
Odoo owl 学习笔记之11—slots
fqfq123456的专栏
05-10 225
Odoo owl 学习笔记之11—slots 目录 插槽🦉..... 1 概述... 1 命名槽... 2 渲染上下文... 3 默认插槽... 3 默认内容... 4 动态插槽... 5 插槽和道具... 5 插槽参数... 5 插槽范围... 7 单个插槽 | 默认插槽 | 匿名插槽... 9 概述 Owl 是一个基于模板的组件系统。因此需要能够制造通用组件。例如，想象一个通用Navbar组件，它显示一个导航栏，但有一些可定制的内容。由于具体内容只有 的用户知道Na.
odoo中创建OWL组件
StackSurfer的博客
04-05 431
组件是通过扩展Component基类来创建的。首先，需要导入Component以及template用于关联XML模板。
Odoo 14 OWL框架详解：构建交互式UI
5. 在表单视图中添加OWL字段：最后，我们将学习如何将自定义的OWL组件集成到Odoo的表单视图中作为字段控件。这涉及到定义字段的模型、视图和控制器，以及如何在表单视图中注册和使用该组件。 关于为什么Odoo不使用...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

信息化未来

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值