Creating Customized ThingWorx Widgets
This section provides information on how to create customized widgets. It explains how the ThingWorx Mashup Builder and runtime interact with widgets. It provides details about the functions and APIs available for widgets.
The widgets provided by PTC are secure. Make sure the widgets you create are secure. See the section Creating Secure Widgets, for more information.
Custom widgets are added in the /ui folder of an extension. An extension has a defined folder structure. See the section Structure of an Extension for more details.
The /ui folder contains the files required to define custom widgets. Every widget should be placed in its own subfolder in the /ui folder. The following files are required to define a widget:
• <widgetname>.ide.css
Style sheet file that defines the look and feel of the widget in the Mashup Builder.
• <widgetname>.ide.js
JavaScript file that defines the widget and its behavior in the Mashup Builder.
• <widgetname>.ide.png
The icon used for the widget in the Widgets tab in the Mashup Builder. The size of the icon should be 16 by 16 pixels.
• <widgetname>.runtime.css
The style sheet file that defines the look and feel of the widget when you view it in the Mashup.
• <widgetname>.runtime.js
The JavaScript file that defines the widget and its behavior when you view it in the Mashup.
 |
If you are using the Eclipse Plugin, the New Widget action generates the source files and automatically updates the metadata.xml file.
|