Widgets are used to describe GUI used as:
JSON is used to describe the widget tree like in the example below:
{
"type": "column",
"children": [
{
"type": "text",
"style": "cs_header1",
"value": "Title"
},
{
"type": "text",
"value": "This is an awesome description"
},
{
"type": "row",
"children": [
{
"type": "button",
"style": "cs_btn_large",
"label": "On",
"actionId": 1
},
{
"type": "button",
"label": "Off",
"style": "cs_btn_large",
"actionId": 2
}
]
}
]
}
this widget tree will produce this display:
Widgets have common parameters.
type parameter is the only mandotory parameter for a widget. See §Types if widget for more details.
Next parameters are optonnal et can apply to every type of widget:
style : a list of CSS classes separated by whitespace
alt: a text used as tooltip
There are several kind of widget that can be used to describe the widget tree.
Some widget types will have one or more children widgets.
Layout widgets are intented to oanize thz display. They don't show anything by their own but have children that they will arrange.
Column widget has children widgets which will be laid on upon eachother.
Parameter is children which contains an array of widgets.
Row widget has children widgets which will be laid in a row.
Parameter is children which contains an array of widgets.
Container widget is used to define an area which contains another widget.
child contains a widget.
Optional parameters are:
backgroundColor: a color like in CSS
maxWidth: the limit for the width of the container.
maxHeight: the limit for the height of the container.
margin: the margin around the container, default value is 5px.
padding: the padding around the child widget in the container, default value is 5px.
child contains a widget.
SizedBox is used to reserve blank space with a given height or width.
Parameter is one of width or height.
Text widget will just display a text zone.
Parameters are:
value: the litteral value to show in the decorator. Default is no value.
valueField: this is the iri of a dataProperty in which the value of the decorator is taken. If the dataProperty is missing, the valueparameter will be used. By exemple, you can set the value parameter to a default value. Default is none
valueTransform: single or array of transformation functions of the value before display. Default is identity.
Any fail of transformation will stop the transformation chain.
Few exemples:
["/100","toFixed(1)"] Value will be divided by 100 and the displayed with only one digit after decimal.["lowerCase","first(5)"]. The string value will be lowercased and then only the first 5 characters will be displayed.["cut(8)","first(5)", "capitalize"]. This will ignore the first 8 characters, keep the next 5 characters and then capitalize before display.["capitalize","ellipsis(3)"]. The string value will be capitalized and then ... will added after the first 3 characters.The available operations are +, -, /, *.
The available functions are lowerCase, upperCase, capitalize, toFixed(n), first(n), cut(n), ellipsis(n)
Useless spaces are trimed.
Just show an image, parameters are :
src designing the URL of the image.
srcField designing the field of the node where to find the URL of the image. if this field doesn't exist or is empty, the content of src is used as default.
width and/or height for resizing the image.
to be implemented
Button widgets are intended to send customAction messages to the hosting page, in order to trigger actions.
Parameters are:
label: the text displayed on the button
actionId: a number or string identifying the associated action. It will be send to the hosting page with the _uuid of the related node.
closeOnClick: defines if the context menu should be closed on click on the button. Default is false.
.