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

<html
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>XForms Trigger Appearances</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <label>Label text from the model</label>
               <message>Message text from the model</message>
               <hint>Hint text from the model</hint>
            </data>
         </xf:instance>
         <xf:submission method="post" id="submission" />
      </xf:model>
   </head>
   <body>
      <h1>Test of Trigger Appearances</h1>
      <p>A simple model button that brings up a message in a window:
      <br/>
         <xf:trigger>
            <xf:label>Simple Button</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">Button clicked</xf:message>
         </xf:trigger>
         <br/>
      </p>
      <p>A model button that also displays "hint text" when you hover over the button:
			<br />
         <xf:trigger>
            <xf:label>Button With Hint Text On Hover</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">Button clicked</xf:message>
            <xf:hint>This is the hint text.</xf:hint>
         </xf:trigger>
         <br />
      </p>
      <p>A button that includes an image and hint text:
			<br />
         <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>
         <br />
      </p>
      <p>A button that includes text, and image and text:
			<br />
         <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>
         <br />
      </p>
      <p>A trigger that extracts the label, hint and message text from the model:
			<br />
         <xf:trigger>
            <xf:label ref="label" />
            <xf:message level="modal" ref="message" ev:event="DOMActivate" />
            <xf:hint ref="hint" />
         </xf:trigger>
         <br />
      </p>
   </body>
</html>

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.

Next Page: Range | Previous Page: Trigger
Home: XForms