One of the most common features of any modern application, whether web-based or client-based, is the dynamic aspect of user interface elements. These include buttons that highlight when focused or clicked, images that change when the mouse is rolled over them, text boxes that change color to indicate errors, the visibility/edit-ability of input fields through operator profile or/and data behind.
In almost of cases, this kind of interactivity is achieved through the use of some kind of scripting mechanism or in Java through event handling. In web pages, for example, there is usually some JavaScript code that is assigned to execute when certain events are triggered on a given page element, like an <IMG> tag whose src attribute changes in response to mouse-over and mouse-out events.
In XWT, you can achieve the same kinds of interactive effects without writing a single line of script or Java code by using a feature known as Triggers. These triggers are defined within styles or a specific UI element to respond to changes on a given property and event of the object. When they are triggered, some actions defined in XML will be executed. One of the most useful action is the Setter, which set the values of other properties on the object. In general, a trigger is somewhat like an if block in procedural code; it only executes what it contains when some condition evaluates to true.
There are five kinds of triggers, each has a different way of determining when it should execute:
- UI Property trigger
- Multiple UI Property triggers
- Data Property trigger
- Multiple Data Property trigger
- UI Event trigger
Along with Control Binding, Trigger is another powerful feature to minimize the pure UI codes in Java and keep Java code more readable.
UI Element Property trigger
The source of a property trigger is UI Element. The condition is defined by two attributes: property and value. Each Trigger has a list of Setter.
The properties changed by triggers are automatically reset to their previous value when the triggered condition is no longer satisfied. Triggers are optimized for transient states which are expected to change and return to original state, such as selection of a check button.
The property Trigger construction is very simple. It consists of a <Trigger> tag, which usually encloses one or more <Setter> tags. The <Trigger> tag also has attributes that govern its actions. The Property attribute indicates the property of the triggered object that the trigger is listening for changes on. The Value attribute contains the value that will cause the Trigger to fire when it is equal to the value of the property that is being watched. It usually looks something like this:
<Trigger Property="selection" Value="true">
<Set Property="text" Value="green"/>
</Trigger>
This trigger can be defined in the property triggers of a Style, which will be applied to all buttons:
<Style targetType="Button">
<Style.triggers>
<Trigger property="Selection" value="true">
<Setter property="text" value="Selected"/>
</Trigger>
</Style.triggers>
</Style>
or directly in a UI Element
<Button x:Style="CHECK" text="Unselected">
<Button.triggers>
<Trigger property="Selection" value="true">
<Setter property="Text" value="Selected"/>
</Trigger>
</Button.triggers>
</Button>
This code indicates when the CheckBox Button gets selected, the text value will be changed to "Selected". When you deselect this button, the previous value will be restored.
If you want to apply the action to another UI element, you just need to add an attribute targetName with the name of referenced UI element as value:
<Button Name="Button1" x:Style="CHECK" text="Unselected"/>
<Button x:Style="CHECK" text="Button State">
<Button.triggers>
<Trigger property="selection" value="true">
<Setter property="Text" value="selected" targetName="Button1"/>
</Trigger>
</Button.triggers>
</Button>
You’re not limited to just one Setter in a Trigger. You can have as many Setter as you like. And for a style or a UI Element, you can have as many Trigger as you like.
<Button Name="Button1" x:Style="CHECK" text="Unselected"/>
<Button x:Style="CHECK" text="Button State">
<Button.triggers>
<Trigger property="selection" value="true">
<Setter property="Text" value="selected" targetName="Button1"/>
<Setter property="selection" value="true" targetName="Button1"/>
</Trigger>
</Button.triggers>
</Button>
Multiple UI Element Property trigger
I can imagine many of you saying "well, that’s pretty nice feature, but what if I want some actions only when two different or more triggers match their Value conditions at the same time?". For example, you might want to call Setter to a control only when that control both has the input focus and has the mouse over it.
The MultiTrigger is defined for this purpose. Each MultiTrigger has a list of Condition. Each condition is composed of at least two attributes: property and value. An optional attribute "sourceName" can be used to indicate the source of condition.
<Composite>
<Button Name="button1" x:Style="CHECK" text="Condition 1"/>
<Button Name="button2" x:Style="CHECK" text="Condition 2"/>
<Label Name="messageLabel"/>
<Composite.triggers>
<MultiTrigger>
<MultiTrigger.conditions>
<Condition property="selection" value="True" sourceName="button1" />
<Condition property="selection" value="True" sourceName="button2" />
</MultiTrigger.conditions>
<Setter property="text" value="OK" targetName="messageLabel" />
</MultiTrigger>
</Composite.triggers>
</Composite>
In this example, we define a MultiTrigger in a Composite which contains two CheckBox buttons. When and only when both buttons get selected, a message "OK" will be displayed in Label.
Next post will address on Data Trigger and Multiple Data Trigger. The Event trigger is used to UI animation, which will be covered later. Keep tune!
