Difference between revisions of "GUIWidgetDefinitionWML"

From The Battle for Wesnoth Wiki
(→‎Toggle button)
(→‎Button)
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Widget definition ==
 
== Widget definition ==
−
 
 
This page describes the definition of all widgets in the toolkit. Every
 
This page describes the definition of all widgets in the toolkit. Every
 
widget has some parts in common, first of all; every definition has the
 
widget has some parts in common, first of all; every definition has the
 
following fields.
 
following fields.
−
 
  
 
{| border="1"
 
{| border="1"
Line 28: Line 26:
 
|}
 
|}
  
 +
== Button ==
 +
A button is a control that can be pushed to start an action or close a dialog.
  
−
== Button ==
+
When a button has a return value it sets the return value for the window. Normally this closes the window and returns this value to the caller. The return value can either be defined by the user or determined from the id of the button. The return value has a higher precedence as the one defined by the id. (Of course it's weird to give a button an id and then override its return value.)
 +
 
 +
When the button doesn't have a standard id, but you still want to use the return value of that id, use return_value_id instead. This has a higher precedence as return_value.
  
−
A button is a control that can be pushed to start an action or close a dialog.
+
List with the button specific variables:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| return_value_id
 +
| [[GUIVariable#string|string]]
 +
| ""
 +
| The return value id.
 +
|-
 +
| return_value
 +
| [[GUIVariable#t_string|int]]
 +
| 0
 +
| The return value.
 +
|}
  
 
The following states exist:
 
The following states exist:
Line 38: Line 56:
 
* state_pressed, the left mouse button is down.
 
* state_pressed, the left mouse button is down.
 
* state_focussed, the mouse is over the button.
 
* state_focussed, the mouse is over the button.
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Drawing ==
 
== Drawing ==
−
 
 
A drawing is widget with a fixed size and gives access to the canvas of the widget in the window instance. This allows special display only widgets.
 
A drawing is widget with a fixed size and gives access to the canvas of the widget in the window instance. This allows special display only widgets.
  
Line 61: Line 65:
 
The following states exist:
 
The following states exist:
 
* state_enabled, the drawing is enabled. The state is a dummy since the things really drawn are placed in the window instance.
 
* state_enabled, the drawing is enabled. The state is a dummy since the things really drawn are placed in the window instance.
 +
 +
If either the width or the height is not zero the drawing functions as a fixed size drawing. The variables available are the same as for the window resolution.
  
 
== Horizontal listbox ==
 
== Horizontal listbox ==
 +
A horizontal listbox is a control that holds several items of the same type.  Normally the items in a listbox are ordered in rows, this version orders them in columns instead.
 +
The definition of a horizontal listbox is the same as for a normal listbox.
  
 +
In order to force widgets to be the same size inside a horizontal listbox, the widgets need to be inside a linked_group. Inside the list section there are only the following widgets allowed:
 +
* grid (to nest)
 +
* toggle_button
 +
* toggle_panel
  
 +
List with the listbox specific variables:
 +
{| border="1"
 +
!ID (return value)
 +
!Type
 +
!Mandatory
 +
!Description
 +
|-
 +
| vertical_scrollbar_mode
 +
| [[GUIToolkitWML#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| horizontal_scrollbar_mode
 +
| [[GUIToolkitWML#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| header
 +
| [[GUIToolkitWML#grid|grid]]
 +
| []
 +
| Defines the grid for the optional header. (This grid will automatically get the id _header_grid.)
 +
|-
 +
| footer
 +
| [[GUIToolkitWML#grid|grid]]
 +
| []
 +
| Defines the grid for the optional footer. (This grid will automatically get the id _footer_grid.)
 +
|-
 +
| list_definition
 +
| [[GUIToolkitWML#section|section]]
 +
| mandatory
 +
| This defines how a listbox item looks. It must contain the grid definition for 1 row of the list.
 +
|-
 +
| list_data
 +
| [[GUIToolkitWML#section|section]]
 +
| []
 +
| A grid alike section which stores the initial data for the listbox. Every row must have the same number of columns as the 'list_definition'.
 +
|-
 +
| has_minimum
 +
| [[GUIToolkitWML#bool|bool]]
 +
| true
 +
| If false, less than one row can be selected.
 +
|-
 +
| has_maximum
 +
| [[GUIToolkitWML#bool|bool]]
 +
| true
 +
| If false, more than one row can be selected.
 +
|}
 +
 +
== Grid Listbox ==
 +
A grid listbox is a styled_widget that holds several items of the same type. Normally the items in a listbox are ordered in rows, this version orders them in a grid instead.
  
 +
In order to force widgets to be the same size inside a horizontal listbox, the widgets need to be inside a linked_group. Inside the list section there are only the following widgets allowed:
 +
* grid (to nest)
 +
* toggle_button
 +
* toggle_panel
 +
 +
List with the listbox specific variables:
 +
{| border="1"
 +
!ID (return value)
 +
!Type
 +
!Mandatory
 +
!Description
 +
|-
 +
| vertical_scrollbar_mode
 +
| [[GUIToolkitWML#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| horizontal_scrollbar_mode
 +
| [[GUIToolkitWML#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| header
 +
| [[GUIToolkitWML#grid|grid]]
 +
| []
 +
| Defines the grid for the optional header. (This grid will automatically get the id _header_grid.)
 +
|-
 +
| footer
 +
| [[GUIToolkitWML#grid|grid]]
 +
| []
 +
| Defines the grid for the optional footer. (This grid will automatically get the id _footer_grid.)
 +
|-
 +
| list_definition
 +
| [[GUIToolkitWML#section|section]]
 +
| mandatory
 +
| This defines how a listbox item looks. It must contain the grid definition for 1 row of the list.
 +
|-
 +
| list_data
 +
| [[GUIToolkitWML#section|section]]
 +
| []
 +
| A grid alike section which stores the initial data for the listbox. Every row must have the same number of columns as the 'list_definition'.
 +
|-
 +
| has_minimum
 +
| [[GUIToolkitWML#bool|bool]]
 +
| true
 +
| If false, less than one row can be selected.
 +
|-
 +
| has_maximum
 +
| [[GUIToolkitWML#bool|bool]]
 +
| true
 +
| If false, more than one row can be selected.
 +
|}
  
−
A horizontal listbox is a control that holds several items of the same type.  Normally the items in a listbox are ordered in rows, this version orders them in columns instead.
 
−
The definition of a horizontal listbox is the same as for a normal listbox.
 
 
== Image ==
 
== Image ==
−
 
 
An image shows a static image.
 
An image shows a static image.
  
Line 79: Line 190:
 
The following states exist:
 
The following states exist:
 
* state_enabled, the image is enabled.
 
* state_enabled, the image is enabled.
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Label ==
 
== Label ==
−
 
 
A label displays a text, the text can be wrapped but no scrollbars are provided.
 
A label displays a text, the text can be wrapped but no scrollbars are provided.
  
Line 96: Line 199:
  
 
Note: The above is outdated, if "link_aware" is enabled then there is interaction.
 
Note: The above is outdated, if "link_aware" is enabled then there is interaction.
−
 
  
 
The following states exist:
 
The following states exist:
 
* state_enabled, the label is enabled.
 
* state_enabled, the label is enabled.
 
* state_disabled, the label is disabled.
 
* state_disabled, the label is disabled.
−
 
−
 
  
 
{| border="1"
 
{| border="1"
Line 110: Line 210:
 
!description
 
!description
 
|-
 
|-
−
 
 
| link_color
 
| link_color
 
| [[GUIVariable#string|string]]
 
| [[GUIVariable#string|string]]
 
| #ffff00
 
| #ffff00
 
| The color to render links with. This string will be used verbatim in pango markup for each link.
 
| The color to render links with. This string will be used verbatim in pango markup for each link.
 +
|}
 +
 +
The label specific variables:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| wrap
 +
| [[GUIVariable#bool|bool]]
 +
| #ffff00
 +
| Is wrapping enabled for the label.
 +
|-
 +
| characters_per_line
 +
| [[GUIVariable#unsigned|unsigned]]
 +
| #ffff00
 +
| Sets the maximum number of characters per line. The amount is an approximate since the width of a character differs. E.g. iii is smaller than MMM. When the value is non-zero it also implies can_wrap is true. When having long strings wrapping them can increase readability, often 66 characters per line is considered the optimum for a one column text.
 +
|-
 +
| text_alignment
 +
| [[GUIVariable#h_align|h_align]]
 +
| #ffff00
 +
| The way the text is aligned inside the canvas.
 +
|-
 +
| can_shrink
 +
| [[GUIVariable#bool|bool]]
 +
| #ffff00
 +
| Whether the label can shrink past its optimal size.
 +
|-
 +
| link_aware
 +
| [[GUIVariable#bool|bool]]
 +
| #ffff00
 +
| Whether the label is link aware. This means it is rendered with links highlighted, and responds to click events on those links.
 
|}
 
|}
  
 
== Listbox ==
 
== Listbox ==
−
 
 
A listbox is a control that holds several items of the same type. Normally the items in a listbox are ordered in rows, this version might allow more options for ordering the items in the future.
 
A listbox is a control that holds several items of the same type. Normally the items in a listbox are ordered in rows, this version might allow more options for ordering the items in the future.
  
Line 190: Line 321:
 
* button
 
* button
 
* repeating_button
 
* repeating_button
−
@{allow}{link}{name="gui/window/resolution/grid/row/column/button"}
+
 
−
@{allow}{link}{name="gui/window/resolution/grid/row/column/repeating_button"}
 
 
The following states exist:
 
The following states exist:
 
* state_enabled, the listbox is enabled.
 
* state_enabled, the listbox is enabled.
 
* state_disabled, the listbox is disabled.
 
* state_disabled, the listbox is disabled.
  
−
 
+
List with the listbox specific variables:
−
 
+
{| border="1"
−
 
+
!ID (return value)
−
 
+
!Type
−
 
+
!Mandatory
−
 
+
!Description
−
 
+
|-
 +
| vertical_scrollbar_mode
 +
| [[GUIToolkitWML#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| horizontal_scrollbar_mode
 +
| [[GUIToolkitWML#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| header
 +
| [[GUIToolkitWML#grid|grid]]
 +
| []
 +
| Defines the grid for the optional header. (This grid will automatically get the id _header_grid.)
 +
|-
 +
| footer
 +
| [[GUIToolkitWML#grid|grid]]
 +
| []
 +
| Defines the grid for the optional footer. (This grid will automatically get the id _footer_grid.)
 +
|-
 +
| list_definition
 +
| [[GUIToolkitWML#section|section]]
 +
| mandatory
 +
| This defines how a listbox item looks. It must contain the grid definition for 1 row of the list.
 +
|-
 +
| list_data
 +
| [[GUIToolkitWML#section|section]]
 +
| []
 +
| A grid alike section which stores the initial data for the listbox. Every row must have the same number of columns as the 'list_definition'.
 +
|-
 +
| has_minimum
 +
| [[GUIToolkitWML#bool|bool]]
 +
| true
 +
| If false, less than one row can be selected.
 +
|-
 +
| has_maximum
 +
| [[GUIToolkitWML#bool|bool]]
 +
| true
 +
| If false, more than one row can be selected.
 +
|}
  
 
== Minimap ==
 
== Minimap ==
−
 
 
A minimap to show the gamemap, this only shows the map and has no interaction options. This version is used for map previews, there will be a another version which allows interaction.
 
A minimap to show the gamemap, this only shows the map and has no interaction options. This version is used for map previews, there will be a another version which allows interaction.
  
 
The following states exist:
 
The following states exist:
 
* state_enabled, the minimap is enabled.
 
* state_enabled, the minimap is enabled.
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Multi page ==
 
== Multi page ==
−
 
−
 
−
 
 
A multi page is a control that contains several 'pages' of which only one is visible. The pages can contain the same widgets containing the same 'kind' of data or look completely different.
 
A multi page is a control that contains several 'pages' of which only one is visible. The pages can contain the same widgets containing the same 'kind' of data or look completely different.
−
 
  
 
{| border="1"
 
{| border="1"
Line 237: Line 395:
 
|}
 
|}
  
 +
A multipage has no states.
  
 +
A multipage has no states. List with the multi page specific variables:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| page_definition
 +
| [[GUIVariable#section|section]]
 +
| mandatory
 +
| This defines how a multi page item looks. It must contain the grid definition for at least one page.
 +
|-
 +
| page_data
 +
| [[GUIVariable#section|section]]
 +
| []
 +
| A grid alike section which stores the initial data for the multi page. Every row must have the same number of columns as the 'page_definition'.
 +
|}
  
−
 
−
A multipage has no states.
 
 
== Panel ==
 
== Panel ==
−
 
 
A panel is an item which can hold other items. The difference between a grid and a panel is that it's possible to define how a panel looks. A grid in an invisible container to just hold the items.
 
A panel is an item which can hold other items. The difference between a grid and a panel is that it's possible to define how a panel looks. A grid in an invisible container to just hold the items.
−
 
−
 
  
 
A panel is always enabled and can't be disabled. Instead it uses the
 
A panel is always enabled and can't be disabled. Instead it uses the
Line 281: Line 452:
 
* background, the background of the panel.
 
* background, the background of the panel.
 
* foreground, the foreground of the panel.
 
* foreground, the foreground of the panel.
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Progress bar ==
 
== Progress bar ==
−
 
 
A progress bar shows the progress of a certain object.
 
A progress bar shows the progress of a certain object.
  
Line 299: Line 461:
 
The following states exist:
 
The following states exist:
 
* state_enabled, the progress bar is enabled.
 
* state_enabled, the progress bar is enabled.
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Repeating button ==
 
== Repeating button ==
−
 
 
A repeating_button is a control that can be pushed down and repeat a certain action. Once the button is down every x milliseconds it is down a new down event is triggered.
 
A repeating_button is a control that can be pushed down and repeat a certain action. Once the button is down every x milliseconds it is down a new down event is triggered.
  
Line 316: Line 470:
 
* state_pressed, the left mouse repeating_button is down.
 
* state_pressed, the left mouse repeating_button is down.
 
* state_focussed, the mouse is over the repeating_button.
 
* state_focussed, the mouse is over the repeating_button.
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Scroll label ==
 
== Scroll label ==
−
 
 
A scroll label is a label that wraps its text and also has a vertical scrollbar. This way a text can't be too long to be shown for this widget.
 
A scroll label is a label that wraps its text and also has a vertical scrollbar. This way a text can't be too long to be shown for this widget.
−
 
  
 
This widget is slower as a normal label widget so only use this widget
 
This widget is slower as a normal label widget so only use this widget
 
when the scrollbar is required (or expected to become required).
 
when the scrollbar is required (or expected to become required).
−
 
  
 
{| border="1"
 
{| border="1"
Line 370: Line 508:
 
| A grid for the scrollbar (Merge with listbox info.)
 
| A grid for the scrollbar (Merge with listbox info.)
 
|}
 
|}
−
 
−
 
−
 
  
 
The following states exist:
 
The following states exist:
 
* state_enabled, the scroll label is enabled.
 
* state_enabled, the scroll label is enabled.
 
* state_disabled, the scroll label is disabled.
 
* state_disabled, the scroll label is disabled.
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Scrollbar panel ==
 
== Scrollbar panel ==
−
 
−
 
−
 
−
 
 
The definition of a panel with scrollbars. A panel is a container holding
 
The definition of a panel with scrollbars. A panel is a container holding
 
other elements in its grid. A panel is always enabled and can't be
 
other elements in its grid. A panel is always enabled and can't be
Line 407: Line 532:
 
* background, the background of the panel.
 
* background, the background of the panel.
 
* foreground, the foreground of the panel.
 
* foreground, the foreground of the panel.
−
 
−
 
−
 
  
 
== Slider ==
 
== Slider ==
−
 
 
A slider is a control that can select a value by moving a grip on a groove.
 
A slider is a control that can select a value by moving a grip on a groove.
−
 
−
 
−
 
  
 
{| border="1"
 
{| border="1"
Line 443: Line 561:
 
| 0
 
| 0
 
| The number of pixels at the right side which can't be used by the positioner.
 
| The number of pixels at the right side which can't be used by the positioner.
 +
|}
 +
 +
Variables:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| best_slider_length
 +
| [[GUIVariable#unsigned|unsigned]]
 +
| mandatory
 +
| The best length for the sliding part.
 +
|-
 +
| minimum_value
 +
| [[GUIVariable#int|int]]
 +
| 0
 +
| The minimum value the slider can have.
 +
|-
 +
| maximum_value
 +
| [[GUIVariable#int|int]]
 +
| 0
 +
| The maximum value the slider can have.
 +
|-
 +
| step_size
 +
| [[GUIVariable#unsigned|unsigned]]
 +
| 0
 +
| The number of items the slider's value increases with one step.
 +
|-
 +
| value
 +
| [[GUIVariable#int|int]]
 +
| 0
 +
| The value of the slider.
 +
|-
 +
| minimum_value_label
 +
| [[GUIVariable#t_string|t_string]]
 +
| 0
 +
| If the minimum value is chosen there might be the need for a special value (eg off). When this key has a value that value will be shown if the minimum is selected.
 +
|-
 +
| maximum_value_label
 +
| [[GUIVariable#t_string|t_string]]
 +
| 0
 +
| If the maximum value is chosen there might be the need for a special value (eg unlimited)). When this key has a value that value will be shown if the maximum is selected.
 
|}
 
|}
  
Line 452: Line 613:
  
 
== Spacer ==
 
== Spacer ==
 +
An empty widget to either fill in a widget since no empty items are allowed or to reserve a fixed space. Since we're a kind of dummy class we're always active, our drawing does nothing.
  
−
A spacer is a dummy item to either fill in a widget since no empty items are allowed or to reserve a fixed space.
+
Since every grid cell needs a widget this is a blank widget. This widget can also be used to 'force' sizes - if either the width or the height is non-zero the spacer functions as a fixed size spacer.
−
 
 
−
A spacer has no states so nothing to load.
 
−
 
 
−
 
 
  
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| width
 +
| [[GUIVariable#f_unsigned|f_unsigned]]
 +
| 0
 +
| The width of the spacer.
 +
|-
 +
| height
 +
| [[GUIVariable#f_unsigned|f_unsigned]]
 +
| 0
 +
| The height of the spacer.
 +
|}
  
 
== Stacked widget ==
 
== Stacked widget ==
−
 
 
A stacked widget holds several widgets on top of each other. This can be used
 
A stacked widget holds several widgets on top of each other. This can be used
 
for various effects; add an optional overlay to an image, stack it with a
 
for various effects; add an optional overlay to an image, stack it with a
Line 468: Line 641:
  
 
A stacked widget has no states.
 
A stacked widget has no states.
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Text box ==
 
== Text box ==
−
 
 
The definition of a text box.
 
The definition of a text box.
−
 
−
 
  
 
The resolution for a text box also contains the following keys:
 
The resolution for a text box also contains the following keys:
Line 505: Line 669:
 
* state_focussed, the text box has the focus of the keyboard.
 
* state_focussed, the text box has the focus of the keyboard.
  
 +
The following variables exist:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| label
 +
| [[GUIVariable#t_string|t_string]]
 +
| ""
 +
| The initial text of the text box.
 +
|-
 +
| history
 +
| [[GUIVariable#string|string]]
 +
| ""
 +
| The name of the history for the text box. A history saves the data entered in a text box between the games. With the up and down arrow it can be accessed. To create a new history item just add a new unique name for this field and the engine will handle the rest.
 +
|}
  
 +
== Toggle button ==
 +
The definition of a toggle button.
  
 +
A toggle button is a button with two states 'up' and 'down' or 'selected' and 'deselected'. When the mouse is pressed on it the state changes.
  
 +
The following states exist:
 +
* state_enabled, the panel is enabled and not selected.
 +
* state_disabled, the panel is disabled and not selected.
 +
* state_focussed, the mouse is over the panel and not selected.
  
 +
* state_enabled_selected, the panel is enabled and selected.
 +
* state_disabled_selected, the panel is disabled and selected.
 +
* state_focussed_selected, the mouse is over the panel and selected.
  
 +
Variables:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| grid
 +
| [[GUIVariable#grid|grid]]
 +
| mandatory
 +
| Defines the grid with the widgets to place on the panel.
 +
|-
 +
| return_value_id
 +
| [[GUIVariable#string|string]]
 +
| ""
 +
| The return value id.
 +
|-
 +
| return_value
 +
| [[GUIVariable#int|int]]
 +
| 0
 +
| The return value.
 +
|}
  
−
 
+
== Toggle panel ==
−
 
+
The definition of a toggle panel.
−
== Toggle button ==
 
−
 
 
−
The definition of a toggle button.
 
  
 
Quite some code looks like toggle_button maybe we should inherit from that but let's test first.
 
Quite some code looks like toggle_button maybe we should inherit from that but let's test first.
Line 563: Line 773:
 
* state_focussed_selected, the mouse is over the panel and selected.
 
* state_focussed_selected, the mouse is over the panel and selected.
  
−
== Toggle panel ==
+
Variables:
 +
{| border="1"
 +
!key
 +
!type
 +
!default
 +
!description
 +
|-
 +
| grid
 +
| [[GUIVariable#grid|grid]]
 +
| mandatory
 +
| Defines the grid with the widgets to place on the panel.
 +
|-
 +
| return_value_id
 +
| [[GUIVariable#string|string]]
 +
| ""
 +
| The return value id.
 +
|-
 +
| return_value
 +
| [[GUIVariable#int|int]]
 +
| 0
 +
| The return value.
 +
|}
  
 +
== Tree view ==
 +
A tree view is a control that holds several items of the same or different types. The items shown are called tree view nodes and when a node has children, these can be shown or hidden. Nodes that contain children need to provide a clickable button in order to fold or unfold the children.
  
 +
The following states exist:
 +
* state_enabled, the listbox is enabled.
 +
* state_disabled, the listbox is disabled.
  
−
The definition of a toggle panel. A toggle panel is like a toggle button, but
+
List with the tree view specific variables:
−
instead of being a button it's a panel. This means it can hold multiple child
 
−
items.
 
−
 
 
−
 
 
−
The resolution for a toggle panel also contains the following keys:
 
 
{| border="1"
 
{| border="1"
 
!key
 
!key
Line 579: Line 810:
 
!description
 
!description
 
|-
 
|-
−
| top_border
+
| vertical_scrollbar_mode
 +
| [[GUIVariable#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| horizontal_scrollbar_mode
 +
| [[GUIVariable#scrollbar_mode|scrollbar_mode]]
 +
| initial_auto
 +
| Determines whether or not to show the scrollbar.
 +
|-
 +
| indention_step_size
 
| [[GUIVariable#unsigned|unsigned]]
 
| [[GUIVariable#unsigned|unsigned]]
 
| 0
 
| 0
−
| The size which isn't used for the client area.
+
| The number of pixels every level of nodes is indented from the previous level.
 
|-
 
|-
−
| bottom_border
+
| node
 
| [[GUIVariable#unsigned|unsigned]]
 
| [[GUIVariable#unsigned|unsigned]]
−
| 0
+
| mandatory
−
| The size which isn't used for the client area.
+
| The tree view can contain multiple node sections. This part needs more documentation.
 
|-
 
|-
−
| left_border
+
| id
 
| [[GUIVariable#unsigned|unsigned]]
 
| [[GUIVariable#unsigned|unsigned]]
−
| 0
+
| ""
−
| The size which isn't used for the client area.
+
| .
 
|-
 
|-
−
| right_border
+
| return_value_id
 
| [[GUIVariable#unsigned|unsigned]]
 
| [[GUIVariable#unsigned|unsigned]]
−
| 0
+
| ""
−
| The size which isn't used for the client area.
+
| .
 
|}
 
|}
−
 
−
The following states exist:
 
−
* state_enabled, the panel is enabled and not selected.
 
−
* state_disabled, the panel is disabled and not selected.
 
−
* state_focussed, the mouse is over the panel and not selected.
 
−
 
−
* state_enabled_selected, the panel is enabled and selected.
 
−
* state_disabled_selected, the panel is disabled and selected.
 
−
* state_focussed_selected, the mouse is over the panel and selected.
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
== Tree view ==
 
−
 
−
A tree view is a control that holds several items of the same or different types. The items shown are called tree view nodes and when a node has children, these can be shown or hidden. Nodes that contain children need to provide a clickable button in order to fold or unfold the children.
 
−
 
−
The documentation is not written yet.
 
−
 
−
The following states exist:
 
−
* state_enabled, the listbox is enabled.
 
−
* state_disabled, the listbox is disabled.
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
== Horizontal scrollbar ==
 
== Horizontal scrollbar ==
−
 
 
A horizontal scrollbar is a widget that shows a horizontal scrollbar. This widget is most of the time used in a container to control the scrolling of its contents.
 
A horizontal scrollbar is a widget that shows a horizontal scrollbar. This widget is most of the time used in a container to control the scrolling of its contents.
−
 
  
 
The resolution for a horizontal scrollbar also contains the following keys:
 
The resolution for a horizontal scrollbar also contains the following keys:
Line 684: Line 880:
  
 
== Vertical scrollbar ==
 
== Vertical scrollbar ==
−
 
 
The definition of a vertical scrollbar. This class is most of the time not
 
The definition of a vertical scrollbar. This class is most of the time not
 
used directly. Instead it's used to build other items with scrollbars.
 
used directly. Instead it's used to build other items with scrollbars.
−
 
−
 
  
 
The resolution for a vertical scrollbar also contains the following keys:
 
The resolution for a vertical scrollbar also contains the following keys:
Line 725: Line 918:
  
 
== Window ==
 
== Window ==
−
 
+
Base class of top level items, the only item which needs to store the final canvases to draw on. The definition of a window. A window is a kind of panel see the panel for which fields exist
−
The definition of a window. A window is a kind of panel see the panel for
 
−
which fields exist
 
−
 
 
−
 
 
−
 
 
−
 
 
−
 
 
−
 
 
−
 
 
−
 
 
−
 
 
  
 
[[Category: WML Reference]]
 
[[Category: WML Reference]]
 
[[Category: GUI WML Reference]]
 
[[Category: GUI WML Reference]]

Revision as of 19:01, 27 April 2024

Widget definition

This page describes the definition of all widgets in the toolkit. Every widget has some parts in common, first of all; every definition has the following fields.

key type default description
id string mandatory Unique id for this gui (theme).
description t_string mandatory Unique translatable name for this gui.
resolution section mandatory The definitions of the widget in various resolutions.

Button

A button is a control that can be pushed to start an action or close a dialog.

When a button has a return value it sets the return value for the window. Normally this closes the window and returns this value to the caller. The return value can either be defined by the user or determined from the id of the button. The return value has a higher precedence as the one defined by the id. (Of course it's weird to give a button an id and then override its return value.)

When the button doesn't have a standard id, but you still want to use the return value of that id, use return_value_id instead. This has a higher precedence as return_value.

List with the button specific variables:

key type default description
return_value_id string "" The return value id.
return_value int 0 The return value.

The following states exist:

  • state_enabled, the button is enabled.
  • state_disabled, the button is disabled.
  • state_pressed, the left mouse button is down.
  • state_focussed, the mouse is over the button.

Drawing

A drawing is widget with a fixed size and gives access to the canvas of the widget in the window instance. This allows special display only widgets.

The definition of a drawing. The widget normally has no event interaction so only one state is defined.

The following states exist:

  • state_enabled, the drawing is enabled. The state is a dummy since the things really drawn are placed in the window instance.

If either the width or the height is not zero the drawing functions as a fixed size drawing. The variables available are the same as for the window resolution.

Horizontal listbox

A horizontal listbox is a control that holds several items of the same type. Normally the items in a listbox are ordered in rows, this version orders them in columns instead. The definition of a horizontal listbox is the same as for a normal listbox.

In order to force widgets to be the same size inside a horizontal listbox, the widgets need to be inside a linked_group. Inside the list section there are only the following widgets allowed:

  • grid (to nest)
  • toggle_button
  • toggle_panel

List with the listbox specific variables:

ID (return value) Type Mandatory Description
vertical_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
horizontal_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
header grid [] Defines the grid for the optional header. (This grid will automatically get the id _header_grid.)
footer grid [] Defines the grid for the optional footer. (This grid will automatically get the id _footer_grid.)
list_definition section mandatory This defines how a listbox item looks. It must contain the grid definition for 1 row of the list.
list_data section [] A grid alike section which stores the initial data for the listbox. Every row must have the same number of columns as the 'list_definition'.
has_minimum bool true If false, less than one row can be selected.
has_maximum bool true If false, more than one row can be selected.

Grid Listbox

A grid listbox is a styled_widget that holds several items of the same type. Normally the items in a listbox are ordered in rows, this version orders them in a grid instead.

In order to force widgets to be the same size inside a horizontal listbox, the widgets need to be inside a linked_group. Inside the list section there are only the following widgets allowed:

  • grid (to nest)
  • toggle_button
  • toggle_panel

List with the listbox specific variables:

ID (return value) Type Mandatory Description
vertical_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
horizontal_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
header grid [] Defines the grid for the optional header. (This grid will automatically get the id _header_grid.)
footer grid [] Defines the grid for the optional footer. (This grid will automatically get the id _footer_grid.)
list_definition section mandatory This defines how a listbox item looks. It must contain the grid definition for 1 row of the list.
list_data section [] A grid alike section which stores the initial data for the listbox. Every row must have the same number of columns as the 'list_definition'.
has_minimum bool true If false, less than one row can be selected.
has_maximum bool true If false, more than one row can be selected.

Image

An image shows a static image.

The definition of an image. The label field of the widget is used as the name of file to show. The widget normally has no event interaction so only one state is defined.

The following states exist:

  • state_enabled, the image is enabled.

Label

A label displays a text, the text can be wrapped but no scrollbars are provided.

Although the label itself has no event interaction it still has two states. The reason is that labels are often used as visual indication of the state of the widget it labels.

Note: The above is outdated, if "link_aware" is enabled then there is interaction.

The following states exist:

  • state_enabled, the label is enabled.
  • state_disabled, the label is disabled.
key type default description
link_color string #ffff00 The color to render links with. This string will be used verbatim in pango markup for each link.

The label specific variables:

key type default description
wrap bool #ffff00 Is wrapping enabled for the label.
characters_per_line unsigned #ffff00 Sets the maximum number of characters per line. The amount is an approximate since the width of a character differs. E.g. iii is smaller than MMM. When the value is non-zero it also implies can_wrap is true. When having long strings wrapping them can increase readability, often 66 characters per line is considered the optimum for a one column text.
text_alignment h_align #ffff00 The way the text is aligned inside the canvas.
can_shrink bool #ffff00 Whether the label can shrink past its optimal size.
link_aware bool #ffff00 Whether the label is link aware. This means it is rendered with links highlighted, and responds to click events on those links.

Listbox

A listbox is a control that holds several items of the same type. Normally the items in a listbox are ordered in rows, this version might allow more options for ordering the items in the future.

The definition of a listbox contains the definition of its scrollbar.

The resolution for a listbox also contains the following keys:

key type default description
scrollbar section mandatory A grid containing the widgets for the scrollbar. The scrollbar has some special widgets so it can make default behavior for certain widgets.
ID (return value) Type Mandatory Description
_begin clickable no Moves the position to the beginning of the list.
_line_up clickable no Move the position one item up. (NOTE if too many items to move per item it might be more items.)
_half_page_up clickable no Move the position half the number of the visible items up. (See note at _line_up.)
_page_up clickable no Move the position the number of visible items up. (See note at _line_up.)
_end clickable no Moves the position to the end of the list.
_line_down clickable no Move the position one item down.(See note at _line_up.)
_half_page_down clickable no Move the position half the number of the visible items down. (See note at _line_up.)
_page_down clickable no Move the position the number of visible items down. (See note at _line_up.)
_scrollbar vertical_scrollbar yes This is the scrollbar so the user can scroll through the list.

A clickable is one of:

  • button
  • repeating_button

The following states exist:

  • state_enabled, the listbox is enabled.
  • state_disabled, the listbox is disabled.

List with the listbox specific variables:

ID (return value) Type Mandatory Description
vertical_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
horizontal_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
header grid [] Defines the grid for the optional header. (This grid will automatically get the id _header_grid.)
footer grid [] Defines the grid for the optional footer. (This grid will automatically get the id _footer_grid.)
list_definition section mandatory This defines how a listbox item looks. It must contain the grid definition for 1 row of the list.
list_data section [] A grid alike section which stores the initial data for the listbox. Every row must have the same number of columns as the 'list_definition'.
has_minimum bool true If false, less than one row can be selected.
has_maximum bool true If false, more than one row can be selected.

Minimap

A minimap to show the gamemap, this only shows the map and has no interaction options. This version is used for map previews, there will be a another version which allows interaction.

The following states exist:

  • state_enabled, the minimap is enabled.

Multi page

A multi page is a control that contains several 'pages' of which only one is visible. The pages can contain the same widgets containing the same 'kind' of data or look completely different.

key type default description
grid grid mandatory A grid containing the widgets for main widget.

A multipage has no states.

A multipage has no states. List with the multi page specific variables:

key type default description
page_definition section mandatory This defines how a multi page item looks. It must contain the grid definition for at least one page.
page_data section [] A grid alike section which stores the initial data for the multi page. Every row must have the same number of columns as the 'page_definition'.

Panel

A panel is an item which can hold other items. The difference between a grid and a panel is that it's possible to define how a panel looks. A grid in an invisible container to just hold the items.

A panel is always enabled and can't be disabled. Instead it uses the states as layers to draw on.

The resolution for a panel also contains the following keys:

key type default description
top_border unsigned 0 The size which isn't used for the client area.
bottom_border unsigned 0 The size which isn't used for the client area.
left_border unsigned 0 The size which isn't used for the client area.
right_border unsigned 0 The size which isn't used for the client area.

The following layers exist:

  • background, the background of the panel.
  • foreground, the foreground of the panel.

Progress bar

A progress bar shows the progress of a certain object.

The definition of a progress bar. This object shows the progress of a certain action, or the value state of a certain item.

The following states exist:

  • state_enabled, the progress bar is enabled.

Repeating button

A repeating_button is a control that can be pushed down and repeat a certain action. Once the button is down every x milliseconds it is down a new down event is triggered.

The following states exist:

  • state_enabled, the repeating_button is enabled.
  • state_disabled, the repeating_button is disabled.
  • state_pressed, the left mouse repeating_button is down.
  • state_focussed, the mouse is over the repeating_button.

Scroll label

A scroll label is a label that wraps its text and also has a vertical scrollbar. This way a text can't be too long to be shown for this widget.

This widget is slower as a normal label widget so only use this widget when the scrollbar is required (or expected to become required).

key type default description
grid grid mandatory A grid containing the widgets for main widget.

TODO we need one definition for a vertical scrollbar since this is the second time we use it.

ID (return value) Type Mandatory Description
_content_grid grid yes A grid which should only contain one label widget.
_scrollbar_grid grid yes A grid for the scrollbar (Merge with listbox info.)

The following states exist:

  • state_enabled, the scroll label is enabled.
  • state_disabled, the scroll label is disabled.

Scrollbar panel

The definition of a panel with scrollbars. A panel is a container holding other elements in its grid. A panel is always enabled and can't be disabled. Instead it uses the states as layers to draw on.

key type default description
grid grid mandatory A grid containing the widgets for main widget.

The following layers exist:

  • background, the background of the panel.
  • foreground, the foreground of the panel.

Slider

A slider is a control that can select a value by moving a grip on a groove.

key type default description
minimum_positioner_length unsigned mandatory The minimum size the positioner is allowed to be. The engine needs to know this in order to calculate the best size for the positioner.
maximum_positioner_length unsigned 0 The maximum size the positioner is allowed to be. If minimum and maximum are the same value the positioner is fixed size. If the maximum is 0 (and the minimum not) there's no maximum.
left_offset unsigned 0 The number of pixels at the left side which can't be used by the positioner.
right_offset unsigned 0 The number of pixels at the right side which can't be used by the positioner.

Variables:

key type default description
best_slider_length unsigned mandatory The best length for the sliding part.
minimum_value int 0 The minimum value the slider can have.
maximum_value int 0 The maximum value the slider can have.
step_size unsigned 0 The number of items the slider's value increases with one step.
value int 0 The value of the slider.
minimum_value_label t_string 0 If the minimum value is chosen there might be the need for a special value (eg off). When this key has a value that value will be shown if the minimum is selected.
maximum_value_label t_string 0 If the maximum value is chosen there might be the need for a special value (eg unlimited)). When this key has a value that value will be shown if the maximum is selected.

The following states exist:

  • state_enabled, the slider is enabled.
  • state_disabled, the slider is disabled.
  • state_pressed, the left mouse button is down on the positioner of the slider.
  • state_focussed, the mouse is over the positioner of the slider.

Spacer

An empty widget to either fill in a widget since no empty items are allowed or to reserve a fixed space. Since we're a kind of dummy class we're always active, our drawing does nothing.

Since every grid cell needs a widget this is a blank widget. This widget can also be used to 'force' sizes - if either the width or the height is non-zero the spacer functions as a fixed size spacer.

key type default description
width f_unsigned 0 The width of the spacer.
height f_unsigned 0 The height of the spacer.

Stacked widget

A stacked widget holds several widgets on top of each other. This can be used for various effects; add an optional overlay to an image, stack it with a spacer to force a minimum size of a widget. The latter is handy to avoid making a separate definition for a single instance with a fixed size.

A stacked widget has no states.

Text box

The definition of a text box.

The resolution for a text box also contains the following keys:

key type default description
text_x_offset f_unsigned "" The x offset of the text in the text box. This is needed for the code to determine where in the text the mouse clicks, so it can set the cursor properly.
text_y_offset f_unsigned "" The y offset of the text in the text box.

The following states exist:

  • state_enabled, the text box is enabled.
  • state_disabled, the text box is disabled.
  • state_focussed, the text box has the focus of the keyboard.

The following variables exist:

key type default description
label t_string "" The initial text of the text box.
history string "" The name of the history for the text box. A history saves the data entered in a text box between the games. With the up and down arrow it can be accessed. To create a new history item just add a new unique name for this field and the engine will handle the rest.

Toggle button

The definition of a toggle button.

A toggle button is a button with two states 'up' and 'down' or 'selected' and 'deselected'. When the mouse is pressed on it the state changes.

The following states exist:

  • state_enabled, the panel is enabled and not selected.
  • state_disabled, the panel is disabled and not selected.
  • state_focussed, the mouse is over the panel and not selected.
  • state_enabled_selected, the panel is enabled and selected.
  • state_disabled_selected, the panel is disabled and selected.
  • state_focussed_selected, the mouse is over the panel and selected.

Variables:

key type default description
grid grid mandatory Defines the grid with the widgets to place on the panel.
return_value_id string "" The return value id.
return_value int 0 The return value.

Toggle panel

The definition of a toggle panel.

Quite some code looks like toggle_button maybe we should inherit from that but let's test first. the problem is that the toggle_button has an icon we don't want, but maybe look at refactoring later. but maybe we should also ditch the icon, not sure however since it's handy for checkboxes...

A toggle panel is an item which can hold multiple other items. The difference between a grid and a panel is that it's possible to define how a panel looks. A grid in an invisible container to just hold the items. The toggle panel is a combination of the panel and a toggle button, it allows a toggle button with its own grid.

The resolution for a toggle panel also contains the following keys:

key type default description
top_border unsigned 0 The size which isn't used for the client area.
bottom_border unsigned 0 The size which isn't used for the client area.
left_border unsigned 0 The size which isn't used for the client area.
right_border unsigned 0 The size which isn't used for the client area.

The following states exist:

  • state_enabled, the panel is enabled and not selected.
  • state_disabled, the panel is disabled and not selected.
  • state_focussed, the mouse is over the panel and not selected.
  • state_enabled_selected, the panel is enabled and selected.
  • state_disabled_selected, the panel is disabled and selected.
  • state_focussed_selected, the mouse is over the panel and selected.

Variables:

key type default description
grid grid mandatory Defines the grid with the widgets to place on the panel.
return_value_id string "" The return value id.
return_value int 0 The return value.

Tree view

A tree view is a control that holds several items of the same or different types. The items shown are called tree view nodes and when a node has children, these can be shown or hidden. Nodes that contain children need to provide a clickable button in order to fold or unfold the children.

The following states exist:

  • state_enabled, the listbox is enabled.
  • state_disabled, the listbox is disabled.

List with the tree view specific variables:

key type default description
vertical_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
horizontal_scrollbar_mode scrollbar_mode initial_auto Determines whether or not to show the scrollbar.
indention_step_size unsigned 0 The number of pixels every level of nodes is indented from the previous level.
node unsigned mandatory The tree view can contain multiple node sections. This part needs more documentation.
id unsigned "" .
return_value_id unsigned "" .

Horizontal scrollbar

A horizontal scrollbar is a widget that shows a horizontal scrollbar. This widget is most of the time used in a container to control the scrolling of its contents.

The resolution for a horizontal scrollbar also contains the following keys:

key type default description
minimum_positioner_length unsigned mandatory The minimum size the positioner is allowed to be. The engine needs to know this in order to calculate the best size for the positioner.
maximum_positioner_length unsigned 0 The maximum size the positioner is allowed to be. If minimum and maximum are the same value the positioner is fixed size. If the maximum is 0 (and the minimum not) there's no maximum.
left_offset unsigned 0 The number of pixels at the left which can't be used by the positioner.
right_offset unsigned 0 The number of pixels at the right which can't be used by the positioner.

The following states exist:

  • state_enabled, the horizontal scrollbar is enabled.
  • state_disabled, the horizontal scrollbar is disabled.
  • state_pressed, the left mouse button is down on the positioner of the horizontal scrollbar.
  • state_focussed, the mouse is over the positioner of the horizontal scrollbar.

Vertical scrollbar

The definition of a vertical scrollbar. This class is most of the time not used directly. Instead it's used to build other items with scrollbars.

The resolution for a vertical scrollbar also contains the following keys:

key type default description
minimum_positioner_length unsigned mandatory The minimum size the positioner is allowed to be. The engine needs to know this in order to calculate the best size for the positioner.
maximum_positioner_length unsigned 0 The maximum size the positioner is allowed to be. If minimum and maximum are the same value the positioner is fixed size. If the maximum is 0 (and the minimum not) there's no maximum.
top_offset unsigned 0 The number of pixels at the top which can't be used by the positioner.
bottom_offset unsigned 0 The number of pixels at the bottom which can't be used by the positioner.

The following states exist:

  • state_enabled, the vertical scrollbar is enabled.
  • state_disabled, the vertical scrollbar is disabled.
  • state_pressed, the left mouse button is down on the positioner of the vertical scrollbar.
  • state_focussed, the mouse is over the positioner of the vertical scrollbar.

Window

Base class of top level items, the only item which needs to store the final canvases to draw on. The definition of a window. A window is a kind of panel see the panel for which fields exist

Retrieved from "https://wiki.wesnoth.org/index.php?title=GUIWidgetDefinitionWML&oldid=72854"