diff options
Diffstat (limited to 'includes/js/dijit/tests/form')
17 files changed, 2839 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/form/Form.html b/includes/js/dijit/tests/form/Form.html new file mode 100644 index 0000000..312399a --- /dev/null +++ b/includes/js/dijit/tests/form/Form.html @@ -0,0 +1,354 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+
+ <title>Form unit test</title>
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../css/dijitTests.css";
+ </style>
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true, parseOnLoad: true"></script>
+ <script type="text/javascript" src="../_testCommon.js"></script>
+
+ <script type="text/javascript">
+ dojo.require("doh.runner");
+ dojo.require("dojo.date");
+ dojo.require("dijit.form.Form");
+ dojo.require("dijit.layout.LayoutContainer");
+ dojo.require("dijit.layout.ContentPane");
+ dojo.require("dijit.form.ComboBox");
+ dojo.require("dijit.form.CheckBox");
+ dojo.require("dijit.form.DateTextBox");
+ dojo.require("dijit.form.Button");
+ dojo.require("dijit.form.MultiSelect");
+ dojo.require("dijit.form.Textarea");
+ dojo.require("dijit.form.SimpleTextarea");
+ dojo.require("dijit.Editor");
+
+ var obj;
+ function getValues(){
+ obj = dijit.byId('myForm').getValues();
+ console.log("Object is: " + dojo.toJson(obj, true));
+ }
+
+ function setValues(){
+ if(!obj){
+ obj = {testF: 'testi'};
+ }
+ console.log("Object is: " + dojo.toJson(obj, true));
+ dijit.byId('myForm').setValues(obj);
+ }
+
+ // make dojo.toJson() print dates correctly (this feels a bit dirty)
+ Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
+
+ var d = dojo.date.stamp.fromISOString;
+
+ // These are the values assigned to the widgets in the page's HTML
+ var original = {
+ foo: {bar: {baz: {quux: d("2007-12-30")} } },
+ available: {from: d("2005-01-02"), to: d("2006-01-02")},
+ plop: {combo: "one"},
+ cb2: ["2", "3"],
+ r2: "2",
+ ms1: ["VA", "WA"],
+ h1: "hidden",
+ t1: "line 1\nline 2",
+ st1: "simple line 1\nsimple line 2",
+ richtext: "<h1>original</h1><p>This is the default content</p>",
+ filename: ""
+ };
+
+ // we change the form to these values
+ var changed = {
+ foo: {bar: {baz: {quux: d("2005-01-01")} } },
+ available: {from: d("2005-11-02"), to: d("2006-11-02")},
+ plop: {combo: "three"},
+ cb2: ["4"],
+ r2: "1",
+ ms1: ["FL", "CA"],
+ h1: "still hidden",
+ t1: "new line 1\nnew line 2",
+ st1: "new simple line 1\nnew simple line 2",
+ richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>",
+ filename: ""
+ };
+ // we reset the form to these values
+ var reset = {
+ foo: {bar: {baz: {quux: d("2007-12-30")} } },
+ available: {from: d("2005-01-02"), to: d("2006-01-02")},
+ plop: {combo: "one"},
+ cb2: ["2", "3"],
+ r2: "2",
+ ms1: ["VA", "WA"],
+ h1: "hidden",
+ t1: "line 1\nline 2",
+ st1: "simple line 1\nsimple line 2",
+ richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>", // not a form element, so not reset
+ filename: ""
+ };
+
+ dojo.addOnLoad(function(){
+ doh.register("dijit.form.Form",
+ [
+ function getValues(){
+ var values = dijit.byId("myForm").getValues();
+
+ // FF3 sticks in some tabs and newlines that mess up the equality check
+ // Need better way to compare two HTML trees but for now do this.
+ values.richtext = values.richtext.replace(/[\n\t]/, "", "g");
+
+ doh.is( dojo.toJson(original), dojo.toJson(values) );
+ },
+ function setValues(){
+ dijit.byId("myForm").setValues(changed);
+ doh.is( dojo.toJson(changed), dojo.toJson(dijit.byId("myForm").getValues()) );
+ },
+ function nameAttributeSurvived(){ // ticket:4753
+ var radios = dojo.query(".RadioButton", dijit.byId("radio-cells")).forEach(
+ function(r) {
+ doh.is( r.inputNode.name, "r2" );
+ });
+
+ },
+ function resetTest(){
+ dijit.byId("myForm").reset();
+ doh.is( dojo.toJson(reset), dojo.toJson(dijit.byId("myForm").getValues()) );
+ }
+ ]
+ );
+ doh.run();
+ });
+
+ </script>
+</head>
+<body>
+ <h1>Form Widget Unit Test</h1>
+ <p>
+ The form widget takes data in a form and serializes/deserializes it, so
+ it can be submitted as a JSON string of nested objects.
+ </p>
+ <div style="color:red">Currently only widgets are supported, not raw elements.</div>
+ <!-- to test form submission, you'll need to create an action handler similar to
+ http://www.utexas.edu/teamweb/cgi-bin/generic.cgi
+ http://www.tipjar.com/cgi-bin/test -->
+ <form dojoType="dijit.form.Form" id="myForm"
+ encType="multipart/form-data" action="" method="">
+ <script type="dojo/method" event="onReset">
+ return confirm('Press OK to reset widget values');
+ </script>
+ <script type="dojo/method" event="onSubmit">
+ console.debug('Attempting to submit form w/values:\n',
+ dojo.toJson(this.getValues(),true)
+ );
+ if(this.validate()){
+ return confirm('Form is valid, press OK to submit');
+ }else{
+ alert('Form contains invalid data. Please correct first');
+ return false;
+ }
+ return true;
+ </script>
+ <script type="dojo/method" event="onReset">
+ return confirm('reset Form?');
+ </script>
+ <p>Just HTML text</p>
+ <table style="border: 1px solid #9f9f9f;" cellspacing="10">
+ <thead>
+ <tr>
+ <th>Description</th>
+ <th>Name</th>
+ <th>Form node/widget</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ <tr><td>text</td><td>testF</td><td><input type="text" name="testF" value="bar1" /></td></tr>
+ <tr><td>password</td><td>passwordF</td><td><input type="password" name="passwordF" value="bar4" /></td></tr>
+ <tr><td>hidden</td><td>hiddenF</td><td><input type="hidden" name="hiddenF" value="bar4" /></td></tr>
+ <tr><td>select</td><td>plop.noncombo</td><td>
+ <div class="group">
+ <select name="plop.noncombo">
+ <option value="1">one</option>
+ <option value="2">two</option>
+ <option value="3">three</option>
+ </select>
+ </div>
+
+ </td></tr>
+ -->
+
+ <tr>
+ <td>DateTextBox inside contentpane</td>
+ <td>foo.bar.baz.quux</td>
+ <td>
+ <div dojoType="dijit.layout.ContentPane">
+ <input type="text" name="foo.bar.baz.quux" dojoType="dijit.form.DateTextBox" value="2007-12-30" />
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Layoutcontainer</td>
+ <td>
+ <div dojoType="dijit.layout.LayoutContainer"></div>
+ </td>
+ </tr>
+ <tr>
+ <td>DateTextBox 1</td>
+ <td>available.from</td>
+ <td>
+ <input type="text" name="available.from" dojoType="dijit.form.DateTextBox" value="2005-01-02" />
+ </td>
+ </tr>
+ <tr>
+ <td>DateTextBox 2</td>
+ <td>available.to</td>
+ <td>
+ <input type="text" name="available.to" dojoType="dijit.form.DateTextBox" value="2006-01-02" />
+ </td>
+ </tr>
+ <tr>
+ <td>ComboBox</td>
+ <td>plop.combo</td>
+ <td>
+ <select name="plop.combo" dojoType="dijit.form.ComboBox">
+ <option value="one">one</option>
+ <option value="two">two</option>
+ <option value="three">three</option>
+ </select>
+ </td>
+ </tr>
+
+ <!--
+ <tr>
+ <td>textarea</td>
+ <td>myTextArea</td>
+ <td>
+ <textarea name="myTextArea">
+ text text text """ \\\/
+ </textarea>
+ </td>
+ </tr>
+ -->
+
+ <!--
+ <tr>
+ <td>CheckBox</td>
+ <td>cb1</td>
+ <td>
+ <input type="checkbox" name="cb1" value="1" /> 1
+ <input type="checkbox" name="cb1" value="2" checked="checked" /> 2
+ <input type="checkbox" name="cb1" value="3" checked="checked" /> 3
+ <input type="checkbox" name="cb1" value="4" /> 4
+ </td>
+ </tr>
+ -->
+
+ <tr>
+ <td>CheckBox widget</td>
+ <td>cb2</td>
+ <td>
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="1" /> 1
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="2" checked="checked" /> 2
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="3" checked="checked" /> 3
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="4" /> 4
+ </td>
+ </tr>
+
+ <!--
+ <tr>
+ <td>radio</td>
+ <td>r1</td>
+ <td>
+ <input type="radio" name="r1" value="1" /> 1
+ <input type="radio" name="r1" value="2" /> 2
+ <input type="radio" name="r1" value="3" /> 3
+ <input type="radio" name="r1" value="4" /> 4
+ </td>
+ </tr>
+ -->
+
+ <tr>
+ <td>Radio widget</td><td>r2</td>
+ <td id="radio-cells">
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="1" /> 1
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="2" checked="checked" /> 2
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="3"/> 3
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="4" /> 4
+ </td>
+ </tr>
+
+ <tr>
+ <td>Multi-select</td><td>ms1</td>
+ <td>
+ <select id="ms1" multiple="true" name="ms1"
+ dojoType="dijit.form.MultiSelect"
+ style="height:100px; width:175px; border:5px solid #ededed;">
+
+ <option value="TN">Tennessee</option>
+ <option value="VA" selected="true">Virginia</option>
+ <option value="WA" selected="true">Washington</option>
+ <option value="FL">Florida</option>
+ <option value="CA">California</option>
+
+ </select>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Hidden input</td>
+ <td>h1</td>
+ <td>
+ <input id="h1" name="h1" dojoType="dijit.form.TextBox" type="hidden" value="hidden">
+ </td>
+ </tr>
+
+ <tr>
+ <td>Auto-sizing textarea</td>
+ <td>t1</td>
+ <td>
+ <textarea id="t1" name="t1"
+ dojoType="dijit.form.Textarea">line 1
+line 2</textarea>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Fixed size textarea</td>
+ <td>st1</td>
+ <td>
+ <textarea id="st1" name="st1" dojoType="dijit.form.SimpleTextarea" rows=5 cols=50>
+simple line 1
+simple line 2</textarea>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Editor widget</td>
+ <td>richtext</td>
+ <td>
+ <textarea dojoType="dijit.Editor" name="richtext" pluginsConfig="[{items:['bold','italic']}]"><h1>original</h1><p>This is the default content</p></textarea>
+ </td>
+ </tr>
+
+ <tr>
+ <td>File upload</td>
+ <td>filename</td>
+ <td>
+ <input dojoType="dijit.form.TextBox" name="filename" type="file">
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <button dojoType=dijit.form.Button onClick="getValues();">Get Values from form!</button>
+ <button dojoType=dijit.form.Button onClick="setValues();">Set Values to form!</button>
+ <button dojoType=dijit.form.Button type="submit">Submit</button>
+ <button dojoType=dijit.form.Button type="reset">Reset</button>
+ </form>
+
+
+</body>
+</html>
diff --git a/includes/js/dijit/tests/form/Form.js b/includes/js/dijit/tests/form/Form.js new file mode 100644 index 0000000..f0f6d8d --- /dev/null +++ b/includes/js/dijit/tests/form/Form.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.form.Form"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.form.Form"] = true; +dojo.provide("dijit.tests.form.Form"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.form.Form", dojo.moduleUrl("dijit", "tests/form/Form.html")); +} + +} diff --git a/includes/js/dijit/tests/form/images/Alabama.jpg b/includes/js/dijit/tests/form/images/Alabama.jpg Binary files differnew file mode 100644 index 0000000..f2018e6 --- /dev/null +++ b/includes/js/dijit/tests/form/images/Alabama.jpg diff --git a/includes/js/dijit/tests/form/test_Button.html b/includes/js/dijit/tests/form/test_Button.html new file mode 100644 index 0000000..7c04f50 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Button.html @@ -0,0 +1,286 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <title>Dojo Button Widget Test</title>
+
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../css/dijitTests.css";
+
+ /* group multiple buttons in a row */
+ .box {
+ display: block;
+ text-align: center;
+ }
+ .box .dijit {
+ margin-right: 10px;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true, parseOnLoad: true"></script>
+ <script type="text/javascript" src="../_testCommon.js"></script>
+
+ <script type="text/javascript">
+ dojo.require("dijit.ColorPalette");
+ dojo.require("dijit.Menu");
+ dojo.require("dijit.Tooltip");
+ dojo.require("dijit.form.Button");
+ dojo.require("dojo.parser");
+ </script>
+ </head>
+<body>
+ <h1 class="testTitle">Dijit Button Test</h1>
+ <h2>Simple, drop down & combo buttons</h2>
+ <p>
+ Buttons can do an action, display a menu, or both:
+ </p>
+ <div class="box">
+ <button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple")' iconClass="plusIcon">
+ Create
+ </button>
+ <span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>
+ <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
+ <span>Edit<b>!</b></span>
+ <div dojoType="dijit.Menu">
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
+ onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
+ onClick="console.log('not actually copying anything, just a test!')">Copy</div>
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
+ onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
+ <div dojoType="dijit.MenuSeparator"></div>
+ <div dojoType="dijit.PopupMenuItem">
+ <span>Submenu</span>
+ <div dojoType="dijit.Menu" id="submenu2">
+ <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 1!')">Submenu Item One</div>
+ <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 2!')">Submenu Item Two</div>
+ <div dojoType="dijit.PopupMenuItem">
+ <span>Deeper Submenu</span>
+ <div dojoType="dijit.Menu" id="submenu4">
+ <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 1!')">Sub-sub-menu Item One</div>
+ <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
+ <span>Color</span>
+ <div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"
+ onChange="console.log(this.value);"></div>
+ </div>
+ <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'
+ iconClass="plusBlockIcon">
+ <span>Save</span>
+ <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
+ onClick="console.log('not actually saving anything, just a test!')">Save</div>
+ <div dojoType="dijit.MenuItem"
+ onClick="console.log('not actually saving anything, just a test!')">Save As</div>
+ </div>
+ </div>
+ <button dojoType="dijit.form.Button" onClick='console.log("clicked simple")' disabled='true' iconClass="plusIcon">
+ Disabled
+ </button>
+ </div>
+ <br clear=both>
+ <h2>Buttons with no text label</h2>
+ <p>Buttons have showLabel=false so text is not displayed. Should have title attribute displayed on mouse over</p>
+ <div class="box">
+ <button id="1466" dojoType="dijit.form.Button" onClick='console.log("clicked simple button with no text label")'
+ iconClass="plusIcon" showLabel="false">
+ <span><b>Rich</b><i> Text</i> Test!</span>
+ </button>
+ <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon" showLabel="false">
+ <span>Color</span>
+ <div dojoType="dijit.ColorPalette" id="colorPalette2" style="display: none" palette="3x4"
+ onChange="console.log(this.value);">
+ </div>
+ </div>
+ <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'
+ iconClass="plusBlockIcon" showLabel="false">
+ <span>Save</span>
+ <div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
+ onClick="console.log('not actually saving anything, just a test!')">Save</div>
+ <div dojoType="dijit.MenuItem"
+ onClick="console.log('not actually saving anything, just a test!')">Save As</div>
+ </div>
+ </div>
+ </div>
+ <br clear=both>
+ <h2>Toggle buttons</h2>
+ <p>The button CSS as well as the icon CSS can change on toggle </p>
+ <div class="box">
+ <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
+ Toggle me
+ </button>
+ <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitRadioIcon">
+ Toggle me
+ </button>
+ </div>
+ <br clear=both>
+ <h2>Sizing</h2>
+ <p>Short button, tall buttons, big buttons, small buttons...
+ These buttons size to their content (just like <button>).</p>
+ <div class="box">
+ <button dojoType="dijit.form.Button" onclick='console.log("big");' iconClass="flatScreenIcon">
+ <span style="font-size:xx-large">big</span>
+ </button>
+ <button id="smallButton1" dojoType="dijit.form.Button" onclick='console.log("small");'>
+ <img src="../images/arrowSmall.gif" width="15" height="5">
+ <span style="font-size:x-small">small</span>
+ </button>
+ <button dojoType="dijit.form.Button" onclick='console.log("long");'>
+ <img src="../images/tube.gif" width="150" height="16">
+ long
+ </button>
+ <button dojoType="dijit.form.Button" onclick='console.log("tall");' width2height="0.1">
+ <img src="../images/tubeTall.gif" height="75" width="35"><br>
+ <span style="font-size:medium">tall</span>
+ </button>
+ <div style="clear: both;"></div>
+ </div>
+ <br clear=both>
+ <h2>Customized buttons</h2>
+ <p>Dojo users can customize styles. Here's an example:</p>
+ <style>
+ .acmeButton .dijitButtonNode {
+ background: rgb(96,96,96) !important;
+ color: white !important;
+ padding: 10px !important;
+ font-size: x-large !important;
+ padding-top: 10px !important;
+ padding-bottom: 10px !important;
+ border: 2px inset rgb(96,96,96);
+ }
+ .acmeButtonHover .dijitButtonNode {
+ background-color: rgb(89,94,111) !important;
+ color: cyan !important;
+ }
+ .acmeButtonFocused .dijitButtonNode {
+ border: yellow inset 2px;
+ }
+ .acmeButtonActive .dijitButtonNode {
+ background-color: white !important;
+ color: black !important;
+ border: 2px solid black !important;
+ }
+ </style>
+ <div class="box">
+ <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("short");'>
+ short
+ </button>
+ <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer");'>
+ bit longer
+ </button>
+ <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer yet");'>
+ ridiculously long
+ </button>
+ <div style="clear: both;"></div>
+ </div>
+ <h2>Toggling the display test</h2>
+ <p>
+ (Ticket <a href="http://trac.dojotoolkit.org/ticket/403">#403</a>)
+ </p>
+ <div class="box">
+ <button dojoType="dijit.form.Button" onclick='dojo.byId("hiddenNode").style.display="inline";'>
+ Show Hidden Buttons
+ </button>
+ </div>
+ <div class="box" style="display:none;" id="hiddenNode">
+ <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
+ Create
+ </button>
+ <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
+ Create
+ </button>
+ </div>
+ <div style="clear: both;"></div>
+ <h2>Programatically changing buttons</h2>
+ <p>clicking the buttons below will change the buttons above</p>
+ <script type="text/javascript">
+ // FIXME: doesn't the manager have a function for filtering by type?
+ function forEachButton(func){
+ dijit.registry.filter(function(widget){ return widget instanceof dijit.form.Button; }).forEach(func);
+ }
+ var disabled=false;
+ function toggleDisabled(){
+ disabled=!disabled;
+ forEachButton(function(widget){ widget.setAttribute('disabled',disabled); });
+ dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all";
+ }
+ var labels=["<img src='../images/note.gif' width='20' height='20'>All", "<i>work</i>", "and no", "<h1>play</h1>",
+ "<span style='color: red'>makes</span>", "Jack", "<h3>a</h3>", "dull",
+ "<img src='../images/plus.gif' width='16' height='16'>boy"];
+ var idx=0;
+ function changeLabels(){
+ forEachButton(function(widget){
+ widget.setLabel( labels[idx++ % labels.length]);
+ });
+ }
+ </script>
+ <div>
+ <button id="toggle" onclick='toggleDisabled()'>Disable all</button>
+ <button onclick='changeLabels()'>Change labels</button>
+ <button onclick='location.reload()'>Revert</button>
+ </div>
+ <h3>Button instantiated via javacript:</h3>
+ <div id="buttonContainer"></div>
+ <script type="text/javascript">
+ // See if we can make a button in script and attach it to the DOM ourselves.
+ dojo.addOnLoad(function(){
+ var params = {
+ label: "hello!",
+ name: "programmatic"
+ };
+ var widget = new dijit.form.Button(params, document.getElementById("buttonContainer"));
+ });
+ </script>
+ <h3>DropDownButton instantiated via javacript:</h3>
+ <div id="dropdownButtonContainer"></div>
+ <script type="text/javascript">
+ // See if we can make a drop down button in script and attach it to the DOM ourselves.
+ function createButton(){
+ var menu = new dijit.Menu({ });
+ menu.domNode.style.display="none";
+ var menuItem1 = new dijit.MenuItem({
+ label: "Save",
+ iconClass:"dijitEditorIcon dijitEditorIconSave",
+ onClick: function(){ alert('save'); }
+ });
+ menu.addChild(menuItem1);
+
+ var menuItem2 = new dijit.MenuItem({
+ label: "Cut",
+ iconClass:"dijitEditorIcon dijitEditorIconCut",
+ onClick: function(){ alert('cut'); }
+ });
+ menu.addChild(menuItem2);
+
+ var params = {
+ label: "hello!",
+ name: "programmatic2",
+ dropDown: menu,
+ id: "progButton"
+ };
+ var widget = new dijit.form.DropDownButton(params);
+ dojo.byId("dropdownButtonContainer").appendChild(widget.domNode);
+ dojo.byId("createButton").disabled = true;
+ dojo.byId("destroyButton").disabled = false;
+ }
+ function destroyButton(){
+ var button = dijit.byId("progButton");
+ button.destroyRecursive();
+ dojo.byId("createButton").disabled = false;
+ dojo.byId("destroyButton").disabled = true;
+ }
+ </script>
+ <button id="createButton" onclick="createButton();">create dropdown button</button>
+ <button id="destroyButton" onclick="destroyButton();">destroy dropdown button</button>
+
+</body>
+</html>
diff --git a/includes/js/dijit/tests/form/test_CheckBox.html b/includes/js/dijit/tests/form/test_CheckBox.html new file mode 100644 index 0000000..4358270 --- /dev/null +++ b/includes/js/dijit/tests/form/test_CheckBox.html @@ -0,0 +1,127 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>CheckBox Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + label { margin-right: 0.80em; } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.CheckBox"); + dojo.require("dojo.parser"); // find widgets + + function outputValues(form){ + var str = ""; + for(var i=0;i<form.elements.length;i++){ + var e = form.elements[i]; + if(e.type=="submit") break; + if(e.checked){ + str += "submit: name="+e.name+" id="+e.id+" value="+e.value+ "<br>"; + } + } + dojo.byId("result").innerHTML = str; + return false; + } + + function reportChecked(checked) { + dojo.byId("oncheckedoutput").innerHTML = checked; + } + + function reportValueChanged(value) { + dojo.byId("onvaluechangedoutput").innerHTML = value; + } + + dojo.addOnLoad(function(){ + var params = {id: "cb6", name: "cb6"}; + var widget = new dijit.form.CheckBox(params, dojo.byId("checkboxContainer")); + widget.setAttribute('checked', true); + }); + </script> +</head> +<body> + <h1 class="testTitle">Dijit CheckBox Test</h1> + <p> + Here are some checkboxes. Try clicking, and hovering, tabbing, and using the space bar to select: + </p> + <!-- <form onSubmit="return outputValues(this);"> --> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form> + <input type="checkbox" name="cb0" id="cb0" /> + <label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label> + <br> + <input type="checkbox" name="cb1" id="cb1" value="foo" dojoType="dijit.form.CheckBox" onClick="console.log('clicked cb1')"> + <label for="cb1">cb1: normal checkbox, with value=foo, clicking generates console log messages</label> + <br> + <input onChange="reportChecked" type="checkbox" name="cb2" id="cb2" dojoType="dijit.form.CheckBox" checked="checked"/> + <label for="cb2">cb2: normal checkbox, initially turned on.</label> + <span>"onChange" handler updates: [<span id="oncheckedoutput"></span>]</span> + <br> + <input type="checkbox" name="cb3" id="cb3" dojoType="dijit.form.CheckBox" disabled="disabled"> + <label for="cb3">cb3: disabled checkbox</label> + <br> + <input type="checkbox" name="cb4" id="cb4" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"/> + <label for="cb4">cb4: disabled checkbox, turned on</label> + <br> + <input type="checkbox" name="cb5" id="cb5" /> + <label for="cb5">cb5: Vanilla (non-dojo) checkbox (for comparison purposes)</label> + <br> + <div id="checkboxContainer"></div> + <label for="cb6">cb6: instantiated from script</label> + <br> + <input onChange="reportValueChanged" type="checkbox" name="cb7" id="cb7" dojoType="dijit.form.CheckBox"> + <label for="cb7">cb7: normal checkbox.</label> + <input type="button" onclick='dijit.byId("cb7").setAttribute("disabled",true);' value="disable" /> + <input type="button" onclick='dijit.byId("cb7").setAttribute("disabled",false);' value="enable" /> + <input type="button" onclick='dijit.byId("cb7").setValue("fish");' value='set value to "fish"' /> + <input type="button" onclick='dijit.byId("cb7").reset();' value='Reset value+checked' /> + <span>"onChange" handler updates: [<span id="onvaluechangedoutput"></span>]</span> + <br> + <p> + Here are some radio buttons. Try clicking, and hovering, tabbing, and arrowing + </p> + <p> + <span>Radio group #1:</span> + <input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton"> + <label for="g1rb1">news</label> + <input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/> + <label for="g1rb2">talk</label> + <input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/> + <label for="g1rb3">weather</label> + </p> + <p> + <span>Radio group #2: (no default value, and has breaks)</span><br> + <input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton"/> + <label for="g2rb1">top 40</label><br> + <input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton"/> + <label for="g2rb2">oldies</label><br> + <input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton"/> + <label for="g2rb3">country</label><br> + (Note if using keyboard: tab to navigate, and use arrow or space to select) + </p> + <p> + <span>Radio group #3 (native radio buttons):</span> + <input type="radio" name="g3" id="g3rb1" value="rock"/> + <label for="g3rb1">rock</label> + <input type="radio" name="g3" id="g3rb2" value="jazz" disabled="disabled"/> + <label for="g3rb2">jazz</label> + <input type="radio" name="g3" id="g3rb3" value="classical" checked="checked"/> + <label for="g3rb3">classical</label> + </p> + <input type="submit" /> + </form> + + <!-- <p>Submitted data:</p> + <div id="result"></div> + --> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_ComboBox.html b/includes/js/dijit/tests/form/test_ComboBox.html new file mode 100644 index 0000000..895a968 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox.html @@ -0,0 +1,289 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo ComboBox Widget Test</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dj_ie INPUT#setvaluetest { font-family: Courier; } /* help IE with font inheritance + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function setVal1(val){ + dojo.byId('value1').value=val; + } + function setVal2(val){ + dojo.byId('value2').value=val; + console.debug("Value changed to ["+val+"] in second ComboBox (#1652)"); + } + function setVal3(val){ + dojo.byId('value3').value=val; + } + function setVal4(val){ + dojo.byId('value4').value=val; + } + var combo; + function init(){ + var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'}); + combo = new dijit.form.ComboBox({ + name:"prog", + autoComplete:false, + store: store, + searchAttr:"name" + }, dojo.byId("progCombo")); + + var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'}); + combo = new dijit.form.ComboBox({ + name:"prog2", + autoComplete:false, + store:store2, + query:{type:'country'}, + searchAttr:"name" + }, dojo.byId("progCombo2")); + } + dojo.addOnLoad(init); + + function toggleDisabled(button, widget){ + widget = dijit.byId(widget); + button = dojo.byId(button); + widget.setAttribute('disabled',!widget.disabled); + button.innerHTML= widget.disabled ? "Enable" : "Disable"; + } + </script> +</head> + +<body> +<h1>Dojo ComboBox Widget Test</h1> +<p> +A ComboBox is like a text <input> field (ie, you can input any value you want), +but it also has a list of suggested values that you can choose from. +The drop down list is filtered by the data you have already typed in. +</p> +<form action="#" method="GET"> + + <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p> + <label for="setvaluetest">US State test 1</label> (200% Courier font): + <select id="setvaluetest" + name="state1" + dojoType="dijit.form.ComboBox" + class="medium" + style="width:50%;font-size:200%;font-family:Courier;" + name="foo.bar1" + autoComplete="false" + onChange="dojo.byId('oc1').value=arguments[0]" + pageSize="30" + > + <option></option> + <option>Alabama</option> + <option>Alaska</option> + <option>American Samoa</option> + <option>Arizona</option> + <option>Arkansas</option> + <option>Armed Forces Europe</option> + <option>Armed Forces Pacific</option> + <option>Armed Forces the Americas</option> + <option>California</option> + <option>Colorado</option> + <option>Connecticut</option> + <option>Delaware</option> + <option>District of Columbia</option> + <option>Federated States of Micronesia</option> + <option>Florida</option> + <option>Georgia</option> + <option>Guam</option> + <option>Hawaii</option> + <option>Idaho</option> + <option>Illinois</option> + <option>Indiana</option> + <option selected>Iowa</option> + <option>Kansas</option> + <option>Kentucky</option> + <option>Louisiana</option> + <option>Maine</option> + <option>Marshall Islands</option> + <option>Maryland</option> + <option>Massachusetts</option> + <option>Michigan</option> + <option>Minnesota</option> + <option>Mississippi</option> + <option>Missouri</option> + <option>Montana</option> + <option>Nebraska</option> + <option>Nevada</option> + <option>New Hampshire</option> + <option>New Jersey</option> + <option>New Mexico</option> + <option>New York</option> + <option>North Carolina</option> + <option>North Dakota</option> + <option>Northern Mariana Islands</option> + <option>Ohio</option> + <option>Oklahoma</option> + <option>Oregon</option> + <option>Pennsylvania</option> + <option>Puerto Rico</option> + <option>Rhode Island</option> + <option>South Carolina</option> + <option>South Dakota</option> + <option>Tennessee</option> + <option>Texas</option> + <option>Utah</option> + <option>Vermont</option> + <option>Virgin Islands, U.S.</option> + <option>Virginia</option> + <option>Washington</option> + <option>West Virginia</option> + <option>Wisconsin</option> + <option>Wyoming</option> + </select> + <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')"> + <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')"> + + <hr> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="../_data/states.json"></div> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore" + url="../_data/dijits.json"></div> + + <p>ComboBox #2: url, autoComplete=true:</p> + <label for="datatest">US State test 2</label> (8pt font): + <input dojoType="dijit.form.ComboBox" + value="California" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 200px; font-size: 8pt;" + name="state2" + onChange="setVal2" + id="datatest" + > + <span>Value: <input id="value2" disabled value="California"></span> + <hr> + <label for="datatestDijit">Dijit List test #1</label> (150% font): + <input dojoType="dijit.form.ComboBox" + value="dijit.Editor" + class="medium" + store="dijitStore" + searchAttr="className" + style="width: 200px; font-size: 150%;" + name="dijitList1" + id="datatestDijit" + > + <span>Hey look, this one is kind of useful.</span> + <hr> + + <p>ComboBox #3: initially disabled, url, autoComplete=false:</p> + <label for="combo3">US State test 3: </label> + <input id="combo3" + dojoType="dijit.form.ComboBox" + value="California" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 300px;" + name="state3" + autoComplete="false" + onChange="setVal3" + disabled + > + <span>Value: <input id="value3" disabled></span> + <div> + <button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button> + </div> + <hr> + <p>ComboBox #4: url, autoComplete=false required=true:</p> + <label for="combobox4">US State test 4: </label> + <input dojoType="dijit.form.ComboBox" + value="" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 300px;" + name="state4" + onChange="setVal4" + autoComplete="false" + id="combobox4" + required="true" + > + <span>Value: <input id="value4" disabled></span> + <hr> + <p>A ComboBox with no arrow</p> + <input dojoType="dijit.form.ComboBox" + value="California" + store="stateStore" + searchAttr="name" + name="state5" + autoComplete="false" + hasDownArrow="false" + > + <hr> + <p>A combo created by createWidget</p> + <input id="progCombo"> + <hr> + <p>A ComboBox with an initial query. (Limits list to items with type = country.)</p> + <input id="progCombo2"> + <hr> + <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> + <input type="submit"> + +</form> +<p> +This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. +also: adding a simple combo box to test IE bleed through problem: +</p> + +<select> + <option>test for</option> + <option>IE bleed through</option> + <option>problem</option> +</select> +<h3>Some tests:</h3> +<ol> +<li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li> +<li>Type in DX - input box shows DX and no dropdown.</li> +<li>Open dropdown, click an item, it selects and closes dropdown.</li> +<li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li> +<li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li> +<li>Tab into the combo works, list should not apear.</li> +<li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li> +<li>Do the dropdown and click outside of it - the dropdown disappears.</li> +<li>Javascript disabled -> fallback to old style combo?</li> +<li>Can you paste in the start of a match? [no]</li> +<li>Backspace to start - dropdown shows all all items</li> +<li>Backspace deselects last character [Borked: currently you have to backspace twice]</li> +<li>Press down key to open dropdown</li> +<li>Down and up keys select previous/next in dropdown.</li> +<li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li> +<li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li> +<li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li> +<li>Check that pressing escape undoes the previous action and closes the dropdown</li> +<li>Check that pressing escape again clears the input box.</li> +<li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li> +<li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li> +<li>Check dropdown is aligned correctly with bottom of the text input</li> +<li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li> +<li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li> +<li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li> +<li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li> +<li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li> +<li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li> +<li>(Add any other tests here)</li> +</ol> +<div id="debugbox"></div> +<!-- maintain state of combo box if user presses back/forward button --> +<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_ComboBox_destroy.html b/includes/js/dijit/tests/form/test_ComboBox_destroy.html new file mode 100644 index 0000000..0713b19 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox_destroy.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo ComboBox Widget Destruction Issue</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.ComboBox"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + dojo.addOnLoad(function(){ + dojo.connect(dojo.byId("killit"), "onclick", function(){ + dijit.byId("combo_01").destroy(true); + }); + }); + </script> + </head> + <body> + <h1>Dojo ComboBox Widget Destruction Issue</h1> + <p> + <tt>ComboBox</tt> does not destroy itself properly, leading to a + JavaScript error. Could it have something to do with not disconnecting + events? + </p> + <p></p> + Steps: + <ol> + <li>Pick a state from the combo box below.</li> + <li>Click the "killit" button, which calls <tt>destroy</tt> on the widget.</li> + <li>Observe the JavaScript error.</li> + </ol> + <p></p> + <form action="#" method="GET"> + <input type="button" id="killit" name="killit" value="killit" /> + <select name="state" searchField="name" keyField="abbreviation" + id="combo_01" dojoType="dijit.form.ComboBox" style="width: 300px;" + name="foo.bar1" autoComplete="false"> + <option value="AL">Alabama</option> + + <option value="AK">Alaska</option> + <option value="AS">American Samoa</option> + <option value="AZ">Arizona</option> + <option value="AR">Arkansas</option> + <option value="AE">Armed Forces Europe</option> + <option value="AP">Armed Forces Pacific</option> + </select> + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_DateTextBox.html b/includes/js/dijit/tests/form/test_DateTextBox.html new file mode 100644 index 0000000..d36ac73 --- /dev/null +++ b/includes/js/dijit/tests/form/test_DateTextBox.html @@ -0,0 +1,156 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Test DateTextBox Widget</title> + + <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; + } + + body .medium { + width: 10em; + } + + .noticeMessage { + color:#093669; + font-size:0.95em; + margin-left:0.5em; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + </style> + + <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.DateTextBox"); + dojo.require("dijit.form.Form"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + </head> + + <body> + <h1 class="testTitle">Test DateTextBox 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" dojoType='dijit.form.Form' action="" name="example" method=""> + <div class="dojoTitlePaneLabel"> + <label for="q1"> Date (local format) </label> + <span class="noticeMessage">DateTextBox class, no attributes</span> + </div> + <div class="testExample"> + <input id="q1" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox" + onChange="dojo.byId('oc1').value=arguments[0]" + > + onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q2"> Date (local format - long) </label> + <span class="noticeMessage">DateTextBox class, + Attributes: required="true", trim="true", constraints={min:'2004-01-01',max:'2006-12-31',formatLength:'long'}. Works for leap years</span> + </div> + <div class="testExample"> + <input id="q2" type="text" name="date1" class="medium" value="2005-12-30" + dojoType="dijit.form.DateTextBox" + constraints="{min:'2004-01-01',max:'2006-12-31',formatLength:'long'}" + required="true" + trim="true" + onChange="dojo.byId('oc2').value=arguments[0]" + invalidMessage="Invalid date." /> + onChange:<input id="oc2" size="34" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Destroy" onClick="dijit.byId('q2').destroy(); return false;"> + <input type="button" value="set max to 2007-12-31" onClick="dijit.byId('q2').constraints.max = new Date(2007,11,31); return false;"> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q3"> Date (American format) </label> + <span class="noticeMessage">DateTextBox class, + Attributes: lang="en-us", required="true", constraints={min:'2004-01-01',max:'2006-12-31'}. Works for leap years</span> + </div> + <div class="testExample"> + <input id="q3" type="text" name="date2" class="medium" value="2005-12-30" + dojoType="dijit.form.DateTextBox" + constraints="{min:'2004-01-01',max:'2006-12-31'}" + lang="en-us" + required="true" + promptMessage="mm/dd/yyyy" + invalidMessage="Invalid date. Use mm/dd/yyyy format." /> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q4"> Date (German format) </label> + <span class="noticeMessage">DateTextBox class, + Attributes: lang="de-de", constraints={min:2004-01-01, max:2006-12-31}. Works for leap years</span> + </div> + <div class="testExample"> + <input id="q4" class="medium"/> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q5"> Date, overriding pattern</label> + <span class="noticeMessage">Date, overriding pattern with dd-MM-yyyy</span> + </div> + <div class="testExample"> + <input id="q5" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'dd-MM-yyyy', strict:true}"> + </div> + + <script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "date4", + value: new Date(2006,10,29), + constraints: {min:new Date(2004,0,1),max:new Date(2006,11,31)}, + lang: "de-de", + promptMessage: "dd.mm.yy", + rangeMessage: "Enter a date in the year range 2004-2006.", + invalidMessage: "Invalid date. Use dd.mm.yy format." + }; + var w = new dijit.form.DateTextBox(props, "q4"); + }); + </script> + + <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 class="dojoTitlePaneLabel"> + <label for="fromDate"> Date pairs, to/from</label> + </div> + <div class="testExample"> + From: <input id="fromDate" type="text" name="fromDate" dojoType="dijit.form.DateTextBox" + required="true" + onChange="dijit.byId('toDate').constraints.min = this.getValue();" /> + To: <input id="toDate" type="text" name="toDate" dojoType="dijit.form.DateTextBox" + required="true" + onChange="dijit.byId('fromDate').constraints.max = this.getValue();" /> + </div> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + <input type="reset" name="reset" /> + </div> + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_FilteringSelect.html b/includes/js/dijit/tests/form/test_FilteringSelect.html new file mode 100644 index 0000000..d40af13 --- /dev/null +++ b/includes/js/dijit/tests/form/test_FilteringSelect.html @@ -0,0 +1,296 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo FilteringSelect Widget Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function setValue(id, val){ + dojo.byId(id).value=val; + } + + function myLabelFunc(item, store){ + var label=store.getValue(item, 'name'); + // DEMO: uncomment to chop off a character + //label=label.substr(0, label.length-1); + // DEMO: uncomment to set to lower case + label = label.toLowerCase(); + return label; + } + </script> +</head> + +<body> + <h1 class="testTitle">Dojo FilteringSelect Widget Test</h1> + <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore" + url="../_data/states.json"></div> + <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore2" + url="../_data/countries.json"></div> + <p>The FilteringSelect widget is an enhanced version of HTML's <select> tag.</p> + <p>Similar features:</p> + <ul> + <li>There is a drop down list of possible values.</li> + <li>You can only enter a value from the drop down list. (You can't enter an arbitrary value.)</li> + <li>The value submitted with the form is the hidden value (ex: CA),</li> + <li>not the displayed value a.k.a. label (ex: California)</li> + </ul> + <p></p> + + + <p>Enhancements over plain HTML version:</p> + <ul> + <li>If you type in some text then it will filter down the list of possible values in the drop down list.</li> + <li>List can be specified either as a static list or via a javascript function (that can get the list from a server)</li> + </ul> + <p></p> + + <hr> + + <form action="#" method="GET"> + <p>FilteringSelect #1: inlined data, autoComplete=false:</p> + <label for="setvaluetest2">state list 1:</label> + <select dojoType="dijit.form.FilteringSelect" + id="setvaluetest2" + name="state1" + autoComplete="false" + invalidMessage="Invalid state name" + onChange="dojo.byId('oc1').value=arguments[0]" + onFocus="console.log('user focus handler')" + onBlur="console.log('user blur handler')" + > + <option value="blank"></option> + <option value="AL">Alabama</option> + <option value="AK">Alaska</option> + <option value="AS">American Samoa</option> + <option value="AZ">Arizona</option> + <option value="AR">Arkansas</option> + <option value="AE">Armed Forces Europe</option> + <option value="AP">Armed Forces Pacific</option> + <option value="AA">Armed Forces the Americas</option> + <option value="CA" selected>California</option> + <option value="CO">Colorado</option> + <option value="CT">Connecticut</option> + <option value="DE">Delaware</option> + <option value="DC">District of Columbia</option> + <option value="FM">Federated States of Micronesia</option> + <option value="FL">Florida</option> + <option value="GA">Georgia</option> + <option value="GU">Guam</option> + <option value="HI">Hawaii</option> + <option value="ID">Idaho</option> + <option value="IL">Illinois</option> + <option value="IN">Indiana</option> + <option value="IA">Iowa</option> + <option value="KS">Kansas</option> + <option value="KY">Kentucky</option> + <option value="LA">Louisiana</option> + <option value="ME">Maine</option> + <option value="MH">Marshall Islands</option> + <option value="MD">Maryland</option> + <option value="MA">Massachusetts</option> + <option value="MI">Michigan</option> + <option value="MN">Minnesota</option> + <option value="MS">Mississippi</option> + <option value="MO">Missouri</option> + <option value="MT">Montana</option> + <option value="NE">Nebraska</option> + <option value="NV">Nevada</option> + <option value="NH">New Hampshire</option> + <option value="NJ">New Jersey</option> + <option value="NM">New Mexico</option> + <option value="NY">New York</option> + <option value="NC">North Carolina</option> + <option value="ND">North Dakota</option> + <option value="MP">Northern Mariana Islands</option> + <option value="OH">Ohio</option> + <option value="OK">Oklahoma</option> + <option value="OR">Oregon</option> + <option value="PA">Pennsylvania</option> + <option value="PR">Puerto Rico</option> + <option value="RI">Rhode Island</option> + <option value="SC">South Carolina</option> + <option value="SD">South Dakota</option> + <option value="TN">Tennessee</option> + <option value="TX">Texas</option> + <option value="UT">Utah</option> + <option value="VT">Vermont</option> + <option value="VI">Virgin Islands, U.S.</option> + <option value="VA">Virginia</option> + <option value="WA">Washington</option> + <option value="WV">West Virginia</option> + <option value="WI">Wisconsin</option> + <option value="WY">Wyoming</option> + </select> + onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')"> + <input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')"> + <hr> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="../_data/states.json"></div> + + <p>FilteringSelect #2: url, autoComplete=true:</p> + <label for="setvaluetest">state list 2:</label> + <input searchAttr="name" + id="setvaluetest" + dojoType="dijit.form.FilteringSelect" + store="stateStore" + name="state2" + autoComplete="true" + onChange="setValue('value2', arguments[0]);" + invalidMessage="Invalid state name" + > + <span>Value: <input id="value2" disabled></span> + + <p>FilteringSelect #3: url, autoComplete=false:</p> + <label for="state3">state list 3:</label> + <input searchAttr="name" + id="state3" + dojoType="dijit.form.FilteringSelect" + value="VI" + store="stateStore" + name="state3" + autoComplete="false" + onChange="setValue('value3', arguments[0]);" + invalidMessage="Invalid state name." + > + <span>Value: <input id="value3" disabled value="VI"></span> + <hr> + <p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p> + <label for="state5">state list 5:</label> + <input searchAttr="name" + id="state5" + dojoType="dijit.form.FilteringSelect" + value="OR" + labelFunc="myLabelFunc" + store="stateStore" + name="state5" + autoComplete="true" + labelAttr="label" + labelType="html" + dataProviderClass="dojo.data.ItemFileReadStore" + promptMessage="Please enter a state" + invalidMessage="Invalid state name." + > + <br> + <hr> + + <p>FilteringSelect #7: Input method editor Chinese characters</p> + <p>Using an input method editor (see <a href="http://www.microsoft.com/windows/ie/ie6/downloads/recommended/ime/default.mspx">IME</a> for Windows) try typing 阿 (a) or 把 (ba).</p> + <label for="state7">Chinese list:</label> + <select dojoType="dijit.form.FilteringSelect" + name="state7" + id="state7" + > + <option value="a" selected>阿</option> + <option value="ba">把</option> + </select> + <br> + <hr> + <p>FilteringSelect #8: Japanese</p> + <p>Try typing 東、西、北、南 (north, south, east west) and a few choices will pop up.</p> + <label for="state8">Japanese list:</label> + <select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false" + onChange="setValue('value8', arguments[0]);"> + <option value="nanboku">南北</option> + <option value="touzai">東西</option> + <option value="toukyou">東京</option> + <option value="higashiguchi">東口</option> + <option value="nishiguchi">西口</option> + <option value="minamiguchi">南口</option> + <option value="kitaguchi">北口</option> + <option value="higashiku">東区</option> + <option value="nishiku">西区</option> + <option value="minamiku">南区</option> + <option value="kitaku">北区</option> + </select> + <span>Value: <input id="value8" disabled value="nanboku"></span> + <hr> + <p>FilteringSelect #9: No data</p> + <p>This FilteringSelect has no options to choose from. It should still load.</p> + <label for="state9">empty list:</label> + <select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"> + </select> + <br> + <hr> + <p>FilteringSelect #10: hasDownArrow=false:</p> + <label for="state10">no arrow list:</label> + <input searchAttr="name" + dojoType="dijit.form.FilteringSelect" + value="AL" + name="state10" + id="state10" + autoComplete="false" + store="myStore" + invalidMessage="Invalid state name." + hasDownArrow="false" + > + <br> + <hr> + <div > + <p>FilteringSelect #11: deep data, initial query of type=country:</p> + <label for="state11">query list:</label> + <input searchAttr="name" + dojoType="dijit.form.FilteringSelect" + query={type:'country'} + value="United States of America" + name="state11" + id="state11" + autoComplete="false" + store="myStore2" + invalidMessage="Choose a country from the list." + hasDownArrow="false" + > + <br> + <hr> + <p>FilteringSelect #12: special characters</p> + <p>The drop down list should be:</p> + <ul> + <li>sticks & stones + <li>rags --> riches + <li>more\less + <li>3 * 5 + </ul> + <label for="filter12">Special chars:</label> + <select dojoType="dijit.form.FilteringSelect" + name="filter12" + id="filter12" + > + <option value="sticks" selected>sticks & stones</option> + <option value="rags">rags --> riches</option> + <option value="more">more\less</option> + <option value="times">3 * 5</option> + </select> + <br> + <hr> + <input type="submit"> + </form> + <p> + this is some text below the combo boxes. It shouldn't get pushed out of + the way when search results get returned. also: adding a simple combo + box to test IE bleed through problem: + </p> + + <select> + <option>test for</option> + <option">IE bleed through</option> + <option>problem</option> + </select> + + <!-- maintain state of select if user presses back/forward button --> + <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_Form_onsubmit.html b/includes/js/dijit/tests/form/test_Form_onsubmit.html new file mode 100644 index 0000000..d8b43fa --- /dev/null +++ b/includes/js/dijit/tests/form/test_Form_onsubmit.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>Form unit test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + <script type="text/javascript"> + dojo.require("dojo.date"); + dojo.require("dijit.form.Form"); + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.CheckBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.MultiSelect"); + dojo.require("dijit.form.Textarea"); + dojo.require("dijit.form.SimpleTextarea"); + dojo.require("dijit.Editor"); + </script> +</head> +<body> + <h1>Form Widget Unit Test</h1> + <form dojoType="dijit.form.Form" id="myForm1" + encType="multipart/form-data" action="" method="GET" + onSubmit="dojo.stopEvent(arguments[0]);" + onReset="dojo.stopEvent(arguments[0]);"> + <h3>This form shouldn't submit, nor reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> + + <form dojoType="dijit.form.Form" id="myForm2" + encType="multipart/form-data" action="" method="GET" + onSubmit="return false;" + onReset="return false;"> + <h3>This form shouldn't submit, nor reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> + + <form dojoType="dijit.form.Form" id="myForm3" + encType="multipart/form-data" action="" method="GET" + onSubmit="return true;" + onReset="return true;"> + <h3>This form <em>should</em> submit and reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> + + <form dojoType="dijit.form.Form" id="myForm4" + encType="multipart/form-data" action="" method="GET" + onSubmit="void(0)" + onReset="void(0)"> + <h3>This form <em>should</em> submit and reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_MultiSelect.html b/includes/js/dijit/tests/form/test_MultiSelect.html new file mode 100644 index 0000000..9f03d80 --- /dev/null +++ b/includes/js/dijit/tests/form/test_MultiSelect.html @@ -0,0 +1,138 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>Testing MultiSelect form widget | The Dojo Toolkit</title> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dijit/themes/tundra/tundra.css"> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + #select, #select2 { + width:255px; + height:300px; + overflow:auto; + } + </style> + + <script type="text/javascript" djConfig="isDebug:true, parseOnLoad: true" + src="../../../dojo/dojo.js"></script> + + <script type="text/javascript"> + var globalVals = null; + + dojo.require("dijit.form.MultiSelect"); + + // needed for tests: + dojo.require("dijit.form.Form"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.SplitContainer"); + + dojo.addOnLoad(function(){ + + // ref a clonable node, then split it between two selects + var c = dojo.query(".clone")[0]; + var l = -1; + opt = function(){ + return dojo.byId((++l%2 == 0 ? "select":"select2" )); + } + // based on the the 'dijit' object + for(var i in dijit){ + var n = opt().appendChild(dojo.clone(c)); + n.value = n.innerHTML = i; + } + + // turn any non-dojoType selects into widgets programatically: + dojo.query("select").forEach(function(n){ + if(!dijit.byNode(n)){ + var foo = new dijit.form.MultiSelect({ + },n); + } + }); + + // listen to the "move items" buttons + dojo.query("button.switch") + .connect("onclick",function(e){ + switch(e.target.id.toString()){ + case "left" : dijit.byId("select").addSelected(dijit.byId("select2")); break; + case "right" : dijit.byId("select2").addSelected(dijit.byId("select")); break; + } + }); + + // listen to the invert buttons + dojo.query("button.invert") + .connect("onclick",function(e){ + switch(e.target.id.toString()){ + case "i1" : dijit.byId("select").invertSelection(); break; + case "i2" : dijit.byId("select2").invertSelection(); break; + case "i3" : dijit.byId("select3").invertSelection(); break; + } + }); + + // there is only one debug button + dojo.query(".debug").connect("onclick",function(e){ + console.log('select getValue:',dijit.byId("select").getValue()); + console.log('select2 getValue:',dijit.byId("select2").getValue()); + console.log('select3 getValue:',dijit.byId("select3").getValue()); + }); + + // natural form reaction: + dojo.connect(dojo.byId("test"),"onsubmit",function(e){ + e.preventDefault(); + }); + dojo.connect(dojo.byId("formSubmit"),"onclick",function(e){ + // see what the real form says about our widgets: + var vals = dojo.formToJson("test"); + console.log(vals); + }); + }); + </script> +</head> +<body class="tundra" style="padding:20px"> + + <h1 class="testTitle">dijit.form.MultiSelect:</h1> + + <form action="null.html" method="get" id="test"> + + <select id="select" multiple="true" size="7" name="easing"> + <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option> + </select> + + <span> + <button class="switch" id="left"><</button> + <button class="switch" id="right">></button> + </span> + + <select id="select2" multiple="true" size="7" name="second"> + </select> + + <br><br> + + <button class='invert' id="i1">invert first list</button> + <button class="invert" id="i2">invert second list</button> + <button id="formSubmit">Submit</button> + + </form> + + <button class="debug">call getValue()</button> + + <h3>markup:</h3> + + <select id="select3" multiple="true" name="select3" + dojoType="dijit.form.MultiSelect" + style="height:200px; width:175px; border:5px solid #ededed;"> + + <option value="TN" selected="true">Tennessee</option> + <option value="VA">Virginia</option> + <option value="WA">Washington</option> + <option value="FL">Florida</option> + <option value="CA">California</option> + + </select> + + <br><br> + <button class='invert' id="i3">invert markup list</button> + <button class='set' id="s1" onclick="dijit.byId('select3').setValue(['VA', 'WA']);">set markup list to [VA, WA]</button> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_SimpleTextarea.html b/includes/js/dijit/tests/form/test_SimpleTextarea.html new file mode 100644 index 0000000..9462447 --- /dev/null +++ b/includes/js/dijit/tests/form/test_SimpleTextarea.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>Testing SimpleTextArea | The Dojo Toolkit</title> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dijit/themes/tundra/tundra.css"> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" djConfig="isDebug:true, parseOnLoad: true" + src="../../../dojo/dojo.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.SimpleTextarea"); + + // needed for tests + dojo.require("dijit.layout.BorderContainer"); + </script> +</head> + +<body class="tundra" style="padding:20px"> + + <h1 class="testTitle">SimpleTextarea</h1> + + <p> + This is a simple text area that doesn't automatically size itself according to it's content. + It can be used inside layout containers. + </p> + + <h2>Plain textarea (rows=5, cols=50)</h2> + <textarea dojoType="dijit.form.SimpleTextarea" name="ta2" rows=5 cols=50 + onFocus="console.log('user focus handler')" + onBlur="console.log('user blur handler')" + > + shichashaw, textarea text baw. + </textarea> + + <h2>In a BorderContainer</h2> + + <div id="container" dojoType="dijit.layout.BorderContainer" style="width:500px; height:400px; border: inset gray 3px;"> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="top" splitter="true" style="height: 100px;"> + This is just some text in the top region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="left" splitter="true" style="width: 200px;"> + This is just some text in the left region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="center"> + This is just some text in the center region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="right" splitter="true" style="width: 200px;"> + This is just some text in the left region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="bottom" splitter="true" style="height: 100px;"> + This is just some text in the left region. + </textarea> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_Slider.html b/includes/js/dijit/tests/form/test_Slider.html new file mode 100644 index 0000000..f1d0442 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Slider.html @@ -0,0 +1,208 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Slider Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + #slider2 .dijitButtonNode { + width:12px; + height:12px; + border: none; + font-size:11px; + padding:0px; + } + </style> + + <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.Slider"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets + + // programatic vertical slider and labels + var programaticExample = function(){ + + var node = dojo.byId("programaticSlider"); + // or var node = dojo.body().appendChild(document.createElement('div')); + + // our rules are to be children of the slider + var rulesNode = document.createElement('div'); + node.appendChild(rulesNode); + + // setup the rules + var sliderRules = new dijit.form.VerticalRule({ + count:11, + style:"width:5px" + },rulesNode); + + // and setup the slider + var theSlider = new dijit.form.VerticalSlider({ + value:1400, + onChange: function(){ + console.log(arguments); + }, + name:"programaticSlider", + slideDuration:0, + onChange:function(val){ dojo.byId('sliderProgInput').value=val; }, + style:"height:165px", + minimum:1000, + maximum:3000, + discreteValues:11, + intermediateChanges:"true", + showButtons:"true" + },node); + + // and start them both + theSlider.startup(); + sliderRules.startup(); + + }; + dojo.addOnLoad(programaticExample); + + dojo.addOnLoad(function(){ + dijit.byId("sliderH2").setAttribute('disabled',true); + }); + </script> + </head> + + <body> + <h1 class="testTitle">Slider</h1> + Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider. + <br> + <!-- 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"> + <br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br> + + <div dojoType="dijit.form.HorizontalSlider" name="horizontal1" + onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});" + value="10" + maximum="100" + minimum="0" + pageIncrement="100" + showButtons="false" + intermediateChanges="true" + style="width:50%; height: 20px;" + id="slider1"> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="6" numericMargin="1"></ol> + <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <li>lowest</li> + <li>normal</li> + <li>highest</li> + </ol> + </div> + + Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"> + <br> + <button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled', true);dijit.byId('disableButton').setAttribute('disabled',true);dijit.byId('enableButton').setAttribute('disabled',false);">Disable previous slider</button> + <button id="enableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled',false);dijit.byId('disableButton').setAttribute('disabled',false);dijit.byId('enableButton').setAttribute('disabled', true);" disabled>Enable previous slider</button> + <br> + <br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br> + <div dojoType="dijit.form.VerticalSlider" name="vertical1" + onChange="dojo.byId('slider2input').value=arguments[0];" + value="10" + maximum="100" + minimum="0" + discreteValues="11" + style="height:300px;" + id="slider2"> + <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;"> + <li>0</li> + <li>100</li> + </ol> + <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> + <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> + <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" count="6" numericMargin="1" maximum="100" constraints={pattern:'#'}></ol> + </div> + Slider2 Value:<input readonly id="slider2input" size="3" value="10"> + <h1>Fancy HTML labels (no slide animation):</h1> + <div dojoType="dijit.form.HorizontalSlider" name="horizontal2" + minimum="1" + value="2" + maximum="3" + discreteValues="3" + showButtons="false" + intermediateChanges="true" + slideDuration="0" + style="width:300px; height: 40px;" + id="slider3"> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <li><img width=10 height=10 src="../images/note.gif"><br><span style="font-size: small">small</span></li> + <li><img width=15 height=15 src="../images/note.gif"><br><span style="font-size: medium">medium</span></li> + <li><img width=20 height=20 src="../images/note.gif"><br><span style="font-size: large">large</span></li> + </ol> + </div> + + <p></p><h1>Standalone ruler example:</h1><p></p> + + <div style="width:2in;border-top:1px solid black;"> + <div dojoType="dijit.form.HorizontalRule" count=17 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=9 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=5 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=3 style="height:.4em;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" labelStyle="font-style:monospace;font-size:.7em;margin:-1em 0px 0px -.35em;"> + <li></li> + <li>1</li> + <li>2</li> + </ol> + </div> + + <h1>horizontal, with buttons, disabled (to show styling):</h1> + + <div dojoType="dijit.form.HorizontalSlider" name="horizontalH2" + onChange="dojo.byId('slider1input').value=arguments[0];" + value="10" + maximum="100" + minimum="0" + disabled="true" + showButtons="true" + intermediateChanges="true" + style="width:50%; height: 20px;" + id="sliderH2"> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol> + <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:5px;"></div> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <li>lowest</li> + <li>normal</li> + <li>highest</li> + </ol> + </div> + + + <h2>Completely Programatic VerticalSlider and VerticalRule</h2> + <h3>min:1000, max:3000, 11 discrete values, no animation</h3> + + <div id="programaticSlider"></div> + Programmatic Value:<input readonly id="sliderProgInput" size="5" value="1400"> + + <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> diff --git a/includes/js/dijit/tests/form/test_Spinner.html b/includes/js/dijit/tests/form/test_Spinner.html new file mode 100644 index 0000000..e9af53c --- /dev/null +++ b/includes/js/dijit/tests/form/test_Spinner.html @@ -0,0 +1,92 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Spinner Widget Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dj_ie INPUT#integerspinner2 { font-family: Courier; } /* help IE with font inheritance */ + </style> + + <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.NumberSpinner"); + dojo.require("dojo.parser"); // scan page for widgets + </script> + </head> + + <body> + <h1 class="testTitle">Dijit Spinner Test</h1> + Try typing values, and use the up/down arrow keys and/or the arrow push + buttons to spin + <br> + <form id="form1" action="" name="example" method="post"> + <h1>number spinner</h1> + <br> + initial value=900, no delta specified, no min specified, max=1550, onChange captured<br> + <label for="integerspinner1">Spinbox #1: </label><br> + <input dojoType="dijit.form.NumberSpinner" + onChange="dojo.byId('oc1').value=arguments[0]" + value="900" + class="medium" + constraints="{max:1550,places:0}" + name="integerspinner1" + id="integerspinner1"> + onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <br> + <br> + initial value=1000, delta=10, min=9 max=1550<br> + <label for="integerspinner2">Spinbox with custom styling (width=50%, 200% Courier font): </label> + <input dojoType="dijit.form.NumberSpinner" + style="font-size:200%;font-family:Courier;border:1px solid blue;width:50%;" + value="1000" + smallDelta="10" + constraints="{min:9,max:1550,places:0}" + name="integerspinner2" + id="integerspinner2"> + <br> + <br> + <label for="integertextbox3">Spinner line break test: </label>initial value not specified, delta not specified, min not specified, max not specified, signed not specified, separator not specified<br> + [verify no line break just after this text] + <input dojoType="dijit.form.NumberSpinner" name="integertextbox3" id="integertextbox3"> + [verify no line break just before this text] + <br> + <br> + Move the cursor left and right within the input field to see the effect on the spinner. + <br> + initial value=+1.0, delta=0.1, min=-10.9, max=155, places=1, maxLength=20<br> + <label for="realspinner1">Real Number Spinbox #1: </label><br> + <input dojoType="dijit.form.NumberSpinner" + value="1.0" + smallDelta="0.1" + constraints={min:-10.9,max:155,places:1,round:true} + maxLength="20" + name="realspinner1" + id="realspinner1"> + <br> + +<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> diff --git a/includes/js/dijit/tests/form/test_Textarea.html b/includes/js/dijit/tests/form/test_Textarea.html new file mode 100644 index 0000000..c885aa6 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Textarea.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Textarea Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Textarea"); + dojo.require("dojo.parser"); + </script> + </head> + <body> + <h2 class="pageSubContentTitle">Test Auto-sizing Textarea Widget</h2> + + <!-- 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"> + <label for="plain">HTML textarea: </label><textarea name="plainTextArea" id="plain" rows=5> + this is a plain text area + for comparison + </textarea> + <br><label for="programmatic">programmatically created:</label> <textarea id="programmatic"></textarea> + <script type="text/javascript"> + // See if we can make a widget in script + dojo.addOnLoad(function(){ + var w = new dijit.form.Textarea({ + name: "programmaticTextArea", + style: "width:400px;", + value: "test value" + }, "programmatic"); + w.setValue('we will create this one programatically'); + }); + </script> + <br><label for="simple">Inline:</label><div name="simpleTextArea" dojoType="dijit.form.Textarea" id="simple" style="width:33%;border:20px solid red;" + onChange="dojo.byId('ocSimple').value=arguments[0]" + onFocus="console.log('user focus handler')" + onBlur="console.log('user blur handler')" + >this is a very simple resizable text area</div> + onChange:<textarea id="ocSimple" readOnly>not fired yet!</textarea> + <br> + <input type="button" onclick="dijit.byId('simple').setAttribute('readOnly',false);" value="Remove readOnly"> + <input type="button" onclick="dijit.byId('simple').setAttribute('readOnly',true);" value="Set readOnly"> + <input type="button" onclick="dijit.byId('simple').setAttribute('disabled',true);" value="Disable"> + <input type="button" onclick="dijit.byId('simple').setAttribute('disabled',false);" value="Enable"> + <br> + <textarea dojoType="dijit.form.Textarea" name="largeTextArea"> +this is a textarea with a LOT of content + + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + </textarea> + <script type="text/javascript"> + function displayData() { + var f = dojo.byId("form1"); + var s = ""; + for(var i = 0; i < f.elements.length; i++){ + var elem = f.elements[i]; + if(elem.name == "button" || !dojo.isString(elem.value)){ 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> diff --git a/includes/js/dijit/tests/form/test_TimeTextBox.html b/includes/js/dijit/tests/form/test_TimeTextBox.html new file mode 100644 index 0000000..f68a28d --- /dev/null +++ b/includes/js/dijit/tests/form/test_TimeTextBox.html @@ -0,0 +1,143 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Test TimeTextBox Widget</title> + + <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; + } + + body .medium { + width: 10em; + } + + .noticeMessage { + color:#093669; + font-size:0.95em; + margin-left:0.5em; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + </style> + + <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> + </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=""> + + <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> + + <div class="dojoTitlePaneLabel"> + <label for="q5">24 Hour Time with 1 Hour TimePicker</label> + <span class="noticeMessage">TimeTextBox class, + Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}</span> + </div> + <div class="testExample"> + <input id="q5" type="text" name="time2" class="medium" value="T17:45:00" + dojoType="dijit.form.TimeTextBox" + constraints="{timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}" + 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> diff --git a/includes/js/dijit/tests/form/test_validate.html b/includes/js/dijit/tests/form/test_validate.html new file mode 100644 index 0000000..f6d1cde --- /dev/null +++ b/includes/js/dijit/tests/form/test_validate.html @@ -0,0 +1,428 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Test TextBox Validation Widgets</title> + + <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; + } + + body .small { + width: 3em; + } + body .medium { + width: 10em; + } + body .long { + width: 20em; + } + body .verylong { + width: 90%; + } + + .noticeMessage { + color:#093669; + font-size:0.95em; + margin-left:0.5em; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + </style> + + <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("dojo.currency"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + </head> + + <body> + <h1 class="testTitle">Dijit Validation Widgets</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=""> + + <div class="dojoTitlePaneLabel"> + <label for="q01">First Name: </label> + <span class="noticeMessage"> TextBox class, <b>tabIndex=2</b>, Attributes: {trim: true, propercase: true, style: 'width:700px'}, First letter of each word is upper case.</span> + </div> + <div class="testExample"> + <input id="q01" type="text" name="firstname" value="testing testing" style="width: 700px;" tabIndex=2 + dojoType="dijit.form.TextBox" + trim="true" + onfocus="console.log('user onfocus handler')" + onblur="console.log('user onblur handler')" + onChange="dojo.byId('oc1').value=arguments[0]" + propercase="true" /> + <br>onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q02">Last Name: </label> + <span class="noticeMessage"> TextBox class, Attributes: {trim: true, uppercase: true, class: 'verylong'}, all letters converted to upper case. </span> + </div> + <div class="testExample"> + <input id="q02" type="text" name="lastname" value="testing testing" class="verylong" + dojoType="dijit.form.TextBox" + trim="true" + uppercase="true" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q03">Age: </label> + <span class="noticeMessage"> NumberTextBox class, <b>tabIndex=1</b>, Attributes: {trim: true}, no initial value specified, tooltipPosition=[above, below]</span> + </div> + <div class="testExample"> + <input id="q03" type="text" name="age" tabIndex=1 + dojoType="dijit.form.NumberTextBox" + promptMessage="(optional) Enter an age between 0 and 120" + maxLength="3" + class="small" + constraints="{places:0,min:0,max:120}" + onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);" + tooltipPosition="above, below" + /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q04">Occupation: </label> + <span class="noticeMessage">ValidationTextBox class, + Attributes: {lowercase: true, required: true, class: verylong, style: font-size: 15pt;}. Displays a prompt message if field is missing.</span> + </div> + <div class="testExample"> + <input id="q04" type="text" name="occupation" class="verylong" style="font-size:15pt;" + dojoType="dijit.form.ValidationTextBox" + lowercase="true" + required="true" + promptMessage="Enter an occupation" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q05">Elevation: </label> + <span class="noticeMessage">IntegerTextBox class, + Attributes: {required: true, min:-20000, max:+20000 }, Enter feet above sea level with a sign.</span> + </div> + <div class="testExample"> + <input id="q05" class="small"/> + onChange:<input id="oc5" size="10" disabled value="not fired yet!" autocomplete="off"> + </div> +<script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "elevation", + value: 3000, + constraints: {min:-20000,max:20000,places:0}, + promptMessage: "Enter a value between -20000 and +20000", + required: "true" , + invalidMessage: "Invalid elevation.", + onChange: function(){dojo.byId('oc5').value=arguments[0]}, + "class": "medium" + }; + var w = new dijit.form.NumberTextBox(props, "q05"); + }); +</script> +<!-- + <div class="dojoTitlePaneLabel"> + <label for="attach-here">Population: </label> + <span class="noticeMessage">IntegerTextBox class, + Attributes: {trim: true, required: true, signed: false, separator: ","}. <br><b> This widget was added in script, not markup. </b> </span> + </div> + <div class="testExample" > + <input id="attach-here" type="text" name="population" class="medium" value="1500000"/> + </div> + + <script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "population", + value: "1,500,000", + trim: "true", + required: "true", + regExpGen: dojo.regexp.integer, + constraints: {signed:false, separator: ","}, + invalidMessage: "Invalid population. Be sure to use commas." + }; + var w = new dijit.form.ValidationTextBox(props, "attach-here"); + }); + </script> + + <div class="dojoTitlePaneLabel"> + <label for="q06">Real Number: </label> + <span class="noticeMessage">RealNumberTextBox class, + Attributes: {trim: true, required: true}. Enter any sort of real number.</span> + </div> + <div class="testExample"> + <input id="q06" type="text" name="real1" class="medium" value="+0.1234" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.realNumber" + trim="true" + required="true" + invalidMessage="This is not a valid real number." /> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q07">Exponential Notation: </label> + <span class="noticeMessage">RealNumberTextBox class, + Attributes: {exponent: true}. Enter a real number in exponential notation.</span> + </div> + <div class="testExample"> + <input id="q07" type="text" name="real2" class="medium" value="+0.12" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.realNumber" + trim="true" + required="true" + constraints={exponent:true} + invalidMessage="Number must be in exponential notation. Example +5E-28" /> + </div> + --> + + <div class="dojoTitlePaneLabel"> + <label for="q08">Annual Income: </label> + <span class="noticeMessage">CurrencyTextBox class, + Attributes: {fractional: true}. Enter whole and cents. Currency symbol is optional.</span> + </div> + + <div class="testExample"> + <input id="q08" type="text" name="income1" class="medium" value="54775.53" + dojoType="dijit.form.CurrencyTextBox" + required="true" + constraints="{fractional:true}" + currency="USD" + onChange="dojo.byId('oc8').value=arguments[0]" + invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Cents are mandatory." />USD + onChange:<input id="oc8" size="15" disabled value="not fired yet!" autocomplete="off"> + </div> + + <div class="testExample"> + euro currency (local format) fractional part is optional: + <input id="q08eur" type="text" name="income2" + class="medium" value="54775.53" + dojoType="dijit.form.CurrencyTextBox" + required="true" + currency="EUR" + invalidMessage="Invalid amount. Include dollar sign, commas, and cents." />EUR + <button onclick="dijit.byId('q08eur').setAttribute('disabled',true);return false">Disable</button> + <button onclick="dijit.byId('q08eur').setAttribute('disabled',false);return false">Enable</button> + <button onclick="dijit.byId('q08eur').reset();return false">Reset</button> + </div> + + <!-- + It is unusual to override the lang properties on individual + widgets. Usually it should be the user's default or set on + a page basis by the server. This is for testing purposes + --> + <div class="testExample"> + euro currency (fixed lang: de-de) programmatically created, fractional part is optional: <input id="q08eurde" class="medium"/>EUR + </div> + + <script> + // See if we can make a widget in script and attach it + // to the DOM ourselves. + dojo.addOnLoad(function(){ + var example = dojo.currency.format(54775.53, {locale: 'de-de', currency: "EUR"}); + var props = { + name: "income3", + value: 54775.53, + lang: 'de-de', + required: "true", + currency: "EUR", + invalidMessage: "Invalid amount. Example: " + example + }; + var w = new dijit.form.CurrencyTextBox(props, "q08eurde"); + }); + </script> + + <!-- + <div class="dojoTitlePaneLabel"> + <label for="q08a">Annual Income: </label> + <span class="noticeMessage">Old regexp currency textbox, + Attributes: {fractional: true}. Enter dollars and cents.</span> + </div> + <div class="testExample"> + <input id="q08a" type="text" name="income3" class="medium" value="$54,775.53" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.currency" + trim="true" + required="true" + constraints={fractional:true} + invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q09">IPv4 Address: </label> + <span class="noticeMessage">IpAddressTextBox class, + Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span> + </div> + <div class="testExample"> + <input id="q09" type="text" name="ipv4" class="medium" value="24.17.155.40" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.ipAddress" + trim="true" + required="true" + constraints={allowIPv6:false,allowHybrid:false} + invalidMessage="Invalid IPv4 address."> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q10"> IPv6 Address: </label> + <span class="noticeMessage">IpAddressTextBox class, + Attributes: {allowDottedDecimal: false, allowDottedHex: false}. + Also hybrid works, x:x:x:x:x:x:d.d.d.d</span> + </div> + <div class="testExample"> + <input id="q10" type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.ipAddress" + trim="true" + uppercase = "true" + required="true" + constraints={allowDottedDecimal:false, allowDottedHex:false, allowDottedOctal:false} + invalidMessage="Invalid IPv6 address, please enter eight groups of four hexadecimal digits. x:x:x:x:x:x:x:x"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q11"> URL: </label> + <span class="noticeMessage">UrlTextBox class, + Attributes: {required: true, trim: true, scheme: true}. </span> + </div> + + <div class="testExample"> + <input id="q11" type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.url" + trim="true" + required="true" + constraints={scheme:true} + invalidMessage="Invalid URL. Be sure to include the scheme, http://..." /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q12"> Email Address </label> + <span class="noticeMessage">EmailTextBox class, + Attributes: {required: true, trim: true}. </span> + </div> + + <div class="testExample"> + <input id="q12" type="text" name="email" class="long" value="fred&barney@stonehenge.com" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.emailAddress" + trim="true" + required="true" + invalidMessage="Invalid Email Address." /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q13"> Email Address List </label> + <span class="noticeMessage">EmailListTextBox class, + Attributes: {required: true, trim: true}. </span> + </div> + + <div class="testExample"> + <input id="q13" type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; " + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.emailAddressList" + trim="true" + required="true" + invalidMessage="Invalid Email Address List." /> + </div> + --> + <div class="dojoTitlePaneLabel"> + <label for="q22">Regular Expression </label> + <span class="noticeMessage">RegexpTextBox class, + Attributes: {required: true} </span> + </div> + <div class="testExample"> + <input id="q22" type="text" name="phone" class="medium" value="someTestString" + dojoType="dijit.form.ValidationTextBox" + regExp="[\w]+" + required="true" + invalidMessage="Invalid Non-Space Text."> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q23"> Password </label> + <span class="noticeMessage">(just a test that type attribute is obeyed) </span> + </div> + <div class="testExample"> + <input id="q23" type="password" name="password" class="medium" + dojoType="dijit.form.TextBox"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="ticket1651">Trac ticket 1651: </label> + <span class="noticeMessage">value: null should show up as empty</span> + </div> + <div class="testExample"> + <input id="ticket1651" class="medium" value="not null"/> + </div> + + <script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "ticket1651", + id: "mname", + value: null + }; + var w = new dijit.form.TextBox(props, "ticket1651"); + }); + </script> + + <div class="dojoTitlePaneLabel"> + <label for="q24">readOnly test</label> + <span class="noticeMessage">a test that readOnly is understood</span> + </div> + <div class="testExample"> + <input id="q24" type="text" name="readOnly" class="medium" readOnly value="cannot type here" + dojoType="dijit.form.TextBox"> + <input type="button" onclick="dijit.byId('q24').setAttribute('readOnly',false);" value="Remove readOnly"> + <input type="button" onclick="dijit.byId('q24').setAttribute('readOnly',true);" value="Set readOnly"> + </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.name && elem.disabled?' (disabled)':'') + ": " + elem.value + "\n"; + } + alert(s); + } + </script> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + <h2>Tooltip positioning</h2> + <p> + These buttons switch the positions searched to try to place the validation error tooltips. + Note that setting tooltip positioning to "above" or "below" is dangerous if + you have a node with a dropdown, but the drop down might overlap the tooltip. + </p> + <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button> + <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button> + </body> +</html> |
