第二章：杂项¶

在上一个任务中，我们学习了如何创建字段和视图。Odoo Web框架还有很多功能值得探索，所以让我们深入了解并在本章中探索更多内容！

这是我们在第一章：字段和视图结束时对 JavaScript web 框架的发现进展。¶

目标

Solutions

每个章节的练习解决方案都托管在官方Odoo教程存储库。

1. 与通知系统交互¶

注解

这个任务依赖于之前的练习。

在完成一些 T 恤任务后，使用 Print Label 按钮后，显然应该有一些反馈，表明 print_label 操作已完成（或失败，例如，打印机未连接或缺纸）。

Exercise

当操作成功完成时，显示 notification 消息，如果操作失败则显示警告。
如果失败了，通知应该是永久的。

另请参阅

示例：使用通知服务

2. 添加系统托盘项¶

我们敬爱的领导希望密切关注新订单。他希望随时看到未处理的新订单数量。让我们使用系统托盘项来实现这一点。

一个 systray 项是出现在系统托盘中的元素，系统托盘位于导航栏右侧的一个小区域。系统托盘用于显示通知并提供对某些功能的访问。

Exercise

创建一个系统托盘组件，连接到我们之前创建的统计服务。
使用它来显示新订单的数量。
点击它应该打开一个包含所有订单的列表视图。
奖励点：通过将信息添加到会话信息中，避免进行初始RPC。服务器在初始响应中向Web客户端提供会话信息。

另请参阅

3. 实际更新¶

到目前为止，上面的系统托盘项目不会更新，除非用户刷新浏览器。让我们通过定期调用服务器重新加载信息（例如，每分钟一次）来解决这个问题。

Exercise

The tshirt 服务应定期重新加载其数据。

现在，问题来了：系统托盘项目如何被通知需要重新渲染自己？有多种方法可以实现，但是在本次培训中，我们选择使用最 声明式 的方法：

Exercise

修改 tshirt 服务以返回一个 reactive 对象。重新加载数据应该直接更新这个 reactive 对象。
然后，系统托盘项可以对服务返回值执行 useState。
这并不是真的必要，但是你也可以在一个自定义的钩子函数 useStatistics 中封装对 useService 和 useState 的调用。

另请参阅

4. 将命令添加到命令面板¶

现在，让我们看看如何与命令面板交互。命令面板是一个功能，允许用户快速访问应用程序中的各种命令和功能。它通过在Odoo界面中按下 CTRL+K 来访问。

Exercise

修改图像预览字段，添加一个命令到命令面板，以在新的浏览器标签页（或窗口）中打开图像。

确保只有在屏幕上显示字段预览时，命令才处于活动状态。

另请参阅

示例：使用 useCommand 钩子

5. 猴子补丁一个组件¶

通常情况下，我们可以通过使用现有的扩展点来实现我们想要的功能，这些扩展点允许进行定制，比如在注册表中注册某些内容。然而，有时候我们想要修改一些没有这种机制的东西。在这种情况下，我们必须退回到一种不太安全的定制形式：猴子补丁。几乎所有的Odoo都可以进行猴子补丁。

Bafien，我们敬爱的领导，听说员工在被不断监视的情况下表现更好。由于他无法亲自在每个员工身边，他委托您更新用户界面，在控制面板中添加一个闪烁的红眼睛。点击该眼睛应该打开一个对话框，显示以下信息：“Bafien正在监视您。此交互将被记录并在必要时用于法律诉讼。您同意这些条款吗？”

Exercise

继承 ControlPanel 组件的 web.Breadcrumbs 模板，以在面包屑旁边添加一个图标。您可能想要使用 fa-eye 或 fa-eyes 图标。
Patch 组件以使用对话框服务在点击时显示消息。您可以使用 ConfirmationDialog。

将CSS类 blink 添加到表示眼睛的元素，并将以下代码粘贴到位于您补丁目录中的新CSS文件中。

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
      visibility: hidden;
  }
}

../../../_images/confirmation_dialog.png

另请参阅

6. 从客户获取订单¶

让我们看看如何使用一些标准组件来构建一个强大的功能，结合自动完成、获取数据和模糊查找。我们将在我们的仪表板中添加一个输入框，以便轻松搜索给定客户的所有订单。

Exercise

更新 tshirt_service.js，添加一个 loadCustomers 方法，该方法返回一个 promise，该 promise 返回所有客户的列表（并且只执行一次调用）。
在仪表板上，将 AutoComplete 组件添加到控制面板中的按钮旁边。
获取具有tshirt服务的客户列表，并在AutoComplete组件中显示，通过 fuzzyLookup 方法进行过滤。

7. 重新引入小猫模式¶

让我们给Odoo添加一个特殊模式：每当URL包含 kitten=1 时，我们将在Odoo的背景中显示一只小猫，因为我们喜欢小猫。

Exercise

创建一个 kitten 服务，该服务应该使用 router 服务来检查活动 URL 哈希的内容。如果 URL 中设置了 kitten，则将 o-kitten-mode 类添加到文档主体。

在 kitten_mode.scss 中添加以下 SCSS 代码：

.o-kitten-mode {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/58/Mellow_kitten_%28Unsplash%29.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.o-kitten-mode > * {
  opacity: 0.9;
}

在命令面板中添加一个命令，用于切换小猫模式。切换小猫模式应该切换类 o-kitten-mode 并相应地更新当前 URL。

8. 延迟加载我们的仪表盘¶

这并不是真正必要的，但这个练习很有趣。想象一下，我们令人惊叹的仪表板是一个庞大的应用程序，可能包含多个外部库和大量的代码/样式/模板。此外，假设仪表板仅由某些用户在某些业务流程中使用。为了加快大多数情况下的Web客户端加载速度，将其延迟加载是很有意思的。

那么，让我们来做吧！

Exercise

修改清单以创建一个新的 bundle awesome_tshirt.dashboard.
将这个令牌添加到令牌包中。如有需要，创建文件夹并移动文件。
从 web.assets_backend 捆绑包中删除代码，以便不会加载两次。

到目前为止，我们只是从主包中移除了仪表板；现在我们想要延迟加载它。目前，在操作注册表中没有注册任何客户端操作。

Exercise

创建一个新文件 dashboard_loader.js.
将注册 AwesomeDashboard 到仪表板加载器的代码复制。
将 AwesomeDashboard 注册为 LazyComponent。
修改仪表板加载器中的代码，使用延迟组件 AwesomeDashboard。

如果你打开浏览器的开发工具的 Network 标签，你应该看到 awesome_tshirt.dashboard.min.js 现在只在首次访问仪表盘时加载。

另请参阅

Documentation on assets

Edit on GitHub