User Tools

Site Tools


dragengine:modules:dragonscript:xmlguitheme:guitheme

This is an old revision of the document!


Start Page » DragonScript Scripting Language » Gui Themes » Define XML Gui Theme

Basic Format

XML Gui Theme files typically have the file extension *.guitheme.xml. Gui Themes can be defined from scratch or based on an existing gui theme. To extend an existing gui theme file use the extend=“base.guitheme.xml” attribute. These are the two basic file contents:

<?xml version='1.0' encoding='ISO-8859-1'?>
<guiTheme>
   <!-- A brand new gui theme to be defined from scratch. -->
   <designer name='Desktop' type='Desktop'>
      <!-- content... -->
   </designer>
</guiTheme>
<?xml version='1.0' encoding='ISO-8859-1'?>
<guiTheme extend='/shareddata/guithemes/modern/modern.guitheme.xml'>
   <!-- Modify the DragonScript module provided modern gui theme with your own customizations. -->
   <designer name='Desktop' type='Desktop'>
      <!-- content... -->
   </designer>
</guiTheme>

Widget Designers

Gui Theme XML files contain usually only designer tags defining widget designers. You can use any number of designer tags with designers defined later in the document overwriting those defined earlier. You can use different ways to define widget designers. You can create a designer from a Prototype provided by the game scripts. You can load designers from a *.wdesigner.xml file. Or you can modify a previously defined widget designer by name. See Define XML Widget Designer for the content you can use in those tags. The examples below show the three ways to define a widget designer. By default widget designers are shared. As soon as you add a modification the XML Loader creates a copy of the widget designer and applies the changes. This keeps loading times and memory consumption low.

<!-- Create a new widget designer using a Prototype named 'Desktop' provided by the game scripts. -->
<designer name='MyDesigner' type='Desktop'>
   <!-- content... -->
</designer>
 
<!-- Load widget designer from XML file and modify it with the content in the tag. -->
<designer name='MyDesigner2' extend='mydesigner.wdesigner.xml'>
   <!-- content... -->
</designer>
 
<!-- Modify a previously defined widget designer by name. -->
<designer name='MyDesigner3' extendNamed='MyDesigner'>
   <!-- content... -->
</designer>

Widget designers are selected using the setDesignrSelector parameter of widgets. Selectors compose of dot separated names, for example Label.MyUIComponent.SpecialVersion. The selector is matched first in its entire length against all defined widget designers. The last widget designer with the exact matching name is chosen. If no widget designer matches the last dot separated name is removed and the matching restarts. In the this example the next match attempt would be with the full name Label.MyUIComponent. If this does still not match another component is remove matching now against Label. If even this does not match no widget designer is used for the widget. In short the first matching designer from the list below is chosen:

  • Label.MyUIComponent.SpecialVersion
  • Label.MyUIComponent
  • Label
  • <nothing>

This system allows to create specializations of widgets with custom design while falling back to previous, broader definitions if missing. In this example Label is the top level designer matching all labels if nothing else applies. Using .MyUIComponent you can define a widget designer applying to all labels in a specific UI component of yours given they all have selectors set of the form Label.MyUIComponent{.XXX} where {.XXX} is optional. You can further customize individual labels in this UI component by adding yet another selector component. If the artists wants to style these labels individually he can use the full name. Otherwise he can define one of the broader upper level selectors. Hence it never hurts to have a selector component more attached if you want to give creative freedom to your artist.

Named Gui Themes

Importing

Parts of Gui Themes can be placed in external files to reuse definitions. This reduces typing effort and allows to better organize your gui themes. Gui themes can be imported in two ways into the

You could leave a comment if you were logged in.
dragengine/modules/dragonscript/xmlguitheme/guitheme.1519658844.txt.gz · Last modified: 2018/02/26 15:27 by dragonlord