开发应用程序的最佳做法 > 设计 ThingWorx 应用程序的用户体验 > ThingWorx 应用程序中的小组件 > 创建自定义 ThingWorx 小组件
创建自定义 ThingWorx 小组件
本部分提供了有关如何创建自定义小组件的信息。其中说明了 ThingWorx Mashup Builder 和运行时如何与小组件进行交互。它提供了有关可用于小组件的函数和 API 的详细信息。
PTC 提供的小组件是安全的。请确保所创建的小组件是安全的。有关详细信息，请参阅 创建安全小组件部分。
自定义小组件会添加到扩展的 /ui 文件夹中。扩展具有已定义的文件夹结构。有关详细信息，请参阅 扩展结构部分。
/ui 文件夹中包含定义自定义小组件时所需的文件。每个小组件都应放置在 /ui 文件夹中其自身对应的子文件夹中。定义小组件时需要以下文件：
• <widgetname>.ide.css
用于定义 Mashup Builder 中小组件外观的样式表文件。
• <widgetname>.ide.js
用于定义 Mashup Builder 中小组件及其行为的 JavaScript 文件。
• <widgetname>.ide.png
用于 Mashup Builder 中“小组件”选项卡上的小组件的图标。图标的大小应为 16 x 16 像素。
• <widgetname>.runtime.css
用于在混搭中查看小组件时定义小组件外观的样式表文件。
• <widgetname>.runtime.js
用于在混搭中查看小组件时定义小组件及其行为的 JavaScript 文件。
* 
如果您使用的是 Eclipse 插件，“新型小组件”操作会生成源文件并自动更新 metadata.xml 文件。