XForms/Controlling Button Appearance

This example demonstrates how to control the button appearance using labels, hint text and images. To see the button images appear you will need to create a file called XForms-button.jpg in the folder that this program is executed from.

This example requires an image to be used in the program.

This image can be downloaded from here:.

Program
   Test of Trigger Appearances A simple model button that brings up a message in a window:  Simple Button Button clicked  A model button that also displays "hint text" when you hover over the button:

 Button With Hint Text On Hover Button clicked This is the hint text. </xf:trigger>

A button that includes an image and hint text:

<xf:trigger appearance="xf:image"> <img src="XForms-button.jpg" /> <xf:message level="modal" ev:event="DOMActivate">Image clicked</xf:message> <xf:hint>This hint text comes up if you hover over a button.</xf:hint> </xf:trigger>

A button that includes text, and image and text:

<xf:trigger appearance="xf:image"> <xf:label>Text before the image... <img src="XForms-button.jpg" /> ...text after the image.</xf:label> <xf:message level="modal" ref="message" ev:event="DOMActivate" /> <xf:hint>Hints work with labels and images.</xf:hint> </xf:trigger>

A trigger that extracts the label, hint and message text from the model:

<xf:trigger> <xf:label ref="label" /> <xf:message level="modal" ref="message" ev:event="DOMActivate" /> <xf:hint ref="hint" /> </xf:trigger>

Discussion
The XForm specification also uses the xf:help tag. to allow for context sensitive help. This tag would work just like the hint tag but would be activated by the browser or systems help function. You can use a style sheet to also use the help tag.