当我开始在 Mendix 去年我同时加入了两个部门，在专家服务（CSM – 客户成功管理）部门，我担任顾问、老师和 Custom Widgets 的开发人员，在研发部门，我负责解决与 Custom Widget 工作相关的问题。

这个独特的职位让我学到了很多关于定制小部件开发的知识，包括我们的合作伙伴和客户实际上是如何做到这一点的。作为一名软件开发人员和架构师，我的专长之一是收集有关人们使用的不同流程的所有信息，并提出一种新的和改进的（工作）方法。

Mendix 决定开源我们过去为 Mendix 平台。我们相信，一旦你分享自定义小部件的代码，任何人都可以做出贡献，最终提供更好的产品，完成更多的最终用户故事。此外，自定义小部件的开发可以分散到更大的开发人员群体中，为参与的每个人创造双赢的局面 Mendix 社区。

创建自定义小部件样板

我的第一个计划是创建“AppStoreWidgetBoilerplate”。基于 Mendix 客户端 API 和现有小部件的示例我开发了一个自定义小部件样板，灵感来自于 HTML 样板，由 Mathias Bynens 和 Hans Christian Reinl 维护。然而，这个新的样板仅适用于 Mendix 平台。

我的目标是让新的样板成为每个新小部件的基础 Mendix。此外，这将是现有自定义小部件可以移植到的模板，以便每个新的和移植的小部件在 Mendix GitHub 的质量是一定的。达到这个目标后，我开始研究创建自定义小部件需要完成的其他流程。

为 Brackets 创建小部件开发插件

之前，将自定义小部件放入 Mendix 项目涉及许多任务，每次更改源代码时都需要重复这些任务。

在解决自定义小部件问题时，我开发了一个自定义小部件研讨会来分享我学到的东西。这让我有机会开发出一种解决方案来应对这种重复的工作模式：Adobe Brackets 的小部件开发插件，它将 Brackets 变成一个 IDE（集成开发环境），用于为 Mendix 平台。该插件将基于“AppStoreWidgetBoilerplate”的窗口小部件的打包过程变成了 Adob​​e Bracket 中的一键式过程。

“AppStoreWidgetBoilerplate” 和 “Brackets 的 Widget 开发插件” 让你能够快速开始扩展 Mendix 拥有炫酷的新用户体验！同样，如果您有兴趣为 Mendix, 点播观看此网络研讨会。 我通过创建“Hello World”来演示这两种工具 Mendix 自定义小部件。

常見問題解答

Q: 谁应该构建自定义小部件？
答：这个问题的答案是：任何熟悉 JavaScript/HTML 和 CSS 的人！您只能基于这些脚本语言构建自定义小部件。因此，在开始为 Mendix 平台。您还需要对 Mendix 平台以及如何使用它来建模应用程序。

Q: 什么是自定义小部件？
答：自定义小部件是具有 Mendix 在客户端 API JavaScript 函数内部运行 Mendix 修改后的 DOJO 环境。要真正编写正确的 DIJIT 小部件，您需要对 JavaScript 以及 JavaScript 和 DOJO/DIJIT 的设计模式有深入的了解。按照本教程开始使用 DIJIT 小部件： https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

A: 何时应构建或使用自定义小部件？
问：自定义小部件旨在为您的 Mendix 应用程序。如果您需要特殊的用户体验 (UX)，它可以为您提供解决方案 Mendix 不提供“开箱即用”的功能。

自定义小部件的示例可能包括：

组装汽车： 假设你有一个应用程序，希望能够以视觉方式组合一辆汽车。此时，你应该考虑构建一个自定义小部件。

根据搜索过滤器值改变的菜单： 如果您想要一个动态菜单来根据搜索结果显示页面链接。

拖放： 如果您想将产品拖放到购物车中。

Q: 是否提供高级自定义小部件研讨会作为 Mendix 学院？
A：是的！ Mendix 提供名为“掌握自定义小部件构建艺术”的高级自定义小部件研讨会。如果您想充分利用自定义小部件构建，请查看您所在地区何时提供下一门课程： https://academy.mendix.com/#1418913294132-2

额外链接：

基础训练 Mendix 建模
定制小部件开发 Mendix 需要知识 Mendix 应用平台和业务建模器。你可以开始使用 在线课程或在此注册参加面对面的介绍课程： https://academy.mendix.com/#1418913294132-2

在哪里可以找到 AppStoreWidgetBoilerplate
您可以在以下位置找到它： https://github.com/mendix/AppStoreWidgetBoilerplate

Mendix 带有自定义小部件的 GitHub 存储库
您可以在我们的 GitHub 存储库中找到小部件的示例： https://github.com/mendix/

JavaScript 的设计模式
一本关于 JavaScript 设计模式的优秀书籍是 Addy Osmani 撰写的《开源书》。您可以在这里找到它： https://addyosmani.com/resources/essentialjsdesignpatterns/book/

编写你的第一个 dijit Widget
可以在这里找到有关开始编写 dijit Widgets 的优秀指南： https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

Mendix 客户端API
此 Mendix 客户端 API 可以在这里找到： https://apidocs.mendix.com/5/client/