第 2 章：杂项

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

../../../_images/previously_learned1.svg

在 第 1 章：字段与视图 结尾处，这是我们探索 JavaScript Web 框架所取得的进展。

目标

../../../_images/kitten_mode.png

本章各练习的答案托管在 官方 Odoo 教程仓库 中。

1. 与通知系统交互

Note

本任务依赖于 上一练习。

在使用 打印标签 按钮处理一些 T 恤任务之后，很明显我们应该给 print_label 动作一些反馈，告知它已完成（或失败，例如打印机未连接或缺纸）。

Exercise

  1. 当动作成功完成时显示一条 通知 消息，失败时显示警告。

  2. 如果失败，通知应永久显示。

../../../_images/notification.png

更多内容

示例：使用通知服务

2. 添加一个系统托盘项

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

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

Exercise

  1. 创建一个系统托盘组件，连接到我们之前制作的统计服务。

  2. 用它来显示新订单的数量。

  3. 点击它应打开一个列表视图，显示所有这些订单。

  4. 加分项：把该信息添加到会话信息中，从而避免发起初始 RPC。会话信息由服务器在初始响应中提供给 Web 客户端。

../../../_images/systray.png

更多内容

3. 真实场景更新

到目前为止，上面的系统托盘项除非用户刷新浏览器否则不会更新。我们通过定期（例如每分钟）调用服务器重新加载信息来实现它。

Exercise

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

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

Exercise

  1. 修改 tshirt 服务，使其返回一个 reactive 对象。重新加载数据时应就地更新该 reactive 对象。

  2. 随后，系统托盘项可以对服务的返回值执行一个 useState。

  3. 这并非完全必要，但您也可以把对 useService 和 useState 的调用*封装*到一个自定义钩子 useStatistics 中。

更多内容

4. 向命令面板添加一条命令

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

Exercise

修改 图片预览字段，向命令面板添加一条命令，以便在新的浏览器选项卡（或窗口）中打开图片。

确保只有当屏幕上可见字段预览时，该命令才处于激活状态。

../../../_images/new_command.png

更多内容

示例：使用 useCommand 钩子

5. 给组件打猴子补丁

通常，我们可以利用现有的扩展点来实现所需功能，例如在注册表中注册某个对象。但有时，我们想要修改某些没有这种机制的东西。在这种情况下，我们必须采用一种不太安全的定制方式：猴子补丁（monkey patching）。Odoo 中几乎所有内容都可以打补丁。

我们敬爱的领导 Bafien 听说，员工若时刻被注视，表现会更好。由于他无法亲自盯着每一位员工，他把任务交给你：更新用户界面，在控制面板中添加一只闪烁的红眼睛。点击这只眼睛应打开一个对话框，显示以下消息：”Bafien is watching you. This interaction is recorded and may be used in legal proceedings if necessary. Do you agree to these terms?”

Exercise

  1. 继承 ControlPanel 组件 的 web.Breadcrumbs 模板，在面包屑旁添加一个图标。你可以使用 fa-eye 或 fa-eyes 图标。

  2. 使用 dialog 服务 对该组件 打补丁，以便在点击时显示消息。你可以使用 ConfirmationDialog。

  3. 将 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/bafien_eye.png ../../../_images/confirmation_dialog.png

更多内容

6. 获取某个客户的订单

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

Exercise

  1. 更新 tshirt_service.js 以添加一个 loadCustomers 方法，该方法返回一个 promise，返回所有客户的列表（且只执行一次调用）。

  2. 将 AutoComplete 组件 添加到仪表板中，位于控制面板的按钮旁边。

  3. 使用 tshirt 服务获取客户列表，并在 AutoComplete 组件中显示，通过 fuzzyLookup 方法进行过滤。

../../../_images/autocomplete.png

7. 重新引入小猫模式

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

Exercise

  1. 创建一个 kitten 服务，它应借助 router 服务 检查当前 URL 哈希的内容。如果 URL 中设置了 kitten，则把 o-kitten-mode 类添加到文档 body 上。

  2. 在 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;
}

  3. 向命令面板添加一条命令来切换小猫模式。切换小猫模式应当同时切换 o-kitten-mode 类，并相应地更新当前 URL。

../../../_images/kitten_mode.png

8. 懒加载我们的仪表板

这并非完全必要，但这个练习很有意思。假设我们很棒的仪表盘是一个大型应用，可能包含多个外部库以及大量代码/样式/模板。并且假设只有部分用户在某些业务流程中使用该仪表盘。那么在大多数情况下懒加载它，以加快 Web 客户端的加载速度，会是一件很有意思的事。

那么，让我们动手吧！

Exercise

  1. 修改清单文件以创建一个新 资源包 awesome_tshirt.dashboard。

  2. 把 awesome 仪表板代码添加到该资源包中。如有需要，可以创建文件夹并移动文件。

  3. 从 web.assets_backend 资源包中移除该代码，以免重复加载。

到目前为止，我们只是把仪表盘从主资源包中移除；现在我们想要懒加载它。目前，动作注册表中还没有注册任何客户端动作。

Exercise

  1. 创建一个新文件 dashboard_loader.js。

  2. 把注册 AwesomeDashboard 的代码复制到仪表板加载器中。

  3. 将 AwesomeDashboard 注册为一个 LazyComponent。

  4. 修改仪表盘加载器中的代码，使用懒加载组件 AwesomeDashboard。

如果您打开浏览器开发者工具的 Network 选项卡，应该会看到 awesome_tshirt.dashboard.min.js 现在仅在首次访问仪表盘时加载。

更多内容

关于资源的文档