/goblins/gadgets/index.html A wide variety of widgets The fool on the sand has built his app, (3x) And the storm came. The wind blew and the rain fell, (3x) And the app crashed! The sage on the gadgets has built his app, (3x) And the storm came. The wind blew and the rain fell, (3x) And the app resisted! – Popular song, author unknown Hugo en-us /goblins/gadgets/overview/index.html Mon, 01 Jan 0001 00:00:00 +0000 /goblins/gadgets/overview/index.html Easily build your UI Goblin-gadgets contains a large collection of standard widgets, allowing to build complex UI easily and quickly. The secret is in the boxing, each box can hold other boxes, and so on. The boxes are called container and they are always rectangular. Here is an example of a dialog: Highlighting in red shows a container that contains 3 parts. Each part is itself a container. The bottom container (3) contains 2 buttons: /goblins/gadgets/use/index.html Mon, 01 Jan 0001 00:00:00 +0000 /goblins/gadgets/use/index.html Learn how to use gadgets /goblins/gadgets/widgetdoc/index.html Mon, 01 Jan 0001 00:00:00 +0000 /goblins/gadgets/widgetdoc/index.html WidgetDoc 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: Info 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. /goblins/gadgets/doit/index.html Mon, 01 Jan 0001 00:00:00 +0000 /goblins/gadgets/doit/index.html Make your own gadgets We will create a smiley widget that displays a satisfaction rating from a value between 0 (unhappy) and 100 (happy). To do this, you have to create a new smiley folder in the widgets folder of your app, which will contain 2 files: File Content widgets/smiley/widget.js Class of the widget. widgets/smiley/styles.js Styles CSS of the widget. The skeleton of our file widgets/smiley/widget.js should contain this: import React from 'react'; import Widget from 'goblin-laboratory/widgets/widget'; import * as styles from '.