Dynamic clickable image

Posted by Joseph Lawrence on
URL: https://discuss.orbeon.com/Dynamic-clickable-image-tp32106.html

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>

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