Re: Dynamic clickable image

Posted by Erik Bruchez on
URL: https://discuss.orbeon.com/Dynamic-clickable-image-tp32106p32107.html

Joseph,

Good question! All your make sense in their own way. Now the question
is, which one(s) is the "right" way of achieving this!

Regarding option #1: this would make sense, but we have in fact thought
a bit about whether DOMActivate should be enabled on xforms:output or
not. Right now, we explicitly do not send DOMActivate on xforms:output.
The question is simply to determine whether it makes sense for an output
to be "activated".

Option #2 won't work because AVTs are not supported within xxforms:img.

Option #3 should probably work, but currently it doesn't, probably
because of a bug.

There is another option, which goes as follow:

<xforms:trigger>
   <xforms:label><xforms:output
      value="concat('&lt;img src=''../..', image, '''>')"
      mediatype="text/html"/></xforms:label>
   <xforms:message ref="url" ev:event="DOMActivate" level="modal"/>
</xforms:trigger>

This should have worked, but it didn't because the trigger button and
link appearances did not handle HTML correctly. So I fixed this and now,
we have a working solution for such dynamic images.

I also added a modifed version of your test case as:

   apps/xforms-sandbox/samples/dynamic-image-trigger.xhtml

-Erik

joseph lawrence wrote:

> hi Erik,
>      I wanted to create dynamic clickable(in the sense that clicking the
> image will fire the DOMAcivate event) images. For which I tried the
> following cases:
>  
> Case1: Using action in xforms:output with @mediatype="image/*"
> Case2: Using AVT in xxforms:img @src attribute
> Case3: Using xforms:output @mediatype="image/*" within the trigger's
> label element
>  
> None of the cases worked fine. Is there some other means to implement
> this, otherthan using xsl methods. Will it be possible to support the
> 'xforms:action' within the xforms:output? I have attached a
> sample containing the test cases that I tried.
>  
> Thanks in advance,
> Joseph Lawrence
> Stabilix Solutions
>
> __________________________________________________
> Do You Yahoo!?
> Tired of spam? Yahoo! Mail has the best spam protection around
> http://mail.yahoo.com
>
>
> ------------------------------------------------------------------------
>
> <xhtml:html xsl:version="2.0" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:f="http://orbeon.org/oxf/xml/formatting" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns:xi="http://www.w3.org/2003/XInclude"
>             xmlns:widget="http://orbeon.org/oxf/xml/widget" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ui="http:/www.example.org/ui">
>
>     <xhtml:head>
>         <xhtml:title>Orbeon Training Samples</xhtml:title>
>         <xforms:model>
>             <xforms:instance id="main-instance">
>                 <main-instance>
>                     <button>
>                         <image>/images/add.gif</image>
>                         <url>You have clicked the first trigger control</url>
>                     </button>
>                     <button>
>                         <image>/images/edit.gif</image>
>                         <url>You have clicked the third trigger control</url>
>                     </button>
>                     <button>
>                         <image>/images/add-all.gif</image>
>                         <url>You have clicked the second trigger control</url>
>                     </button>
>                 </main-instance>
>             </xforms:instance>
>         </xforms:model>
>         <xhtml:style type="text/css">
>         </xhtml:style>
>     </xhtml:head>
>     <xhtml:body>
>         <!-- Dynamic image via action support in xforms:output -->
>         <xhtml:table>
>             <xhtml:tr><b>Case 1 :</b>
>                 <xforms:repeat nodeset="instance('main-instance')/button">
>                     <xhtml:td width="150px">
>                         <xforms:output value="image" mediatype="image/*" xhtml:style="cursor:pointer">
>                             <xforms:action ev:event="DOMActivate">
>                                 <xforms:message ref="url" level="modal"/>
>                             </xforms:action>
>                         </xforms:output>  
>                     </xhtml:td>
>                 </xforms:repeat>
>             </xhtml:tr>
>         </xhtml:table>
>         <br/>
>         <!-- Dynamic image via AVT support within xxforms:img -->
>         <xhtml:table>
>             <xhtml:tr><b>Case 2 :</b>
>                 <xforms:repeat nodeset="instance('main-instance')/button">
>                     <xhtml:td>
>                         <xforms:trigger appearance="xxforms:image">
>                             <xforms:label><xforms:output ref="image" mediatype="image/*"/></xforms:label>
>                             <xxforms:img src="{{image}}"/>
>                             <xforms:message ref="url" ev:event="DOMActivate" level="modal"/>
>                         </xforms:trigger>  
>                     </xhtml:td>
>                 </xforms:repeat>
>             </xhtml:tr>
>         </xhtml:table>
>         <br/>
>         <!-- Dynamic Image via mediatype support in xforms:output control within trigger's label -->
>         <xhtml:table>
>             <xhtml:tr><b>Case 3 :</b>
>                 <xforms:repeat nodeset="instance('main-instance')/button">
>                     <xhtml:td>
>                         <xforms:trigger appearance="xxforms:link">
>                             <xforms:label><xforms:output ref="image" mediatype="image/*"/></xforms:label>
>                             <xforms:message ref="url" ev:event="DOMActivate" level="modal"/>
>                         </xforms:trigger>  
>                     </xhtml:td>
>                 </xforms:repeat>
>             </xhtml:tr>
>         </xhtml:table>
>     </xhtml:body>
> </xhtml:html>
--
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws