User Tools

Site Tools


dragengine:modules:dragonscript:guitheme

This is an old revision of the document!


Gui Themes

The DragonScript module provides a Gui Toolkit based on the canvas system. This is a non-mandatory implementation and can be easily replaced by a different toolkit or custom implementation. To help customize the toolkit visually and if required functionally gui themes are used. A gui theme defines a set of designer factories which produce designers able to design the visual aspects of certain widgets. A button for example consists of the button widget defining the structure and functionality of the button and the button designer which defines how the button is visualized on screen. Designers usually define the canvas creators to use for a widget. For some widgets designers even create sub-widgets managing their canvas creators. Similar to canvas creators designers are created by designer factories, one for each designer type. In the case of a button this would be button designer factories. This allows to define gui themes using XML files or programatically without having to know the actual designer implementation. Like canvas creators designers have a setParameter method allowing to set named parameters without needing to know the implementation. The designer factories class stored lists of named designers for all kinds of widget types. You can simply add your own designer factories to this list if you like to customize the appearance of your GUI beyond using designer parameters. You can create gui themes using script code but it is simpler to use XML files. For this purpose a ready made load xml gui theme class exists supporting designer factories list and customizing designers using parameters.

// create gui theme loader. this adds the default shipped designer factories for you
var LoadGuiTheme loadGuiTheme = LoadGuiTheme.new(gameConsole)

// if you like add custom designers
loadGuiTheme.getDesignerFactories().addButtonDesignerFactory("FancyButton", FancyButtonDesignerFactory.new())

// load gui theme from xml file. if it asks for a "FancyButton" designer it gets the one above.
// keep in mind the guiTheme you receive is shared. Do not change the received guitheme
var GuiTheme guiTheme = loadGuiTheme.loadFromFile("/guithemes/fancy.guitheme.xml")

// still if you need to change the gui theme create first a copy and apply the changes. keep in
// mind that all designers inside the gui theme are shared too. hence if you need to modify a
// designer create a copy, apply the changes then assign it back to your gui theme copy. in
// general though it is recommended to only use XML for defining gui themes. this is much simpler
// and less error prone
var GuiTheme modifyGuiTheme = GuiTheme.new(guiTheme)
var WidgetDesigner modifyDesigner = guiTheme.getNamedWidgetDesigner("Window").copyDesigner()
modifyDesigner.setParameter("normal.padding", BorderSize.new(10))
modifyGuiTheme.setWidgetDesigner("Window", modifyDesigner

This is an example of the ready to use modern gui theme included in the DragonScript module.

Moden gui theme example

Moden gui theme example.

You could leave a comment if you were logged in.
dragengine/modules/dragonscript/guitheme.1519651133.txt.gz · Last modified: 2018/02/26 13:18 by dragonlord