Component Example

This example shows how to create a simple button.

Create the following templates:

ContainerTemplate, index = 0, background = bg image, set size, children = 1, 2
TextholderTemplate, index = 2, set font, data effect = Text

These two templates will create a very simple button that has the background and it will display the text that is set by the programmer. If you wish to change the color of the text when the user moves mouse into the button, add the following template as well:

TextholderTemplate index = 2, set font, data effect = Text, condition = Hover

This component will override the previous if the mouse is over the button. In order to change the background when the user clicks the button, add the following:

ContainerTemplate, index = 0, background = pressed, set size, condition = Down, 
children = 1, 2

This will change the background when the user presses the mouse button. Both hover and down conditions can occur at the same time. If user uses mouse to press the button they will both be active at the same time, however, if the user uses space bar to press the button when it is focused, only Down condition will be satisfied. In addition to these, it is helpful to provide a visual clue when the widget is focused. This is generally done by adding a focus rectangle like the following:

GraphicsTemplate, index = 1, Drawable = focus rectangle, Positioning = Absolute, 
Size = 100, 100, Unit::Percent, set margin, condition = Focused

This last piece will only be shown when the button is focused. There will be no errors when it is invisible even when the container lists this template as its child.