Motivation

XForms creates a general way to represent a button that will work on web pages and cell phones. But it is not called "button" as in most other systems. It is an abstraction or generalization of a button called a trigger. A trigger is an abstraction of a web button or another event such as a button on a cell phone. Using a trigger abstraction allows your XForms to be more portable.

Screen Image

A simple XForm button and the resulting message

Sample 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>Button Example</title>
      <xf:model>
         <xf:instance xmlns="">
             <data/>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <xf:trigger>
          <xf:label>Button</xf:label>
          <xf:hint>If you press this you will get a hello world message.</xf:hint>
          <xf:message level="modal" ev:event="DOMActivate">Hello World!</xf:message>
      </xf:trigger>
   </body>
</html>

Discussion

This example has both a label and a hint. XForms also has help text that can be used but the way help is implemented is implementation specific.

Styling a Trigger

By default each trigger looks like an HTML button. You can turn this off by setting appearance="minimal".

<xf:trigger appearance="minimal">
   <xf:label>Save</xf:label>
</xf:trigger>

Having a Button Trigger Multiple Events

When you press on a button (trigger) you sometimes want the trigger to do more than a single submission. Whenever you want to do this you can just add an action element and wrap multiple sends in the action:

<xf:trigger>
   <xf:label>Submit</xf:label>    
   <xf:action ev:event="DOMActivate">
      <xf:send submission="getTime"/>
      <xf:send submission="getTemperature"/>
    </xf:action>
</xf:trigger>

References

W3C trigger element

FireFox CSS styling hints

Next Page: Controlling Button Appearance | Previous Page: Upload
Home: XForms