XForms/Deselect Events

From Wikibooks, open books for an open world
Jump to navigation Jump to search

Motivation[edit | edit source]

You want to catch a deselection event when you navigate away from a page.

Sample Code[edit | edit source]

<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>Demo of Deselection Event</title>
        <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {font-family: Helvetica, sans-serif;}
        /* style each individual tab */
        #tab-bar xf|trigger {
        color: black;
        border: 3px outset gray; 
        border-bottom: none;
        font-weight: bold;
        margin-right: 5px;
        padding: 0.2em;
        /* round the top corners - works only with FireFox */
        -moz-border-radius: .5em .5em 0em 0em;
        }
        </style>
        <xf:model id="image">
            <xf:instance xmlns="" id="image">
                <data/>                                
            </xf:instance>
        </xf:model>
        
    </head>
    <body>
        <h1>Deselection Events Demo</h1>
        <p>The deselection event will generate a message each time a new tab is selected.</p>
        <div id="tab-bar">
            <xf:trigger appearance="minimal">
                <xf:label>Image Tab</xf:label>
                <xf:toggle case="image-tab" ev:event="DOMActivate"/>
            </xf:trigger>
            <xf:trigger appearance="minimal">
                <xf:label>Metadata for Image Tab</xf:label>
                <xf:toggle case="metadata-tab" ev:event="DOMActivate"/>
            </xf:trigger>
            <xf:trigger appearance="minimal">
                <xf:label>Rights Tab</xf:label>
                <xf:toggle case="rights-tab" ev:event="DOMActivate"/>
            </xf:trigger>
        </div>

        <xf:switch>
            <xf:case id="image-tab">
                <xf:message level="modal" ev:event="xforms-deselect">Deselecting Image Tab</xf:message>
                <h1>Image Tab</h1>
                <xf:input>
                    <xf:label>Alt text:</xf:label>
                </xf:input>
                <xf:select1 appearance="minimal">
                    <xf:label>Image Type:</xf:label>
                    <xf:message level="modal" ev:event="xforms-deselect">select1 deselect</xf:message>
                    <xf:message level="modal" ev:event="DOMFocusOut">DOM Focus Out</xf:message>
                    <xf:item>
                        <xf:label>Photo</xf:label>
                        <xf:value>Photo</xf:value>
                    </xf:item>
                    <xf:item>
                        <xf:label>Logo</xf:label>
                        <xf:value>Logo</xf:value>
                    </xf:item>
                    <xf:item>
                        <xf:label>Other</xf:label>
                        <xf:value>Other</xf:value>
                    </xf:item>
                </xf:select1>
                <xf:input>
                    <xf:label>Caption</xf:label>
                </xf:input>
                <xf:textarea>
                    <xf:label>CMS description</xf:label>
                </xf:textarea>
            </xf:case>
            <xf:case id="metadata-tab">
                <xf:message level="modal" ev:event="xforms-deselect">Deselecting Metadata Tab</xf:message>
                <h1>Metadata Tab</h1>
            </xf:case>
            <xf:case id="rights-tab">
                <xf:message level="modal" ev:event="xforms-deselect">Deselecting Rights Tab</xf:message>
                <h1>Metadata Tab</h1>
                <xf:label>Rights details</xf:label>
                <xf:help>State the rights ownership of this feature.</xf:help>
                <xf:input>
                    <xf:label>Rights owner</xf:label>
                    <xf:help>
                        <p class="instructions">'BBC' is set as the default. Only set an owner if
                            there are particular requirements</p>
                    </xf:help>
                </xf:input>
                <xf:select1 appearance="minimal">
                    <xf:label>Rights status</xf:label>
                    <xf:item>
                        <xf:label>Free</xf:label>
                        <xf:value>free</xf:value>
                    </xf:item>
                    <xf:item>
                        <xf:label>Copyrighted</xf:label>
                        <xf:value>copyrighted</xf:value>
                    </xf:item>
                </xf:select1>
                <xf:textarea>
                    <xf:label>Rights notes:</xf:label>                   
                </xf:textarea>
            </xf:case>
        </xf:switch>
    </body>
</html>

Discussion[edit | edit source]

Next Page: Horizontal File Tab Menu Highlighted With Binding | Previous Page: Tree Menus
Home: XForms