| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| dragengine:modules:dragonscript:xmlguitheme:guitheme [2018/02/26 16:21] – [Named Gui Themes] dragonlord | dragengine:modules:dragonscript:xmlguitheme:guitheme [2018/03/01 08:57] (current) – [Named Gui Themes] dragonlord |
|---|
| </code> | </code> |
| |
| 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: | Widget designers are selected using the //setDesignerSelector// 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 . SpecialVersion |
| |
| Named gui themes are organized in a tree. The top level gui theme has a list of child gui themes which in turn can have more child gui themes. The selector set for the widget composes of a dot separated name, for example //InGame.InventoryWindow//. The parent of the widget has the top level gui theme assigned. The widget then selects first the named gui theme //InGame//. If found it uses this gui theme to continue choosing the named gui theme //InventoryWindow//. This way the widget digs into the theme three picking the best gui theme it can find (meaning the last one which matches). If one gui theme along the path is not found the last found one is used. | Named gui themes are organized in a tree. The top level gui theme has a list of child gui themes which in turn can have more child gui themes. The selector set for the widget composes of a dot separated name, for example //InGame.InventoryWindow//. The parent of the widget has the top level gui theme assigned. The widget then selects first the named gui theme //InGame//. If found it uses this gui theme to continue choosing the named gui theme //InventoryWindow//. This way the widget digs into the theme three picking the best gui theme it can find (meaning the last one which matches). If one gui theme along the path is not found the last found one is used. |
| |
| //setDesignerSelector()// and //setThemeSelector()// both allow to select what widget designer to use for a widget widget but both work slightly different and have their specific use case. Using //setDesignerSelector()// you choose individual styles for individual widgets. Using //setThemeSelector()// you can use different sets of widget designers with the same name. For example If you use a designer selector //Button.MyButton// then you can have only one designer in your gui theme matching this name. If you use //setThemeSelector()// though you can have different themes for the same button. Each theme has a widget designer with the same name but depending on what theme is chosen a different designer is used. This allows to change a UI theme on-the-fly and allows easy modding with the help of named gui themes. | |
| |
| <code xml> | <code xml> |
| |
| <!-- Load gui theme from XML file and modify it with the content in the tag. --> | <!-- Load gui theme from XML file and modify it with the content in the tag. --> |
| <guiTheme name='MyTheme2 extend='mytheme.guitheme.xml'> | <guiTheme name='MyTheme2' extend='mytheme.guitheme.xml'> |
| <!-- content... --> | <!-- content... --> |
| </guiTheme> | </guiTheme> |
| </guiTheme> | </guiTheme> |
| </code> | </code> |
| | |
| | //setDesignerSelector()// and //setThemeSelector()// both allow to select what widget designer to use for a widget widget but both work slightly different and have their specific use case. Using //setDesignerSelector()// you choose individual styles for individual widgets. Using //setThemeSelector()// you can use different sets of widget designers with the same name. For example If you use a designer selector //Button.MyButton// then you can have only one designer in your gui theme matching this name. If you use //setThemeSelector()// though you can have different themes for the same button. Each theme has a widget designer with the same name but depending on what theme is chosen a different designer is used. This allows to change a UI theme on-the-fly and allows easy modding with the help of named gui themes. |
| |
| ====== Importing ====== | ====== 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. Named gui themes can be created in three ways. The first way creates a new named gui theme from stratch. You can also load gui theme as named gui theme. The third version uses a previously defined gui theme (sort of renaming/reusing it unless modified). These examples show how this is done: | 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. Importing works as if the tags in the referenced file are defined right instead of the import tag. This example shows how this is done: |
| | |
| | <code xml> |
| | <!-- Import definitions from XML file as if written here. --> |
| | <import>sharedDefintions.guitheme.xml</import> |
| | </code> |
| |
