WidgetDoc
is a great tool for experimenting with most widgets. You choose the
widget and then interactively define its properties. You immediately see the
graphical result and the code to write to obtain this result. Nice, isn’t it?
Most of the apps created have a Desktop which contains a WidgetDoc button in the footer:
WidgetDoc
is itself a widget.
If your app doesn’t have a WidgetDoc button, you can create a
workitem, a wizard or a dialog and drop a
WidgetDoc
widget inside.
On the first run, the window looks like this:
After choosing the widget Button
, the interface shows this 3 columns:
Column | Function |
---|---|
WIDGETS | Widget choice. The column displays the list of widgets that can be tested. |
PROPERTIES | Defining properties. The column displays the list of widget properties. Each widget has its own list. |
PREVIEW | SETTINGS for the display of the widget (without influence on its properties), and preview of CODE and widget (BUTTON in this example). |
Simply choose the widget to test.
If the desired widget is not in the list, it does not
contain the files goblin-gadgets/widgets/widget_name/props.js
and
goblin-gadgets/widgets/widget_name/senarios.js
.
The filter is used to display only properties containing a given keyword, including in enumerations.
The properties are listed in groups. If you prefer to see them in alphabetical order, deactivate the small button Cube3D at the right.
The Scenarios define the set of properties, to achieve a frequently used effect. Each widget has its own scenarios.
Each property occupies a row:
Rank | Function |
---|---|
1 | Property name. |
2 | Current value of property. |
3 | Show a combo with samples of values. |
4 | Clear the property. |
5 | Type of property. |
6 | optional or required . |
Some properties can be of several different types. They have a small button Ellipsis which allows to choose the type:
This column has 3 blocks (CODE, SETTINGS and the name of the tested widget). The first shows the CODE to use to get a widget looking visible in the last block.
The SETTINGS block allows you to choose how the widget is displayed. It does not modify the properties of the widget, it acts on the parent widget which contains the tested widget.
The row “Container resizable” is useful for testing the behavior of the widget when the parent’s dimensions change: