Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <title>Test TimeTextBox Widget</title>

                <script type="text/javascript" src="../../../dojo/dojo.js"
                        djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
                <script type="text/javascript" src="../_testCommon.js"></script>

                <script type="text/javascript">
                        dojo.require("dijit.form.TextBox");
                        dojo.require("dijit.form.ValidationTextBox");
                        dojo.require("dijit.form.NumberTextBox");
                        dojo.require("dijit.form.CurrencyTextBox");
                        dojo.require("dijit.form.DateTextBox");
                        dojo.require("dijit.form.TimeTextBox");
                        dojo.require("dojo.currency");
                        dojo.require("dojo.date.locale");
                        dojo.require("dojo.parser");    // scan page for widgets and instantiate them
                </script>
                <style type="text/css">
                        @import "../../../dojo/resources/dojo.css";
                        @import "../css/dijitTests.css";

                        .testExample {
                                background-color:#fbfbfb;
                                padding:1em;
                                margin-bottom:1em;
                                border:1px solid #bfbfbf;
                        }

                        .small {
                                width: 3em;
                        }
                        .medium {
                                width: 10em;
                        }
                        .long {
                                width: 20em;
                        }
                        .verylong {
                                width: 700px;
                        }

                        .noticeMessage {
                                color:#093669;
                                font-size:0.95em;
                                margin-left:0.5em;
                        }

                        .dojoTitlePaneLabel label {
                                font-weight:bold;
                        }
                </style>
        </head>

        <body>
                <h1 class="testTitle">Test TimeTextBox Widget</h1>
                <!--    to test form submission, you'll need to create an action handler similar to
                        http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
                <form id="form1" action="" name="example" method="post">

        <div class="dojoTitlePaneLabel">
                <label for="q1">Time using local conventions with seconds</label>
                <span class="noticeMessage">TimeTextBox class,
                        Attributes: {formatLength:'medium'}</span>
        </div>
        <div class="testExample">
                <input id="q1" type="text" name="time1" class="medium" value="T17:45:00"
                        dojoType="dijit.form.TimeTextBox"
                        constraints="{formatLength:'medium'}"
                        required="true"
                        onChange="dojo.byId('oc1').value=arguments[0]"
                        invalidMessage="Invalid time." />
                onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
        </div>

        <div class="dojoTitlePaneLabel">
                <label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label>
                <span class="noticeMessage">TimeTextBox class,
                        Attributes: {formatLength:'short'}</span>
        </div>
        <div class="testExample">
                <input id="q2" type="text" name="time1a" class="medium" value="T17:45:00"
                        dojoType="dijit.form.TimeTextBox"
                        constraints="{formatLength:'short'}"
                        required="true"
                        invalidMessage="" />
        </div>

        <div class="dojoTitlePaneLabel">
                <label for="q3"> 12 Hour Time </label>
                <span class="noticeMessage">TimeTextBox class,
                        Attributes: {timePattern:'h:mm:ss a'}</span>
        </div>
        <div class="testExample">
                <input id="q3" type="text" name="time1b" class="medium" value="T17:45:00"
                        dojoType="dijit.form.TimeTextBox"
                        constraints="{timePattern:'h:mm:ss a'}"
                        required="true"
                        invalidMessage="Invalid time." />
        </div>

        <div class="dojoTitlePaneLabel">
                <label for="q4"> 24 Hour Time</label>
                <span class="noticeMessage">TimeTextBox class,
                        Attributes: {timePattern:'HH:mm:ss'}</span>
        </div>
        <div class="testExample">
                <input id="q4" type="text" name="time2" class="medium" value="T17:45:00"
                        dojoType="dijit.form.TimeTextBox"
                        constraints="{timePattern:'HH:mm:ss'}"
                        required="true"
                        invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
        </div>

        <script>
                function displayData() {
                        var f = document.getElementById("form1");
                        var s = "";
                        for (var i = 0; i < f.elements.length; i++) {
                                var elem = f.elements[i];
                                if (elem.name == "button")  { continue; }
                                s += elem.name + ": " + elem.value + "\n";
                        }
                        alert(s);
                }
        </script>

                <div>
                        <button name="button" onclick="displayData(); return false;">view data</button>
                        <input type="submit" name="submit" />
                </div>

                </form>
        </body>
</html>