General widget attributes

Description

A widget is the base class of all specific widgets. The attributes defined in here are shared among all inherited widgets.

General Attributes

Attribute Domain Default Value Description
name string "" Specifies the name of the widget. The name of a widget cannot be set in a theme.
bgcolor color "#00000000" Sets the normal background color of the widget.
selbgcolor color "#00000000" Sets the background color of the widget in selected state.
bgcolor_p color "#00000000" Sets the background color of the widget in pressed state.
selbgcolor_p color "#00000000" Sets the background color of the widget in pressed and selected state.
bgcolor_i color "#00000000" Sets the background color of the widget in inactive state.
selbgcolor_i color "#00000000" Sets the background color of the widget in inactive and selected state.
bgimage image "" Sets the background image of the widget in normal state.
selbgimage image "" Sets the background image of the widget in selected state.
bgimage_p image "" Sets the background image of the widget in pressed state.
selbgimage_p image "" Sets the background image of the widget in pressed and selected state.
bgimage_i image "" Sets the background image of the widget in inactive state.
selbgimage_i image "" Sets the background image of the widget in inactive and selected state.
margin pixel "0" Specifies the outer margin between the border and the next element.
up_arrow string "" If widgets content can be scrolled you are able to set an 'up-arrow-widget' for it. It can be used to signal if it is possible to scroll in a direction or to actually trigger the scrolling. Usually it is dependent on your layout. Here you have to specify the name of the 'up-arrow-widget'.
down_arrow string "" If widgets content can be scrolled you are able to set an 'down-arrow-widget' for it. It can be used to signal if it is possible to scroll in a direction or to actually trigger the scrolling. Usually it is dependent on your layout. Here you have to specify the name of the 'down-arrow-widget'.
left_arrow string "" If widgets content can be scrolled you are able to set an 'left-arrow-widget' for it. It can be used to signal if it is possible to scroll in a direction or to actually trigger the scrolling. Usually it is dependent on your layout. Here you have to specify the name of the 'left-arrow-widget'.
right_arrow string "" If widgets content can be scrolled you are able to set an 'right-arrow-widget' for it. It can be used to signal if it is possible to scroll in a direction or to actually trigger the scrolling. Usually it is dependent on your layout. Here you have to specify the name of the 'right-arrow-widget'.
navigate_up string "" Use this parameter if you needs another navigation then the default one. Here you can specify the name of the widget to which should navigate if the UP key is pressed.
navigate_down string "" Use this parameter if you needs another navigation then the default one. Here you can specify the name of the widget to which should navigate if the DOWN key is pressed.
navigate_left string "" Use this parameter if you needs another navigation then the default one. Here you can specify the name of the widget to which should navigate if the LEFT key is pressed.
navigate_right string "" Use this parameter if you needs another navigation then the default one. Here you can specify the name of the widget to which should navigate if the RIGHT key is pressed.
data string "" It is possible to store an userdata string for a widget which can be interpreted by the application.
vslider string "" Name of the slider widget that displays the state of vertical scrolling of the current widget.
hslider string "" Name of the slider widget that displays the state of horizontal scrolling of the current widget.
imagesondemand boolean "false" Delay image loading until image is actually really displayed.
scroll_onfocus boolean "false" If a widget content is scrollable, and receives focus from a navigation event, scrolling will be performed immediately. Works with inputmode MOVE.
return_onscroll boolean "false" If the value is false, a focusable widget which is not currently focused will get the focus at the first click. On the next click it will emit onReturn(). If set to true the widget will emit onReturn() on the first click event.
clickable boolean "true" If true, a widget can get click events.
inputmode "MOVE"|"CLICK" "MOVE" Selects the input mode for a widget. If it is set to "MOVE" a focus which can be followed visually will be visible, so that a navigation with cursor keys is possible. In Input Mode "CLICK" there is no active focus maintained.
joined_widget string "" Two widgets can be joined together, sharing the input state. If one of the widget is selected, the other one will automatically be set to the same state. If there are multiple onReturn() subscriptions, only the first will be emitted.
size size "" The size attribute does only work if the element is a child of a <hbox> or <vbox>. Dependent on this, the size specifies either the width or the height of the widget. Per default the size is not set. See Size Values. The size of a widget cannot be set in a theme.
class string "" Specifies the name of a defined theme class (see <mmstheme>).

Border Attributes

Attribute Domain Default Value Description
border.image.path string "" Sets the path of the border images.
border.image.top-left string "" Specifies the border image at the top-left corner.
border.image.top string "" Specifies the border image at the top.
border.image.top-right string "" Specifies the border image at the top-right corner.
border.image.right string "" Specifies the border image on the right side.
border.image.bottom-right string "" Specifies the border image at the bottom-right corner.
border.image.bottom string "" Specifies the border image at the bottom.
border.image.bottom-left string "" Specifies the border image at the bottom-left corner.
border.image.left string "" Specifies the border image on the left side.
border.selimage.path string "" Here you can set the path of the border images for selected items.
border.selimage.top-left string "" Specifies the border image for selected items at the top-left corner.
border.selimage.top string "" Specifies the border image for selected items at the top.
border.selimage.top-right string "" Specifies the border image for selected items at the top-right corner.
border.selimage.right string "" Specifies the border image for selected items on the right side.
border.selimage.bottom-right string "" Specifies the border image for selected items at the bottom-right corner.
border.selimage.bottom string "" Specifies the border image for selected items at the bottom.
border.selimage.bottom-left string "" Specifies the border image for selected items at the bottom-left corner.
border.selimage.left string "" Specifies the border image for selected items on the left side.
border.color color "#00000000" Specifies the border color.
border.selcolor color "#00000000" Specifies the border color for selected items.
border.thickness pixel "0" Specifies the thickness of the border.
border.margin pixel "0" Specifies the inner margin between the border and the background of the element.
border.rcorners boolean "false" If you specify "true" round corners will be drawn.

Size values

Value Description
<X>px Size in pixel. Example: "100px"
<X>% Size in percent. Example: "50%"

Setting colors

There are two ways to set a color. For example the color attribute is named color.

First way is: color="#rrggbbaa". There is a hash followed by hexadecimal byte values for red, green, blue and alpha.
If you set color="#ff0000ff" you use red which is not transparent.
If you set color="#00000000" the color is marked as not set.

Second way is to set the four color values separately: color.r=<red> color.g=<green> color.b=<blue> color.a=<alpha>. Each value has range from 0 to 255 decimal.
If you set color.r="0" color.g="0" color.b="255" color.a="255" you use blue which is not transparent.
If you set color.a="0" the color is marked as not set.

Note on alpha value:
The value 0 (00) means that the whole color is not set. The value 255 (ff) means that the color is set with full opacity. The values 1..254 (01..fe) sets a transparent color.

Setting images

There are two ways to set a image. For example the image attribute is named image.

First way is: image="path/filename". You know the complete path and the filename (inclusive the extension) to the image and put it directly to the image attribute. If you set image="" the image is marked as not set.

Second way is to set the path and the filename separately: image.path="path" image.name="filename". If you set image.path="" the image path is marked as not set. If you set image.name="" the image name is marked as not set.

Note on transparency of images:
You should only use images without alpha channel. Because currently we cannot handle image-based transparency. But if you want to have a transparent image you can use the alpha value of the correspondent color. For example you can load the bgimage="<filename>" of a window or a widget and set the bgcolor="#00000080". The alpha value 80 hex sets the half opacity of the bgimage.