WIP
A button is a fundamental element of any GUI and at the same time it is easy enough to use as an example for creating themes.
In TWL every widget has states and the Button widget has the following states:
Now we need to load this PNG file and define the areas:
These 3 area elements above are now used to represent various button states:
This select element behaves like this pseudo code:
Now we have an image which we can use in a button theme:
This will assign the image we created above as background image for a button widget.
It will also use the border we defined on the image as the border for the widget.
- keyboardFocus
- disabled
- hover
- pressed
- armed
- selected (only for a toggle button / check box etc)
Now we need to load this PNG file and define the areas:
<images file="button.png"> <area name="-buttonA" xywh="0,0,150,21"/> <area name="-buttonB" xywh="150,0,150,21"/> <area name="-buttonC" xywh="300,0,150,21"/> .... </images>
<images file="button.png"> .... <select name="button.background" border="5,0"> <alias ref="-buttonB" if="armed"/> <alias ref="-buttonC" if="hover"/> <alias ref="-buttonA"/> </select> </images>
if(armed) { draw("-buttonB"); } else if(hover) { draw("-buttonC"); } else { draw("-buttonA"); }
<theme name="button" ref="-defaults"> <param name="background"><image>button.background</image></param> <param name="border"><border>background.border</border></param> </theme>
on 2010/08/12 12:34