Search code examples
xformsxforms-betterform

Customized Xforms trigger with image


I'm trying to create a Xforms processor and I really don't understand what to do with triggers which need to display an image insthead of a text. The specification does not provide such detail, but I found an Open Book with this example:

<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>

But as the standard doesn't mention, and the img tag is html -not defined in xforms-, I'm wondering if it is right. What do you think?


Solution

  • The easiest way of doing this is to use a CSS background image for the trigger or better the resulting button. A look into the browser source should reveal how to match the element you want. If you're using betterform as the tag suggests you can write a rule like this

    #mytrigger .xfValue{
      background-image:url....
    

    You must give the trigger the id 'mytrigger' for this to work.

    Another option that should work for betterFORM:

    <xf:trigger id="trigger1" ref="trigger1/value" src="images/bf_logo_67x27.png">
          <xf:label></xf:label>
    </xf:trigger>