Subversion Repositories Applications.papyrus

Compare Revisions

No changes between revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dijit/tests/test_Table.html
New file
0,0 → 1,133
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit Grid</title>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true};
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
</style>
 
 
<script type="text/javascript" src="../../dojo/dojo.js"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<style type="text/css">
body{ padding:1em 3em; }
 
/* The following will end up being added by code. */
.dijitGridColumn1{ width:60px; }
.dijitGridColumn2{ width:100px; }
.dijitGridColumn3{ width:100px; }
.dijitGridColumn4{ width:280px; }
/* End code add */
 
div.clear { clear:both; }
div.dijitGrid {
width:600px;
border:1px solid #ccc;
margin:1em;
}
table td {
border:1px solid #ccc;
border-collapse:none;
}
div.digitGridRow {
border:1px solid #c00;
clear:both;
}
span.dijitGridCell{
padding:0.25em;
display:block;
float:left;
}
span.dijitGridSeparator{
display:block;
float:left;
width:1px;
border-left:1px solid #ccc;
}
div.dijitGridHead {
background-color:#efefef;
border-bottom:1px solid #ccc;
font-weight:bold;
}
div.dijitGridBody {
height:200px;
overflow:auto;
}
div.dijitGridBodyContent {
overflow:visible;
}
 
div.dijitGridFoot { }
</style>
</head>
<body>
<h1>Dijit Grid: Table Test</h1>
<p>This is a pure HTML test, in order to develop the eventual markup structure for the Dijit Grid. It is <strong>not</strong> a working Grid, nor will it be the eventual Grid test.</p>
<div class="dijitGrid">
<div class="dijitGridHead">
<div class="dijitGridRow">
<span class="dijitGridCell dijitGridColumn1">Name</span>
<span class="dijitGridSeparator"></span>
<span class="dijitGridCell dijitGridColumn2">Date Added</span>
<span class="dijitGridSeparator"></span>
<span class="dijitGridCell dijitGridColumn3">Date Modified</span>
<span class="dijitGridSeparator"></span>
<span class="dijitGridCell dijitGridColumn4">Label</span>
<div class="clear"></div>
</div>
</div>
<div class="dijitGridBody">
<div class="dijitGridBodyContent">
<table cellpadding="0" cellspacing="0" border="0" width="576" style="margin:0;border:0;">
<colgroup>
<col width="60"/>
<col width="100"/>
<col width="100"/>
<col width="280"/>
</colgroup>
<tr><td>Adam</td><td>3/1/2004</td><td>11/1/2003</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
<tr><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<tr><td>Carla</td><td>4/23/2002</td><td>3/1/2004</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
<tr><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
<tr><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
<tr><td>Fred</td><td>3/1/2004</td><td>11/1/2003</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
<tr><td>Greg</td><td>6/15/2005</td><td>1/7/2006</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
<tr><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<tr><td>Ianna</td><td>11/1/2003</td><td>6/15/2005</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
<tr><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
</table>
</div>
</div>
<div class="dijitGridFoot">
</div>
</div>
<h2>A regular table, for comparison purposes</h2>
<table cellpadding="0" cellspacing="0" border="0" width="600">
<thead>
<tr>
<th width="60" valign="top">Name</th>
<th width="100" align="center" valign="top">Date Added</th>
<th width="100" align="center" valign="top">Date Modified</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr><td>Adam</td><td>3/1/2004</td><td>11/1/2003</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
<tr><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<tr><td>Carla</td><td>4/23/2002</td><td>3/1/2004</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
<tr><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
<tr><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
<tr><td>Fred</td><td>3/1/2004</td><td>11/1/2003</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
<tr><td>Greg</td><td>6/15/2005</td><td>1/7/2006</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
<tr><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<tr><td>Ianna</td><td>11/1/2003</td><td>6/15/2005</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
<tr><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
</tbody>
</table>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/runTests.html
New file
0,0 → 1,9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dijit Unit Test Runner</title>
<meta http-equiv="REFRESH" content="0;url=../../util/doh/runner.html?testModule=dijit.tests.module"></HEAD>
<BODY>
Redirecting to D.O.H runner.
</BODY>
</HTML>
/trunk/api/js/dojo1.0/dijit/tests/test_Tooltip.html
New file
0,0 → 1,113
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Dojo Tooltip Widget Test</title>
 
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.Tooltip");
dojo.require("dojo.parser"); // find widgets
dojo.addOnLoad(function(){
console.log("on load func");
var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
console.log("created", tt, tt.id);
});
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
</style>
</head>
<body>
<h1 class="testTitle">Tooltip test</h1>
<p>Mouse-over or focus the items below to test tooltips. <button onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from button.</p>
<p></p>
<div><span id="one" class="tt" tabindex="0"> focusable text </span>
<span dojoType="dijit.Tooltip" connectId="one">
<b>
<span style="color: blue;">rich formatting</span>
<span style="color: red; font-size: x-large;"><i>!</i></span>
</b>
</span>
</div>
<span id="oneA" class="tt"> plain text (not focusable) </span>
<span dojoType="dijit.Tooltip" connectId="oneA">
<span> keyboard users can not access this tooltip</span>
</span>
<a id="three" href="#bogus">anchor</a>
<span dojoType="dijit.Tooltip" connectId="three">tooltip on a link </span>
<p></p>
 
<span id="programmaticTest">this text has a programmatically created tooltip</span>
<br>
 
<button id="four">button</button>
<span id="btnTt" dojoType="dijit.Tooltip" connectId="four">tooltip on a button</span>
 
<span style="float: right">
Test tooltip on right aligned element. Tooltip should flow to the left --&gt;
<select id="seven">
<option value="alpha">Alpha</option>
<option value="beta">Beta</option>
<option value="gamma">Gamma</option>
<option value="delta">Delta</option>
</select>
 
<span dojoType="dijit.Tooltip" connectId="seven">
tooltip on a select<br>
two line tooltip.
</span>
</span>
 
<p></p>
 
<form>
<input type="input" id="id1" value="#1"><br>
<input type="input" id="id2" value="#2"><br>
<input type="input" id="id3" value="#3"><br>
<input type="input" id="id4" value="#4"><br>
<input type="input" id="id5" value="#5"><br>
<input type="input" id="id6" value="#6"><br>
</form>
<br>
 
<div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
<span id="s1">s1 text</span><br><br><br>
<span id="s2">s2 text</span><br><br><br>
<span id="s3">s3 text</span><br><br><br>
<span id="s4">s4 text</span><br><br><br>
<span id="s5">s5 text</span><br><br><br>
</div>
 
<span dojoType="dijit.Tooltip" connectId="id1">
 
tooltip for #1<br>
long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text<br>
make sure that this works properly with a really narrow window
</span>
 
<span dojoType="dijit.Tooltip" connectId="id2">tooltip for #2</span>
<span dojoType="dijit.Tooltip" connectId="id3">tooltip for #3</span>
<span dojoType="dijit.Tooltip" connectId="id4">tooltip for #4</span>
<span dojoType="dijit.Tooltip" connectId="id5">tooltip for #5</span>
<span dojoType="dijit.Tooltip" connectId="id6">tooltip for #6</span>
 
<span dojoType="dijit.Tooltip" connectId="s1">s1 tooltip</span>
<span dojoType="dijit.Tooltip" connectId="s2">s2 tooltip</span>
<span dojoType="dijit.Tooltip" connectId="s3">s3 tooltip</span>
<span dojoType="dijit.Tooltip" connectId="s4">s4 tooltip</span>
<span dojoType="dijit.Tooltip" connectId="s5">s5 tooltip</span>
 
<h3>One Tooltip for multiple connect nodes</h3>
<span dojoType="dijit.Tooltip" connectId="multi1,multi2" style="display:none;">multi tooltip</span>
<a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a>
 
</body>
</html>
 
/trunk/api/js/dojo1.0/dijit/tests/test_Tree_Notification_API_Support.html
New file
0,0 → 1,105
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit Tree Test</title>
 
<style someProperty="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
</style>
 
 
<script someProperty="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script someProperty="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" someProperty="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree");
dojo.require("dijit.Menu");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
function deleteItem(){
var store = dijit.byId("myTree").store;
store.deleteItem(selectedItem);
resetForms();
}
 
function addItem(){
var store = dijit.byId("myTree").store;
var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null;
console.debug(pInfo);
store.newItem({id: dojo.byId('newId').value,name:dojo.byId("label").value,someProperty:dojo.byId("someProperty").value},pInfo);
resetForms();
}
 
function resetForms() {
dojo.byId('selected').innerHTML="Tree Root"
selectedItem=null;
dojo.byId("uLabel").value = "";
dojo.byId("uSomeProperty").value = "";
}
 
function updateItem(){
console.log("Updating Item");
var store = dijit.byId("myTree").store;
 
if (selectedItem!=null){
if (dojo.byId("uLabel").value != store.getValue(selectedItem, "name")){
store.setValue(selectedItem, "name", dojo.byId("uLabel").value);
}
 
if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){
store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value);
}
 
}else{
console.error("Can't update the tree root");
}
}
 
dojo.addOnLoad(function(){
resetForms();
});
 
function onClick(item){
selectedItem = item;
dojo.byId('selected').innerHTML= item ? treeTestStore.getLabel(item) : "";
dojo.byId('uLabel').value = item ? treeTestStore.getLabel(item) : "";
dojo.byId('uSomeProperty').value = item ? treeTestStore.getValue(item,"someProperty") : "";
}
</script>
 
</head>
<body>
 
<h1 class="testTitle">Dijit Tree Test - dojo.data.Notification API support</h1>
 
<div dojoType="dojo.data.ItemFileWriteStore" jsId="treeTestStore"
url="../tests/_data/treeTest.json"></div>
 
<div dojoType="dijit.Tree" id="myTree" label="root" store="treeTestStore" onClick="onClick" labelAttr="name" somePropertyAttr="someProperty"></div>
 
<br />
<h2>Current Selection: <span id='selected'>Tree Root</span>
 
<h2>Selected Item:</h2>
Name: <input id="uLabel" width="50" value="Enter Node Label" /><br />
Description: <input id="uSomeProperty" width="50" value="Some Test Property" /><br /><br />
<div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="updateItem();">Update Item</div>
 
<h2>New Item</h2>
<p>Enter an Id, Name, and optionally a description to be added as a new item to the store. Upon successful addition, the tree will recieve notification of this event and respond accordingly. If you select a node the item will be added to that node, otherwise the item will be added to the tree root. "Id" is the identifer here and as such must be unique for all items in the store.</p>
Id: <input id="newId" width="50" value="Enter Item Id" /><br />
Name: <input id="label" width="50" value="Enter Item Name" /><br />
Description: <input id="someProperty" width="50" value="Enter Some Property Value" /><br /><br />
 
<div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="addItem();">Add Item to Store</div>
<br />
<button dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteItem()">Delete Node (and children)</button>
 
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/widgetsInTemplate.html
New file
0,0 → 1,112
<html>
<head>
<title>testing widgetsInTemplate support</title>
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
 
dojo.require("dijit.form.Button");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.ProgressBar");
 
dojo.addOnLoad(function(){
var testW;
doh.register("t",
[
{
name: "dojoAttachPoint",
runTest: function(t){
var testW = dijit.byId("test1Widget");
t.t(testW.normalNode);
t.f(isNaN(testW.normalNode.nodeType));
t.t(testW.buttonWidget instanceof dijit.form.Button);
t.t(testW.checkboxWidget instanceof dijit.form.CheckBox);
t.t(testW.progressBarWidget instanceof dijit.ProgressBar);
// alert((testW.buttonWidget instanceof dijit.form.Button)+(testW.checkboxWidget instanceof dijit.form.CheckBox)+(testW.progressBarWidget instanceof dijit.ProgressBar)+
// (testW.buttonWidget._counter==1)+(testW.checkboxWidget._counter==1)+(testW.progressBarWidget._counter==1));
testW = dijit.byId("test2Widget");
t.t(testW.containerNode);
t.f(isNaN(testW.containerNode.nodeType));
t.is(undefined,testW.buttonWidget);
t.t(testW.checkboxWidget instanceof dijit.form.CheckBox);
}
},
{
name: "dojoAttachEvent",
runTest: function(t){
var testW = dijit.byId("test1Widget");
testW.buttonWidget._counter=0;
testW.buttonWidget.onClick(testW.buttonWidget);
testW.checkboxWidget._counter=0;
testW.checkboxWidget.onClick(testW.checkboxWidget);
testW.progressBarWidget._counter=0;
testW.progressBarWidget.onChange(testW.progressBarWidget);
t.is(1,testW.buttonWidget._counter);
t.is(1,testW.checkboxWidget._counter);
t.is(1,testW.progressBarWidget._counter);
}
}
]
);
doh.run();
});
</script>
<style type="text/css">
@import "../themes/tundra/tundra.css";
</style>
</head>
<body>
<h1>testing widgetsInTemplate support</h1>
<xmp id="Test1Template" style="display:none;">
<div>
<div dojoAttachPoint="normalNode" >normal node</div>
<button dojoAttachPoint="buttonWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.Button">button #1</button>
<div dojoAttachPoint="checkboxWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.CheckBox"></div> checkbox #1
<div dojoAttachPoint="progressBarWidget" dojoAttachEvent="onChange:onClick" style="width:400px" annotate="true"
maximum="200" progress="20" dojoType="dijit.ProgressBar"></div>
</div>
</xmp>
<script>
dojo.declare('Test1Widget',
[dijit._Widget, dijit._Templated],
{
widgetsInTemplate: true,
// isContainer: true,
 
templateString: dojo.byId('Test1Template').textContent || dojo.byId('Test1Template').innerText,
onClick: function(e){
if(e.target){
alert('onClick widgetId='+e.target.id);
}else{
if(e._counter == undefined){
e._counter = 1;
}else{
e._counter++;
}
}
}
});
</script>
<!-- can use widget immediately in markup - no parsing occurs until document loaded and scripts run -->
<div dojoType="Test1Widget" id="test1Widget" ></div>
 
 
<xmp id="Test2Template" style="display:none;">
<div>
<div dojoAttachPoint="containerNode" ><div dojoAttachPoint="checkboxWidget" dojoType="dijit.form.CheckBox"></div> checkbox #2</div>
</div>
</xmp>
<script>
dojo.declare('Test2Widget',
[dijit._Widget, dijit._Templated],
{
widgetsInTemplate: true,
 
templateString: dojo.byId('Test2Template').textContent || dojo.byId('Test2Template').innerText
});
</script>
<div dojoType="Test2Widget" id="test2Widget" ><button dojoAttachPoint="buttonWidget" dojoType="dijit.form.Button">button #2</button></div>
</body>
</html>
 
/trunk/api/js/dojo1.0/dijit/tests/Container.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests.Container"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests.Container"] = true;
dojo.provide("dijit.tests.Container");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests.Container", dojo.moduleUrl("dijit", "tests/Container.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/test_Dialog.html
New file
0,0 → 1,410
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dialog Widget Dojo Tests</title>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
table { border: none; }
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../../dojo/dojo.js"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.Menu");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
// create a do nothing, only for test widget
dojo.declare("dijit.TestWidget",
[dijit._Widget, dijit._Templated], {
templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>"
});
</script>
<script type="text/javascript">
// make dojo.toJson() print dates correctly (this feels a bit dirty)
Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
 
var thirdDlg;
function createDialog() {
if(!thirdDlg){
var pane = dojo.byId('thirdDialog');
pane.style.width = "300px";
thirdDlg = new dijit.Dialog({
title: "Programatic Dialog Creation"
},pane);
}
setTimeout("thirdDlg.show()","3000");
}
</script>
<style type="text/css">
body { font-family : sans-serif; }
form { margin-bottom : 0; }
</style>
</head>
<body>
<h1 class="testTitle">Dijit layout.Dialog tests</h1>
<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show Dialog</button> |
 
<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<table>
<tr>
<td><label for="name">Name: </label></td>
<td><input dojoType=dijit.form.TextBox type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="loc">Location: </label></td>
<td><input dojoType=dijit.form.TextBox type="text" name="loc" id="loc"></td>
</tr>
<tr>
<td><label for="date">Date: </label></td>
<td><input dojoType=dijit.form.DateTextBox type="text" name="date" id="date"></td>
</tr>
<tr>
<td><label for="date">Time: </label></td>
<td><input dojoType=dijit.form.TimeTextBox type="text" name="time" id="time"></td>
</tr>
<tr>
<td><label for="desc">Description: </label></td>
<td><input dojoType=dijit.form.TextBox type="text" name="desc" id="desc"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit">OK</button></td>
</tr>
</table>
</div>
 
<div dojoType="dijit.form.DropDownButton">
<span>Show Tooltip Dialog</span>
<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<table>
<tr>
<td><label for="user">User:</label></td>
<td><input dojoType=dijit.form.TextBox type="text" name="user" id="user"></td>
</tr>
<tr>
<td><label for="pwd">Password:</label></td>
<td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="pwd"></td>
</tr>
<tr>
<td><label for="date2">Date:</label></td>
<td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td>
</tr>
<tr>
<td><label for="time2">Time:</label></td>
<td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td>
</tr>
<tr>
<td><label for="combo">Pizza:</label></td>
<td>
<select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true">
<option value="cheese">cheese</option>
<option value="pepperoni">pepperoni</option>
<option value="sausage">sausage</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit" name="submit">Order</button>
</td>
</tr>
</table>
<div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div>
</div>
</div> |
 
<button dojoType="dijit.form.Button" onclick="createDialog()" title="shows after 3 second delay">Programatic Dialog (3 second delay)</button> |
 
 
<div id="thirdDialog" style="display: none;">
<form>
<input>
<br>
<button>hello</button>
<br>
<select>
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit</option>
<option>amet</option>
</select>
</form>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
</div>
 
 
<button dojoType="dijit.form.Button" onclick="dijit.byId('fifthDlg').show();">Test slow loading HREF Dialog</button>
 
<div dojoType="dijit.Dialog" id="fifthDlg" href="layout/getResponse.php?delay=3000&messId=3" title="From HREF (slow network emulated)"></div>
 
<div dojoType="dijit.form.DropDownButton">
<span>Test slowloading HREF Tooltip Dialog</span>
<div dojoType="dijit.TooltipDialog" href="layout/getResponse.php?delay=500&messId=2">
</div>
</div> |
 
<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
 
<p>
Here's a form. Try clicking the programatic dialog link, then focusing on the form.
After the dialog closes focus should be returned to the form
</p>
 
<form>
<input>
<br>
<button>hello</button>
<br>
<select>
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit</option>
<option>amet</option>
</select>
</form>
 
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<form>
<center>
<select>
<option>1</option>
<option>2</option>
</select>
</center>
</form>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
<div style="float:right;clear:right;" dojoType="dijit.form.DropDownButton">
<span>dropdown at right</span>
<div dojoType="dijit.TooltipDialog" id="dialogright">
<div style="white-space:nowrap;">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
 
<div dojoType="dijit.form.DropDownButton" title="Enter Login information2">
<span>Show Tooltip Dialog pointing upwards, with links</span>
<div dojoType="dijit.TooltipDialog" title="General Information Dialog">
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. <a href="http://www.lipsum.com/">Vestibulum</a> vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in <a href="http://www.lipsum.com/">ipsum</a>. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. <a href="http://www.lipsum.com/">Suspendisse imperdiet</a>. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
</div>
</div>
(will go up if there isn't enough space on the bottom of the screen)
 
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<form>
<center>
<select>
<option>1</option>
<option>2</option>
</select>
</center>
</form>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
 
<a href="javascript:dijit.byId('dialog1').show()">Show Dialog</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
 
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
consectetuer dapibus eros. Aliquam nisl.
</p>
 
</body>
</html>
 
/trunk/api/js/dojo1.0/dijit/tests/form/test_ComboBox_destroy.html
New file
0,0 → 1,57
<!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>
/trunk/api/js/dojo1.0/dijit/tests/form/test_Slider.html
New file
0,0 → 1,136
<!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>
<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
dojo.addOnLoad(function(){
dijit.byId("sliderH2").setDisabled(true);
});
</script>
<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>
</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>
<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').setDisabled( true);dijit.byId('disableButton').setDisabled(true);dijit.byId('enableButton').setDisabled(false);">Disable previous slider</button>
<button id="enableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setDisabled(false);dijit.byId('disableButton').setDisabled(false);dijit.byId('enableButton').setDisabled( 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:</h1>
<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
minimum="1"
value="2"
maximum="3"
discreteValues="3"
showButtons="false"
intermediateChanges="true"
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>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/form/images/Alabama.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/form/images/Alabama.jpg
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/form/test_FilteringSelect.html
New file
0,0 → 1,271
<!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("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 &lt;select&gt; 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]"
>
<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 &#38463; (a) or &#25226; (ba).</p>
<label for="state7">Chinese list:</label>
<select dojoType="dijit.form.FilteringSelect"
name="state7"
id="state7"
>
<option value="a" selected>&#38463;</option>
<option value="ba">&#25226;</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>
<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>
/trunk/api/js/dojo1.0/dijit/tests/form/Form.html
New file
0,0 → 1,217
<!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.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",
richtext: "<h1>original</h1><p>This is the default content</p>"
};
 
// we reset 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",
richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>"
};
 
dojo.addOnLoad(function(){
doh.register("dijit.form.Form",
[
function getValues(){
doh.is( dojo.toJson(original), dojo.toJson(dijit.byId("myForm").getValues()) );
},
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" );
});
}
]
);
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>
<form dojoType="dijit.form.Form" id="myForm" action="showPost.php" execute="alert('Execute form w/values:\n'+dojo.toJson(arguments[0],true));">
<p>Just HTML text</p>
<table border=2>
<tr><th>Description</th><th>Name</th><th>Form node/widget</th></tr>
 
<!--
<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>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>
 
</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>
</form>
 
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/form/test_CheckBox.html
New file
0,0 → 1,123
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CheckBox Widget Demo</title>
 
<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.setChecked(true);
});
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
label { margin-right: 0.80em; }
</style>
</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);"> -->
<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").setDisabled(true);' value="disable" />
<input type="button" onclick='dijit.byId("cb7").setDisabled(false);' value="enable" />
<input type="button" onclick='dijit.byId("cb7").setValue("fish");' value='set value to "fish"' />
<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>
/trunk/api/js/dojo1.0/dijit/tests/form/test_ComboBox.html
New file
0,0 → 1,284
<!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";
</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.setDisabled(!widget.disabled);
button.innerHTML= widget.disabled ? "Enable" : "Disable";
}
</script>
</head>
 
<body>
<h1>Dojo ComboBox Widget Test</h1>
<p>
A ComboBox is like a text &lt;input&gt; 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>
<select id="setvaluetest"
name="state1"
dojoType="dijit.form.ComboBox"
class="medium"
style="width:50%;font-size:15pt;"
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>
onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
 
<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>
<input dojoType="dijit.form.ComboBox"
value="California"
class="medium"
store="stateStore"
searchAttr="name"
style="width: 300px;"
name="state2"
onChange="setVal2"
id="datatest"
>
<span>Value: <input id="value2" disabled value="California"></span>
<hr>
<label for="datatest">Dijit List test #1: </label>
<input dojoType="dijit.form.ComboBox"
value="dijit.Editor"
class="medium"
store="dijitStore"
searchAttr="className"
style="width: 300px;"
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 -&gt; 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>
/trunk/api/js/dojo1.0/dijit/tests/form/test_validate.html
New file
0,0 → 1,402
<!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>
 
 
<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>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.small {
width: 3em;
}
.medium {
width: 10em;
}
.long {
width: 20em;
}
.verylong {
width: 90%;
}
 
.noticeMessage {
color:#093669;
font-size:0.95em;
margin-left:0.5em;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
</style>
</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="post">
 
<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"
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.</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]);"
/>
</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
&nbsp;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
</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>
<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>
/trunk/api/js/dojo1.0/dijit/tests/form/test_Button.html
New file
0,0 → 1,287
<!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>
 
 
<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>
<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 .dojoButton {
margin-right: 10px;
}
.dojoButtonContents {
font-size: 1.6em;
}
 
/* todo: find good color for disabled menuitems, and teset */
.dojoMenuItem2Disabled .dojoMenuItem2Label span,
.dojoMenuItem2Disabled .dojoMenuItem2Accel span {
color: ThreeDShadow;
}
 
.dojoMenuItem2Disabled .dojoMenuItem2Label span span,
.dojoMenuItem2Disabled .dojoMenuItem2Accel span span {
color: ThreeDHighlight;
}
</style>
</head>
<body>
<h1 class="testTitle">Dijit Button Test</h1>
<h2>Simple, drop down &amp; 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" 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 &lt;button&gt;).</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 mix in their styles.
Here's an example:</p>
<style>
.dc {
font-size: x-large !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.Acme *,
.Acme {
background: rgb(96,96,96) !important;
color: white !important;
padding: 10px !important;
}
.Acme:hover *,
.Acme:hover {
background-color: rgb(89,94,111) !important;
color: cyan !important;
}
.Acme:active *,
.Acme:active {
background-color: white !important;
color: black !important;
}
</style>
<div class="box">
<button dojoType="dijit.form.Button" class="Acme" onclick='console.log("short");'>
<div class="dc">short</div>
</button>
<button dojoType="dijit.form.Button" class="Acme" onclick='console.log("longer");'>
<div class="dc">bit longer</div>
</button>
<button dojoType="dijit.form.Button" class="Acme" onclick='console.log("longer yet");'>
<div class="dc">ridiculously long</div>
</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.setDisabled(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>
<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.
dojo.addOnLoad(function(){
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
};
var widget = new dijit.form.DropDownButton(params, document.getElementById("dropdownButtonContainer"));
});
</script>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/form/test_DateTextBox.html
New file
0,0 → 1,140
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test DateTextBox Widget</title>
 
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.small {
width: 3em;
}
.medium {
width: 10em;
}
.long {
width: 20em;
}
.verylong {
width: 700px;
}
 
.noticeMessage {
color:#093669;
font-size:0.95em;
margin-left:0.5em;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
</style>
</head>
 
<body>
<h1 class="testTitle">Test 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" action="" name="example" method="post">
<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">
</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"
promptMessage="mm/dd/yyyy"
onChange="dojo.byId('oc2').value=arguments[0]"
invalidMessage="Invalid date. Use mm/dd/yyyy format." />
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;">
</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>
<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 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>
<button name="button" onclick="displayData(); return false;">view data</button>
<input type="submit" name="submit" />
</div>
</form>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/form/Form.js
New file
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"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/form/test_TimeTextBox.html
New file
0,0 → 1,138
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test TimeTextBox Widget</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dojo.currency");
dojo.require("dojo.date.locale");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.small {
width: 3em;
}
.medium {
width: 10em;
}
.long {
width: 20em;
}
.verylong {
width: 700px;
}
 
.noticeMessage {
color:#093669;
font-size:0.95em;
margin-left:0.5em;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
</style>
</head>
 
<body>
<h1 class="testTitle">Test TimeTextBox Widget</h1>
<!-- to test form submission, you'll need to create an action handler similar to
http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
<form id="form1" action="" name="example" method="post">
 
<div class="dojoTitlePaneLabel">
<label for="q1">Time using local conventions with seconds</label>
<span class="noticeMessage">TimeTextBox class,
Attributes: {formatLength:'medium'}</span>
</div>
<div class="testExample">
<input id="q1" type="text" name="time1" class="medium" value="T17:45:00"
dojoType="dijit.form.TimeTextBox"
constraints="{formatLength:'medium'}"
required="true"
onChange="dojo.byId('oc1').value=arguments[0]"
invalidMessage="Invalid time." />
onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
</div>
 
<div class="dojoTitlePaneLabel">
<label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label>
<span class="noticeMessage">TimeTextBox class,
Attributes: {formatLength:'short'}</span>
</div>
<div class="testExample">
<input id="q2" type="text" name="time1a" class="medium" value="T17:45:00"
dojoType="dijit.form.TimeTextBox"
constraints="{formatLength:'short'}"
required="true"
invalidMessage="" />
</div>
 
<div class="dojoTitlePaneLabel">
<label for="q3"> 12 Hour Time </label>
<span class="noticeMessage">TimeTextBox class,
Attributes: {timePattern:'h:mm:ss a'}</span>
</div>
<div class="testExample">
<input id="q3" type="text" name="time1b" class="medium" value="T17:45:00"
dojoType="dijit.form.TimeTextBox"
constraints="{timePattern:'h:mm:ss a'}"
required="true"
invalidMessage="Invalid time." />
</div>
 
<div class="dojoTitlePaneLabel">
<label for="q4"> 24 Hour Time</label>
<span class="noticeMessage">TimeTextBox class,
Attributes: {timePattern:'HH:mm:ss'}</span>
</div>
<div class="testExample">
<input id="q4" type="text" name="time2" class="medium" value="T17:45:00"
dojoType="dijit.form.TimeTextBox"
constraints="{timePattern:'HH:mm:ss'}"
required="true"
invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
</div>
 
<script>
function displayData() {
var f = document.getElementById("form1");
var s = "";
for (var i = 0; i < f.elements.length; i++) {
var elem = f.elements[i];
if (elem.name == "button") { continue; }
s += elem.name + ": " + elem.value + "\n";
}
alert(s);
}
</script>
 
<div>
<button name="button" onclick="displayData(); return false;">view data</button>
<input type="submit" name="submit" />
</div>
 
</form>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/form/test_InlineEditBox.html
New file
0,0 → 1,194
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inline Edit Box Test</title>
 
<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.InlineEditBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.Slider");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
function myHandler(id,newValue){
console.debug("onChange for id = " + id + ", value: " + newValue);
};
dojo.addOnLoad(function(){
dojo.subscribe("widgetFocus", function(widget){
console.log("focused on widget " + (widget?widget:"nothing"));
});
dojo.subscribe("widgetBlur", function(widget){
console.log("blurred widget " + (widget?widget:"nothing"));
});
dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
});
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
.inlineEdit { background-color: #CCC76A; }
 
/* some style rules on nodes just to test that style gets copied to the edit widget */
p { font-family: cursive; }
h3 { font-family: helvetica; font-style: italic; }
</style>
</head>
<body>
<h1 style="color: red; margin-bottom: 5em;">dijit.form.InlineEditBox is deprecated, use <a href="../test_InlineEditBox.html">dijit.InlineEditBox</a> instead</h1>
<div>
The following tests each show a plain element followed by an editable element.
The plain element and editable element should look the same (font, font-size, block vs. inline) etc.,
and clicking an editable element should bring up an editor with the same attributes
(font, font-size, block vs. inline) as the editable element.
</div>
<hr>
 
<h2>H3</h2>
<div>
The following two h3 tags should be look the same. They are display:block, and the editor should take up the entire
width of the screen.
</div>
 
(before plain h3)
<h3>this is a plain h3, cannot be edited</h3>
(between plain and editable h3)
<h3 id="editable" dojoType="dijit.form.InlineEditBox" onChange="myHandler(this.id,arguments[0])">
<input dojoType="dijit.form.TextBox" value="this is an editable h3 - I trigger the onChange callback on save">
</h3>
(after editable h3)
<hr style="width:100%;">
 
<h2>Inline-block Text (of 400px width)</h2>
<div>
The following section uses inline block text of 400px.
When clicking the editable text it should bring up an editor which is also 400px wide.
</div>
(before plain inline) <fieldset class="dijitInline"><div style="width: 400px;">hello ladies and gentlemen, now is the time for all good men to come to the aid of their country</div></fieldset> (after plain inline)
<br>
(before editable inline)
<fieldset class="dijitInline"><div dojoType="dijit.form.InlineEditBox" onChange="myHandler(this.id,arguments[0])" style="width: 400px;">
<span dojoType="dijit.form.TextBox" value="hello ladies and gentlemen, now is the time for all good men to come to aid of their country"></span>
</div></fieldset>
(after editable inline)
 
<hr style="width:100%;">
<h2>Pararagraph</h2>
(before plain paragraph)
<p>
Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
(before editable paragraph. the editable paragraph has Save/Cancel buttons when open.)
<p id="areaEditable" dojoType="dijit.form.InlineEditBox" autoSave="false">
<textarea dojoType="dijit.form.Textarea">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.</textarea>
</p>
These links will
<a href="#" onClick="dijit.byId('areaEditable').setDisabled(true)">disable</a> /
<a href="#" onClick="dijit.byId('areaEditable').setDisabled(false)">enable</a>
the InlineEditBox above.
<br>
(The following editable paragraph does not have Save/Cancel buttons when open)
<p id="areaEditable_autosave" dojoType="dijit.form.InlineEditBox" autoSave="true">
<textarea dojoType="dijit.form.Textarea">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.</textarea>
</p>
<hr style="width:100%;">
 
<h2>Date text box:</h2>
<span id="backgroundArea" dojoType="dijit.form.InlineEditBox">
<input name="date" value="2005-12-30"
dojoType="dijit.form.DateTextBox"
constraints={datePattern:'MM/dd/yy'}
lang="en-us"
required="true"
promptMessage="mm/dd/yy"
invalidMessage="Invalid date. Use mm/dd/yy format.">
</span>
<hr style="width:100%;">
 
<h2>FilteringSelect:</h2>
<span dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
url="../_data/states.json"></span>
<span id="filteringSelect" dojoType="dijit.form.InlineEditBox" >
<input searchAttr="name" keyAttr="abbreviation" id="setvaluetest" dojoType="dijit.form.FilteringSelect" value="IA"
store="stateStore" name="state1" autoComplete="true" hasDownArrow="false">
</span>
<hr style="width:100%;">
before block<div style="display:block;" id="programmatic"></div>after
<script type="text/javascript">
// See if we can make a widget in script
// do it on load so Safari does not say display is none
dojo.addOnLoad(function(){
var inlineWidget = new dijit.form.InlineEditBox({renderAsHtml: true}, 'programmatic');
var editorWidget = new dijit.form.TextBox({
value:"Click here to edit a block programmatically created inline edit region"
});
editorWidget.domNode.style.width="100%";
inlineWidget.addChild(editorWidget);
inlineWidget.startup(); // scan for editWidget here, not on widget creation
});
 
</script>
<hr style="width:100%;">
<b>Spinner:</b>
<span dojoType="dijit.form.InlineEditBox">
<input dojoType="dijit.form.NumberSpinner"
name="spinner"
value="900"
constraints="{places:0}">
</span>
<!-- InlineEditBox/Slider doesn't work on Firefox but does on IE and Safari
<hr style="width:100%;">
<b>Slider:</b>
<p dojoType="dijit.form.InlineEditBox">
<input dojoType="dijit.form.VerticalSlider"
value="10"
maximum="100"
minimum="0"
showButtons="false"
style="height:100px;width:20px;">
</p>
-->
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/form/test_Textarea.html
New file
0,0 → 1,96
<!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>
<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>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
</style>
 
</head>
<body>
<h2 class="pageSubContentTitle">Test Auto-sizing Textarea Widget</h2>
 
<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 textarea:</label><div name="simpleTextArea" id="simple" dojoType="dijit.form.Textarea" style="width:33%;border:20px solid red;"
onChange="dojo.byId('ocSimple').value=arguments[0]"
>this is a very simple resizable text area</div>
onChange:<textarea id="ocSimple" disabled>not fired yet!</textarea>
<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>
/trunk/api/js/dojo1.0/dijit/tests/form/test_Spinner.html
New file
0,0 → 1,113
<!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>
 
 
<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>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
#integerspinner2 .dojoSpinnerUpArrow {
border-bottom-color: blue;
}
#integerspinner2 .dojoSpinnerDownArrow {
border-top-color: red;
}
#integerspinner2 .dojoSpinnerButton {
background-color: yellow;
}
#integerspinner2 .dojoSpinnerButtonPushed {
background-color: gray;
}
#integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerDownArrow {
border-top-color: blue;
}
#integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerUpArrow {
border-bottom-color: red;
}
.dojoInputFieldValidationNormal#integerspinner2 {
color:blue;
background-color:pink;
}
</style>
</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"
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%): </label>
<input dojoType="dijit.form.NumberSpinner"
style="font-size:20pt;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>
/trunk/api/js/dojo1.0/dijit/tests/widgetsInTemplate.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests.widgetsInTemplate"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests.widgetsInTemplate"] = true;
dojo.provide("dijit.tests.widgetsInTemplate");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests.widgetsInTemplate", dojo.moduleUrl("dijit", "tests/widgetsInTemplate.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/test_Menu.html
New file
0,0 → 1,220
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Menu System 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="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.Menu");
dojo.require("dijit.ColorPalette");
dojo.require("dijit._Calendar");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<script language="Javascript" type="text/javascript">
dojo.addOnLoad(function() {
// create a menu programmatically
function fClick() {alert("clicked!")};
var pMenu = new dijit.Menu({targetNodeIds:["prog_menu"], id:"progMenu"});
pMenu.addChild(new dijit.MenuItem({label:"Programmatic Context Menu", disabled:true}));
pMenu.addChild(new dijit.MenuSeparator());
pMenu.addChild(new dijit.MenuItem({label:"Simple menu item", onClick:fClick}));
pMenu.addChild(new dijit.MenuItem({label:"Another menu item", onClick:fClick}));
pMenu.addChild(new dijit.MenuItem({label:"With an icon", iconClass:"dijitEditorIcon dijitEditorIconCut", onClick:fClick}));
var mItem = new dijit.MenuItem({label:"dojo.event clicking"});
dojo.connect(mItem, "onClick", function(){alert("click! handler created via dojo.connect()")});
pMenu.addChild(mItem);
 
var pSubMenu = new dijit.Menu({parentMenu:pMenu, id:"progSubMenu"});
pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
pMenu.addChild(new dijit.PopupMenuItem({label:"Submenu", popup:pSubMenu, id:"progPopupMenuItem"}));
pMenu.startup();
});
</script>
</head>
<body>
 
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>
<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="alert('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="alert('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="alert('not actually pasting anything, just a test!')">Paste</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu2">
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('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="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem" disabled="true">
<span>Disabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Different popup</span>
<div dojoType="dijit.ColorPalette"></div>
</div>
</div>
 
 
<!--
<div dojoType="dijit.MenuBar">
<div dojoType="dijit.MenuBarItem" submenuId="submenu1">File</div>
<div dojoType="dijit.MenuBarItem" submenuId="submenu">Edit</div>
<div dojoType="dijit.MenuBarItem" disabled="true">View</div>
<div dojoType="dijit.MenuBarItem" submenuId="submenu">Help</div>
<div dojoType="dijit.MenuBarItem" onClick="alert('you clicked a menu bar button');">Click Me</div>
</div>
-->
<div style="padding: 1em">
<h1 class="testTitle">Dijit Menu System Test</h1>
 
<h3>Form</h3>
 
<form>
<input id=input1 value="top-left">
<p style="text-align:right"><input id=input2 value="top-right"></p>
<textarea id=textarea>hello there!</textarea><br>
<select>
<option>check if i</option>
<option>bleed through</option>
<option>on IE6</option>
</select>
<button id=button>push me</button>
 
<div id="prog_menu" style="border:1px solid blue; padding:10px; margin:20px 0;">
This div has a programmatic context menu on it that's different to the page menu.
</div>
 
<div style="height:500px"></div>
<p>(this space intentionally left blank to aid testing with controls
at the bottom of the browser window)</p>
<div style="height:500px"></div>
<input id=input3 value="bottom-left">
<p style="text-align:right"><input id=input4 value="bottom-right"></p>
</form>
 
<p>See also: <a href="form/test_Button.html">form/test_Button</a>
(PopupMenu is used with DropDownButton and ComboButton)</p>
 
<h3>Mouse opening tests</h3>
 
<ul>
<li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li>
<li>Right click on each of the form controls above. Menu should open.</li>
<li>Right click near the righthand window border. Menu should open to the left of the pointer.</li>
<li>Right click near the bottom window border. Menu should open above the pointer.</li>
</ul>
 
 
<h3>Mouse hover tests</h3>
 
<ul>
<li>Hover over the first item with the pointer. Item should highlight and get focus.</li>
<li>Hover over the second (disabled) item. Item should highlight and get focus.</li>
<li>Seperator items should not highlight on hover - no items should highlight in this case.</li>
</ul>
 
 
<h3>Mouse click tests</h3>
 
<ul>
<li>Click on the first menu item. Alert should open with the message "Hello world". The menu should dissapear.</li>
<li>Click on the second menu item (disabled). Should not do anything - focus should remain on the disabled item.</li>
<li>Click anywhere outside the menu. Menu should close. Focus will be set by the browser based on where the user clicks.</li>
</ul>
 
 
<h3>Mouse submenu tests</h3>
 
<ul>
<li>Hover over the "Enabled Submenu" item. Item should highlight and then pop open a submenu after a short (500ms) delay.</li>
<li>Hover over any of the other menu items. Submenu should close immediately and deselect the submenu parent item. The newly hovered item should become selected.</li>
<li>Hover over the "Disabled Submenu" item. Item should highlight, but no submenu should appear.</li>
<li>Clicking on the "Enabled Submenu" item before the submenu has opened (you'll have to be quick!) should immediatley open the submenu.</li>
<li>Clicking on the "Enabled Submenu" item <i>after</i> the submenu has opened should have no effect - the item is still selected and the submenu still open.</li>
<li>Hover over submenu item 1. Should select it - the parent menu item should stay selected also.</li>
<li>Hover over submenu item 2. Should select it - the parent menu item should stay selected also.</li>
</ul>
 
 
<h3>Keyboard opening tests</h3>
 
<ul>
<li>On Windows: press shift-f10 with focus on any of the form controls. Should open the menu.</li>
<li>On Windows: press the context menu key (located on the right of the space bar on North American keyboards) with focus on any of the form controls. Should open the menu.</li>
<li>On Firefox on the Mac: press ctrl-space with focus on any of the form controls. Should open the menu.</li>
</ul>
 
 
<h3>Keyboard closing tests</h3>
 
<ul>
<li>Open the menu.</li>
<li>Press tab. Should close the menu and return focus to where it was before the menu was opened.</li>
<li>Open the menu.</li>
<li>Press escape. Should close the menu and return focus to where it was before the menu was opened.</li>
</ul>
 
 
<h3>Keyboard navigation tests</h3>
 
<ul>
<li>Open the menu.</li>
<li>Pressing up or down arrow should cycle focus through the items in that menu.</li>
<li>Pressing enter or space should invoke the menu item.</li>
<li>Disabled items receive focus but no action is taken upon pressing enter or space.</li>
</ul>
 
 
<h3>Keyboard submenu tests</h3>
 
<ul>
<li>Open the menu.</li>
<li>The first item should become selected.</li>
<li>Press the right arrow key. Nothing should happen.</li>
<li>Press the left arrow key. Nothing should happen.</li>
<li>Press the down arrow until "Enabled Submenu" is selected. The submenu should not appear.</li>
<li>Press enter. The submenu should appear with the first item selected.</li>
<li>Press escape. The submenu should vanish - "Enabled Submenu" should remain selected.</li>
<li>Press the right arrow key. The submenu should appear with the first item selected.</li>
<li>Press the right arrow key. Nothing should happen.</li>
<li>Press the left arrow key. The submenu should close - "Enabled Submenu" should remain selected.</li>
<li>Press the left arrow key. The menu should <i>not</i> close and "Enabled Submenu" should remain selected.</li>
<li>Press escape. The menu should close and focus should be returned to where it was before the menu was opened.</li>
</ul>
 
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_inspector.html
New file
0,0 → 1,60
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit List mini-browser | The Dojo Toolkit</title>
 
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
body, html { width:100%; height:100%; margin:0; padding:0; background:#fff !important; }
</style>
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
 
</head>
<body>
<div dojoType="dojo.data.ItemFileReadStore" jsId="theStore"
url="../tests/_data/dijits.json"></div>
 
<div dojoType="dijit.layout.SplitContainer" sizerWidth="7" style="width:100%; height:100%;">
<div dojoType="dijit.layout.ContentPane" layoutAlign="left">
<div dojoType="dijit.Tree" id="mytree" store="theStore" query="{namespace:'dijit'}"
labelAttr="className" label="Dijits">
<script type="dojo/method" event="onClick" args="item">
var str = "<h1>"+theStore.getLabel(item)+"</h1>";
 
var sum = theStore.getValue(item,'summary');
var des = theStore.getValue(item,'description')
var exp = theStore.getValue(item,'examples')
 
if(sum){ str += "<h2>summary:</h2><p><pre>" + sum + "</pre></p>"; }
if(des){ str += "<h2>details:</h2><p><pre>" + des + "</pre></code></p>"; }
if(exp){ str += "<h2>examples:</h2><p><pre>" + exp + "</pre></code></p>"; }
 
dojo.byId('detailPane').innerHTML = str;
 
</script>
<script type="dojo/method" event="getIconClass" args="item">
return "noteIcon";
</script>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" id="detailPane" style="padding:10px; padding-top:0;">
</div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/test_typematic.html
New file
0,0 → 1,56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Typematic Test</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
</style>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, debugAtAllCosts: true"></script>
<script type="text/javascript">
dojo.require("dijit._base.typematic");
 
var lastCount = 0;
function typematicCallBack(count, node, evt){
var inputNode = dojo.byId('typematicInput');
if (node == inputNode){
key = "a";
}else{
key = "b";
}
if(-1 == count){
console.debug((lastCount+1) + ' ' + key + ' events');
}else{
lastCount = count;
inputNode.value += key;
}
inputNode.focus();
}
dojo.addOnLoad(function(){
var keyNode = dojo.byId('typematicInput');
var mouseNode = dojo.byId('typematicButton');
dijit.typematic.addKeyListener(keyNode,
{
keyCode:dojo.keys.F10,
ctrlKey:true
},
this, typematicCallBack, 200, 200);
dijit.typematic.addMouseListener(mouseNode,
this, typematicCallBack, 0.9, 200);
keyNode.focus(); // make it easier to type
});
</script>
</head>
<body class="tundra">
 
<h2>Dijit typematic tests</h2>
Press and hold the <b>ctrl+F10</b> keys to see a's typed (constant rate) in the input field,<br>
or left-mouse click the button and hold down to see b's typed (increasing rate) in the input field.<br>
<input id="typematicInput" size="500"><button id="typematicButton">to B or not to B</button>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/viewport.html
New file
0,0 → 1,79
<html>
<head>
<title>dijit.getViewport() test</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
html, body { margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: false"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit.dijit");
 
function compute(){
var d = dojo.marginBox(dojo.byId("documentBorder")),
v = dijit.getViewport();
dojo.byId("results").innerHTML +=
"Document is " + d.w + "px x " + d.h + "px" +
", viewport is " + v.w + "px x " + v.h + "px" +
", with scroll offset of (" + v.l + ", " + v.t + ")<br>";
}
function addText(){
dojo.byId("results").innerHTML += "Adding text...<br><br>";
var text="";
for(var i=0;i<100;i++){
text += "<span style='white-space: nowrap'>";
for(var j=0;j<3;j++){ text += "Now is the time for all good men to come to the aid of their country."; }
text += "</span><br>";
}
dojo.byId("documentBorder").innerHTML += text;
}
 
dojo.addOnLoad(function(){
doh.register("dijit._base.manager",
[
function initial(t){
console.log("calling compute");
compute();
console.log("called compute");
var d = dojo.marginBox(dojo.byId("documentBorder")),
v = dijit.getViewport();
doh.t(v.h > d.h);
},
function expand(t){
var v = dijit.getViewport();
addText();
compute();
var v2 = dijit.getViewport();
doh.t(v2.h <= v.h);
doh.t(v2.h+20 >= v.h);
}
]
);
doh.run();
});
 
</script>
</head>
<body>
<div id="documentBorder" style="border: solid red 2px;">
<h1>dijit.getViewport() test</h1>
<div style="padding: 10px; border: solid blue 1px;">padding div</div>
<button onclick="addText(); compute();">add text and compute size</button>
<button onclick="compute();">recompute size</button>
<ol>
<li>check results div below to see that before adding text, document is smaller than viewport
<li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed,
except maybe being a little bit smaller (about 15px) because of the size of the scrollbars
<li>resize browser window and click the "recompute size" button; reported viewport size should change
<li>scroll the window and click "recompute size" to see that the scroll position is taken into effect
</ol>
<div id=results style="border: 5px solid blue;">
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/wai.html
New file
0,0 → 1,115
<html>
<head>
<title>Dijit wai unit test</title>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit.dijit");
 
dojo.addOnLoad(function(){
doh.register("dijit.tests._base.wai",
[
function getWaiRoleOnElementWithNoRole(){
var elem = dojo.byId("no-role-or-states");
doh.assertFalse(dijit.hasWaiRole(elem));
doh.assertEqual("", dijit.getWaiRole(elem));
},
 
function getEmptyWairoleRole(){
var elem = dojo.byId("empty-wairole");
doh.assertTrue(dijit.hasWaiRole(elem));
doh.assertEqual("", dijit.getWaiRole(elem));
},
 
function getWairoleRole(){
var elem = dojo.byId("wairole");
doh.assertTrue(dijit.hasWaiRole(elem));
doh.assertEqual("menuitem", dijit.getWaiRole(elem));
},
 
function getUnprefixedRole(){
var elem = dojo.byId("unprefixed-role");
doh.assertTrue(dijit.hasWaiRole(elem));
doh.assertEqual("menuitem", dijit.getWaiRole(elem));
},
 
function setWaiRole(){
var div = document.createElement("div");
dijit.setWaiRole(div, "menuitem");
if(dojo.isFF && dojo.isFF < 3){
doh.assertEqual("wairole:menuitem",
div.getAttribute("role"));
}else{
doh.assertEqual("menuitem",
div.getAttribute("role"));
}
},
 
function removeWaiRole(){
var div = document.createElement("div");
dijit.setWaiRole(div, "menuitem");
dijit.removeWaiRole(div);
if(div.hasAttribute){
doh.assertFalse(div.hasAttribute("role"));
}else{
doh.assertTrue(div.getAttribute("role") == null
|| div.getAttribute("role") == "");
}
},
 
function getWaiStateOnElementWithNoState(){
var elem = dojo.byId("no-role-or-states");
doh.assertFalse(dijit.hasWaiState(elem, "checked"));
doh.assertEqual("", dijit.getWaiState(elem, "checked"));
},
 
function getWaiState(){
if(dojo.isFF && dojo.isFF < 3){
var div = document.createElement("div");
div.setAttributeNS("http://www.w3.org/2005/07/aaa",
"aaa:checked", "true");
doh.assertTrue(dijit.hasWaiState(div, "checked"));
doh.assertEqual("true",
dijit.getWaiState(div, "checked"));
}else{
var elem = dojo.byId("checked");
doh.assertTrue(dijit.hasWaiState(elem, "checked"));
doh.assertEqual("true",
dijit.getWaiState(elem, "checked"));
}
},
 
function setWaiState(){
var div = document.createElement("div");
dijit.setWaiState(div, "checked", "true");
if(dojo.isFF && dojo.isFF < 3){
doh.assertEqual("true",
div.getAttributeNS("http://www.w3.org/2005/07/aaa",
"checked"));
}else{
doh.assertEqual("true",
div.getAttribute("aria-checked"));
}
},
 
function removeWaiState(){
var div = document.createElement("div");
dijit.setWaiState(div, "checked", "true");
dijit.removeWaiState(div, "checked");
doh.assertEqual("", dijit.getWaiState(div, "checked"));
}
]
);
doh.run();
});
</script>
</head>
<body>
<div id="no-role-or-states"></div>
<div id="empty-wairole" role="wairole:"></div>
<div id="wairole" role="wairole:menuitem"></div>
<div id="unprefixed-role" role="menuitem"></div>
<div id="checked" aria-checked="true"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/manager.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests._base.manager"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests._base.manager"] = true;
dojo.provide("dijit.tests._base.manager");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests._base.manager", dojo.moduleUrl("dijit", "tests/_base/manager.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/_base/test_focusWidget.html
New file
0,0 → 1,130
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dijit.focus Test</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
</style>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dijit.layout.ContentPane");
 
var queue=[];
var animation;
function animateBorderColor(widget, color, startWidth, endWidth){
if(animation){
queue.push(arguments);
return;
}
with(widget.domNode.style){
borderStyle="solid";
outlineStyle="solid";
 
}
animation = dojo.animateProperty({
node: widget.domNode,
duration: 400,
properties: {
// depending on browser and node type, sometimes border or outline is ineffective.
// doing both seems to work in all cases though (for at least one of them)
borderColor: { end: color },
borderWidth: { start: startWidth, end: endWidth },
outlineColor: { end: color },
outlineWidth: { start: startWidth, end: endWidth }
},
onEnd: function(){
animation=null;
if(queue.length){
animateBorderColor.apply(null, queue.shift());
}
}
});
animation.play();
}
 
dojo.addOnLoad(function(){
dojo.subscribe("widgetFocus", function(widget){
console.log("focused on widget " + (widget?widget:"nothing"));
animateBorderColor(widget, "#ff0000", 2, 5);
});
dojo.subscribe("widgetBlur", function(widget){
console.log("blurred widget " + (widget?widget:"nothing"));
animateBorderColor(widget, "#0000ff", 5, 2);
});
dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
});
</script>
<style>
div, fieldset, form, input {
padding: 10px;
margin: 10px;
border: 2px solid blue;
}
</style>
</head>
<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra">
 
<h3>Widget Focus Test</h3>
<p>
This is for testing code to detect onBlur and onFocus on a widget level.<br>
Focused widgets' borders will turn red.<br>
Also, heck the console log for focus and blur events on widgets.
</p>
 
<label for="fieldset1">a form ContentPane widget:</label><br>
<form dojoType="dijit.layout.ContentPane">
<label for="first">simple input: </label><input id=first><br>
 
<label for="fieldset1">a fieldset ContentPane widget:</label><br>
<fieldset id=fieldset1 dojoType="dijit.layout.ContentPane">
<label for="select">a ComboBox widget:</label>
<select id=select dojoType="dijit.form.ComboBox">
<option>this</option>
<option>is</option>
<option>a</option>
<option>list</option>
</select>
<label for="plain">a plain input:</label>
<input id=plain value=plain>
</fieldset>
<br>
<label for="fieldset1">another fieldset ContentPane:</label><br>
<fieldset id=fieldset2 dojoType="dijit.layout.ContentPane">
<label for="date">a DateTextBox widget:</label>
<input id=date dojoType="dijit.form.DateTextBox"><br>
 
<label for="textarea">a plain textarea:</label><br>
<textarea id=textarea>hello there!</textarea><br>
 
<label for="spinner">a Spinner widget:</label>
<input id=spinner dojoType="dijit.form.NumberSpinner" value=100><br>
 
<label for="button">a Combobutton widget:</label>
<div id=button dojoType="dijit.form.ComboButton" tabIndex=0>
<span>push me</span>
<div id=menu dojoType="dijit.Menu">
<div id=mi1 dojoType="dijit.MenuItem">menu item 1</div>
<div id=mi2 dojoType="dijit.MenuItem">menu item 2</div>
<div id=popupMenuItem dojoType="dijit.PopupMenuItem">
<span>submenu</span>
<div id=submenu dojoType="dijit.Menu">
<div id=smi1 dojoType="dijit.MenuItem">submenu item 1</div>
<div id=smi2 dojoType="dijit.MenuItem">submenu item 2</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/viewport.js
New file
0,0 → 1,10
if(!dojo._hasResource["dijit.tests._base.viewport"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests._base.viewport"] = true;
dojo.provide("dijit.tests._base.viewport");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests._base.viewport", dojo.moduleUrl("dijit", "tests/_base/viewport.html"));
doh.registerUrl("dijit.tests._base.viewportStrict", dojo.moduleUrl("dijit", "tests/_base/viewportStrict.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/_base/viewportStrict.html
New file
0,0 → 1,81
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dijit.getViewport() test</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
html, body { margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: false"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit.dijit");
 
function compute(){
var d = dojo.marginBox(dojo.byId("documentBorder")),
v = dijit.getViewport();
dojo.byId("results").innerHTML +=
"Document is " + d.w + "px x " + d.h + "px" +
", viewport is " + v.w + "px x " + v.h + "px" +
", with scroll offset of (" + v.l + ", " + v.t + ")<br>";
}
function addText(){
dojo.byId("results").innerHTML += "Adding text...<br><br>";
var text="";
for(var i=0;i<100;i++){
text += "<span style='white-space: nowrap'>";
for(var j=0;j<3;j++){ text += "Now is the time for all good men to come to the aid of their country."; }
text += "</span><br>";
}
dojo.byId("documentBorder").innerHTML += text;
}
 
dojo.addOnLoad(function(){
doh.register("dijit._base.manager",
[
function initial(t){
console.log("calling compute");
compute();
console.log("called compute");
var d = dojo.marginBox(dojo.byId("documentBorder")),
v = dijit.getViewport();
doh.t(v.h > d.h);
},
function expand(t){
var v = dijit.getViewport();
addText();
compute();
var v2 = dijit.getViewport();
doh.t(v2.h <= v.h);
doh.t(v2.h+20 >= v.h);
}
]
);
doh.run();
});
 
</script>
</head>
<body>
<div id="documentBorder" style="border: solid red 2px;">
<h1>dijit.getViewport() test</h1>
<div style="padding: 10px; border: solid blue 1px;">padding div</div>
<button onclick="addText(); compute();">add text and compute size</button>
<button onclick="compute();">recompute size</button>
<ol>
<li>check results div below to see that before adding text, document is smaller than viewport
<li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed,
except maybe being a little bit smaller (about 15px) because of the size of the scrollbars
<li>resize browser window and click the "recompute size" button; reported viewport size should change
<li>scroll the window and click "recompute size" to see that the scroll position is taken into effect
</ol>
<div id=results style="border: 5px solid blue;">
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/wai.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests._base.wai"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests._base.wai"] = true;
dojo.provide("dijit.tests._base.wai");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests._base.wai", dojo.moduleUrl("dijit", "tests/_base/wai.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/_base/test_FocusManager.html
New file
0,0 → 1,45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dijit.focus Test</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
</style>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true"></script>
<script type="text/javascript">
dojo.require("dijit._base.focus");
var savedFocus;
dojo.addOnLoad(function(){
fakeWidget = { domNode: dojo.byId("save") };
dojo.subscribe("focusNode", function(node){ console.log("focused on " + (node?(node.id||node.tagName):"nothing"));});
});
function save(){
console.debug("save function");
savedFocus = dijit.getFocus(fakeWidget);
}
function restore(){
dijit.focus(savedFocus);
}
</script>
</head>
<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra">
 
<h3>Focus/Selection Save/Restore Test</h3>
<p>This is for testing whether focus and selection are restored by the focus manager</p>
<form style="border: 2px solid blue;">
<input id=input1 value=tom><br>
<input id=input2 value=jones><br>
<textarea id=textarea>hello there!</textarea><br>
<button id=button>push me</button>
</form>
 
<button id="save" onclick="save();">Save focus/selection state</button>
<button onclick="restore();">Restore focus/selection state</button>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/manager.html
New file
0,0 → 1,88
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit manager 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("dijit.dijit");
 
dojo.declare("foo", dijit._Widget, {
name: "",
attr1: 0,
attr2: 0
});
 
dojo.declare("bar", dijit._Widget, {
name: "",
attr1: 0,
attr2: 0
});
 
dojo.addOnLoad(function(){
doh.register("dijit._base.manager",
[
function forEachTest(t){
var names=[];
dijit.registry.forEach(function(widget){ names.push(widget.name); });
t.is(names.join(" "), "bob is your uncle");
},
function filterTest(t){
var names=[];
dijit.registry.
filter(function(widget){ return widget.attr1==10; }).
forEach(function(widget){ names.push(widget.name); });
t.is(names.join(" "), "bob uncle");
},
function byId(t){
t.is(dijit.byId("three").name, "your");
},
function byClass(t){
var names=[];
dijit.registry.
byClass("bar").
forEach(function(widget){ names.push(widget.name); });
t.is(names.join(" "), "your uncle");
},
function deleteTest(t){
var names=[];
dijit.byId("two").destroy();
dijit.byId("four").destroy();
var names=[];
dijit.registry.forEach(function(widget){ names.push(widget.name); });
t.is(names.join(" "), "bob your");
},
function getEnclosingWidgetTest(t){
t.is(dijit.getEnclosingWidget(dojo.byId("not-a-widget")), null);
t.is(dijit.getEnclosingWidget(dojo.byId("three")).name, "your");
t.is(dijit.getEnclosingWidget(dojo.byId("three.one")).name, "your");
t.is(dijit.getEnclosingWidget(dojo.byId("three.one.one")).name, "your");
}
]
);
doh.run();
});
 
</script>
</head>
<body>
<h1>Dijit Manager Unit Test</h1>
<div dojoType="foo" id="one" name="bob" attr1="10" attr2="10"></div>
<div dojoType="foo" id="two" name="is" attr1="5" attr2="10"></div>
<div dojoType="bar" id="three" name="your" attr1="5" attr2="5">
<div id="three.one">
<div id="three.one.one"></div>
</div>
</div>
<div dojoType="bar" id="four" name="uncle" attr1="10" attr2="5"></div>
<div id="not-a-widget"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_base/test_placeStrict.html
New file
0,0 → 1,400
<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>dijit.place tests</title>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, extraLocale: ['de-de', 'en-us']"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
</script>
<script>
dojo.addOnLoad(function(){
var vp = dijit.getViewport();
alert("viewport w="+vp.w + ", h=" + vp.h);
});
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
body {
padding: 1em;
}
.formQuestion {
background-color:#d0e3f5;
padding:0.3em;
font-weight:900;
font-family:Verdana, Arial, sans-serif;
font-size:0.8em;
color:#5a5a5a;
}
.formAnswer {
background-color:#f5eede;
padding:0.3em;
margin-bottom:1em;
}
.pageSubContentTitle {
color:#8e8e8e;
font-size:1em;
font-family:Verdana, Arial, sans-serif;
margin-bottom:0.75em;
}
.small {
width: 2.5em;
}
.medium {
width: 10em;
}
.long {
width: 20em;
}
 
.dojoValidationTextBoxMessage {
display: inline;
margin-left: 1em;
font-weight: bold;
font-style: italic;
font-family: Arial, Verdana, sans-serif;
color: #f66;
font-size: 0.9em;
}
 
.noticeMessage {
font-weight: normal;
font-family:Arial, Verdana, sans-serif;
color:#663;
font-size:0.9em;
}
</style>
</head>
 
<body class=tundra>
<h2 class="pageSubContentTitle">Test dijit.place</h2>
<p>Currently this just tests getViewport(). Change the size of your browser window and then reload,
and see if it reports the browser window size correctly.<br>
<p>All the text below is just filler text...<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">
 
<div class="formQuestion">
<span class="emphasize"><label for="q01">First Name: </label></span>
<span class="noticeMessage"> TextBox class, <b>tabIndex=2</b>, Attributes: {trim: true, ucFirst: true, class: 'medium'}, First letter of each word is upper case.</span>
</div>
<div class="formAnswer">
<input id="q01" type="text" name="firstname" value="testing testing" class="medium" tabIndex=2
dojoType="dijit.form.TextBox"
trim="true"
ucfirst="true" />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q02">Last Name: </label></span>
<span class="noticeMessage"> TextBox class, Attributes: {trim: true, uppercase: true, class: 'medium'}, all letters converted to upper case. </span>
</div>
<div class="formAnswer">
<input id="q02" type="text" name="lastname" value="testing testing" class="medium"
dojoType="dijit.form.TextBox"
trim="true"
uppercase="true" />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q03">Age: </label></span>
<span class="noticeMessage"> TextBox class, <b>tabIndex=1</b>, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted.</span>
</div>
<div class="formAnswer">
<input id="q03" type="text" name="age" value="38" class="small" tabIndex=1
dojoType="dijit.form.NumberTextBox"
promptMessage="(optional) Enter an age between 0 and 120"
constraints={places:0,min:0,max:120}
onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);"
digit="true"
trim="true"
/>
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q04">Occupation: </label></span>
<span class="noticeMessage">ValidationTextBox class,
Attributes: {lowercase: true, required: true}. Displays a prompt message if field is missing. </span>
</div>
<div class="formAnswer">
<input id="q04" type="text" name="occupation" class="medium"
dojoType="dijit.form.ValidationTextBox"
lowercase="true"
required="true"
promptMessage="Enter an occupation" />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q05">Elevation: </label></span>
<span class="noticeMessage">IntegerTextBox class,
Attributes: {required: true, min:-20000, max:+20000 }, Enter feet above sea level with a sign.</span>
</div>
<div class="formAnswer">
<input id="q05" class="medium"/>
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q08">Annual Income: </label></span>
<span class="noticeMessage">CurrencyTextBox class,
Attributes: {fractional: true}. Enter whole and cents. Currency symbol is optional.</span>
</div>
<div class="formAnswer">
<input id="q08" type="text" name="income1" class="medium" value="54775.53"
dojoType="dijit.form.CurrencyTextBox"
required="true"
currency="USD"
invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" />USD
</div>
 
<div class="formAnswer">
<input id="q08eur" type="text" name="income2" class="medium" value="54775.53"
dojoType="dijit.form.CurrencyTextBox"
required="true"
currency="EUR"
invalidMessage="Invalid amount. Include euro sign, commas, and cents. Example: &#x20ac;12,000.00" />EUR
</div>
<!--
<div class="formQuestion">
<span class="emphasize"><label for="q08a">Annual Income: </label></span>
<span class="noticeMessage">Old regexp currency textbox,
Attributes: {fractional: true}. Enter dollars and cents.</span>
</div>
<div class="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q09">IPv4 Address: </label></span>
<span class="noticeMessage">IpAddressTextBox class,
Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span>
</div>
<div class="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q10"> IPv6 Address: </label></span>
<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="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q11"> URL: </label></span>
<span class="noticeMessage">UrlTextBox class,
Attributes: {required: true, trim: true, scheme: true}. </span>
</div>
<div class="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q12"> Email Address </label></span>
<span class="noticeMessage">EmailTextBox class,
Attributes: {required: true, trim: true}. </span>
</div>
<div class="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q13"> Email Address List </label></span>
<span class="noticeMessage">EmailListTextBox class,
Attributes: {required: true, trim: true}. </span>
</div>
<div class="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q14"> Date (American format) </label></span>
<span class="noticeMessage">DateTextBox class,
Attributes: {locale: "en-us", required: true}. Works for leap years</span>
</div>
<div class="formAnswer">
<input id="q14" type="text" name="date1" class="medium" value="2005-12-30"
dojoType="dijit.form.DateTextBox"
constraints={locale:'en-us'}
required="true"
promptMessage="mm/dd/yyyy"
invalidMessage="Invalid date. Use mm/dd/yyyy format." />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q15"> Date (German format) </label></span>
<span class="noticeMessage">DateTextBox class,
Attributes: {locale: "de-de", min:2006-01-01, max:2006-12-31}. Works for leap years</span>
</div>
<div class="formAnswer">
<input id="q15" class="medium"/>
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q16"> 12 Hour Time </label></span>
<span class="noticeMessage">TimeTextBox class,
Attributes: {formatLength: "medium", required: true, trim: true}</span>
</div>
<div class="formAnswer">
<input id="q16" type="text" name="time1" class="medium" value="5:45:00 pm"
dojoType="dijit.form.ValidationTextBox"
validator="dojo.date.local.parse"
constraints={formatLength:'medium',selector:'time'}
trim="true"
required="true"
invalidMessage="Invalid time." />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q17"> 24 Hour Time</label></span>
<span class="noticeMessage">TimeTextBox class,
Attributes: {displayFormat:"HH:mm:ss", required: true, trim: true}</span>
</div>
<div class="formAnswer">
<input id="q17" type="text" name="time2" class="medium" value="17:45:00"
dojoType="dijit.form.ValidationTextBox"
validator="dojo.date.local.parse"
constraints={formatLength:'short',selector:'time',timePattern:'HH:mm:ss'}
trim="true"
required="true"
invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours." />
</div>
 
<!--
<div class="formQuestion">
<span class="emphasize"><label for="q18"> US State 2 letter abbr. </label></span>
<span class="noticeMessage">UsStateTextBox class,
Attributes: {required: true, trim: true, uppercase: true}</span>
</div>
<div class="formAnswer">
<input id="q18" type="text" name="state" class="small" value="CA"
dojoType="dijit.form.ValidationTextBox"
regExpGen="dojo.regexp.us.state"
constraints={allowTerritories:false}
trim="true"
uppercase="true"
required="true"
invalidMessage="Invalid US state abbr." />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q19"> US Zip Code </label></span>
<span class="noticeMessage">UsZipTextBox class,
Attributes: {required: true, trim: true} Five digit Zip code or 5 + 4.</span>
</div>
<div class="formAnswer">
<input id="q19" type="text" name="zip" class="medium" value="98225-1649"
dojoType="dijit.form.ValidationTextBox"
validator="dojo.validate.us.isZipCode"
trim="true"
required="true"
invalidMessage="Invalid US Zip Code." />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q20"> US Social Security Number </label></span>
<span class="noticeMessage">UsSocialSecurityNumberTextBox class,
Attributes: {required: true, trim: true} </span>
</div>
<div class="formAnswer">
<input id="q20" type="text" name="ssn" class="medium" value="123-45-6789"
dojoType="dijit.form.ValidationTextBox"
validator="dojo.validate.us.isSocialSecurityNumber"
trim="true"
required="true"
invalidMessage="Invalid US Social Security Number." />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="q21"> 10-digit US Phone Number </label></span>
<span class="noticeMessage">UsPhoneNumberTextBox class,
Attributes: {required: true, trim: true} </span>
</div>
<div class="formAnswer">
<input id="q21" type="text" name="phone" class="medium" value="(123) 456-7890"
dojoType="dijit.form.ValidationTextBox"
validator="dojo.validate.us.isPhoneNumber"
trim="true"
required="true"
invalidMessage="Invalid US Phone Number." />
</div>
-->
<div class="formQuestion">
<span class="emphasize"><label for="q22"> Regular Expression </label></span>
<span class="noticeMessage">RegexpTextBox class,
Attributes: {required: true} </span>
</div>
<div class="formAnswer">
<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="formQuestion">
<span class="emphasize"><label for="q23"> Password </label></span>
<span class="noticeMessage">(just a test that type attribute is obeyed) </span>
</div>
<div class="formAnswer">
<input id="q23" type="password" name="password" class="medium"
dojoType="dijit.form.TextBox" />
</div>
 
<div class="formQuestion">
<span class="emphasize"><label for="ticket1651">Trac ticket 1651: </label></span>
<span class="noticeMessage">value: null should show up as empty</span>
</div>
<div class="formAnswer">
<input id="ticket1651" class="medium" value="not null"/>
</div>
 
<button name="button" onclick="displayData(); return false;">view data</button>
<input type="submit" name="submit" />
</form>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/ondijitclick.html
New file
0,0 → 1,95
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Test Dijit Internal Event: "ondijitclick"</title>
 
<script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit._Widget");
dojo.require("dojo.parser");
 
dojo.declare("dijit.WidgetWithOndijitclick",
dijit._Widget,
{
clickCount: 0,
_onClick: function() {
this.clickCount++;
},
postCreate: function() {
this.connect(this.domNode, "ondijitclick", "_onClick");
}
}
);
 
dojo.addOnLoad(function(){
doh.register("ondijitclick",
[
{
name: "ondijitclick fires once on a space-key-up",
runTest: function(t){
var w = dijit.byId("widget1");
if (dojo.isSafari){ // safari has error
this.name += " * SKIPPED *";
return;
}
 
// simulate space up
if (document.createEvent){
var e = document.createEvent("KeyboardEvent");
e.initKeyEvent("keyup",true,true,null,false,false,false,false,32,0);
w.domNode.focus();
w.clickCount = 0;
w.domNode.dispatchEvent(e);
t.is(1, w.clickCount);
}
}
},
{
name: "ondijitclick fires once on an enter-key-down",
runTest: function(t){
var w = dijit.byId("widget1");
if (dojo.isSafari){ // safari has error
this.name += " * SKIPPED *";
return;
}
 
// simulate enter down
if (document.createEvent && !dojo.isSafari){
var e = document.createEvent("KeyboardEvent");
e.initKeyEvent("keydown",true,true,null,false,false,false,false,13,0);
w.domNode.focus();
w.clickCount = 0;
w.domNode.dispatchEvent(e);
t.is(1, w.clickCount);
}
}
},
{
name: "ondijitclick fires once on a mouse click",
runTest: function(t){
var w = dijit.byId("widget1");
 
// simulate enter up
if (document.createEvent){
var e = document.createEvent("MouseEvents");
e.initMouseEvent('click', true, true, document.defaultView, 1, 0, 0, 3, 3, false, false, false, false, 0, w.domNode);
w.clickCount = 0;
w.domNode.dispatchEvent(e);
t.is(1, w.clickCount);
}
}
}
]
);
doh.run();
});
 
</script>
</head>
<body class="tundra">
<div id="widget1" dojoType="dijit.WidgetWithOndijitclick"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_programaticTest.html
New file
0,0 → 1,109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit raw programatic test suite | The Dojo Toolkit</title>
 
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
body, html { width:100%; height:100%; margin:0; padding:0; background:#fff !important; }
</style>
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.dijit-all");
 
var randomParams = function(){
// need better params to test passing
return { "length" : 20 };
};
 
var inspectClass = function(fullClassName){
var newDijit, newDijitDom, newDijitParam = null;
var createdWidgets = [];
className = eval(fullClassName); //
 
// just try to make the class:
try{
newDijit = new className({});
createdWidgets.push(newDijit);
}catch(e){
console.warn('new only: ',fullClassName,e);
}
 
// try starting this widget
try{
if (newDijit && newDijit.startup){ newDijit.startup(); }
}catch(e){
console.warn('call startup: ',fullClassName,e);
}
 
// try with a div in the dom
try{
var tmpDiv = dojo.body().appendChild(document.createElement('div'));
newDijitDom = new className({},tmpDiv);
createdWidgets.push(newDijitDom);
}catch(e){
console.warn('attached to div: ',fullClassName,e);
}
 
// lets pass random parameters
try{
var tmpDiv = dojo.body().appendChild(document.createElement('div'));
newDijitParam = new className(randomParams(),tmpDiv);
createdWidgets.push(newDijitParam);
}catch(e){
console.warn('random param test: ',fullClassName,e);
}
// add more tests ...
 
// cleanup after ourselves
dojo.forEach(createdWidgets,function(byeWidget){
try{
if(byeWidget.destroy){ byeWidget.destroy(); }
}catch(e){
console.warn('destroying: ',byeWidget.declaredClass,e,byeWidget);
}
});
 
};
 
var storeError = function(e,request){
console.warn(e,request);
};
var storeReady = function(items,request){
dojo.forEach(items,function(item){
var testClass = theStore.getValue(item,"className");
try{
inspectClass(testClass);
}catch(e){
console.warn(e);
}
});
};
 
var init = function(){
var request = {
query: { },
onComplete: storeReady,
onError: storeError
};
theStore.fetch(request);
};
dojo.addOnLoad(init);
 
</script>
 
</head>
<body>
<div dojoType="dojo.data.ItemFileReadStore" jsId="theStore"
url="../tests/_data/dijits.json"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/test_Calendar.html
New file
0,0 → 1,44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Calendar 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="parseOnLoad: true, isDebug: true, extraLocale: ['en-us', 'ar-sy', 'es-es', 'zh-cn']"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit._Calendar");
dojo.require("dojo.date.locale");
dojo.require("dojo.parser"); // scan page for widgets
 
function myHandler(id,newValue){
console.debug("onChange for id = " + id + ", value: " + newValue);
}
</script>
</head>
<body>
<h1 class="testTitle">Dijit Calendar Test</h1>
 
before
<input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="en-us">
<input id="calendar2" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="es-es">
<input id="calendar3" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="zh-cn">
<input id="calendar4" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="ar-sy">
after
<p>
<a href="#"
onClick="for(var i=1; i!=5; i++){
var c = dijit.byId('calendar'+i);
c.isDisabledDate=dojo.date.locale.isWeekend;
c._populateGrid();
}
">disable weekends</a>
</p>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_Templated.html
New file
0,0 → 1,164
<html>
<head>
<title>_Templated tests</title>
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
 
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
 
function getOuterHTML(/*DomNode*/ node){
var wrapper = dojo.doc.createElement("div");
wrapper.appendChild(node);
return wrapper.innerHTML.toLowerCase(); // IE prints <BUTTON> rather than <button>; normalize it.
}
 
dojo.addOnLoad(function(){
// Template with no variables (should be cached as a DOM tree)
dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], {
attributeMap: {},
id: "test1",
templateString: "<button><span>hello &gt; world</span></button>"
});
 
// Template with variables
dojo.declare("VariableTemplate", [dijit._Widget, dijit._Templated], {
attributeMap: {},
id: "test2",
num: 5,
text: "hello ><\"' world",
 
templateString: "<button><span num=\"${num}\">${text}</span></button>"
});
 
// Template that starts with special node (has to be constructed inside a <tbody>)
dojo.declare("TableRowTemplate", [dijit._Widget, dijit._Templated], {
attributeMap: {},
id: "test3",
text: "bar",
templateString: "<tr><td>${text}</td></tr>"
});
 
// Illegal subsitition variable name
dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._Templated], {
templateString: "<tr><td>${fake}</td></tr>"
});
 
// dojoAttachPoint
dojo.declare("AttachPoint", [dijit._Widget, dijit._Templated], {
attributeMap: {foo: "", style: "", bar: "buttonNode"},
templateString: "<div style='border: 1px solid red'>" +
"<button dojoAttachPoint='buttonNode,focusNode'>hi</button>" +
'<span><input dojoAttachPoint="inputNode" value="input"></span>' +
"<span dojoAttachPoint='containerNode'></span>" +
"</div>"
});
 
// dojoAttachEvent
dojo.declare("AttachEvent", [dijit._Widget, dijit._Templated], {
click: function(){ this.clickCalled=true; },
onfocus: function(){ this.focusCalled=true; },
focus2: function(){ this.focus2Called=true; },
templateString: "<table style='border: 1px solid blue'><tr>" +
"<td><button dojoAttachPoint='left' dojoAttachEvent='onclick: click, onfocus'>left</button></td>" +
"<td><button dojoAttachPoint='right' dojoAttachEvent='onclick: click, onfocus: focus2'>right</button></td>" +
"</tr></table>"
});
 
// TODO:
// TemplatePath
 
var testW;
doh.register("dijit.tests._Templated.html",
[
function simple(t){
var widget=new SimpleTemplate();
var wrapper=dojo.byId("simpleWrapper");
wrapper.appendChild(widget.domNode);
t.is('<button widgetid=\"test1\"><span>hello &gt; world</span></button>', wrapper.innerHTML.toLowerCase());
},
function variables(t){
var widget=new VariableTemplate();
var wrapper=dojo.byId("variables1Wrapper");
wrapper.appendChild(widget.domNode);
t.is('<button widgetid=\"test2\"><span num="5">hello &gt;&lt;"\' world</span></button>', wrapper.innerHTML.toLowerCase());
},
 
function variables2(t){
var widget = new VariableTemplate({id: "myid", num: -5, text: ""});
var wrapper=dojo.byId("variables2Wrapper");
wrapper.appendChild(widget.domNode);
t.is('<button widgetid=\"myid\"><span num="-5"></span></button>', wrapper.innerHTML.toLowerCase());
},
function table(t){
var widget=new TableRowTemplate({text: "hello"});
var wrapper = dojo.byId("trWrapper");
wrapper.appendChild(widget.domNode);
var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, "");
t.is('<tr widgetid="test3"><td>hello</td></tr>', actual);
},
function illegal(t){
var hadException=false;
try{
var widget=new IllegalSubstitution();
}catch(e){
console.log(e);
hadException=true;
}
t.t(hadException);
},
function attachPoint(t){
var widget=new AttachPoint();
var wrapper = dojo.byId("attachPointWrapper");
wrapper.appendChild(widget.domNode);
t.is(widget.containerNode.tagName.toLowerCase(), "span");
t.is(widget.buttonNode.tagName.toLowerCase(), "button");
t.is(widget.focusNode.tagName.toLowerCase(), "button");
t.is(widget.inputNode.tagName.toLowerCase(), "input");
},
function attributeMap(t){
var widget=new AttachPoint({foo:"value1", bar:"value2", style:"color: blue"});
var wrapper = dojo.byId("attributeMapWrapper");
wrapper.appendChild(widget.domNode);
t.is("value1", widget.domNode.getAttribute("foo"));
t.is("value2", widget.buttonNode.getAttribute("bar"));
// TODO: this is() check is unreliable, IE returns a string like
// border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; color: blue; border-bottom: red 1px solid
// t.is("border: 1px solid red; color: blue;", widget.domNode.style.cssText.toLowerCase());
},
function attachEvent(t){
var deferred = new doh.Deferred();
var widget=new AttachEvent();
var wrapper = dojo.byId("attachEventWrapper");
wrapper.appendChild(widget.domNode);
widget.left.focus();
widget.right.focus();
setTimeout(function(){
t.t(widget.focusCalled);
t.t(widget.focus2Called);
deferred.callback(true);
}, 0);
return deferred;
}
]
);
doh.run();
});
</script>
<style type="text/css">
@import "../themes/tundra/tundra.css";
</style>
</head>
<body>
<h1>_Templated test</h1>
<div id="simpleWrapper"></div>
<div id="variables1Wrapper"></div>
<div id="variables2Wrapper"></div>
<table><tbody id="trWrapper"></tbody></table>
<div id="attachPointWrapper"></div>
<div id="attributeMapWrapper"></div>
<div id="attachEventWrapper"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/ondijitclick.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests.ondijitclick"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests.ondijitclick"] = true;
dojo.provide("dijit.tests.ondijitclick");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests.ondijitclick", dojo.moduleUrl("dijit", "tests/ondijitclick.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/test.html
New file
0,0 → 1,37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>widget infrastructure test</title>
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="isDebug: true, debugAtAllCosts: true"></script>
 
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
 
<style type="text/css">
 
@import "../../dojo/resources/dojo.css";
@import "../themes/tundra/tundra.css";
@import "css/dijitTests.css";
 
body { padding: 5em; }
</style>
</head>
 
<body class="tundra">
 
<button id="b1" style="background: yellow;">button #1</button>
<button id="b2" style="background: orange;">button #2</button>
<button id="b3" style="background: violet;">button #3</button>
<script>
for(var i=1; i<=3; i++){
var node = dojo.byId("b"+i);
var myButton = new dijit.form.Button(null, node);
}
</script>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/test_TitlePane.html
New file
0,0 → 1,98
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TitlePane Test</title>
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.TitlePane");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
// widgets used inside subpage loaded via href=
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ComboBox");
 
function randomMessageId(){
return Math.floor(Math.random() * 3) + 3;
}
</script>
 
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
</style>
</head>
<body>
<h1 class="testTitle">Dijit TitlePane Test</h1>
 
<h1>Test #1: plain title pane, width=300px</h1>
<div dojoType="dijit.TitlePane" title="Title Pane #1" style="width: 300px;">
Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</div>
 
<h1>Test #2: title pane with form, width=300px</h1>
 
<div dojoType="dijit.TitlePane" title="Title Pane #2" id="pane_2" style="width: 300px;">
<form>
Age: <input><br>
Discount card <input type=checkbox><br>
<button>Submit</button><br>
</form>
</div>
<br>
 
<h1>Test #3: initially closed pane</h1>
<div dojoType="dijit.TitlePane" title="Initially closed pane" open="false" width="200">
<form>
<title for="age">Age: </title><input id="age"><br>
<title for="discount">Discount card </title><input type=checkbox id="discount"><br>
<button>Submit</button><br>
</form>
</div>
 
<h1>Test #4: title pane with href (initially closed)</h1>
<p>The pane should open to "Loading..." message and then 2 seconds later it should slide open more to show loaded data.</p>
<div dojoType="dijit.TitlePane" duration=1000 title="Pane from href" href="layout/getResponse.php?delay=3000&messId=3" open="false">
Loading...
</div>
 
<h1>Test #5: title pane with href (initially closed)</h1>
<p>The pane should start to open to "Loading..." but halfway through href data will be loaded, and it should expand correctly.</p>
<div dojoType="dijit.TitlePane" duration=1000 title="Pane from href" href="layout/getResponse.php?delay=500&messId=3" open="false">
Loading...
</div>
 
<h1>Test #6: nested title pane</h1>
<div dojoType="dijit.TitlePane" title="Outer pane" width="300">
<p>This is a title pane, containing another title pane ...
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus pulvinar orci, sed vestibulum urna sem ut pede.
More Ipsum...
 
<div dojoType="dijit.TitlePane" title="Inner pane" width="250">
<p>And this is the inner title pane...
<p>Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
 
<p>And this is the closing line for the outer title pane.
</div>
 
<table style="border: solid blue 2px; margin-top: 1em;">
<tr>
<td>
Here's some text below the title panes (to make sure that closing a title pane releases the space that the content was taking up)
</td>
</tr>
</table>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/test_Declaration.html
New file
0,0 → 1,66
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Toolkit - Declaration test</title>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../themes/tundra/tundra.css";
@import "css/dijitTests.css";
</style>
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dijit.Declaration");
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body class="tundra">
<h3>Simple macro:</h3>
<p>(Check to make sure that links contain employee number)
<div dojoType="dijit.Declaration" widgetClass="Employee" defaults="{ empid: 123, name: '' }">
<span>${name}</span>
<a href="update.php?id=${empid}">update</a>
<a href="delete.php?id=${empid}">delete</a>
</div>
<div dojoType="Employee" empid="100" name="Alan Allen"></div>
<div dojoType="Employee" empid="101" name="Bob Brown"></div>
<div dojoType="Employee" empid="102" name="Cathy Cameron"></div>
 
<h3>Using dojoAttachEvent, dojoAttachPoint</h3>
<div dojoType="dijit.Declaration" widgetClass="HideButton">
XXX<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>XXX
<script type='dojo/method' event='onclick'>
this.domNode.style.display="none";
</script>
</div>
<button dojoType="HideButton">Click to hide</button>
<button dojoType="HideButton">Click to hide #2</button>
 
<h3>Extending another widget</h3>
<p>HideButton2 extends HideButton (above) and changes the template (but keeps the onclick handler).</p>
<span dojoType="dijit.Declaration" widgetClass="HideButton2" mixins="HideButton">
YYY<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>YYY
</span>
<button dojoType="HideButton2">Hide me extended</button>
<button dojoType="HideButton2">Hide me extended #2</button>
 
<h3>Something more complicated:</h3>
<div dojoType="dijit.Declaration" widgetClass="foo" defaults="{ foo: 'thud', progress: 10 }">
<script type='dojo/connect' event='startup'>
this.baz.innerHTML += " (modified by dojo/connect event=startup) ";
</script>
 
<p>thinger blah stuff ${foo}</p>
 
<div style="width:400px" annotate="true" maximum="200"
progress="${progress}" dojoType="dijit.ProgressBar"></div>
<p dojoAttachPoint='baz'>baz thud</p>
</div>
 
<div dojoType="foo" foo="blah" progress="50"></div>
<div dojoType="foo" foo="thinger" progress="73"></div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/test_Editor.html
New file
0,0 → 1,82
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Editor 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="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script type="text/javascript" src="../Editor.js"></script>
<script type="text/javascript">
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
dojo.require("dijit._editor.plugins.EnterKeyHandling");
// dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock'
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body>
 
<h1 class="testTitle"><label for="editor1">Editor + Plugins Test</label></h1>
 
<div style="border: 1px solid black;">
<div dojoType="dijit.Editor" id="editor1"><p>This instance is created from a div directly with default toolbar and plugins</p></div>
</div>
<button onClick="dijit.byId('editor1').destroy()">destroy</button>
<button onclick="console.log(dijit.byId('editor1').getValue().length)">getValue</button>
<hr/>
<div style="border: 1px dotted black;">
<h3><label for="thud">thud - from textarea</label></h3>
<textarea dojoType="dijit.Editor" height=""
extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']"
styleSheets="../../dojo/resources/dojo.css" id="thud">
<p>
This editor is created from a textarea with AlwaysShowToolbar plugin (don't forget to set height="").
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
</textarea>
<h3>..after</h3>
</div>
<hr/>
<div style="border: 1px dotted black;">
<h3><label for="blah">blah entry</label></h3>
<textarea dojoType="dijit.Editor"
plugins="['bold','italic','|','createLink','foreColor','hiliteColor']"
styleSheets="../../dojo/resources/dojo.css" id="blah">
This instance includes optional toolbar buttons which pull in additional ui (dijit) code.
Note the dojo.require() statements required to pull in the associated editor plugins to make
this work.
</textarea>
<h3>..after</h3>
</div>
<hr/>
<div style="border: 1px dotted black;">
<h3><label for="blah2">Another blah entry</label></h3>
<textarea dojoType="dijit.Editor"
plugins="['bold','italic','|',{name:'dijit._editor.plugins.LinkDialog'}]"
styleSheets="../../dojo/resources/dojo.css" id="blah2">
This instance demos how to:
<ol>
<li>specify which plugins to load (see the plugins property): this instance loads EnterKeyHandling plugin, among others;</li>
<li>specify options for a plugin (see the last item in the plugins array)</li>
</ol>
</textarea>
<h3>..after</h3>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/css/dijitTests.css
New file
0,0 → 1,56
/* Test file styles for Dijit widgets */
 
body {
background:#fff url("../images/testsBodyBg.gif") repeat-x top left;
padding:2em 2em 2em 2em;
}
 
h1.testTitle {
font-size:2em;
margin:0 0 1em 0;
}
 
/* Icons used in the tests */
 
.plusIcon, .plusBlockIcon {
background-image: url(../images/plus.gif);
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
.plusBlockIcon {
display: block;
}
.noteIcon {
background-image: url(../images/note.gif);
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
.flatScreenIcon {
background-image: url(../images/flatScreen.gif);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.dijitTestNodeDialog {
position:absolute;
top:5px;
right:5px;
display:block;
width:200px;
visibility:hidden;
background-color:#fff !important;
color:#000 !important;
border:1px solid #000;
padding:5px;
}
.dijitTestNodeDialog table {
background-color:#fff !important;
}
.dijitTestNodeDialog td {
padding:3px;
}
.dijitTestNodeShowing {
visibility:visible;
}
/trunk/api/js/dojo1.0/dijit/tests/_Templated.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests._Templated"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests._Templated"] = true;
dojo.provide("dijit.tests._Templated");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests._Templated", dojo.moduleUrl("dijit", "tests/_Templated.html"));
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/test_ProgressBar.html
New file
0,0 → 1,170
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Toolkit - ProgressBar test</title>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
body {
margin: 1em;
}
.smallred .dijitProgressBarTile {
background:red;
}
.smallred .dijitProgressBarLabel {
display:none;
}
</style>
 
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser"); // scan page for widgets
dojo.require("dojo.string");
</script>
 
<script type="text/javascript">
 
dojo.addOnLoad(go);
 
function go(){
//TODO: it's a little strange that id must be specified again?
var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000,
report:function(percent){
return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]);
}
}, dojo.byId("testBar"));
 
dojo.byId("test").value="";
dojo.byId("progressValue").focus();
dojo.byId("progressValue").value = dijit.byId("setTestBar").progress;
dojo.byId("maximum").value = dijit.byId("setTestBar").maximum;
dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler);
dojo.connect(dojo.byId("set"), "onclick", null, setParameters);
dojo.connect(dojo.byId("startTimer"), "onclick", null,
function(){ remoteProgress(dijit.byId("timerBar")); } );
 
function indeterminateSetter(id, value){
return function(){
dijit.byId(id).update({'indeterminate': value});
}
}
dojo.connect(dojo.byId("setIndeterminate1True"), "onclick", null,
indeterminateSetter("indeterminateBar1", true));
dojo.connect(dojo.byId("setIndeterminate1False"), "onclick", null,
indeterminateSetter("indeterminateBar1", false));
dojo.connect(dojo.byId("setIndeterminate2True"), "onclick", null,
indeterminateSetter("indeterminateBar2", true));
dojo.connect(dojo.byId("setIndeterminate2False"), "onclick", null,
indeterminateSetter("indeterminateBar2", false));
}
 
// An example of polling on a separate (heartbeat) server thread. This is useful when the progress
// is entirely server bound and there is no existing interaction with the server to determine status.
 
// We don't have a server to run against, but a simple heartbeat implementation might look something
// like this:
 
// function getProgressReport(){
// var dataSource = "http://dojotoolkit.org";
// return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
// }
 
// Instead, we'll just tick off intervals of 10
 
var fakeProgress = 0;
function getProgressReport(){
var deferred = new dojo.Deferred();
fakeProgress = Math.min(fakeProgress + 10, 100);
deferred.callback(fakeProgress+"%");
return deferred;
}
 
function remoteProgress(bar){
var _timer = setInterval(function(){
var report = getProgressReport();
report.addCallback(function(response){
bar.update({progress: response});
if(response == "100%"){
clearInterval(_timer);
_timer = null;
return;
}
});
}, 3000); // on 3 second intervals
}
 
function setParameters(){
dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value});
}
 
function keyUpHandler(){
dijit.byId("testBar").update({progress:dojo.byId("test").value.length});
dijit.byId("testBarInt").update({progress:dojo.byId("test").value.length});
dijit.byId("smallTestBar").update({progress:dojo.byId("test").value.length});
}
 
</script>
 
</head>
<body class="tundra">
 
<h1 class="testTitle">Dijit ProgressBar Tests</h1>
 
<h3>Test 1</h3>
Progress Value <input type="text" name="progressValue" id="progressValue" />
<br>
Max Progress Value <input type="text" name="maximum" id="maximum" />
<br>
<input type="button" name="set" id="set" value="set!" />
<br>
<div style="width:400px" annotate="true"
maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div>
 
<h3>Test 2</h3>
Write here: <input type="text" value="" name="test" maxLength="256" id="test" style="width:300"/>
<br />
<br />
<div id="testBar" style='width:300px'></div>
<br />
Small, without text and background image:
<br />
<div style="width:400px; height:10px" class="smallred"
maximum="256" id="smallTestBar" dojoType="dijit.ProgressBar"></div>
<br />
Show decimal place:
<div places="1" style="width:400px" annotate="true"
maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div>
 
<h3>Test 3</h3>
No explicit maximum (both 50%)
<div style="width:400px" annotate="true"
id="implied1" progress="50" dojoType="dijit.ProgressBar"></div>
<br />
<div style="width:400px" annotate="true"
id="implied2" progress="50%" dojoType="dijit.ProgressBar"></div>
 
<h3>Test 4</h3>
<input type="button" name="startTimer" id="startTimer" value="Start Timer" />
<div style="width:400px" id="timerBar" annotate="true"
maximum="100" progress="0" dojoType="dijit.ProgressBar"></div>
 
<h3>Test 5 - indeterminate progess</h3>
<input type="button" name="setIndeterminate1True" id="setIndeterminate1True" value="Make Indeterminate" />
<input type="button" name="setIndeterminate1False" id="setIndeterminate1False" value="Make Determinate" />
<div style="width:400px" indeterminate="true" id="indeterminateBar1"
dojoType="dijit.ProgressBar"></div>
<input type="button" name="setIndeterminate2True" id="setIndeterminate2True" value="Make Indeterminate" />
<input type="button" name="setIndeterminate2False" id="setIndeterminate2False" value="Make Determinate" />
<div style="width:400px" progress="50" id="indeterminateBar2"
dojoType="dijit.ProgressBar"></div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/tree/test_Tree_DnD.html
New file
0,0 → 1,223
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit Tree Test</title>
 
<style someProperty="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../../themes/tundra/tundra_rtl.css";
@import "../css/dijitTests.css";
@import "../dndDefault.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dojo/resources/dnd.css";
@import "../../../dojo/tests/dnd/dndDefault.css";
</style>
 
<script someProperty="text/javascript" src="testBidi.js"></script>
 
<script someProperty="text/javascript" src="../../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
 
<script language="JavaScript" someProperty="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree");
dojo.require("dijit._tree.dndSource");
dojo.require("dijit.Menu");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
dojo.require("dojo.dnd.common");
dojo.require("dojo.dnd.Source");
 
selected=[];
 
globalId=1000;
lastSelected=null;
 
dojo.addOnLoad(function(){
//record the selection from tree 1
dojo.subscribe("myTree", null, function(message){
if(message.event=="execute"){
console.log("Tree1 Select: ",dijit.byId("myTree").store.getLabel(message.item));
lastSelected=selected["myTree"]=message.item;
}
});
 
//record the selection from tree 2
dojo.subscribe("myTree2", null, function(message){
if(message.event=="execute"){
console.log("Tree2 Select: ",dijit.byId("myTree2").store.getLabel(message.item));
lastSelected=selected["myTree2"]=message.item;
}
});
 
//connect to the add button and have it add a new container to the store as necessary
dojo.connect(dijit.byId("addButton"), "onClick", function(){
var pInfo = {
parent: lastSelected,
attribute: "children"
};
 
//store.newItem({name: dojo.byId('newCat').value, id:globalId++, numberOfItems:dojo.byId('numItems').value}, pInfo);
catStore.newItem({name: dojo.byId('newCat').value, numberOfItems:0,id:globalId++}, pInfo);
});
 
//since we don't have a server, we're going to connect to the store and do a few things the server/store combination would normal be taking care of for us
dojo.connect(catStore, "onNew", function(item, pInfo){
var p = pInfo.item;
if (p) {
var currentTotal = catStore.getValues(p, "numberOfItems")[0];
catStore.setValue(p, "numberOfItems", ++currentTotal);
}
});
 
 
tree1 = dijit.byId('myTree');
tree2 = dijit.byId('myTree2');
});
 
 
//create a custom label for tree one consisting of the label property pluss the value of the numberOfItems Column
function tree1CustomLabel(item){
var label = catStore.getLabel(item);
var num = catStore.getValues(item,"numberOfItems");
//return the new label
return label + ' (' + num+ ')';
}
 
 
//custom function to handle drop for tree two. Items dropped onto nodes here should be applied to the items attribute in this particular store.
function tree2CustomDrop(source,nodes,copy){
if (this.containerState=="Over"){
this.isDragging=false;
var target= this.current;
var items = this.itemCreator(nodes, target);
 
if (!target || target==this.tree.domNode){
for (var i=0; i<items.length;i++){
this.tree.store.newItem(items[i],null);
}
}else {
for (var i=0; i<items.length;i++){
pInfo={parent:dijit.getEnclosingWidget(target).item, attribute:"items"};
this.tree.store.newItem(items[i],pInfo);
}
}
}
}
 
//on tree two, we only want to drop on containers, not on items in the containers
function tree2CheckItemAcceptance(node,source) {
var item = dijit.getEnclosingWidget(node).item;
if (item && this.tree.store.hasAttribute(item,"numberOfItems")){
var numItems=this.tree.store.getValues(item, "numberOfItems");
return true;
}
return false;
}
 
function tree2ItemCreator(nodes){
var items = []
 
for(var i=0;i<nodes.length;i++){
items.push({
"name":nodes[i].textContent,
"id": nodes[i].id
});
}
return items;
}
 
function dndAccept(source,nodes){
if (this.tree.id=="myTree"){
return false;
}
return true;
}
 
function getIcon(item) {
if (!item || catStore.hasAttribute(item, "numberOfItems")) {
return "myFolder";
}
return "myItem"
}
</script>
 
<style>
.myFolder{
display: "block";
width: 16px;
height: 16px;
background: blue;
}
 
.myItem{
display: "block";
width: 16px;
height: 16px;
background: green;
 
}
</style>
 
</head>
<body class="tundra">
<h1 class="testTitle">Dijit Tree Test - Drag And Drop Support</h1>
 
<div dojoType="dojo.data.ItemFileWriteStore" jsId="catStore"
url="../_data/categories.json"></div>
 
<table width="100%" style="margin:5px solid gray" >
 
<tr style="width:100%">
<td style="width: 50%">
<h2>Custom</h2>
<p>Should add this category to the store. The second parameter is the value for numberOfItems.</p>
<div class="container">
<input id="newCat" type="text" value="Pottedmeat" /><input id="numItems" type="text" value="0" size="3"/><div id="addButton" dojoType="dijit.form.Button">Add Category</div>
</div>
</td>
<td>
<h2>Items: </h2>
<p>List of Items to be categorized<p>
<div dojoType="dojo.dnd.Source" jsId="c2" class="container" style="height: 100px; overflow: auto">
<div class="dojoDndItem" id="1001">Apple</div>
<div class="dojoDndItem" id="1002">Orange</div>
<div class="dojoDndItem" id="1003">Banana</div>
<div class="dojoDndItem" id="1004">Tomato</div>
<div class="dojoDndItem" id="1005">Pepper</div>
<div class="dojoDndItem" id="1006">Wheat</div>
<div class="dojoDndItem" id="1007">Corn</div>
<div class="dojoDndItem" id="1008">Spinach</div>
<div class="dojoDndItem" id="1009">Cucumber</div>
<div class="dojoDndItem" id="1010">Carot</div>
<div class="dojoDndItem" id="1011">Potato</div>
<div class="dojoDndItem" id="1012">Grape</div>
<div class="dojoDndItem" id="1013">Lemon</div>
<div class="dojoDndItem" id="1010">Letuce</div>
<div class="dojoDndItem" id="1010">Peanut</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>Collection Count Summary</h2>
<p>You can't drop items onto this tree.</p>
<div class="container" dojoType="dijit.Tree" id="myTree" store="catStore" label="Collections"
labelAttr="name" getLabel="tree1CustomLabel" childrenAttr="children" dndController="dijit._tree.dndSource"
checkAcceptance="dndAccept" getIconClass="getIcon"></div>
</td>
<td>
<h2>Collection</h2>
<p>Drop items onto this tree, but only on categories, should fail to let you drop on other items.</p>
<div class="container" dojoType="dijit.Tree" id="myTree2" label="Collections" store="catStore" labelAttr="name" childrenAttr="children, items" dndController="dijit._tree.dndSource" onDndDrop="tree2CustomDrop" checkAcceptance="dndAccept" checkItemAcceptance="tree2CheckItemAcceptance" getIconClass="getIcon"></div>
</td>
</tr>
</table>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/test_ColorPalette.html
New file
0,0 → 1,54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ColorPalette Test</title>
 
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.ColorPalette");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<script>
var palette;
function init(){
var date0 = new Date();
palette = new dijit.ColorPalette({palette: "7x10", id: "progPalette"}, dojo.byId("programPalette"));
console.log("creation time: " + (new Date() - date0) );
}
 
dojo.addOnLoad(init);
 
function setColor(color){
var theSpan = dojo.byId("outputSpan");
theSpan.style.color = color;
theSpan.innerHTML = color;
}
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
</style>
</head>
 
<body>
 
<h1 class="testTitle">dijit.ColorPalette test:</h1>
 
<p>Default color palette (7x10):</p>
<div dojoType="dijit.ColorPalette" onChange="setColor(this.value);"></div>
 
Test color is: <span id="outputSpan"></span>.
 
<p>Small color palette (3x4):</p>
<div dojoType="dijit.ColorPalette" palette="3x4"></div>
 
<p>Default color palette (7x10) created via createWidget:</p>
<div id="programPalette"></div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/test_InlineEditBox.html
New file
0,0 → 1,212
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inline Edit Box Test</title>
 
<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.InlineEditBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dojo.currency");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.Slider");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
function myHandler(id,newValue){
console.debug("onChange for id = " + id + ", value: " + newValue);
};
/*
dojo.addOnLoad(function(){
dojo.subscribe("widgetFocus", function(widget){
console.log("focused on widget " + (widget?widget:"nothing"));
});
dojo.subscribe("widgetBlur", function(widget){
console.log("blurred widget " + (widget?widget:"nothing"));
});
dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
});
*/
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
 
.inlineEdit { background-color: #CCC76A; }
 
/* some style rules on nodes just to test that style gets copied to the edit widget */
p { font-family: cursive; }
.letter p { font-family: monospace; }
h3 { font-family: helvetica; font-style: italic; }
</style>
</head>
<body>
<h1 class="testTitle">Dijit InlineEditBox Test</h1>
 
<span dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
url="_data/states.json"></span>
<span dojoType="dojo.data.ItemFileReadStore" jsId="productStore">
<script type="dojo/method">
console.log("doing preamble");
this._jsonData =
{ identifier: 'name',
label: 'name',
items: [
{ name: "refrigerator" },
{ name: "freezer" },
{ name: "stove" },
{ name: "heater" },
]};
</script>
</span>
 
<h2>Form Letter with blanks</h2>
<div class="letter">
<h3 id="editable" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="true" title="company name"></h3>
<p>
Dear <span dojoType="dijit.InlineEditBox" width="200px" title="recipient name"></span>,
</p>
<p class="letter">
Thank you for your recent order.
Please remit
<span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" title="dollar amount"></span>
for your purchase of
<span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" title="quantity"></span>
deluxe
<span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" title="item name"
editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}"
width="200px"></span>
on
<span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" title="purchase date as mm/dd/yy"></span>
in
<span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: true}"
width="200px" title="state of purchase"></span>.
</p>
<p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details"></p>
<p>
Sincerely,
</p>
<span style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" title="sender name" ></span>
</div>
<hr style="margin-bottom: 1em;">
 
<h2>Form Letter with predefined values, and no auto-save</h2>
<div class="letter">
<h3 id="editable2" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="false" title="company name">
Bob Vance Refrigeration
</h3>
<p>
Dear <span dojoType="dijit.InlineEditBox" width="200px" autoSave="false" title="recipient name">John</span>,
</p>
<p class="letter">
Thank you for your recent order.
Please remit
<span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" autoSave="false" title="dollar amount">$2,000</span>
for your purchase of
<span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" autoSave="false" title="quantity">3</span>
deluxe
<span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox"
editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}"
width="200px" autoSave="false" title="item name">refrigerators</span>
on
<span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" autoSave="false" title="purchase date as mm/dd/yy">01/01/2007</span>
in
<span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}"
width="200px" autoSave="false" title="state of purchase">
Pennsylvania
</span>.
</p>
<p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details">
We sincerely appreciate your business and hope we can do business again.
</p>
<p>
Sincerely,
</p>
<span style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" autoSave="false" title="sender name">Bob Vance</span>
</div>
<hr style="margin-bottom: 1em;">
 
 
<h2>Inline-block Text (of 400px width)</h2>
<div>
The following section uses inline block text of 400px.
When clicking the editable text it should bring up an editor which is also 400px wide.
</div>
(before plain inline) <fieldset class="dijitInline"><div style="width: 400px;">hello world</div></fieldset> (after plain inline)
<br>
(before editable inline)
<fieldset class="dijitInline"><div dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" width="400px" style="width: 400px;">
hello world
</div></fieldset>
(after editable inline)
<hr style="width:100%;">
 
<h2>Pararagraph</h2>
(before plain paragraph)
<p>
Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
(before editable paragraph. the editable paragraph has Save/Cancel buttons when open.)
<p id="areaEditable" dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea">
Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
These links will
<a href="#" onClick="dijit.byId('areaEditable').setDisabled(true)">disable</a> /
<a href="#" onClick="dijit.byId('areaEditable').setDisabled(false)">enable</a>
the InlineEditBox above.
<hr style="width:100%;">
 
<h2>FilteringSelect (no down arrow, and save/cancel buttons):</h2>
before
<span id="filteringSelect2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}"
width="200px" autoSave="false">
Indiana
</span>
after
<hr style="width:100%;">
<h2>Programmatically created:</h2>
before block<div style="display:block;" id="programmatic">Click here to edit a block programmatically created inline edit region</div>after
<script type="text/javascript">
// See if we can make a widget in script
dojo.addOnLoad(function(){
var inlineWidget = new dijit.InlineEditBox({renderAsHtml: true}, 'programmatic');
});
</script>
<hr style="width:100%;">
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/module.js
New file
0,0 → 1,21
if(!dojo._hasResource["dijit.tests.module"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests.module"] = true;
dojo.provide("dijit.tests.module");
 
try{
dojo.require("dijit.tests._base.manager");
dojo.require("dijit.tests._base.viewport");
dojo.require("dijit.tests._base.wai");
dojo.require("dijit.tests._Templated");
dojo.require("dijit.tests.widgetsInTemplate");
dojo.require("dijit.tests.Container");
dojo.require("dijit.tests.layout.ContentPane");
dojo.require("dijit.tests.ondijitclick");
dojo.require("dijit.tests.form.Form");
}catch(e){
doh.debug(e);
}
 
 
 
}
/trunk/api/js/dojo1.0/dijit/tests/test_Tree.html
New file
0,0 → 1,111
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit Tree 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="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.Menu");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
 
</head>
<body>
 
<h1 class="testTitle">Dijit Tree Test</h1>
 
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
url="../tests/_data/countries.json"></div>
 
<h3>Tree with hardcoded root node (not corresponding to any item in the store)</h3>
<div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
labelAttr="name" label="Continents">
<script type="dojo/method" event="onClick" args="item">
if(item){
alert("Execute of node " + continentStore.getLabel(item)
+", population=" + continentStore.getValue(item, "population"));
}else{
alert("Execute on root node");
}
</script>
<script type="dojo/method" event="getIconClass" args="item">
return "noteIcon";
</script>
</div>
 
<button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button>
 
<h2>A rootless tree (no "continents" node) with context menus</h2>
 
<ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</li>
<li dojoType="dijit.MenuItem" disabled="true">Disabled Item</li>
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="alert('not actually cutting anything, just a test!')">Cut</li>
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="alert('not actually copying anything, just a test!')">Copy</li>
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="alert('not actually pasting anything, just a test!')">Paste</li>
<li dojoType="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<ul dojoType="dijit.Menu" id="submenu2">
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li>
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li>
<li dojoType="dijit.PopupMenuItem">
<span>Deeper Submenu</span>
<ul dojoType="dijit.Menu" id="submenu4">
<li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</li>
<li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</li>
</ul>
</li>
</ul>
</li>
<li dojoType="dijit.PopupMenuItem" disabled="true">
<span>Disabled Submenu</span>
<ul dojoType="dijit.Menu" id="submenu3" style="display: none;">
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li>
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li>
</ul>
</li>
</ul>
 
<div dojoType="dijit.Tree" id="tree2" store="continentStore" query="{type:'continent'}">
<script type="dojo/connect">
var menu = dijit.byId("tree_menu");
// when we right-click anywhere on the tree, make sure we open the menu
menu.bindDomNode(this.domNode);
 
dojo.connect(menu, "_openMyself", this, function(e){
// get a hold of, and log out, the tree node that was the source of this open event
var tn = this._domElement2TreeNode(e.target);
console.debug(tn);
 
// now inspect the data store item that backs the tree node:
console.debug(tn.item);
 
// contrived condition: if this tree node doesn't have any children, disable all of the menu items
menu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); });
 
// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
});
</script>
<script type="dojo/method" event="getIconClass" args="item">
return "noteIcon";
</script>
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_testCommon.js
New file
0,0 → 1,105
/*
_testCommon.js - a simple module to be included in dijit test pages to allow
for easy switching between the many many points of the test-matrix.
 
in your test browser, provides a way to switch between available themes,
and optionally enable RTL (right to left) mode, and/or dijit_a11y (high-
constrast/image off emulation) ... probably not a genuine test for a11y.
 
usage: on any dijit test_* page, press ctrl-f9 to popup links.
 
there are currently (2 themes * 4 tests) * (10 variations of supported browsers)
not including testing individual locale-strings
 
you should not be using this in a production enviroment. include
your css and set your classes manually. for test purposes only ...
*/
 
(function(){
var theme = false; var testMode;
if(window.location.href.indexOf("?") > -1){
var str = window.location.href.substr(window.location.href.indexOf("?")+1);
var ary = str.split(/&/);
for(var i=0; i<ary.length; i++){
var split = ary[i].split(/=/),
key = split[0],
value = split[1];
switch(key){
case "locale":
// locale string | null
djConfig.locale = locale = value;
break;
case "dir":
// rtl | null
document.getElementsByTagName("html")[0].dir = value;
break;
case "theme":
// tundra | soria | noir | squid | null
theme = value;
break;
case "a11y":
if(value){ testMode = "dijit_a11y"; }
}
}
}
 
// always include the default theme files:
if(!theme){ theme = djConfig.defaultTestTheme || 'tundra'; }
var themeCss = dojo.moduleUrl("dijit.themes",theme+"/"+theme+".css");
var themeCssRtl = dojo.moduleUrl("dijit.themes",theme+"/"+theme+"_rtl.css");
document.write('<link rel="stylesheet" type="text/css" href="'+themeCss+'"/>');
document.write('<link rel="stylesheet" type="text/css" href="'+themeCssRtl+'"/>');
 
if(djConfig.parseOnLoad){
djConfig.parseOnLoad = false;
djConfig._deferParsing = true;
}
 
dojo.addOnLoad(function(){
 
// set the classes
if(!dojo.hasClass(dojo.body(),theme)){ dojo.addClass(dojo.body(),theme); }
if(testMode){ dojo.addClass(dojo.body(),testMode); }
 
// test-link matrix code:
var node = document.createElement('div');
node.id = "testNodeDialog";
dojo.addClass(node,"dijitTestNodeDialog");
dojo.body().appendChild(node);
 
_populateTestDialog(node);
dojo.connect(document,"onkeypress","_testNodeShow");
 
if(djConfig._deferParsing){ dojo.parser.parse(dojo.body()); }
 
});
 
_testNodeShow = function(/* Event */evt){
var key = (evt.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : evt.keyCode);
if(evt.ctrlKey && (key == dojo.keys.F9)){ // F9 is generic enough?
dojo.style(dojo.byId('testNodeDialog'),"top",(dijit.getViewport().t + 4) +"px");
dojo.toggleClass(dojo.byId('testNodeDialog'),"dijitTestNodeShowing");
}
}
 
_populateTestDialog = function(/* DomNode */node){
// pseudo-function to populate our test-martix-link pop-up
var base = window.location.pathname;
var str = "";
var themes = ["tundra",/*"noir", */ "soria" /* ,"squid" */ ];
str += "<b>Tests:</b><br><table>";
dojo.forEach(themes,function(t){
str += '<tr><td><a hr'+'ef="'+base+'?theme='+t+'">'+t+'</'+'a></td>'+
'<td><a hr'+'ef="'+base+'?theme='+t+'&dir=rtl">rtl</'+'a></td>'+
'<td><a hr'+'ef="'+base+'?theme='+t+'&a11y=true">a11y</'+'a></td>'+
'<td><a hr'+'ef="'+base+'?theme='+t+'&a11y=true&dir=rtl">a11y+rtl</'+'a></td>'+
// too many potential locales to list, use &locale=[lang] to set
'</tr>';
});
str += '<tr><td colspan="4">jump to: <a hr'+'ef="'+(dojo.moduleUrl("dijit.themes","themeTester.html"))+'">themeTester</'+'a></td></tr>';
str += '<tr><td colspan="4">or: <a hr'+'ef="'+(dojo.moduleUrl("dijit.tests"))+'">tests folder</'+'a></td></tr>';
node.innerHTML = str + "</table>";
}
})();
/trunk/api/js/dojo1.0/dijit/tests/test_Toolbar.html
New file
0,0 → 1,193
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Dojo Toolbar Widget Test</title>
 
 
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.Dialog");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Menu");
dojo.require("dojo.parser");
</script>
 
<!-- programatic creation -->
<script>
function init(){
dojo.forEach(["toolbar2", "toolbar3", "toolbar4"], function(toolbarId){
var toolbar = new dijit.Toolbar({}, dojo.byId(toolbarId));
dojo.forEach(["Cut", "Copy", "Paste"], function(label){
var button = new dijit.form.Button({id: toolbarId+"."+label, label: label, iconClass: "dijitEditorIcon dijitEditorIcon"+label, showLabel: (toolbarId == "toolbar2" ? false : true)});
toolbar.addChild(button);
});
});
}
 
dojo.addOnLoad(init);
</script>
 
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
 
.dijitToolbar .dijitButton, .dijitToolbar .dijitDropDownButton { margin: 0px; }
.dijitToolbar .dijitToggleButtonSelected BUTTON, .dijitToolbar .dijitToggleButtonSelectedHover BUTTON { border-width: 3px; }
</style>
 
<!-- To turn off display of text use showLabel=false attribute on button
to turn off display or icon, add your own classes and/or CSS rules -->
<style>
 
.toolbarWithNoImages .dijitButtonContents .dijitInline,
.toolbarWithNoImages .dijitButtonContents .dijitInline {
display: none;
}
 
.menuBar .dijitA11yDownArrow { display: none; }
</style>
 
</head>
<body>
<h1 class="testTitle">Toolbar test</h1>
 
<h2>Toolbar from markup</h2>
 
<div id="toolbar1" dojoType="dijit.Toolbar"
><div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div
><div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">Copy</div
><div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div
 
><span dojoType="dijit.ToolbarSeparator"></span
 
><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div
><div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div
><div dojoType="dijit.form.ToggleButton" id="toolbar1.underline" iconClass="dijitEditorIcon dijitEditorIconUnderline" showLabel="false">Underline</div
><div dojoType="dijit.form.ToggleButton" id="toolbar1.strikethrough" iconClass="dijitEditorIcon dijitEditorIconStrikethrough" showLabel="false">Strikethrough</div
 
><!--
<span dojoType="dijit.ToolbarSeparator">&nbsp;</span>
 
<span dojo:type="ToolbarButtonGroup" name="justify" defaultButton="justifyleft" preventDeselect="true" showLabel="false">
<div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyLeft" name="justify" showLabel="false">Left</div>
<div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyRight" name="justify" showLabel="false">Right</div>
<div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyCenter" name="justify" showLabel="false">Center</div>
</span>
 
--><span dojoType="dijit.ToolbarSeparator">&nbsp;</span
 
><div dojoType="dijit.form.Button" id="toolbar1.insertorderedlist" iconClass="dijitEditorIcon dijitEditorIconInsertOrderedList" showLabel="false">Ordered list</div
><div dojoType="dijit.form.Button" id="toolbar1.insertunorderedlist" iconClass="dijitEditorIcon dijitEditorIconInsertUnorderedList" showLabel="false">Unordered list</div
><div dojoType="dijit.form.Button" id="toolbar1.indent" iconClass="dijitEditorIcon dijitEditorIconIndent" showLabel="false">Indent</div
><div dojoType="dijit.form.Button" id="toolbar1.outdent" iconClass="dijitEditorIcon dijitEditorIconOutdent" showLabel="false">Outdent</div
 
><span dojoType="dijit.ToolbarSeparator"></span
><div dojoType="dijit.form.DropDownButton" id="toolbar1.dialog">
<span>Login</span>
<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<table>
<tr>
<td><label for="user">User:</label></td>
<td><input dojoType=dijit.form.TextBox type="text" name="user" ></td>
</tr>
<tr>
<td><label for="pwd">Password:</label></td>
<td><input dojoType=dijit.form.TextBox type="password" name="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit" name="submit">Login</button></td>
</tr>
</table>
</div
></div
><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" iconClass="dijitEditorIcon dijitEditorIconBackColor" showLabel="false">
<span>Background</span>
<div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette" style="display: none" palette="3x4" onChange="console.log(this.value);"></div>
</div
><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" iconClass="dijitEditorIcon dijitEditorIconForeColor" showLabel="false">
<span>Foreground</span>
<div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette2" style="display: none" palette="3x4" onChange="console.log(this.value);"></div>
</div
 
><span dojoType="dijit.ToolbarSeparator"></span
><div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'>
<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
></div>
 
<h2>Toolbar that looks like MenuBar</h2>
<div id="menubar" dojoType="dijit.Toolbar" class="menuBar">
<div dojoType="dijit.form.DropDownButton">
<span>File</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">New</div>
<div dojoType="dijit.MenuItem">Open</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIconSave">Save</div>
<div dojoType="dijit.MenuItem">Save As...</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>Edit</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>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>View</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Normal</div>
<div dojoType="dijit.MenuItem">Outline</div>
<div dojoType="dijit.PopupMenuItem">
<span>Zoom</span>
<div dojoType="dijit.Menu" id="submenu2">
<div dojoType="dijit.MenuItem">50%</div>
<div dojoType="dijit.MenuItem">75%</div>
<div dojoType="dijit.MenuItem">100%</div>
<div dojoType="dijit.MenuItem">150%</div>
<div dojoType="dijit.MenuItem">200%</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>Help</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Help Topics</div>
<div dojoType="dijit.MenuItem">About Dijit</div>
</div>
</div>
</div>
 
<h2>Toolbar from script</h2>
<div id="toolbar2"></div>
 
<h2>Toolbar with text and icons</h2>
<div id="toolbar3"></div>
 
<h2>Toolbar with text only</h2>
<div id="toolbar4" class="toolbarWithNoImages"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/images/tube.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/tube.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/arrowSmall.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/arrowSmall.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/plus.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/plus.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/note.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/note.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/flatScreen.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/flatScreen.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/testsBodyBg.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/testsBodyBg.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/copy.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/copy.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/cut.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/cut.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/paste.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/paste.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/images/tubeTall.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dijit/tests/images/tubeTall.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dijit/tests/_data/states.json
New file
0,0 → 1,64
{identifier:"abbreviation",
items: [
{name:"Alabama", label:"<img width='97px' height='127px' src='images/Alabama.jpg'/>Alabama",abbreviation:"AL"},
{name:"Alaska", label:"Alaska",abbreviation:"AK"},
{name:"American Samoa", label:"American Samoa",abbreviation:"AS"},
{name:"Arizona", label:"Arizona",abbreviation:"AZ"},
{name:"Arkansas", label:"Arkansas",abbreviation:"AR"},
{name:"Armed Forces Europe", label:"Armed Forces Europe",abbreviation:"AE"},
{name:"Armed Forces Pacific", label:"Armed Forces Pacific",abbreviation:"AP"},
{name:"Armed Forces the Americas", label:"Armed Forces the Americas",abbreviation:"AA"},
{name:"California", label:"California",abbreviation:"CA"},
{name:"Colorado", label:"Colorado",abbreviation:"CO"},
{name:"Connecticut", label:"Connecticut",abbreviation:"CT"},
{name:"Delaware", label:"Delaware",abbreviation:"DE"},
{name:"District of Columbia", label:"District of Columbia",abbreviation:"DC"},
{name:"Federated States of Micronesia", label:"Federated States of Micronesia",abbreviation:"FM"},
{name:"Florida", label:"Florida",abbreviation:"FL"},
{name:"Georgia", label:"Georgia",abbreviation:"GA"},
{name:"Guam", label:"Guam",abbreviation:"GU"},
{name:"Hawaii", label:"Hawaii",abbreviation:"HI"},
{name:"Idaho", label:"Idaho",abbreviation:"ID"},
{name:"Illinois", label:"Illinois",abbreviation:"IL"},
{name:"Indiana", label:"Indiana",abbreviation:"IN"},
{name:"Iowa", label:"Iowa",abbreviation:"IA"},
{name:"Kansas", label:"Kansas",abbreviation:"KS"},
{name:"Kentucky", label:"Kentucky",abbreviation:"KY"},
{name:"Louisiana", label:"Louisiana",abbreviation:"LA"},
{name:"Maine", label:"Maine",abbreviation:"ME"},
{name:"Marshall Islands", label:"Marshall Islands",abbreviation:"MH"},
{name:"Maryland", label:"Maryland",abbreviation:"MD"},
{name:"Massachusetts", label:"Massachusetts",abbreviation:"MA"},
{name:"Michigan", label:"Michigan",abbreviation:"MI"},
{name:"Minnesota", label:"Minnesota",abbreviation:"MN"},
{name:"Mississippi", label:"Mississippi",abbreviation:"MS"},
{name:"Missouri", label:"Missouri",abbreviation:"MO"},
{name:"Montana", label:"Montana",abbreviation:"MT"},
{name:"Nebraska", label:"Nebraska",abbreviation:"NE"},
{name:"Nevada", label:"Nevada",abbreviation:"NV"},
{name:"New Hampshire", label:"New Hampshire",abbreviation:"NH"},
{name:"New Jersey", label:"New Jersey",abbreviation:"NJ"},
{name:"New Mexico", label:"New Mexico",abbreviation:"NM"},
{name:"New York", label:"New York",abbreviation:"NY"},
{name:"North Carolina", label:"North Carolina",abbreviation:"NC"},
{name:"North Dakota", label:"North Dakota",abbreviation:"ND"},
{name:"Northern Mariana Islands", label:"Northern Mariana Islands",abbreviation:"MP"},
{name:"Ohio", label:"Ohio",abbreviation:"OH"},
{name:"Oklahoma", label:"Oklahoma",abbreviation:"OK"},
{name:"Oregon", label:"Oregon",abbreviation:"OR"},
{name:"Pennsylvania", label:"Pennsylvania",abbreviation:"PA"},
{name:"Puerto Rico", label:"Puerto Rico",abbreviation:"PR"},
{name:"Rhode Island", label:"Rhode Island",abbreviation:"RI"},
{name:"South Carolina", label:"South Carolina",abbreviation:"SC"},
{name:"South Dakota", label:"South Dakota",abbreviation:"SD"},
{name:"Tennessee", label:"Tennessee",abbreviation:"TN"},
{name:"Texas", label:"Texas",abbreviation:"TX"},
{name:"Utah", label:"Utah",abbreviation:"UT"},
{name:"Vermont", label:"Vermont",abbreviation:"VT"},
{name: "Virgin Islands, U.S.",label:"Virgin Islands, U.S.",abbreviation:"VI"},
{name:"Virginia", label:"Virginia",abbreviation:"VA"},
{name:"Washington", label:"Washington",abbreviation:"WA"},
{name:"West Virginia", label:"West Virginia",abbreviation:"WV"},
{name:"Wisconsin", label:"Wisconsin",abbreviation:"WI"},
{name:"Wyoming", label:"Wyoming",abbreviation:"WY"}
]}
/trunk/api/js/dojo1.0/dijit/tests/_data/categories.json
New file
0,0 → 1,13
{
identifier: 'id',
label: 'name',
items: [
{ id: '0', name:'Fruits', numberOfItems:1, children:[
{ id: '1',name:'Citrus', numberOfItems:1, items:[
{ id: '4', name:'Orange'}
]}
]},
{ id: '2', name:'Vegetables', numberOfItems:0},
{ id: '3', name:'Cereals', numberOfItems:0}
]
}
/trunk/api/js/dojo1.0/dijit/tests/_data/dijits.json
New file
0,0 → 1,0
{"timestamp":1193692111,"items":[{"namespace":"dijit","className":"dijit.ColorPalette","summary":"Grid showing various colors, so the user can pick a certain color","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Declaration","summary":"The Declaration widget allows a user to declare new widget\nclasses directly from a snippet of markup.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.DialogUnderlay","summary":"the thing that grays out the screen behind the dialog\n\nTemplate has two divs; outer div is used for fade-in\/fade-out, and also to hold background iframe.\nInner div has opacity specified in CSS file.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Dialog","summary":"Pops up a modal dialog window, blocking access to the screen\nand also graying out the screen Dialog is extended from\nContentPane so it supports all the same parameters (href, etc.)","description":null,"examples":null},{"namespace":"dijit","className":"dijit.TooltipDialog","summary":"Pops up a dialog that appears like a Tooltip","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Editor","summary":"A rich-text Editing widget","description":null,"examples":null},{"namespace":"dijit","className":"dijit.InlineEditBox","summary":"Behavior for an existing node (<p>, <div>, <span>, etc.) so that\nwhen you click it, an editor shows up in place of the original\ntext. Optionally, Save and Cancel button are displayed below the edit widget.\nWhen Save is clicked, the text is pulled from the edit\nwidget and redisplayed and the edit widget is again hidden.\nBy default a plain Textarea widget is used as the editor (or for\ninline values a TextBox), but you can specify an editor such as\ndijit.Editor (for editing HTML) or a Slider (for adjusting a number).\nAn edit widget must support the following API to be used:\nString getDisplayedValue() OR String getValue()\nvoid setDisplayedValue(String) OR void setValue(String)\nvoid focus()","description":null,"examples":null},{"namespace":"dijit","className":"dijit._InlineEditor","summary":"internal widget used by InlineEditBox, displayed when in editing mode\nto display the editor and maybe save\/cancel buttons. Calling code should\nconnect to save\/cancel methods to detect when editing is finished\n\nHas mainly the same parameters as InlineEditBox, plus these values:\n\nstyle: Object\nSet of CSS attributes of display node, to replicate in editor\n\nvalue: String\nValue as an HTML string or plain text string, depending on renderAsHTML flag","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Menu","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.MenuItem","summary":"A line item in a Menu2\n\nMake 3 columns\nicon, label, and expand arrow (BiDi-dependent) indicating sub-menu","description":null,"examples":null},{"namespace":"dijit","className":"dijit.PopupMenuItem","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.MenuSeparator","summary":"A line between two menu items","description":null,"examples":null},{"namespace":"dijit","className":"dijit.ProgressBar","summary":"a progress widget\n\nusage:\n<div dojoType=\"ProgressBar\"","description":null,"examples":null},{"namespace":"dijit","className":"dijit.TitlePane","summary":"A pane with a title on top, that can be opened or collapsed.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Toolbar","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.ToolbarSeparator","summary":"A line between two menu items","description":null,"examples":null},{"namespace":"dijit","className":"dijit._MasterTooltip","summary":"Internal widget that holds the actual tooltip markup,\nwhich occurs once per page.\nCalled by Tooltip widgets which are just containers to hold\nthe markup","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Tooltip","summary":"Pops up a tooltip (a help message) when you hover over a node.","description":null,"examples":null},{"namespace":"dijit","className":"dijit._TreeNode","summary":"Single node within a tree","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Tree","summary":"This widget displays hierarchical data from a store. A query is specified\nto get the \"top level children\" from a data store, and then those items are\nqueried for their children and so on (but lazily, as the user clicks the expand node).\n\nThus in the default mode of operation this widget is technically a forest, not a tree,\nin that there can be multiple \"top level children\". However, if you specify label,\nthen a special top level node (not corresponding to any item in the datastore) is\ncreated, to father all the top level children.","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Calendar","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._Contained","summary":"Mixin for widgets that are children of a container widget","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Container","summary":"Mixin for widgets that contain a list of children like SplitContainer","description":null,"examples":null},{"namespace":"dijit","className":"dijit._KeyNavContainer","summary":"A _Container with keyboard navigation of its children.\nTo use this mixin, call connectKeyNavHandlers() in\npostCreate() and call connectKeyNavChildren() in startup().","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Templated","summary":"mixin for widgets that are instantiated from a template","description":null,"examples":null},{"namespace":"dijit","className":"dijit._TimePicker","summary":"A graphical time picker that TimeTextBox pops up\nIt is functionally modeled after the Java applet at http:\/\/java.arcadevillage.com\/applets\/timepica.htm\nSee ticket #599","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Widget","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.WidgetSet","summary":"A set of widgets indexed by id","description":null,"examples":null},{"namespace":"dijit","className":"dijit.BackgroundIframe","summary":"For IE z-index schenanigans. id attribute is required.","description":"new dijit.BackgroundIframe(node)\nMakes a background iframe as a child of node, that fills\narea (and position) of node","examples":null},{"namespace":"dijit","className":"dijit._editor.RichText","summary":"dijit._editor.RichText is the core of the WYSIWYG editor in dojo, which\nprovides the basic editing features. It also encapsulates the differences\nof different js engines for various browsers","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor._Plugin","summary":"only allow updates every two tenths of a second","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.AlwaysShowToolbar","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.EnterKeyHandling","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.FontChoice","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.DualStateDropDownButton","summary":"a DropDownButton but button can be displayed in two states (checked or unchecked)","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.UrlTextBox","summary":"the URL input box we use in our dialog\n\nregular expression for URLs, generated from dojo.regexp.url()","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.LinkDialog","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.TextColor","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.range.W3CRange","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.demos.chat.Room","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.Button","summary":"Basically the same thing as a normal HTML button, but with special styling.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.DropDownButton","summary":"push the button and a menu shows up","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ComboButton","summary":"left side is normal button, right side displays menu","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ToggleButton","summary":"A button that can be in two states (checked or not).\nCan be base class for things like tabs or checkbox or radio buttons","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.CheckBox","summary":"Same as an HTML checkbox, but with fancy styling.","description":"Value of \"type\" attribute for <input>","examples":null},{"namespace":"dijit","className":"dijit.form.RadioButton","summary":"Same as an HTML radio, but with fancy styling.","description":"This shared object keeps track of all widgets, grouped by name","examples":null},{"namespace":"dijit","className":"dijit.form.ComboBoxMixin","summary":"Auto-completing text box, and base class for FilteringSelect widget.\n\nThe drop down box's values are populated from an class called\na data provider, which returns a list of values based on the characters\nthat the user has typed into the input box.\n\nSome of the options to the ComboBox are actually arguments to the data\nprovider.\n\nYou can assume that all the form widgets (and thus anything that mixes\nin ComboBoxMixin) will inherit from _FormWidget and thus the \"this\"\nreference will also \"be a\" _FormWidget.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._ComboBoxMenu","summary":"these functions are called in showResultList","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ComboBox","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.CurrencyTextBox","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.DateTextBox","summary":"A validating, serializable, range-bound date text box.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.FilteringSelect","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._FormMixin","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.Form","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.InlineEditBox","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.NumberSpinner","summary":"Number Spinner","description":"This widget is the same as NumberTextBox but with up\/down arrows added","examples":null},{"namespace":"dijit","className":"dijit.form.NumberTextBoxMixin","summary":"A mixin for all number textboxes","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.NumberTextBox","summary":"A validating, serializable, range-bound text box.\nconstraints object: min, max, places","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.HorizontalSlider","summary":"A form widget that allows one to select a value with a horizontally draggable image","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.VerticalSlider","summary":"A form widget that allows one to select a value with a vertically draggable image","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._SliderMover","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.HorizontalRule","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.VerticalRule","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.HorizontalRuleLabels","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.VerticalRuleLabels","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.TextBox","summary":"A generic textbox field.\nServes as a base class to derive more specialized functionality in subclasses.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.Textarea","summary":"event handlers, you can over-ride these in your own subclasses","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.TimeTextBox","summary":"NaN\nNaN","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ValidationTextBox","summary":"default values for new subclass properties","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.MappedTextBox","summary":"A subclass of ValidationTextBox.\nProvides a hidden input field and a serialize method to override","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.RangeBoundTextBox","summary":"A subclass of MappedTextBox.\nTests for a value out-of-range","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._FormWidget","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._Spinner","summary":"Mixin for validation widgets with a spinner","description":"This class basically (conceptually) extends dijit.form.ValidationTextBox.\nIt modifies the template to have up\/down arrows, and provides related handling code.","examples":null},{"namespace":"dijit","className":"dijit.layout.AccordionContainer","summary":"Holds a set of panes where every pane's title is visible, but only one pane's content is visible at a time,\nand switching between panes is visualized by sliding the other panes up\/down.\nusage:\n<div dojoType=\"dijit.layout.AccordionContainer\">\n<div dojoType=\"dijit.layout.AccordionPane\" title=\"pane 1\">\n<div dojoType=\"dijit.layout.ContentPane\">...<\/div>\n<\/div>\n<div dojoType=\"dijit.layout.AccordionPane\" title=\"pane 2\">\n<p>This is some text<\/p>\n...\n<\/div>","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.AccordionPane","summary":"AccordionPane is a ContentPane with a title that may contain another widget.\nNested layout widgets, such as SplitContainer, are not supported at this time.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.ContentPane","summary":"A widget that acts as a Container for other widgets, and includes a ajax interface","description":"A widget that can be used as a standalone widget\nor as a baseclass for other widgets\nHandles replacement of document fragment using either external uri or javascript\ngenerated markup or DOM content, instantiating widgets within that content.\nDon't confuse it with an iframe, it only needs\/wants document fragments.\nIt's useful as a child of LayoutContainer, SplitContainer, or TabContainer.\nBut note that those classes can contain any widget as a child.\nexample:\nSome quick samples:\nTo change the innerHTML use .setContent('<b>new content<\/b>')\n\nOr you can send it a NodeList, .setContent(dojo.query('div [class=selected]', userSelection))\nplease note that the nodes in NodeList will copied, not moved\n\nTo do a ajax update use .setHref('url')","examples":null},{"namespace":"dijit","className":"dijit.layout.LayoutContainer","summary":"Provides Delphi-style panel layout semantics.\n\ndetails\nA LayoutContainer is a box with a specified size (like style=\"width: 500px; height: 500px;\"),\nthat contains children widgets marked with \"layoutAlign\" of \"left\", \"right\", \"bottom\", \"top\", and \"client\".\nIt takes it's children marked as left\/top\/bottom\/right, and lays them out along the edges of the box,\nand then it takes the child marked \"client\" and puts it into the remaining space in the middle.\n\nLeft\/right positioning is similar to CSS's \"float: left\" and \"float: right\",\nand top\/bottom positioning would be similar to \"float: top\" and \"float: bottom\", if there were such\nCSS.\n\nNote that there can only be one client element, but there can be multiple left, right, top,\nor bottom elements.\n\nusage\n<style>\nhtml, body{ height: 100%; width: 100%; }\n<\/style>\n<div dojoType=\"dijit.layout.LayoutContainer\" style=\"width: 100%; height: 100%\">\n<div dojoType=\"dijit.layout.ContentPane\" layoutAlign=\"top\">header text<\/div>\n<div dojoType=\"dijit.layout.ContentPane\" layoutAlign=\"left\" style=\"width: 200px;\">table of contents<\/div>\n<div dojoType=\"dijit.layout.ContentPane\" layoutAlign=\"client\">client area<\/div>\n<\/div>\n\nLays out each child in the natural order the children occur in.\nBasically each child is laid out into the \"remaining space\", where \"remaining space\" is initially\nthe content area of this widget, but is reduced to a smaller rectangle each time a child is added.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.LinkPane","summary":"A ContentPane that loads data remotely","description":"LinkPane is just a ContentPane that loads data remotely (via the href attribute),\nand has markup similar to an anchor. The anchor's body (the words between <a> and <\/a>)\nbecome the title of the widget (used for TabContainer, AccordionContainer, etc.)\nexample:\n<a href=\"foo.html\">my title<\/a>\n\nI'm using a template because the user may specify the input as\n<a href=\"foo.html\">title<\/a>, in which case we need to get rid of the\n<a> because we don't want a link.","examples":null},{"namespace":"dijit","className":"dijit.layout.SplitContainer","summary":"A Container widget with sizing handles in-between each child","description":"Contains multiple children widgets, all of which are displayed side by side\n(either horizontally or vertically); there's a bar between each of the children,\nand you can adjust the relative size of each child by dragging the bars.\n\nYou must specify a size (width and height) for the SplitContainer.","examples":null},{"namespace":"dijit","className":"dijit.layout.StackContainer","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.StackController","summary":"Set of buttons to select a page in a page list.\nMonitors the specified StackContainer, and whenever a page is\nadded, deleted, or selected, updates itself accordingly.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout._StackButton","summary":"StackContainer buttons are not in the tab order by default","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.TabContainer","summary":"A Container with Title Tabs, each one pointing at a pane in the container.","description":"A TabContainer is a container that has multiple panes, but shows only\none pane at a time. There are a set of tabs corresponding to each pane,\nwhere each tab has the title (aka title) of the pane, and optionally a close button.\n\nPublishes topics <widgetId>-addChild, <widgetId>-removeChild, and <widgetId>-selectChild\n(where <widgetId> is the id of the TabContainer itself.","examples":null},{"namespace":"dijit","className":"dijit.layout.TabController","summary":"Set of tabs (the things with titles and a close button, that you click to show a tab panel).","description":"Lets the user select the currently shown pane in a TabContainer or StackContainer.\nTabController also monitors the TabContainer, and whenever a pane is\nadded or deleted updates itself accordingly.","examples":null},{"namespace":"dijit","className":"dijit.layout._TabButton","summary":"A tab (the thing you click to select a pane).","description":"Contains the title of the pane, and optionally a close-button to destroy the pane.\nThis is an internal widget and should not be instantiated directly.","examples":null},{"namespace":"dijit","className":"dijit.layout._LayoutWidget","summary":"Mixin for widgets that contain a list of children like SplitContainer.\nWidgets which mixin this code must define layout() to lay out the children","description":null,"examples":null}],"identifier":"className","label":"className"}
/trunk/api/js/dojo1.0/dijit/tests/_data/countries.json
New file
0,0 → 1,44
{ identifier: 'name',
label: 'name',
items: [
{ name:'Africa', type:'continent',
children:[{_reference:'Egypt'}, {_reference:'Kenya'}, {_reference:'Sudan'}] },
{ name:'Egypt', type:'country' },
{ name:'Kenya', type:'country',
children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
{ name:'Nairobi', type:'city' },
{ name:'Mombasa', type:'city' },
{ name:'Sudan', type:'country',
children:{_reference:'Khartoum'} },
{ name:'Khartoum', type:'city' },
{ name:'Asia', type:'continent',
children:[{_reference:'China'}, {_reference:'India'}, {_reference:'Russia'}, {_reference:'Mongolia'}] },
{ name:'China', type:'country' },
{ name:'India', type:'country' },
{ name:'Russia', type:'country' },
{ name:'Mongolia', type:'country' },
{ name:'Australia', type:'continent', population:'21 million',
children:{_reference:'Commonwealth of Australia'}},
{ name:'Commonwealth of Australia', type:'country', population:'21 million'},
{ name:'Europe', type:'continent',
children:[{_reference:'Germany'}, {_reference:'France'}, {_reference:'Spain'}, {_reference:'Italy'}] },
{ name:'Germany', type:'country' },
{ name:'France', type:'country' },
{ name:'Spain', type:'country' },
{ name:'Italy', type:'country' },
{ name:'North America', type:'continent',
children:[{_reference:'Mexico'}, {_reference:'Canada'}, {_reference:'United States of America'}] },
{ name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km',
children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] },
{ name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'},
{ name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' },
{ name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km',
children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] },
{ name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'},
{ name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' },
{ name:'United States of America', type:'country' },
{ name:'South America', type:'continent',
children:[{_reference:'Brazil'}, {_reference:'Argentina'}] },
{ name:'Brazil', type:'country', population:'186 million' },
{ name:'Argentina', type:'country', population:'40 million' }
]}
/trunk/api/js/dojo1.0/dijit/tests/_data/treeTest.json
New file
0,0 → 1,14
{
identifier: 'id',
label: 'name',
items: [
{ id: 'node1', name:'node1', someProperty:'somePropertyA', children:[
{ id: 'node1.1',name:'node1.1', someProperty:'somePropertyA1'},
{ id: 'node1.2',name:'node1.2', someProperty:'somePropertyA2'}
]},
{ id: 'node2', name:'node2', someProperty:'somePropertyB'},
{ id: 'node3', name:'node3', someProperty:'somePropertyC'},
{ id: 'node4', name:'node4', someProperty:'somePropertyA'},
{ id: 'node5', name:'node5', someProperty:'somePropertyB'}
]
}
/trunk/api/js/dojo1.0/dijit/tests/layout/test_AccordionContainer.html
New file
0,0 → 1,198
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Accordion 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>
 
<!-- uncomment for profiling
<script type="text/javascript"
src="../../../dojo/_base/html.js"></script>
<script type="text/javascript"
src="../../base/Layout.js"></script>
-->
 
<script type="text/javascript">
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
// dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
var accordion, pane4;
 
function init(){
accordion = new dijit.layout.AccordionContainer({}, dojo.byId("accordionShell"));
dojo.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){
// add a node that will be promoted to the content widget
var refNode = document.createElement("span");
refNode.innerHTML = "this is " + title;
document.body.appendChild(refNode);
var content = new dijit.layout.AccordionPane({title: title, selected: i==1}, refNode);
console.debug("adding content pane " + content.id);
accordion.addChild(content);
});
accordion.startup();
var refNode = document.createElement("span");
var title = "pane 4";
refNode.innerHTML = "this is " + title;
accordion.addChild(pane4=new dijit.layout.AccordionPane({title: title}, refNode));
}
 
dojo.addOnLoad(init);
 
function destroyChildren(){
accordion.destroyDescendants();
}
function selectPane4(){
accordion.selectChild(pane4);
}
</script>
 
</head>
<body style="padding: 50px;">
 
<h1 class="testTitle">AccordionContainer Tests</h1>
 
<h2>Accordion from markup:</h2>
<p>HTML before</p>
<p>HTML before</p>
<p>HTML before</p>
 
<div dojoType="dijit.layout.AccordionContainer" duration="200"
style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden">
<div dojoType="dijit.layout.AccordionPane" title="a">
Hello World
</div>
<div dojoType="dijit.layout.AccordionPane" title="b">
<p>
Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam
aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
quam.
</p>
<p>
Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</p>
</div>
<div dojoType="dijit.layout.AccordionPane" title="c">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
 
<p style="clear: both;">HTML after</p>
<p>HTML after</p>
<p>HTML after</p>
<p></p>
<p>Accordion with widgets</p>
<div dojoType="dijit.layout.AccordionContainer" duration="200"
style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden">
<div dojoType="dijit.layout.AccordionPane" selected="true"
title="Pane 1" >
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<p>
Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam
aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
quam.
</p>
<p>
Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</p>
</div>
 
<!-- test lazy loading -->
<div dojoType="dijit.layout.AccordionPane" title="Pane 2 (lazy load)" href="tab1.html"></div>
 
<!-- Support for nested complex widgets de-supported, for now
<div dojoType="dijit.layout.AccordionLayoutPane" title="Pane 3 (split pane)">
<div dojoType="dijit.layout.SplitContainer">
<p dojoType="dijit.layout.ContentPane">
Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</p>
<p dojoType="dijit.layout.ContentPane">
Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
consequat quis, varius interdum, nulla. Donec neque tortor,
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
ut eros sit amet ante pharetra interdum.
</p>
</div>
</div>
-->
</div>
 
<h2>Programatically created:</h2>
<button onclick="destroyChildren();">destroy children</button>
<button onclick="selectPane4();">select pane 4</button>
<br>
 
<div id="accordionShell" style="width: 400px; height: 400px;"></div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_LayoutCode.html
New file
0,0 → 1,383
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Demo</title>
 
 
<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.layout.LayoutContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.TabContainer");
 
// Used in doc0.html
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
 
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
// Simple layout container layout
var simpleLayout = {
widgetType: "LayoutContainer",
params: { id: "rootWidget" },
style: "border: 3px solid grey; width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {id: "left", layoutAlign: "left"},
style: "width: 100px; background: #ffeeff;",
innerHTML: "this is the left"
},
{
widgetType: "ContentPane",
params: {id: "right", layoutAlign: "right"},
style: "width: 100px; background: #ffeeff;",
innerHTML: "this is the right"
},
{
widgetType: "ContentPane",
params: {id: "top", layoutAlign: "top"},
style: "height: 100px; background: #eeeeee;",
innerHTML: "this is the top"
},
{
widgetType: "ContentPane",
params: {id: "bottom", layoutAlign: "bottom"},
style: "height: 100px; background: #eeeeee;",
innerHTML: "this is the bottom"
},
{
widgetType: "ContentPane",
params: {id: "client", layoutAlign: "client"},
style: "height: 100px; background: #ffffee;",
innerHTML: "this is the client"
}
]
};
 
// split container layout
var splitLayout = {
widgetType: "SplitContainer",
params: {id: "rootWidget", orientation: "horizontal"},
style: "border: 3px solid grey; width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {id: "left"},
style: "background: #ffeeff;",
innerHTML: "left pane of split container"
},
{
widgetType: "SplitContainer",
params: {
id: "nested", orientation: "vertical"},
children: [
{
widgetType: "ContentPane",
params: {id: "top"},
style: "background: #eeffee;",
innerHTML: "center-top pane of nested split container"
},
{
widgetType: "ContentPane",
params: {id: "bottom"},
style: "background: #eeffee;",
innerHTML: "center-bottom pane of nested split container"
}
]
},
{
widgetType: "ContentPane",
params: {id: "right"},
style: "background: #ffeeff;",
innerHTML: "right pane of split container"
}
]
};
 
// tab container layout
var tabLayout = {
widgetType: "TabContainer",
params: {id: "rootWidget"},
style: "width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {id: "content", title: "Content tab", href: "doc0.html", executeScripts: true},
style: "background: #ffeeff;"
},
{
widgetType: "SplitContainer",
params: {id: "nestedSplit", title: "Split pane tab", orientation: "vertical"},
children: [
{
widgetType: "ContentPane",
params: {id: "top"},
style: "background: #eeffee;",
innerHTML: "top pane of nested split container"
},
{
widgetType: "ContentPane",
params: {id: "bottom"},
style: "background: #eeffee;",
innerHTML: "bottom pane of nested split container"
}
]
},
{
widgetType: "TabContainer",
params: {id: "nestedTab", title: "Nested tabs"},
children: [
{
widgetType: "ContentPane",
params: {id: "left", title: "Nested Tab #1"},
style: "background: #eeffee;",
innerHTML: "tab 1 of nested tabs"
},
{
widgetType: "ContentPane",
params: {
id: "right", title: "Nested Tab #2"},
style: "background: #eeffee;",
innerHTML: "tab 2 of nested tabs"
}
]
}
]
};
 
/*
// tab container layout
var tabNoLayout = {
widgetType: "TabContainer",
params: {id: "rootWidget", doLayout: false},
children: [
{
widgetType: "ContentPane",
params: {id: "doc0", title: "Doc 0", href: "doc0.html", executeScripts: true},
style: "background: #ffeeff;"
},
{
widgetType: "ContentPane",
params: {id: "doc1", title: "Doc 1", href: "doc1.html", executeScripts: true},
style: "background: #eeffee;"
},
{
widgetType: "ContentPane",
params: {id: "doc2", title: "Doc 2", href: "doc2.html", executeScripts: true},
style: "background: #ffffee;"
}
]
};
*/
 
// accordion container layout
var accordionLayout = {
widgetType: "AccordionContainer",
params: {id: "rootWidget"},
style: "border: 3px solid grey; width: 95%; height: 400px;",
children: [
{
widgetType: "AccordionPane",
params: {id: "one", title: "Pane #1"},
style: "background: #ffeeff;",
innerHTML: "first pane contents"
},
{
widgetType: "AccordionPane",
params: {id: "two", title: "Pane #2"},
style: "background: #ffeeff;",
innerHTML: "second pane contents"
},
{
widgetType: "AccordionPane",
params: {id: "three", title: "Pane #3"},
style: "background: #ffeeff;",
innerHTML: "third pane contents"
}
]
};
 
// Create a widget hierarchy from a JSON structure like
// {widgetType: "LayoutContainer", params: { ... }, children: { ... } }
function createWidgetHierarchy(widgetJson){
// setup input node
var node = document.createElement("div");
document.body.appendChild(node); // necessary for tab contianer ???
if(widgetJson.style){
node.style.cssText = widgetJson.style;
}
if(widgetJson.innerHTML){
node.innerHTML=widgetJson.innerHTML;
}
 
// create the widget
var widget = new dijit.layout[widgetJson.widgetType](widgetJson.params, node);
 
// add its children (recursively)
if(widgetJson.children){
dojo.forEach(widgetJson.children,
function(child){ widget.addChild(createWidgetHierarchy(child)); });
}
widget.startup(); //TODO: this is required now, right?
 
return widget;
}
 
// create the widgets specified in layout and add them to widget "rootWidget"
function create(layout){
 
// erase old widget hierarchy (if it exists)
var rootWidget = dijit.byId("rootWidget");
if(rootWidget){
rootWidget.destroyRecursive();
}
 
// create new widget
rootWidget = createWidgetHierarchy(layout);
 
// and display it
var wrapper = dojo.byId("wrapper");
wrapper.innerHTML=""; // just to erase the initial HTML message
wrapper.appendChild(rootWidget.domNode);
// rootWidget.onResized();
 
// make/update the menu of operations on each widget
makeOperationTable();
}
 
// write out a menu of operations on each widget
function makeOperationTable(){
var html = "<table border=1>";
dijit.registry.forEach(function(widget){
html += "<tr><td>" + widget.id + "</td><td>";
html += "<button onclick='removeFromParent(\"" + widget.id + "\");'> destroy </button> ";
if(/Container/.test(widget.declaredClass)){
html += "<button onclick='addChild(\"" + widget.id + "\");'> add a child </button> ";
}
html += "</td></tr>";
});
html += "</table>";
dojo.byId("operations").innerHTML = html;
}
 
// remove a widget from it's parent and destroy it
function removeFromParent(widget){
widget = dijit.byId(widget);
if(widget.parent){
widget.parent.removeChild(widget);
}
widget.destroy();
 
// reset the operation table so this widget is no longer shown
makeOperationTable();
}
 
// add a child to given widget
function addChild(widget){
widget = dijit.byId(widget);
 
// setup input node
var node = document.createElement("div");
node.style.cssText = "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;"; // necessary if parent is LayoutContainer
// create the widget
var alignments = ["top","bottom","left","right"];
var hrefs = ["doc0.html", "doc1.html", "doc2.html"];
var child = new dijit.layout.ContentPane(
{
title: "Widget " + cnt, // necessary if parent is tab
layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer
executeScripts: true,
href: hrefs[cnt%3]
},
node);
cnt++;
 
if(/AccordionContainer/.test(widget.declaredClass)){
var pane = new dijit.layout.AccordionPane({
title: "AccordionWidget " + cnt
});
pane.setContent(child);
child = pane;
}
// add it to the parent
widget.addChild(child);
 
// reset the operation table so the new widget is shown
makeOperationTable();
}
var cnt=1;
 
// show a widget
function show(widget){
widget = dijit.byId(widget);
widget.show();
}
 
// hide a widget
function hide(widget){
widget = dijit.byId(widget);
widget.hide();
}
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
 
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
overflow: hidden; /* erase window level scrollbars */
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.dijitSplitPane{
margin: 5px;
}
#rightPane {
margin: 0;
}
#creator, #current {
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
#wrapper {
border: 3px solid green;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Test of layout code programmatic creation</h1>
<table width="100%">
<tr>
<td id="creator" valign="top">
<h4>Creator</h4>
<p>Pressing a button will programatically add a hierarchy of widgets</p>
<button onClick="create(simpleLayout);">Simple Layout</button>
<button onClick="create(splitLayout);">Split Layout</button>
<button onClick="create(tabLayout);">Tab Layout</button>
<!-- <button onClick="create(tabNoLayout);">Tab Non-Layout</button> -->
<button onClick="create(accordionLayout);">Accordion Layout</button>
</td>
<td id="current">
<h4>Current widgets</h4>
This pane will let you try certain operations on each of the widgets.
<div id="operations" style="height: 200px; overflow: auto;"></div>
</td>
</tr>
</table>
<hr>
<div id="wrapper">
When you press a button, this will be filled in with the generated widgets
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_StackContainer.html
New file
0,0 → 1,60
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>StackContainer Demo</title>
<style>
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
.dijitStackController .dijitToggleButtonChecked button {
background-color: white;
background-image: none;
}
.dijit_a11y .dijitStackController .dijitToggleButtonChecked button {
border-style: dashed !important;
}
</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.layout.ContentPane");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
function selected(page){
console.debug("page selected " + page.id);
var widget=dijit.byId("myStackContainer");
dijit.byId("previous").setDisabled(page.isFirstChild);
dijit.byId("next").setDisabled(page.isLastChild);
dijit.byId("previous2").setDisabled(page.isFirstChild);
dijit.byId("next2").setDisabled(page.isLastChild);
}
dojo.subscribe("myStackContainer-selectChild", selected);
</script>
</head>
 
<body>
<h1 class="testTitle">A Tale Of Two Cities</h1>
 
<button dojoType="dijit.form.Button" id="previous"
onClick="dijit.byId('myStackContainer').back()">&lt;</button>
<span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span>
<button dojoType="dijit.form.Button" id="next"
onClick="dijit.byId('myStackContainer').forward()">&gt;</button>
 
<div id="myStackContainer" dojoType="dijit.layout.StackContainer"
style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;">
<p id="page1" dojoType="dijit.layout.ContentPane" title="page 1">IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p>
<p id="page2" dojoType="dijit.layout.ContentPane" title="page 2">There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p>
<p id="page3" dojoType="dijit.layout.ContentPane" title="page 3">It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p>
</div>
 
<button dojoType="dijit.form.Button" id="previous2" onClick="dijit.byId('myStackContainer').back()">&lt;</button>
<span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span>
<button dojoType="dijit.form.Button" id="next2" onClick="dijit.byId('myStackContainer').forward()">&gt;</button>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_TabContainer.html
New file
0,0 → 1,158
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabContainer Demo</title>
 
<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.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.Tooltip");
dojo.require("dijit.layout.LinkPane");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
function testClose(pane,tab){
return confirm("Please confirm that you want tab "+tab.title+" closed");
}
 
startTime = new Date();
dojo.addOnLoad(function(){
var elapsed = new Date().getTime() - startTime;
var p = document.createElement("p");
p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms"));
document.body.appendChild(p);
// dojo.parser.parse(dojo.body());
});
 
dojo.addOnLoad(function(){
var tc = dijit.byId("mainTabContainer");
var cp = new dijit.layout.ContentPane({ title: 'Programmatically created tab' });
cp.domNode.innerHTML = "I was created programmatically!";
tc.addChild(cp, 3);
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
body {
font-family : sans-serif;
margin:20px;
}
 
/* add padding to each contentpane inside the tab container, and scrollbar if necessary */
.dojoTabPane {
padding : 10px 10px 10px 10px;
overflow: auto;
}
</style>
</head>
<body>
 
<h1 class="testTitle">Dijit layout.TabContainer tests</h1>
 
<p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading
files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already
part of this page. Tab2 is initially selected.
</p>
 
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;">
 
<div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div>
 
<div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>
 
<div dojoType="dijit.layout.ContentPane" title="Tab 3">
<h1>I am tab 3</h1>
<p>And I was already part of the page! That's cool, no?</p>
<p id="foo">tooltip on this paragraph</p>
<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
<button dojoType="dijit.form.Button">I'm a button </button>
<br>
<button dojoType="dijit.form.Button">So am I!</button>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
</div>
 
<div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer">
<a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a>
<a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a>
</div>
 
<a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a>
 
<a dojoType="dijit.layout.LinkPane" href="tab4.html">SplitContainer from href</a>
 
</div>
 
<p>
The next example is with closable tabs.
Tab 1 and Tab 3 can be closed; Tab 3 has a confirm box.
</p>
 
<div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;">
<div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div>
<div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2"></div>
<div dojoType="dijit.layout.ContentPane" title="Tab 3" onClose="testClose" closable="true">
<h1>I am tab 3</h1>
<p>And I was already part of the page! That's cool, no?</p>
<p>If you try to close me there should be a confirm dialog.</p>
</div>
</div>
 
<p>Tabs with titles on the bottom:</p>
 
<div id="btabs" dojoType="dijit.layout.TabContainer" tabPosition="bottom" style="width: 100%; height: 10em;">
<div id="btab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div>
<div id="btab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" onLoad="console.debug('Tab2 onLoad');" title="Tab 2"></div>
</div>
 
<p>Tabs with titles on the left:</p>
 
<div id="lhtabs" dojoType="dijit.layout.TabContainer" tabPosition="left-h" style="width: 100%; height: 10em;">
<div id="lhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div>
<div id="lhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div>
</div>
 
<p>Tabs with titles on the right:</p>
 
<div id="lrtabs" dojoType="dijit.layout.TabContainer" tabPosition="right-h" style="width: 100%; height: 10em;">
<div id="rhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div>
<div id="rhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div>
</div>
 
<h3>Typical rendering time</h3>
<table border=1>
<tr><th>IE</th><th>Firefox (mac)</th></tr>
<tr><td>1719</td><td>922</td></tr>
</table>
<h3>Rendering time</h3>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_Layout.html
New file
0,0 → 1,113
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Demo</title>
 
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.LinkPane");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.dijitSplitPane{
margin: 5px;
}
#rightPane {
margin: 0;
}
</style>
<script>
dojo.addOnLoad(function(){
// use "before advice" to print log message each time resize is called on a layout widget
var origResize = dijit.layout._LayoutWidget.prototype.resize;
dijit.layout._LayoutWidget.prototype.resize = function(mb){
console.log(this + ": resize(" + (mb ? "{w:"+ mb.w + ", h:" + mb.h + "}" : "null") +")" );
origResize.apply(this, arguments);
};
 
dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb){
console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");
});
});
</script>
</head>
<body>
<div id="outer" dojoType="dijit.layout.LayoutContainer"
style="width: 100%; height: 100%;">
<div id="topBar" dojoType="dijit.layout.ContentPane" layoutAlign="top"
style="background-color: #274383; color: white;">
top bar
</div>
<div id="bottomBar" dojoType="dijit.layout.ContentPane" layoutAlign="bottom"
style="background-color: #274383; color: white;">
bottom bar
</div>
<div id="horizontalSplit" dojoType="dijit.layout.SplitContainer"
orientation="horizontal"
sizerWidth="5"
activeSizing="0"
layoutAlign="client"
>
<div id="leftPane" dojoType="dijit.layout.ContentPane"
sizeMin="20" sizeShare="20">
Left side
</div>
 
<div id="rightPane"
dojoType="dijit.layout.SplitContainer"
orientation="vertical"
sizerWidth="5"
activeSizing="0"
sizeMin="50" sizeShare="80"
>
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" sizeMin="20" sizeShare="70">
 
<a id="tab1" dojoType="dijit.layout.LinkPane" href="tab1.html">Tab 1</a>
 
<a id="tab2" dojoType="dijit.layout.LinkPane" href="tab2.html">Tab 2</a>
</div>
<div id="bottomRight" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="30">
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
Bottom right<br>
</div>
</div>
</div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_ContentPane.html
New file
0,0 → 1,93
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ContentPane Test</title>
 
<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.layout.ContentPane");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.InlineEditBox");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<style>
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
body {
margin: 1em;
padding: 1em;
}
 
.box {
position: relative;
background-color: white;
border: 2px solid black;
padding: 8px;
margin: 4px;
}
</style>
</head>
<body>
<h1 class="testTitle">Dijit layout.ContentPane tests</h1>
<p>pre-container paragraph</p>
 
<div dojoType="dijit.layout.ContentPane" class="box">
some text (top-level container)
 
<div dojoType="dijit.layout.ContentPane" class="box">
 
text in the inner container (1)
 
<div dojoType="dijit.layout.ContentPane" class="box" href="tab2.html" hasShadow="true">
hi
</div>
 
text in the inner container (2)
 
<div dojoType="dijit.layout.ContentPane" class="box">
inner-inner 2
</div>
 
text in the inner container (3)
 
<div dojoType="dijit.layout.ContentPane" class="box">
inner-inner 3
</div>
 
text in the inner container (4)
 
</div>
 
some more text (top-level container)
</div>
 
<p>mid-container paragraph</p>
 
<div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true">
2nd top-level container
</div>
 
<p>post-container paragraph</p>
 
<div id="ContentPane3" class="box" hasShadow="true">
some content pane blah blah blah
</div>
<div dojoType="dijit.layout.ContentPane" class="box" href="combotab.html" hasShadow="true" id="test">
<p style='background-color:yellow;border:1px solid red;text-align:center;'>This text should automatically be replaced by downloaded content from combotab.html</p>
</div>
<input type="button" value="Change pane in 3 seconds" onClick='setTimeout("dijit.byId(\"test\").setHref(\"tab2.html\")", 3000);'>
<script type="text/javascript">
dojo.addOnLoad(function(){
var tmp = new dijit.layout.ContentPane({}, dojo.byId("ContentPane3"));
tmp.startup();
console.debug('created ' + tmp);
});
</script>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/ContentPane.html
New file
0,0 → 1,597
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test ContentPane</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
.box {
border: 1px solid black;
padding: 8px;
}
 
.dijitTestWidget {
border: 1px dashed red;
background-color: #C0E209 ;
}
</style>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit._Container");
dojo.require("dijit._Templated");
dojo.require("dijit.layout.StackContainer");
 
// create a do nothing, only for test widget
dojo.declare("dijit.TestWidget",
[dijit._Widget, dijit._Templated], {
templateString: "<span class='dijitTestWidget'></span>"
});
 
 
dojo.addOnLoad(function(){
doh.register("pane1",
[
{
name: "no_autoparse",
runTest: function(t){
if(dijit.byId("pane1")){
throw doh._AssertFailure("Page got autoparsed when it shouldn't");
}
}
}
]
);
 
var pane2;
 
doh.registerGroup("pane2",
[
{
name: "clear_content",
setUp: function(t){
pane2 = new dijit.layout.ContentPane({}, dojo.byId("pane2"));
pane2.setContent();// pass undefined on purpose
},
runTest: function(t){
t.assertEqual(0, dijit._Container.prototype.getChildren.call(pane2).length);
t.assertEqual("", pane2.domNode.innerHTML)
}
},
{
name: "setContent_String",
setUp: function(){
pane2.setContent();
},
runTest: function(t){
var msg = "<h3>a simple html string</h3>";
pane2.setContent(msg);
t.assertEqual(msg, pane2.domNode.innerHTML.toLowerCase());
}
},
{
name: "setContent_DOMNode",
setUp: function(t){
var div = dojo.doc.createElement('div');
div.innerHTML = "setContent( [DOMNode] )";
div.setAttribute('dojoType', 'dijit.TestWidget');
pane2.setContent(div);
},
runTest: function(t){
t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length);
},
tearDown: function(t){
pane2.setContent(); // clear content for next test
}
},
{
name: "setContent_NodeList",
setUp: function(t){
var div = dojo.doc.createElement('div');
div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>"
+"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
+"<div dojotype='dijit.TestWidget'>below</div>";
 
var list = div.childNodes;
pane2.setContent(div.childNodes);
},
runTest: function(t){
t.assertEqual(2, dijit._Container.prototype.getChildren.call(pane2).length);
 
//regular DOM check
var children = pane2.domNode.childNodes;
t.assertEqual(4, children.length);
t.assertEqual("Testing!", children[1].nodeValue);
t.assertEqual("div", children[2].nodeName.toLowerCase());
t.assertEqual("<p><span><b>deep nested</b></span></p>", children[2].innerHTML.toLowerCase());
}
},
{
name: "setContent_dojo_NodeList",
setUp: function(t){
pane2.setContent();
},
runTest: function(t){
var div = dojo.doc.createElement('div');
div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>"
+"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
+"<div dojotype='dijit.TestWidget'>below</div>";
 
var list = new dojo.NodeList();
dojo.forEach(div.childNodes, function(n){
list.push(n.cloneNode(true));
});
 
pane2.setContent(list);
t.assertEqual(4, pane2.domNode.childNodes.length);
}
},
{
name: "extractContent",
runTest: function(t){
var def = pane2.extractContent;
t.assertFalse(def);
 
// test that it's actually working
pane2.extractContent = true;
pane2.setContent('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" '
+'"http://www.w3.org/TR/html4/strict.dtd">'
+'<html><head><style>body{font-weight:bold;}</style></head>'
+'<body>extractContent test</body></html>');
 
t.assertEqual("extractContent test", pane2.domNode.innerHTML);
 
// reset back to default
pane2.extractContent = def;
}
},
 
/////////////////////////////////////////////////////////////////////////
// We assume that our network connection has a maximum of 1.5 sec latency
/////////////////////////////////////////////////////////////////////////
{
name: "setHref_loading",
timeout: 1800,
setUp: function(t){
pane2.setHref('getResponse.php?messId=1');
},
runTest: function(t){
var d = new tests.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length);
})
, 1500);
return d;
}
},
{
name: "setHref_then_cancel",
timeout: 2800,
setUp: function(t){
pane2.setContent();// clear previous
},
runTest: function(t){
var msg = "This should NEVER be seen!";
pane2.setHref('getResponse.php?delay=1000&message='+encodeURI(msg));
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertFalse(pane2.domNode.innerHTML == msg);
}
), 2500);
 
pane2.cancel();
 
return d;
}
},
{
// test that setHref cancels a inflight setHref
name: "setHref_cancels_previous_setHref",
timeout: 2800,
setUp: function(t){
pane2.setContent();
},
runTest: function(t){
var msgCanceled = "This should be canceled";
pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled));
 
var msg = "This message should win over the previous";
setTimeout(function(){
pane2.setHref("getResponse.php?message="+encodeURI(msg));
}, 900);
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertEqual(msg, pane2.domNode.innerHTML);
}
), 2500);
return d;
}
},
{
name: "setContent_cancels_setHref",
timeout: 2800,
setUp: function(t){
pane2.setContent();
},
runTest: function(t){
var msgCanceled = "This message be canceled";
pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled));
 
var msg = "This message should win over the inflight one";
setTimeout(function(){
pane2.setContent(msg);
}, 900);
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertEqual(msg, pane2.domNode.innerHTML);
}
), 2500);
return d;
}
},
{
name: "refresh",
timeout: 1900,
setUp: function(t){
pane2.setHref("getResponse.php?message="+encodeURI('initial load'));
},
runTest: function(t){
var msg = 'refreshed load'
setTimeout(function(){
pane2.href = "getResponse.php?message="+encodeURI(msg);
pane2.refresh();
}, 100);
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertEqual(msg, pane2.domNode.innerHTML);
}
), 1600);
return d;
 
}
},
{
name: "preventCache",
timeout:1800,
setUp: function(t){
pane2.setContent();
},
runTest: function(t){
var def = pane2.preventCache;
t.assertFalse(def);
 
pane2.preventCache = true;
 
pane2.setHref("getResponse.php?bounceGetStr=1&message="+encodeURI('initial'));
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
var getStr = dojo.byId('bouncedGetStr');
t.assertTrue(getStr.innerHTML.indexOf('preventCache=') > -1);
}
), 1500);
 
pane2.preventCache = def;
return d;
},
tearDown: function(t){
pane2.preventCache = false;
}
},
{
name: "isLoaded",
timeout: 1800,
setUp: function(t){
pane2.setContent();
},
runTest: function(t){
t.assertTrue(pane2.isLoaded);
 
pane2.setHref("getResponse.php?delay=300&message=test");
 
t.assertFalse(pane2.isLoaded);
 
var ilObj = {}; // a object to get a reference instead of copy
 
// probe after 200ms
setTimeout(function(){
ilObj.probed = pane2.isLoaded;
}, 200);
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertTrue(pane2.isLoaded);
t.assertFalse(ilObj.probed);
}
), 1500);
return d;
}
},
{
// test that we does'nt load a response if we are hidden
name: "wait_with_load_when_domNode_hidden",
timeout: 1800,
setUp: function(t){
pane2.domNode.style.display = 'none';
pane2.setContent();
},
runTest: function(t){
pane2._msg = "This text should not be loaded until after widget is shown";
pane2.setHref("getResponse.php?message="+encodeURI(pane2._msg));
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertFalse(pane2.domNode.innerHTML == pane2._msg);
}
), 1500);
return d;
},
tearDown: function(t){
pane2.domNode.style.display = "";
}
},
{
name: "onDownloadError",
timeout: 1800,
setUp: function(t){
pane2.setContent();
},
runTest: function(t){
var res = {};
var msg = "Error downloading modified message";
var orig = pane2.onDownloadError;
 
 
pane2.onDownloadError = function(){
return msg;
}
 
this.onError = function(e){
res.onError = true;
res.onError_Arg = !!e;
return "This message should be ignored as it gets invoked by dojo.connect";
}
 
var evtHandle = dojo.connect(pane2, 'onDownloadError', this, 'onError');
 
// test onDownloadError
pane2.setHref('nonexistant');
 
// do the test
var d = new t.Deferred();
setTimeout(function(){
try{
if(!res.onError){
d.errback(new doh._AssertFailure("onDownloadError was never invoked"));
}
if(!res.onError_Arg){
d.errback(new doh._AssertFailure("onDownloadError did'nt get any argument on invokation"));
}
if(pane2.domNode.innerHTML != msg){
d.errback(new doh._AssertFailure("custom errortext not set"));
}
d.callback(true);
}catch(e){
d.errback(e);
}finally{
// reset to default
dojo.disconnect(evtHandle);
pane2.onDownloadError = orig;
}
}, 1500);
 
return d;
}
},
{
name: "onLoad|Unload_onDownloadStart|End",
timeout: 2400,
setUp:function(t){
pane2.setContent();
},
runTest:function(t){
var obj = {
start:function(){
this.start_called = 1;
// check that custom message gets set
setTimeout(function(){
obj.start_msg = (pane2.domNode.innerHTML == msg);
}, 20);
},
end: function(){ this.end_called = 1; },
load: function(){ this.load_called = 1; },
unload: function(){ this.unload_called = 1; }
};
 
//set custom message
var origStart = pane2.onDownloadStart;
var msg = "custom downloadstart message";
pane2.onDownloadStart = function(){ return msg; };
 
var startHandler = dojo.connect(pane2, 'onDownloadStart', obj, 'start');
var endHandler = dojo.connect(pane2, 'onDownloadEnd', obj, 'end');
var loadHandler = dojo.connect(pane2, 'onLoad', obj, 'load');
var unloadHandler = dojo.connect(pane2, 'onUnload', obj, 'unload');
 
pane2.setHref('getResponse.php?delay=400');
 
var d = new t.Deferred();
setTimeout(function(){
try{
if(!obj.start_called){
d.errback(new doh._AssertFailure('onDownloadStart not called'));
}
if(!obj.start_msg){
d.errback(new doh._AssertFailure('custom download message not set'));
}
if(!obj.end_called){
d.errback(new doh._AssertFailure('onDownloadEnd not called'));
}
if(!obj.unload_called){
d.errback(new doh._AssertFailure('onUnload not called'));
}
if(!obj.load_called){
d.errback(new doh._AssertFailure('onLoad not called'));
}
d.callback(true);
}catch(e){
d.errback(e);
}finally{
dojo.disconnect(endHandler);
dojo.disconnect(startHandler);
dojo.disconnect(unloadHandler);
dojo.disconnect(loadHandler);
 
pane2.onDownloadStart = origStart;
}
}, 1900);
 
return d;
}
}
 
]
);
 
var pane3, st, tmp;
 
doh.registerGroup("child_to_StackContainer",
[
{
// TODO: this test should be moved to registerGroup setUp when #3504 is fixed
// We actually dont need to test anything here, just setUp
name: "setUp_StackContainer",
setUp:function(t){
st = dojo.byId('stackcontainer');
dojo.addClass(st, 'box');
st = new dijit.layout.StackContainer({}, st);
 
st.addChild(new dijit.TestWidget());
pane3 = new dijit.layout.ContentPane({href:'getResponse.php?delay=300&message=Loaded!'}, dojo.doc.createElement('div'));
st.addChild(pane3);
 
pane3.startup(); // starts the ContentPane
},
runTest:function(t){
t.assertTrue(st);
t.assertEqual(2, st.getChildren().length);
}
},
{
name: "preload_false_by_default",
runTest: function(t){
t.assertFalse(pane3.isLoaded);
t.assertEqual('', pane3.domNode.innerHTML);
}
},
{
name: "startLoad when selected",
timeout: 2100,
runTest: function(t){
st.selectChild(pane3);
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
t.assertTrue(pane3.isLoaded);
t.assertEqual('Loaded!', pane3.domNode.innerHTML);
}
), 1800);
 
return d;
}
},
{
name: "refreshOnShow",
timeout: 2100,
setUp: function(t){
tmp = {
onUnload: function(){ this._unload_fired = 1; },
onLoad: function(){ this._load_fired = 1; }
};
tmp.unload = dojo.connect(pane3, 'onUnload', tmp, 'onUnload');
tmp.load = dojo.connect(pane3, 'onLoad', tmp, 'onLoad');
 
pane3.refreshOnShow = true;
},
runTest: function(t){
var d = new t.Deferred();
st.back();
st.forward();
 
setTimeout(d.getTestCallback(function(){
t.assertTrue(tmp._unload_fired);
t.assertTrue(tmp._load_fired);
t.assertEqual('Loaded!', pane3.domNode.innerHTML);
}), 1800);
 
return d;
},
tearDown: function(){
dojo.disconnect(tmp.unload);
dojo.disconnect(tmp.load);
pane3.refreshOnShow = pane3.constructor.prototype.refreshOnShow;
}
},
{
name: "downloadTriggeredOnStartup",
timeout: 1800,
runTest: function(t){
var href = 'getResponse.php?message=Loaded!'
var pane4 = new dijit.layout.ContentPane({href:href}, dojo.doc.createElement('div'));
 
dojo.place(pane4.domNode, pane3.domNode, 'after');
 
pane4.startup(); // parser should call startup when djConfig.parseOnLoad=true
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual('Loaded!', pane4.domNode.innerHTML);
pane4.destroy();
}), 1500);
return d;
}
}
]
);
 
doh.run();
});
</script>
</head>
<body class="tundra">
<h2>dijit.layout.ContentPane test</h2>
<h3>Test designed to run on localhost (minimize impact from network latency)</h3>
 
<h4>This should NOT be parsed automatically</h4>
<div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true" id="pane1">
<div dojoType='dijit.TestWidget'>If this has a different background and a red border, the page parsed when it shouldn't</div>
</div>
<br/><h3>Testing ContentPane</h3>
<div id='pane2' class='box'>
Even tough the entire page isn't scanned for widgets,
any sub widgets of a ContentPane will be created when a ContentPane is created<br/>
<span id="zero" dojoType='dijit.TestWidget'>This should have a backgroundcolor and a border</span>
<div id="one" dojoType="dijit._Widget"></div>
<div id="two" dojoType="dijit._Widget"></div>
<div id="three" dojoType="dijit._Widget"></div>
</div>
<br/><br/>
<div id='stackcontainer'></div>
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_LayoutContainer.html
New file
0,0 → 1,174
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dijit.layout.LayoutContainer Test</title>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
</style>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
 
<script type="text/javascript">
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
 
</head>
<body class="tundra">
<h2>Dijit layout.LayoutContainer tests</h2>
<p>Basic layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order. Tab order
should be: left, right, top, middle/main, bottom</p>
 
<div dojoType="dijit.layout.LayoutContainer"
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0">
left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #acb386;" tabindex="0">
right
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; " tabindex="0">
top bar
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;" tabindex="0">
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select dojoType="dijit.form.FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86;" tabindex="0">
bottom bar
</div>
</div>
 
<p>Advanced layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order. Tab order
should be: left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested
layout containers to achieve a tab order which matches presentation and source code order.</p>
<div dojoType="dijit.layout.LayoutContainer"
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0">
top bar
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0">
 
bottom bar
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
inner left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
 
(to check we're copying children around properly).<br />
<select dojoType="dijit.form.FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
inner right
</div>
</div>
 
<p>Advanced layout with nested containers. Tabindex=&quot;0&quot; added to content panes to show tab order. Order should be:
left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p>
<div dojoType="dijit.layout.LayoutContainer"
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" >
<div dojoType="dijit.layout.LayoutContainer" style="height:90%;border: 2px solid black;padding: 10px;">
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0">
top bar
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;">
<div dojoType="dijit.layout.LayoutContainer" style="height:80%;border: 2px solid black;padding: 10px;">
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
inner left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select dojoType="dijit.form.FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
inner right
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0" >
bottom bar
</div>
</div>
</div>
</div>
 
<p>Goofy spiral layout. Match of source code order to tab order can not be achieved with this type of layout.</p>
<div dojoType="dijit.layout.LayoutContainer"
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;">
outer left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;">
outer top
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;">
outer right
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;">
outer bottom
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;">
inner left
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;">
inner top
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;">
inner right
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;">
inner bottom
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding: 10px;">
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select dojoType="dijit.form.FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/getResponse.php
New file
0,0 → 1,57
<?php
// this just bounces a message as a response, and optionally emulates network latency.
 
// default delay is 0 sec, to change:
// getResponse.php?delay=[Int milliseconds]
 
// to change the message returned
// getResponse.php?mess=whatever%20string%20you%20want.
 
// to select a predefined message
// getResponse.php?messId=0
 
error_reporting(E_ALL ^ E_NOTICE);
 
$delay = 1; // 1 micro second to avoid zero division in messId 2
if(isset($_GET['delay']) && is_numeric($_GET['delay'])){
$delay = (intval($_GET['delay']) * 1000);
}
 
if(isset($_GET['messId']) && is_numeric($_GET['messId'])){
switch($_GET['messId']){
case 0:
echo "<h3>WARNING This should NEVER be seen, delayed by 2 sec!</h3>";
$delay = 2;
break;
case 1:
echo "<div dojotype='dijit.TestWidget'>Testing setHref</div>";
break;
case 2:
echo "<div dojotype='dijit.TestWidget'>Delayed setHref test</div>
<div dojotype='dijit.TestWidget'>Delayed by " . ($delay/1000000) . " sec.</div>";
break;
case 3:
echo "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only";
break;
case 4:
echo "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.";
break;
case 5:
echo "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:";
break;
default:
echo "unknown messId:{$_GET['messId']}";
}
}
 
if(isset($_GET['bounceGetStr']) && $_GET['bounceGetStr']){
echo "<div id='bouncedGetStr'>{$_SERVER["QUERY_STRING"]}</div>";
}
 
if(isset($_GET['message']) && $_GET['message']){
echo $_GET['message'];
}
 
usleep($delay);
 
?>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_TabContainer_remote.html
New file
0,0 → 1,109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabContainer Demo</title>
 
<script type="text/javascript" djConfig="isDebug: true,parseOnLoad:true"
src="../../../dojo/dojo.js"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.Tooltip");
dojo.require("dijit.layout.LinkPane");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
 
var tabCounter;
function testClose(pane, tab){
// remove html from title
var title = dojo.trim(tab.title.replace(/<\/?[a-z][a-z0-9]*[^>]*>/ig, ""));
return confirm("Please confirm that you want tab "+title+" closed");
}
 
function randomMessageId(){
return Math.floor(Math.random() * 3) + 3;
}
 
function createTab(){
if(!tabCounter){ tabCounter = 3; }
 
var title = '<img src="../images/plus.gif" style="background-color:#95B7D3;"/> Tab ' +(++tabCounter);
var refreshOnShow = !!(tabCounter % 2);
 
var newTab = new dijit.layout.ContentPane({
title: title + (refreshOnShow ? ' <i>refreshOnShow</i>': ''),
closable:true,
refreshOnShow: refreshOnShow,
href: 'getResponse.php?delay=1000&messId='+randomMessageId()
+"&message="+encodeURI("<h1>Programmatically created Tab "+tabCounter+"</h1>")
}, dojo.doc.createElement('div'));
 
dijit.byId('ttabs').addChild(newTab);
 
newTab.startup(); // find parent TabContainer and subscribe to selectChild event
}
 
startTime = new Date();
dojo.addOnLoad(function(){
var elapsed = new Date().getTime() - startTime;
var p = document.createElement("p");
p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms"));
document.body.appendChild(p);
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
 
body {
font-family : sans-serif;
margin:20px;
}
 
/* add padding to each contentpane inside the tab container, and scrollbar if necessary */
.dojoTabPane {
padding : 10px 10px 10px 10px;
overflow: auto;
}
</style>
</head>
<body>
 
<h1 class="testTitle">Dijit layout.TabContainer (delayed) remote tests</h1>
 
<p>These tabs are made up of external content. Loading is delayed to make it easier to see if refreshOnShow and preload = 'false' is working.<br/>
The tabs also tests to insert html in the Tab title
</p>
 
<div dojoType='dijit.form.Button' onClick='createTab()'>Create a Tab</div>
<div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 20em;">
<a id="ttab1" dojoType="dijit.layout.LinkPane"
href="getResponse.php?messId=3&delay=1000"
closable="true"
><img src='../images/copy.gif'/> Tab1</a>
<a id="ttab2" dojoType="dijit.layout.LinkPane"
href="getResponse.php?messId=4&delay=1000"
refreshOnShow="true" title="Tab 2 "
selected='true'
closable='true'
><i>refreshOnShow</i>
<img src='../images/cut.gif'/>
</a>
<a dojoType="dijit.layout.LinkPane"
href="getResponse.php?messId=5&delay=1000"
onClose="testClose"
closable="true"
>
<b>Tab 3</b>
<img src='../images/paste.gif'/>
</a>
</div>
 
<h3>Rendering time</h3>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/layout/doc0.html
New file
0,0 → 1,12
<h1>Document 0</h1>
This document has <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
Also it's got a widget, a combo box:<br>
<select dojoType="dijit.form.ComboBox">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
And a button too:
<button dojoType="dijit.form.Button">hello!</button>
Here's some text that comes AFTER the button.
/trunk/api/js/dojo1.0/dijit/tests/layout/ContentPane.js
New file
0,0 → 1,9
if(!dojo._hasResource["dijit.tests.layout.ContentPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests.layout.ContentPane"] = true;
dojo.provide("dijit.tests.layout.ContentPane");
 
if(dojo.isBrowser){
doh.registerUrl("dijit.tests.layout.ContentPane", dojo.moduleUrl("dijit", "tests/layout/ContentPane.html"), 30000);
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/layout/combotab.html
New file
0,0 → 1,11
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
url="../_data/states.json"></div>
State:
<span id="editable" dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox"
editorParams="{value: 'California', store: stateStore, searchAttr: 'name', promptMessage='Please enter a state'}">
<script type="dojo/connect" event="onChange">
// connect to editable onChange event, Note that we dont need to disconnect
console.log('User selected:'+this.getValue());
</script>
</span>
 
/trunk/api/js/dojo1.0/dijit/tests/layout/doc1.html
New file
0,0 → 1,13
<!-- Used from test_RemotePane.html -->
 
<h1> Document 1</h1>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus risus. Praesent eu lacus et enim laoreet sollicitudin. Quisque mollis mi a lectus. Cras ante. Aliquam tempus justo laoreet justo. Vestibulum egestas feugiat nisi. Nulla ultrices consequat felis. Curabitur dignissim augue vel enim. Fusce tempus tempor mauris. Praesent suscipit pede in nunc. Duis mi neque, malesuada non, volutpat et, nonummy et, ante. Aliquam neque. Nulla rhoncus, turpis eget mattis molestie, magna nulla dictum ligula, quis tempor odio justo vel pede. Donec sit amet tellus. Phasellus sapien. Nulla id massa at nunc condimentum fringilla. Fusce suscipit ipsum et lorem consequat pulvinar. Quisque lacinia sollicitudin tellus.</p>
 
<p>Nulla massa lectus, porttitor vitae, dignissim vel, iaculis eget, mi. Vestibulum sed lorem. Nullam convallis elit id leo. Aliquam est purus, rutrum at, sodales non, nonummy a, justo. Proin at diam vel nibh dictum rhoncus. Duis nisl. Etiam orci. Integer hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac erat. Sed velit orci, sodales quis, commodo ut, elementum sed, nibh. Cras mattis vulputate nisl. Mauris eu nulla sed orci dignissim laoreet. Morbi commodo, est vitae pharetra ullamcorper, ante nisl ultrices velit, sit amet vulputate turpis elit id lacus. Vestibulum diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 
<p>Praesent rutrum nunc quis felis. Morbi tempor. Quisque porta magna imperdiet magna. Ut gravida, ipsum eu euismod consectetuer, nisl lectus posuere diam, vel dignissim elit nisi sit amet lorem. Curabitur non nunc. Morbi metus. Nulla facilisi. Sed et ante. Etiam ac lectus. Duis tristique molestie sem. Pellentesque nec quam. Nullam pellentesque ullamcorper sem.</p>
 
<p>Duis ut massa eget arcu porttitor pharetra. Curabitur malesuada nisi id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus massa. Donec quis justo ut tortor faucibus suscipit. Vivamus commodo neque eget nulla. Donec imperdiet lacus condimentum justo. In sollicitudin magna vitae libero. Curabitur scelerisque libero et eros imperdiet cursus. Maecenas adipiscing. Integer imperdiet, neque ut fringilla semper, leo nisi tincidunt enim, id accumsan leo nisi a libero. Morbi rutrum hendrerit eros. Vestibulum eget augue vel urna congue faucibus.</p>
 
<p>Morbi ante sapien, consequat non, consectetuer vitae, pharetra non, dui. Cras tempus posuere quam. Vestibulum quis neque. Duis lobortis urna in elit. Aliquam non tellus. Etiam nisi eros, posuere vel, congue id, fringilla in, risus. Duis semper rutrum risus. Nullam felis massa, lobortis sit amet, posuere tempor, mattis id, tellus. Nulla id arcu interdum risus commodo tincidunt. Vivamus pretium pulvinar pede. Vivamus eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum, enim eu venenatis tempor, nunc elit convallis tortor, sit amet vulputate turpis arcu eu pede. Praesent molestie, lacus sed vehicula convallis, enim pede fringilla nunc, at porttitor justo ante a diam. Nunc magna eros, interdum vel, varius eget, volutpat eu, orci. Nunc nec mauris. Nulla facilisi. Vivamus dictum elementum risus. Nam placerat arcu.</p>
/trunk/api/js/dojo1.0/dijit/tests/layout/doc2.html
New file
0,0 → 1,13
<!-- Used from test_RemotePane.html -->
 
<h1> Document 2</h1>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus risus. Praesent eu lacus et enim laoreet sollicitudin. Quisque mollis mi a lectus. Cras ante. Aliquam tempus justo laoreet justo. Vestibulum egestas feugiat nisi. Nulla ultrices consequat felis. Curabitur dignissim augue vel enim. Fusce tempus tempor mauris. Praesent suscipit pede in nunc. Duis mi neque, malesuada non, volutpat et, nonummy et, ante. Aliquam neque. Nulla rhoncus, turpis eget mattis molestie, magna nulla dictum ligula, quis tempor odio justo vel pede. Donec sit amet tellus. Phasellus sapien. Nulla id massa at nunc condimentum fringilla. Fusce suscipit ipsum et lorem consequat pulvinar. Quisque lacinia sollicitudin tellus.</p>
 
<p>Nulla massa lectus, porttitor vitae, dignissim vel, iaculis eget, mi. Vestibulum sed lorem. Nullam convallis elit id leo. Aliquam est purus, rutrum at, sodales non, nonummy a, justo. Proin at diam vel nibh dictum rhoncus. Duis nisl. Etiam orci. Integer hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac erat. Sed velit orci, sodales quis, commodo ut, elementum sed, nibh. Cras mattis vulputate nisl. Mauris eu nulla sed orci dignissim laoreet. Morbi commodo, est vitae pharetra ullamcorper, ante nisl ultrices velit, sit amet vulputate turpis elit id lacus. Vestibulum diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 
<p>Praesent rutrum nunc quis felis. Morbi tempor. Quisque porta magna imperdiet magna. Ut gravida, ipsum eu euismod consectetuer, nisl lectus posuere diam, vel dignissim elit nisi sit amet lorem. Curabitur non nunc. Morbi metus. Nulla facilisi. Sed et ante. Etiam ac lectus. Duis tristique molestie sem. Pellentesque nec quam. Nullam pellentesque ullamcorper sem.</p>
 
<p>Duis ut massa eget arcu porttitor pharetra. Curabitur malesuada nisi id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus massa. Donec quis justo ut tortor faucibus suscipit. Vivamus commodo neque eget nulla. Donec imperdiet lacus condimentum justo. In sollicitudin magna vitae libero. Curabitur scelerisque libero et eros imperdiet cursus. Maecenas adipiscing. Integer imperdiet, neque ut fringilla semper, leo nisi tincidunt enim, id accumsan leo nisi a libero. Morbi rutrum hendrerit eros. Vestibulum eget augue vel urna congue faucibus.</p>
 
<p>Morbi ante sapien, consequat non, consectetuer vitae, pharetra non, dui. Cras tempus posuere quam. Vestibulum quis neque. Duis lobortis urna in elit. Aliquam non tellus. Etiam nisi eros, posuere vel, congue id, fringilla in, risus. Duis semper rutrum risus. Nullam felis massa, lobortis sit amet, posuere tempor, mattis id, tellus. Nulla id arcu interdum risus commodo tincidunt. Vivamus pretium pulvinar pede. Vivamus eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum, enim eu venenatis tempor, nunc elit convallis tortor, sit amet vulputate turpis arcu eu pede. Praesent molestie, lacus sed vehicula convallis, enim pede fringilla nunc, at porttitor justo ante a diam. Nunc magna eros, interdum vel, varius eget, volutpat eu, orci. Nunc nec mauris. Nulla facilisi. Vivamus dictum elementum risus. Nam placerat arcu.</p>
/trunk/api/js/dojo1.0/dijit/tests/layout/tab1.html
New file
0,0 → 1,6
 
<h1>Tab 1</h1>
 
<p>I am tab 1. I was loaded externally.</p>
 
<div label="foo!">blah</div>
/trunk/api/js/dojo1.0/dijit/tests/layout/tab2.html
New file
0,0 → 1,3
<h1>Tab 2</h1>
 
<p>I am tab 2. I was loaded externally as well.</p>
/trunk/api/js/dojo1.0/dijit/tests/layout/tab3.html
New file
0,0 → 1,39
<div dojoType="dijit.layout.TabContainer">
<div dojoType="dijit.layout.ContentPane" title="Subtab #1">
<p>This is a nested tab container BUT loaded via an href.</p>
</div>
<div dojoType="dijit.layout.ContentPane" title="Subtab #2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
</div>
</div>
/trunk/api/js/dojo1.0/dijit/tests/layout/tab4.html
New file
0,0 → 1,40
<div dojoType="dijit.layout.SplitContainer" orientation="vertical">
<div dojoType="dijit.layout.ContentPane" title="split #1">
<p>Top of split container loaded via an href.</p>
</div>
<div dojoType="dijit.layout.ContentPane" title="split #2">
<p>Bottom of split container loaded via an href.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
semper velit ante id metus. Praesent massa dolor, porttitor sed,
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
tortor pharetra congue. Suspendisse pulvinar.
</p>
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos.
</p>
</div>
</div>
/trunk/api/js/dojo1.0/dijit/tests/layout/test_SplitContainer.html
New file
0,0 → 1,77
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>SplitContainer Widget Demo</title>
 
<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.layout.SplitContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
.dojoContentPane {
padding:1em;
}
</style>
</head>
<body>
<h1 class="testTitle">Dijit Split Container Test</h1>
<p>HTML before</p>
 
<div dojoType="dijit.layout.SplitContainer"
orientation="vertical"
sizerWidth="7"
activeSizing="false"
style="border: 1px solid #bfbfbf; float: left; margin-right: 30px; width: 400px; height: 300px;"
>
<div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50">
this box has three split panes
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="50"
style="background-color: yellow; border: 3px solid purple;">
in vertical mode
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50">
without active resizing
</div>
</div>
 
<div dojoType="dijit.layout.SplitContainer"
orientation="horizontal"
sizerWidth="7"
activeSizing="true"
style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;">
<div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
this box has two horizontal panes
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
with active resizing, a smaller sizer, different starting sizes and minimum sizes
</div>
</div>
 
<p style="clear: both;">HTML after</p>
 
the following splitter contains two iframes, see whether the resizer works ok in this situation
<div dojoType="dijit.layout.SplitContainer"
orientation="horizontal"
sizerWidth="5"
activeSizing="false"
style="border: 2px solid black; float: left; width: 100%; height: 300px;"
>
<div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
<iframe style="width: 100%; height: 100%"></iframe>
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
<iframe style="width: 100%; height: 100%"></iframe>
</div>
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/i18n/number.html
New file
0,0 → 1,214
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test NumberTextBox</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ar-eg','hi-in']"></script>
<script type="text/javascript" src="../../../dojo/currency.js"></script>
<script type="text/javascript" src="../../../dojo/number.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.date.stamp");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("doh.runner");
</script>
<script src="test_i18n.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
doh.register("t", getAllTestCases());
doh.run();
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
.title {
background-color:#ddd;
}
 
.hint {
background-color:#eee;
}
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
 
td {white-space:nowrap}
</style>
</head>
 
<body class="tundra">
<h1 class="testTitle">Dijit TextBox Globalization Test for Number</h1>
 
<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
<button id="startButton" onclick="startTest()">Start Test</button>-->
<p>
Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ar-eg" and "hi-in". If not, convert these CLDR data and put them there.
</p>
 
<script>
(function() {
 
genFormatTestCases("Number Format", "dijit.form.NumberTextBox", [
 
{ attrs: {lang: "zh-cn"},
desc: "Locale: zh_CN",
value: "12345.067",
expValue: "12,345.067",
comment: ""
},
{ attrs: {lang: "zh-cn"},
desc: "Locale: zh_CN",
value: "-12345.067",
expValue: "-12,345.067",
comment: ""
},
 
{ attrs: {lang: "fr-fr"},
desc: "Locale: fr_FR",
value: "12345.067",
expValue: "12&nbsp;345,067",
comment: "Failed in IE. The currency textbox should not reject the value generated by itself. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>"
},
{ attrs: {lang: "fr-fr"},
desc: "Locale: zh_CN",
value: "-12345.067",
expValue: "-12&nbsp;345,067",
comment: "Failed in IE. The currency textbox should not reject the value generated by itself. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>"
},
 
{ attrs: {lang: "ar-eg"},
desc: "Locale: ar_EG",
value: "12345.067",
expValue: "12٬345٫067",
comment: ""
},
{ attrs: {lang: "ar-eg"},
desc: "Locale: ar_EG",
value: "-12345.067",
expValue: "12٬345٫067-",
comment: ""
},
 
{ attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: ar_EG",
value: "12345.067",
expValue: "١٢\u066C٣٤٥\u066B٠٦٧",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
},
{ attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: ar_EG",
value: "-12345.067",
expValue: "١٢\u066C٣٤٥\u066B٠٦٧-",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
},
 
{ attrs: {lang: "hi-in", constraints: "{localeDigit: true}"},
desc: "Locale: hi_IN",
value: "123456789.068",
expValue: "१२,३४,५६,७८९.०६८",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
},
{ attrs: {lang: "hi-in", constraints: "{localeDigit: true}"},
desc: "Locale: hi_IN",
value: "-123456789.068",
expValue: "-१२,३४,५६,७८९.०६८",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
}
]);
 
genValidateTestCases("Number Validate", "dijit.form.NumberTextBox", [
 
{ attrs: {lang: "zh-cn"},
desc: "Locale: zh_CN",
value: 12345.067,
expValue: "12,345.067",
comment: ""
},
{ attrs: {lang: "zh-cn"},
desc: "Locale: zh_CN",
value: -12345.067,
expValue: "-12,345.067",
comment: ""
},
 
{ attrs: {lang: "fr-fr"},
desc: "Locale: fr_FR",
value: 12345.067,
expValue: "12&nbsp;345,067",
comment: "Failed in IE. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>"
},
{ attrs: {lang: "fr-fr"},
desc: "Locale: zh_CN",
value: -12345.067,
expValue: "-12&nbsp;345,067",
comment: "Failed in IE. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>"
},
 
{ attrs: {lang: "ar-eg"},
desc: "Locale: ar_EG",
value: 12345.067,
expValue: "12٬345٫067",
comment: ""
},
{ attrs: {lang: "ar-eg"},
desc: "Locale: ar_EG",
value: -12345.067,
expValue: "12٬345٫067-",
comment: ""
},
 
{ attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: ar_EG",
value: 12345.067,
expValue: "١٢\u066C٣٤٥\u066B٠٦٧",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
},
{ attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: ar_EG",
value: -12345.067,
expValue: "١٢\u066C٣٤٥\u066B٠٦٧-",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
},
 
{ attrs: {lang: "hi-in", constraints: "{localeDigit: true}"},
desc: "Locale: hi_IN",
value: 123456789.068,
expValue: "१२,३४,५६,७८९.०६८",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
},
{ attrs: {lang: "hi-in", constraints: "{localeDigit: true}"},
desc: "Locale: hi_IN",
value: -123456789.068,
expValue: "-१२,३४,५६,७८९.०६८",
comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>"
}
]);
 
dojo.parser.parse();
 
})();
 
</script>
</body>
</html>
 
 
/trunk/api/js/dojo1.0/dijit/tests/i18n/README
New file
0,0 → 1,4
Global Verification Tests (GVT)
 
In order to run these tests, you will need full locale support in Dojo. Dojo only ships with a small subset by default.
See util/buildscripts/cldr for an ant-based build script.
/trunk/api/js/dojo1.0/dijit/tests/i18n/currency.html
New file
0,0 → 1,263
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CurrencyTextBox</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg']"></script>
<script type="text/javascript" src="../../../dojo/currency.js"></script>
<script type="text/javascript" src="../../../dojo/number.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.date.stamp");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("doh.runner");
</script>
<script src="test_i18n.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
doh.register("t", getAllTestCases());
doh.run();
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
.title {
background-color:#ddd;
}
 
.hint {
background-color:#eee;
}
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
 
td {white-space:nowrap}
</style>
</head>
 
<body class="tundra">
<h1 class="testTitle">Dijit TextBox Globalization Test for Currency</h1>
 
<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
<button id="startButton" onclick="startTest()">Start Test</button> -->
<p>
Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp" and "ar-eg"
and currencies CNY, EGP, EUR, JPY. If not, convert these CLDR data and put them there.
</p>
 
<script>
(function() {
genFormatTestCases("Currency Format", "dijit.form.CurrencyTextBox", [
 
{ attrs: {Currency: "CNY", lang: "zh-cn"},
desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
value: "123456789.46",
expValue: "&#xFFE5;123,456,789.46",
comment: ""
},
{ attrs: {Currency: "CNY", lang: "zh-cn"},
desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
value: "-123456789.46",
expValue: "-&#xFFE5;123,456,789.46",
comment: ""
},
 
{ attrs: {Currency: "EUR", lang: "fr-fr"},
desc: "Locale: <b>fr_FR</b> Currency: <b>EUR</b>",
value: "123456789.46",
expValue: "123&nbsp;456&nbsp;789,46 &euro;",
comment: "Failed in IE: the currency textbox should not reject the value generated by itself. <a href='#cmt_1'>See #1.</a>"
},
{ attrs: {Currency: "EUR", lang: "fr-fr"},
desc: "Locale: <b>zh_CN</b> Currency: <b>EUR</b>",
value: "-123456789.46",
expValue: "-123&nbsp;456&nbsp;789,46 &euro;",
comment: "Failed in IE: the currency textbox should not reject the value generated by itself. <a href='#cmt_1'>See #1.</a>"
},
 
{ attrs: {Currency: "JPY", lang: "ja-jp"},
desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
value: "123456789.46",
expValue: "&#xFFE5;123,456,789",
comment: ""
},
{ attrs: {Currency: "JPY", lang: "ja-jp"},
desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
value: "-123456789.46",
expValue: "-&#xFFE5;123,456,789",
comment: ""
},
 
{ attrs: {Currency: "EGP", lang: "ar-eg"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: "123456789.46",
expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46",
comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
},
{ attrs: {Currency: "EGP", lang: "ar-eg"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: "-123456789.46",
expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46-",
comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
},
 
{ attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: "123456789.46",
expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦",
comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
},
{ attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: "-123456789.46",
expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦-",
comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
}
]);
 
genValidateTestCases("Currency Validate", "dijit.form.CurrencyTextBox", [
 
{ attrs: {Currency: "CNY", lang: "zh-cn"},
desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
value: 123456789.46,
expValue: "&#xFFE5;123,456,789.46",
comment: ""
},
{ attrs: {Currency: "CNY", lang: "zh-cn"},
desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>",
value: -123456789.46,
expValue: "-&#xFFE5;123,456,789.46",
comment: ""
},
 
{ attrs: {Currency: "EUR", lang: "fr-fr"},
desc: "Locale: <b>fr_FR</b> Currency: <b>EUR</b>",
value: 123456789.46,
expValue: "123&nbsp;456&nbsp;789,46 &euro;",
comment: "Failed in IE. <a href='#cmt_1'>See #1.</a>"
},
{ attrs: {Currency: "EUR", lang: "fr-fr"},
desc: "Locale: <b>zh_CN</b> Currency: <b>EUR</b>",
value: -123456789.46,
expValue: "-123&nbsp;456&nbsp;789,46 &euro;",
comment: "Failed in IE. <a href='#cmt_1'>See #1.</a>"
},
 
{ attrs: {Currency: "JPY", lang: "ja-jp"},
desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
value: 123456789,
expValue: "&#xFFE5;123,456,789",
comment: ""
},
{ attrs: {Currency: "JPY", lang: "ja-jp"},
desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>",
value: -123456789,
expValue: "-&#xFFE5;123,456,789",
comment: ""
},
 
{ attrs: {Currency: "EGP", lang: "ar-eg"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: 123456789.46,
expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46",
comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
},
{ attrs: {Currency: "EGP", lang: "ar-eg"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: -123456789.46,
expValue: "&#x062C;.&#x0645;.\u200F 123&#x066C;456&#x066C;789&#x066B;46-",
comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
},
 
{ attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: 123456789.46,
expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦",
comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
},
{ attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"},
desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>",
value: -123456789.46,
expValue: "&#x062C;.&#x0645;.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦-",
comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>"
}
]);
 
dojo.parser.parse();
 
})();
 
</script>
 
<h2 class="testTitle">Issues &amp; Comments</h2>
<h3 class="testTitle"><a name="cmt_1">Issue #1<sup style="color:blue">Fixed</sup></a></h3>
<p>
Some browsers like FireFox have a bug on the non-breaking space character (U+00A0, <b>&amp;nbsp;</b> or <b>&amp;#160;</b> or
<b>&amp;#xA0;</b> in HTML).
They always convert the NBSP character to a normal space (U+0020, <b>&amp;#x20;</b> in HTML) automatically in the following circumstances:
</p>
<ul>
<li>Copy text from the page</li>
<li>Use <b>innerHTML</b> to get the content of a certain element</li>
<li>Use <b>value</b> to get an <b>INPUT</b> element's value</li>
</ul>
<p>
You cannot read a real NBSP character from an <b>INPUT</b> element on these browsers. It causes issues when some formatting data in CLDR
contains an NBSP character. For example,
</p>
<ul>
<li>Many locales like French use an NBSP character as a group separator in numbers</li>
<li>French and Finnish use NBSP characters in their percentage and currency format patterns respectively</li>
<li>Russian uses NBSP characters in their date format pattern (see <a href="test_validateDate.html">test_validateDate.html</a>)</li>
</ul>
<p>
So Dojo may generate formatted data with NBSP characters in it but cannot read NBSP charaters from user's input in some browser.
</p>
 
<h3 class="testTitle"><a name="cmt_2">Issue #2<sup style="color:blue">Fixed: the CLDR data generator should be fixed by adding code to convert U+200F to "\u200F" in nls JS files.</sup></a></h3>
<p>
Most Bidi currency symbols contain an LTR-MARK (U+200F) character at the very beginning.
But Firefox ignores it when it is not in any escaping form. This should be a bug of Firefox.
For example, click <a href="javascript:alert('‏'.indexOf('\u200F'))"><code>alert('‏'.indexOf('\u+200F'))</code></a> (there is a U+200F in the empty-looking string):
</p>
<ul>
<li>In Firefox, shows "-1" -- no U+200F found</li>
<li>In IE &amp; Opera, shows "0" -- the U+200F is found</li>
</ul>
<p>
But if the U+200F is in some escaping form, Firefox will work as well as other browsers.
Click <a href="javascript:alert('\u200F'.indexOf('\u200F'))"><code>alert('\u200F'.indexOf('\u+200F'))</code></a> to see the same result both in Firefox and IE:
</p>
 
<h3 class="testTitle"><a name="cmt_3">Issue #3<sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></a></h3>
<p>
Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi.
For example, ICU formats a number data into Indic number characters by default in the Arabic locale.
However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser).
</p>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/i18n/date.html
New file
0,0 → 1,173
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test DateTextBox</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg','ru-ru','hi-in','en-us']"></script>
<script type="text/javascript" src="../../../dojo/currency.js"></script>
<script type="text/javascript" src="../../../dojo/number.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.date.stamp");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("doh.runner");
</script>
<script src="test_i18n.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
doh.register("t", getAllTestCases());
doh.run();
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
.title {
background-color:#ddd;
}
 
.hint {
background-color:#eee;
}
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
 
td {white-space:nowrap}
</style>
<script>
function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) {
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', localeDigit: true}" : "{formatLength:'short'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>",
value: date,
expValue: short,
comment: shortCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', localeDigit: true}" : "{formatLength:'medium'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>",
value: date,
expValue: medium,
comment: mediumCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', localeDigit: true}" : "{formatLength:'long'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>",
value: date,
expValue: long,
comment: longCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', localeDigit: true}" : "{formatLength:'full'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>",
value: date,
expValue: full,
comment: fullCmt
});
}
</script>
</head>
 
<body class="tundra">
<h1 class="testTitle">Dijit TextBox Globalization Test for Date</h1>
 
<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
<button id="startButton" onclick="startTest()">Start Test</button>-->
<p>
Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp", "ru-ru", "hi-in", "en-us" and "ar-eg". If not, convert these CLDR data and put them there.
</p>
 
<script>
(function() {
var testCases;
 
testCases = new Array();
gen4DateFormat(testCases, "ru-ru", "ru_RU", "2005-07-31",
"31.07.05", "", "31.07.2005", "", "31 июля 2005&nbsp;г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>", "31 июля 2005&nbsp;г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>");
gen4DateFormat(testCases, "zh-cn", "zh_CN", "2005-07-31",
"05-7-31", "", "2005-7-31", "", "2005年7月31日", "", "2005年7月31日星期日", "");
gen4DateFormat(testCases, "en-us", "en_US", "2005-07-31",
"7/31/05", "", "Jul 31, 2005", "", "July 31, 2005", "", "Sunday, July 31, 2005", "");
gen4DateFormat(testCases, "fr-fr", "fr_FR", "2005-07-31",
"31/07/05", "", "31 juil. 05", "", "31 juillet 2005", "", "dimanche 31 juillet 2005", "");
gen4DateFormat(testCases, "ja-jp", "ja_JP", "2005-07-31",
"05/07/31", "", "2005/07/31", "", "2005年7月31日", "", "2005年7月31日日曜日", "");
gen4DateFormat(testCases, "ar-eg", "ar_EG", "2005-07-31",
"31/7/2005", "", "31/07/2005", "", "31 &#x064A;&#x0648;&#x0644;&#x064A;&#x0648;&#x2C; 2005", "", "&#x0627;&#x0644;&#x0623;&#x062D;&#x062F;&#x2C; 31 &#x064A;&#x0648;&#x0644;&#x064A;&#x0648;&#x2C; 2005", "");
gen4DateFormat(testCases, "hi-in", "hi_IN", "2005-07-31",
"३१-७-०५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "३१-०७-२००५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "३१ जुलाई २००५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "रविवार ३१ जुलाई २००५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>");
genFormatTestCases("Date Format", "dijit.form.DateTextBox", testCases);
 
testCases = new Array();
gen4DateFormat(testCases, "ru-ru", "ru_RU", new Date(2005, 6, 31),
"31.07.05", "", "31.07.2005", "", "31 июля 2005&nbsp;г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>", "31 июля 2005&nbsp;г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>");
gen4DateFormat(testCases, "zh-cn", "zh_CN", new Date(2005, 6, 31),
"05-7-31", "", "2005-7-31", "", "2005年7月31日", "", "2005年7月31日星期日", "");
gen4DateFormat(testCases, "en-us", "en_US", new Date(2005, 6, 31),
"7/31/05", "", "Jul 31, 2005", "", "July 31, 2005", "", "Sunday, July 31, 2005", "");
gen4DateFormat(testCases, "fr-fr", "fr_FR", new Date(2005, 6, 31),
"31/07/05", "", "31 juil. 05", "", "31 juillet 2005", "", "dimanche 31 juillet 2005", "");
gen4DateFormat(testCases, "ja-jp", "ja_JP", new Date(2005, 6, 31),
"05/07/31", "", "2005/07/31", "", "2005年7月31日", "", "2005年7月31日日曜日", "");
gen4DateFormat(testCases, "ar-eg", "ar_EG", new Date(2005, 6, 31),
"31/7/2005", "", "31/07/2005", "", "31 &#x064A;&#x0648;&#x0644;&#x064A;&#x0648;&#x2C; 2005", "", "&#x0627;&#x0644;&#x0623;&#x062D;&#x062F;&#x2C; 31 &#x064A;&#x0648;&#x0644;&#x064A;&#x0648;&#x2C; 2005", "");
gen4DateFormat(testCases, "hi-in", "hi_IN", new Date(2005, 6, 31),
"३१-७-०५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "३१-०७-२००५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "३१ जुलाई २००५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "रविवार ३१ जुलाई २००५", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>");
genValidateTestCases("Date Validate", "dijit.form.DateTextBox", testCases);
 
dojo.parser.parse();
 
})();
 
</script>
</body>
</html>
 
<!--
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', localeDigit: true}" : "{formatLength:'short'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>",
value: date,
expValue: short,
comment: shortCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', localeDigit: true}" : "{formatLength:'medium'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>",
value: date,
expValue: medium,
comment: mediumCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', localeDigit: true}" : "{formatLength:'long'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>",
value: date,
expValue: long,
comment: longCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', localeDigit: true}" : "{formatLength:'full'}", lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>",
value: date,
expValue: full,
comment: fullCmt
-->
/trunk/api/js/dojo1.0/dijit/tests/i18n/module.js
New file
0,0 → 1,17
if(!dojo._hasResource["dijit.tests.i18n.module"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.tests.i18n.module"] = true;
dojo.provide("dijit.tests.i18n.module");
 
try{
if(dojo.isBrowser){
doh.registerUrl("dijit.tests.i18n.currency", dojo.moduleUrl("dijit", "tests/i18n/currency.html"));
doh.registerUrl("dijit.tests.i18n.date", dojo.moduleUrl("dijit", "tests/i18n/date.html"));
doh.registerUrl("dijit.tests.i18n.number", dojo.moduleUrl("dijit", "tests/i18n/number.html"));
doh.registerUrl("dijit.tests.i18n.textbox", dojo.moduleUrl("dijit", "tests/i18n/textbox.html"));
doh.registerUrl("dijit.tests.i18n.time", dojo.moduleUrl("dijit", "tests/i18n/time.html"));
}
}catch(e){
doh.debug(e);
}
 
}
/trunk/api/js/dojo1.0/dijit/tests/i18n/textbox.html
New file
0,0 → 1,173
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test TextBox</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true"></script>
<script type="text/javascript" src="../../../dojo/currency.js"></script>
<script type="text/javascript" src="../../../dojo/number.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.date.stamp");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("doh.runner");
</script>
<script src="test_i18n.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
doh.register("t", getAllTestCases());
doh.run();
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
.title {
background-color:#ddd;
}
 
.hint {
background-color:#eee;
}
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
 
td {white-space:nowrap}
</style>
</head>
 
<body class="tundra">
<h1 class="testTitle">Dijit TextBox Globalization Test</h1>
 
<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
<button id="startButton" onclick="startTest()">Start Test</button>-->
 
<script>
(function() {
genFormatTestCases("Natural Language Casing Mapping", "dijit.form.TextBox", [
 
{ attrs: {uppercase: "true"},
desc: "Upper casing: Basic Latin",
value: "abcdefghijklmnopqrstuvwxyz",
expValue: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
comment: ""
},
 
{ attrs: {uppercase: "true"},
desc: "Upper casing: Latin with accents",
value: "àáâãäåæçèéêëìíîïðñòóôõö",
expValue: "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ",
comment: ""
},
 
{ attrs: {uppercase: "true"},
desc: "Upper casing: Turkish",
value: "ıi",
expValue: "Iİ",
comment: "<a href='#cmt_1'>See #1.</a>"
},
 
{ attrs: {uppercase: "true"},
desc: "Upper casing: Russian",
value: "абвгдежз",
expValue: "АБВГДЕЖЗ",
comment: ""
},
 
{ attrs: {uppercase: "true"},
desc: "Upper casing: German",
value: "ß",
expValue: "SS",
comment: "<a href='#cmt_1'>See #1.</a>"
},
 
{ attrs: {lowercase: "true"},
desc: "Lower casing: Turkish",
value: "Iİ",
expValue: "ıi",
comment: "<a href='#cmt_1'>See #1.</a>"
},
 
{ attrs: {propercase: "true"},
desc: "Title/Proper casing: Latin",
value: "\u01F1abc",
expValue: "\u01F2abc",
comment: "<a href='#cmt_1'>See #1.</a>"
}
]);
 
genFormatTestCases("White-space Detecting", "dijit.form.TextBox", [
 
{ attrs: {trim: "true"},
desc: "Normal space & tab",
value: " abc\t\t\t",
expValue: "abc",
comment: ""
},
 
{ attrs: {trim: "true"},
desc: "NO-BREAK SPACE",
value: "\u00A0abc\u00A0",
expValue: "abc",
comment: "Failed in IE. <a href='#cmt_2'>See #2.</a>"
},
 
{ attrs: {trim: "true"},
desc: "EN QUAD",
value: "\u2000abc\u2000",
expValue: "abc",
comment: "Failed in IE. <a href='#cmt_2'>See #2.</a>"
},
 
{ attrs: {trim: "true"},
desc: "IDEOGRAPHIC SPACE",
value: "\u3000abc\u3000",
expValue: "abc",
comment: "Failed in IE. <a href='#cmt_2'>See #2.</a>"
}
 
 
]);
 
dojo.parser.parse();
 
})();
</script>
 
<h2 class="testTitle">Issues &amp; Comments </h2>
<a name="cmt_1"><h3 class="testTitle">Issue #1 <sup style="color:red">Not fixed. Avoid using this function of TextBox.</sup></h3></a>
<p>
Strictly speaking, all casing manipulation must use ICU case mapping rules (routine). However, the default JavaScript routines used by Dojo
do not support ICU case mapping rules in all browsers.
</p>
 
<a name="cmt_2"><h3 class="testTitle">Issue #2 <sup style="color:red">Not fixed. Avoid using this function of TextBox.</sup></h3></a>
<p>
Trimming must get rid of all Unicode characters with the white space property. However, the default JavaScript routines used by Dojo
do not support get character properties in some browsers like IE. Other browsers like Firefox might support trimming more white space
characters.
</p>
 
</body>
</html>
 
 
/trunk/api/js/dojo1.0/dijit/tests/i18n/time.html
New file
0,0 → 1,210
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test TextBox for Time</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg','ru-ru','hi-in','en-us']"></script>
<script type="text/javascript" src="../../../dojo/currency.js"></script>
<script type="text/javascript" src="../../../dojo/number.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.date.locale");
dojo.require("dojo.date.stamp");
dojo.require("dojo.date");
dojo.require("dojo.string");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("doh.runner");
</script>
<script src="test_i18n.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
doh.register("t", getAllTestCases());
doh.run();
});
</script>
 
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../css/dijitTests.css";
 
.title {
background-color:#ddd;
}
 
.hint {
background-color:#eee;
}
 
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
 
.dojoTitlePaneLabel label {
font-weight:bold;
}
 
td {white-space:nowrap}
</style>
<script>
dojo.declare(
"dijit.form.TimeTextBox",
dijit.form.ValidationTextBox,
{
regExpGen: dojo.date.locale.regexp,
format: dojo.date.locale.format,
parse: dojo.date.locale.parse,
value: new Date()
}
);
 
var tz_s = dojo.date.getTimezoneName(new Date());
if (!tz_s) {
var offset = new Date().getTimezoneOffset();
var tz = [
(offset <= 0 ? "+" : "-"),
dojo.string.pad(Math.floor(Math.abs(offset) / 60), 2),
dojo.string.pad(Math.abs(offset) % 60, 2)
];
tz.splice(0, 0, "GMT");
tz.splice(3, 0, ":");
tz_s = tz.join("");
}
 
function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) {
var tz_l = language.indexOf("hi") == 0 && dojo.number.normalizeDigitChars ?
dojo.number.normalizeDigitChars(tz_s, language) : tz_s;
 
short = short.replace(/UTC/, tz_l);
medium = medium.replace(/UTC/, tz_l);
long = long.replace(/UTC/g, tz_l);
full = full.replace(/UTC/, tz_l);
 
var shortDate = null;
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', selector:'time', localeDigit:true}" : "{formatLength:'short', selector:'time'}",
lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>",
value: typeof(date) == "string" ? date : shortDate = new Date(date.getYear(), date.getMonth(), date.getDay() - 5, date.getHours(), date.getMinutes()),
expValue: short,
comment: shortCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', selector:'time', localeDigit:true}" : "{formatLength:'medium', selector:'time'}",
lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>",
value: date,
expValue: medium,
comment: mediumCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', selector:'time', localeDigit:true}" : "{formatLength:'long', selector:'time'}",
lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>",
value: date,
expValue: long,
comment: longCmt
});
testCases.push({
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', selector:'time', localeDigit:true}" : "{formatLength:'full', selector:'time'}",
lang: language},
desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>",
value: typeof(date) == "string" || language.indexOf("fr") ? date : shortDate,
expValue: full,
comment: fullCmt
});
 
date.processValue = function (value) {
return value ? new Date(1970, 0, 1, value.getHours(), value.getMinutes(), value.getSeconds()) : value;
};
if (shortDate) {
shortDate.processValue = date.processValue;
}
}
</script>
</head>
 
<body class="tundra">
<h1 class="testTitle">Dijit TextBox Globalization Test for Time</h1>
 
<h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
<button id="startButton" onclick="startTest()">Start Test</button>
<p>
Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp", "ru-ru", "hi-in", "en-us" and "ar-eg". If not, convert these CLDR data and put them there.
</p>
 
<script>
(function() {
var testCases;
 
testCases = new Array();
gen4DateFormat(testCases, "ru-ru", "ru_RU", "1970-01-01T15:25:35",
"15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "zh-cn", "zh_CN", "1970-01-01T15:25:35",
"下午3:25", "", "下午03:25:35", "", "下午03时25分35秒", "", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "en-us", "en_US", "1970-01-01T15:25:35",
"3:25 PM", "", "3:25:35 PM", "", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "fr-fr", "fr_FR", "1970-01-01T15:25:35",
"15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15 h 25 UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "ja-jp", "ja_JP", "1970-01-01T15:25:35",
"15:25", "", "15:25:35", "", "15:25:35:UTC", "<a href='#cmt_1'>See #1.</a>", "15時25分35秒UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "ar-eg", "ar_EG", "1970-01-01T15:25:35",
"3:25 \u0645", "", "3:25:35 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "hi-in", "hi_IN", "1970-01-01T15:25:35",
"३:२५ अपराह्न", "<a href='#cmt_2'>See #2.</a>", "३:२५:३५ अपराह्न", "<a href='#cmt_2'>See #2.</a>", "३:२५:३५ अपराह्न UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>", "३:२५:३५ अपराह्न UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>");
genFormatTestCases("Time Format", "dijit.form.TimeTextBox", testCases);
 
testCases = new Array();
gen4DateFormat(testCases, "ru-ru", "ru_RU", new Date(1970, 0, 1, 15, 25, 35),
"15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "zh-cn", "zh_CN", new Date(1970, 0, 1, 15, 25, 35),
"下午3:25", "<a href='#cmt_3'>See #3.</a>", "下午03:25:35", "<a href='#cmt_3'>See #3.</a>", "下午03时25分35秒", "<a href='#cmt_3'>See #3.</a>", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "en-us", "en_US", new Date(1970, 0, 1, 15, 25, 35),
"3:25 PM", "", "3:25:35 PM", "", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "fr-fr", "fr_FR", new Date(1970, 0, 1, 15, 25, 35),
"15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15 h 25 UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "ja-jp", "ja_JP", new Date(1970, 0, 1, 15, 25, 35),
"15:25", "", "15:25:35", "", "15:25:35:UTC", "<a href='#cmt_1'>See #1.</a>", "15時25分35秒UTC", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "ar-eg", "ar_EG", new Date(1970, 0, 1, 15, 25, 35),
"3:25 \u0645", "", "3:25:35 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>");
gen4DateFormat(testCases, "hi-in", "hi_IN", new Date(1970, 0, 1, 15, 25, 35),
"३:२५ अपराह्न", "<a href='#cmt_2'>See #2.</a>", "३:२५:३५ अपराह्न", "<a href='#cmt_2'>See #2.</a>", "३:२५:३५ अपराह्न UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>", "३:२५:३५ अपराह्न UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>");
genValidateTestCases("Time Validate", "dijit.form.TimeTextBox", testCases);
 
dojo.parser.parse();
 
})();
 
</script>
 
<h2 class="testTitle">Issues &amp; Comments</h2>
<a name="cmt_1"><h3 class="testTitle">Issue #1 <sup style="color:blue">Fixed</sup></h3></a>
<p>
Currently Dojo do not support parsing for most "long" and "full" time format which have a timezone mark in it.
</p>
 
<a name="cmt_2"><h3 class="testTitle">Issue #2 <sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></h3></a>
<p>
Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi.
For example, ICU formats a number data into Indic number characters by default in the Arabic locale.
However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser).
</p>
 
<a name="cmt_3"><h3 class="testTitle">Issue #3 <sup style="color:blue">Fixed</sup></h3></a>
<p>
This defect only occurs on the "zh-cn" locale. Dojo accepts "下午"(pm) in the textbox, but it automatically changes it to
"上午"(am) after the focus changed. The date value of the textbox is also changed.
</p>
<p>
The root cause of this issue is that the parser method's code assumes am/pm symbol always appears after the hour value.
But this is not true, for example, the pattern for "zh-cn" puts am/pm field before all the other fields.
</p>
</body>
</html>
 
/trunk/api/js/dojo1.0/dijit/tests/i18n/test_i18n.js
New file
0,0 → 1,206
var validateValues = [];
var formatWidgetCount = 0;
var validateWidgetCount = 0;
 
function getElementsById(id){
var result = [];
 
if(!id || typeof(id) != "string"){
return result;
}
 
var ae = document.getElementsByTagName(dojo.byId(id).tagName);
for(var i = 0; i < ae.length; i++){
if(ae[i].id == id){
result.push(ae[i]);
}
}
return result;
}
 
function getString(n){
return n && n.toString();
}
 
function startTest(t){
startTestFormat(t);
startTestValidate(t);
}
 
function escapeEx(s){
var result = "";
for(var i = 0; i < s.length; i++){
var c = s.charAt(i);
switch (c){
case '"':
result += '\\"';
break;
case "'":
result += "\\'";
break;
default:
result += escape(c);
break;
}
}
return result;
}
 
function getAllTestCases(){
var allTestCases = [];
for(var i = 0; i < formatWidgetCount; i++){
allTestCases.push({
name: "format-" + i,
runTest: new Function("t", "startTestFormat(" + i + ", t)")
});
}
for(var i = 0; i < validateWidgetCount; i++){
allTestCases.push({
name: "validate-" + i,
runTest: new Function("t", "startTestValidate(" + i + ", t)")
});
}
return allTestCases;
}
 
function startTestFormat(i, t){
var test_node = dojo.doc.getElementById("test_display_" + i);
var exp = dojo.doc.getElementById("test_display_expected_" + i).value;
var res_node = dojo.doc.getElementById("test_display_result_" + i);
res_node.innerHTML = test_node.value;
res_node.style.backgroundColor = (test_node.value == exp) ? "#AFA" : "#FAA";
res_node.innerHTML += " <a style='font-size:0.8em' href='javascript:alert(\"Expected: " + escapeEx(exp) + "\\n Result: " + escapeEx(test_node.value) + "\")'>Compare (Escaped)</a>";
t.is(exp, test_node.value);
}
 
function startTestValidate(i, t){
/*
* The dijit.byNode has an issue: cannot handle same id.
*/
var test_node = dojo.doc.getElementById("test_validate_" + i);
var inp_node = dojo.doc.getElementById("test_validate_input_" + i);
var exp = dojo.doc.getElementById("test_validate_expected_" + i).innerHTML;
var res_node = dojo.doc.getElementById("test_validate_result_" + i);
var val_node = dojo.doc.getElementById("test_display_value_" + i);
 
test_node.value = inp_node.value;
/*
* The dijit.byNode has an issue.
*/
var widget = null;
var node = test_node;
while ((widget = dijit.byNode(node)) == null){
node = node.parentNode;
if(!node){
break;
}
}
 
if(widget){
widget.focus();
 
var expected = validateValues[i];
var result = widget.getValue();
if(validateValues[i].processValue){
expected = validateValues[i].processValue(expected);
result = validateValues[i].processValue(result);
}
var parseCorrect = getString(expected) == getString(result);
val_node.style.backgroundColor = parseCorrect ? "#AFA" : "#FAA";
val_node.innerHTML = getString(result) + (parseCorrect ? "" : "<br>Expected: " + getString(expected));
 
res_node.innerHTML = widget.isValid && !widget.isValid() ? "Wrong" : "Correct";
res_node.style.backgroundColor = res_node.innerHTML == exp ? "#AFA" : "#FAA";
 
t.is(getString(expected), getString(result));
}
}
 
function genFormatTestCase(desc, dojoType, dojoAttrs, value, expValue, comment){
dojo.doc.write("<tr>");
dojo.doc.write("<td>" + desc + "</td>");
dojo.doc.write("<td>");
dojo.doc.write("<input id='test_display_" + formatWidgetCount + "' type='text' value='" + value + "' ");
dojo.doc.write("dojoType='" + dojoType + "' ");
for(var attr in dojoAttrs){
dojo.doc.write(attr + "=\"" + dojoAttrs[attr] + "\" ");
}
dojo.doc.write("/>");
dojo.doc.write("</td>");
dojo.doc.write("<td><input id='test_display_expected_" + formatWidgetCount + "' value='" + expValue + "'></td>");
dojo.doc.write("<td id='test_display_result_" + formatWidgetCount + "'></td>");
dojo.doc.write("<td style='white-space:normal'>" + comment + "</td>");
dojo.doc.write("</tr>");
formatWidgetCount++;
}
/*
[
{attrs: {currency: "CNY", lang: "zh-cn"}, desc: "", value:"-123456789.46", expValue: "", comment: ""},
...
]
*/
function genFormatTestCases(title, dojoType, testCases){
dojo.doc.write("<h2 class=testTitle>" + title + "</h2>");
dojo.doc.write("<table border=1>");
dojo.doc.write("<tr>");
dojo.doc.write("<td class=title><b>Test Description</b></td>");
dojo.doc.write("<td class=title><b>Test</b></td>");
dojo.doc.write("<td class=title><b>Expected</b></td>");
dojo.doc.write("<td class=title><b>Result</b></td>");
dojo.doc.write("<td class=title><b>Comment</b></td>");
dojo.doc.write("</tr>");
 
for(var i = 0; i < testCases.length; i++){
var testCase = testCases[i];
genFormatTestCase(testCase.desc, dojoType, testCase.attrs, testCase.value, testCase.expValue, testCase.comment);
}
 
dojo.doc.write("</table>");
}
 
function genValidateTestCase(desc, dojoType, dojoAttrs, input, value, comment, isWrong){
dojo.doc.write("<tr>");
dojo.doc.write("<td>" + desc + "</td>");
dojo.doc.write("<td>");
dojo.doc.write("<input id='test_validate_" + validateWidgetCount + "' type='text' ");
dojo.doc.write("dojoType='" + dojoType + "' ");
for(var attr in dojoAttrs){
dojo.doc.write(attr + "=\"" + dojoAttrs[attr] + "\" ");
}
dojo.doc.write("/>");
dojo.doc.write("</td>");
dojo.doc.write("<td><input id='test_validate_input_" + validateWidgetCount + "' value='" + input + "'></td>");
dojo.doc.write("<td id='test_display_value_" + validateWidgetCount + "'></td>");
dojo.doc.write("<td id='test_validate_expected_" + validateWidgetCount + "'>" + (isWrong ? "Wrong" : "Correct") + "</td>");
dojo.doc.write("<td id='test_validate_result_" + validateWidgetCount + "'></td>");
dojo.doc.write("<td style='white-space:normal'>" + comment + "</td>");
dojo.doc.write("</tr>");
validateValues.push(value);
validateWidgetCount++;
}
/*
[
{attrs: {currency: "CNY", lang: "zh-cn"}, desc: "", value:false, expValue: "-123456789.46", comment: ""},
...
]
*/
function genValidateTestCases(title, dojoType, testCases){
dojo.doc.write("<h2 class=testTitle>" + title + "</h2>");
dojo.doc.write("<table border=1>");
dojo.doc.write("<tr>");
dojo.doc.write("<td class=title><b>Test Description</b></td>");
dojo.doc.write("<td class=title><b>Test</b></td>");
dojo.doc.write("<td class=title><b>Input</b></td>");
dojo.doc.write("<td class=title><b>Parsed Value</b></td>");
dojo.doc.write("<td class=title><b>Expected</b></td>");
dojo.doc.write("<td class=title><b>Result</b></td>");
dojo.doc.write("<td class=title><b>Comment</b></td>");
dojo.doc.write("</tr>");
 
for(var i = 0; i < testCases.length; i++){
var testCase = testCases[i];
genValidateTestCase(testCase.desc, dojoType, testCase.attrs, testCase.expValue, testCase.value, testCase.comment, testCase.isWrong);
}
 
dojo.doc.write("</table>");
}
/trunk/api/js/dojo1.0/dijit/tests/Container.html
New file
0,0 → 1,63
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Container</title>
 
<script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit._Widget");
dojo.require("dijit._Container");
 
dojo.declare("dijit.TestContainer",
[dijit._Widget, dijit._Container], { }
);
 
dojo.require("dojo.parser");
 
dojo.addOnLoad(function(){
doh.register("t",
[
{
name: "getChildren",
runTest: function(t){
var c = dijit.byId("container");
var children = c.getChildren();
t.is(3, children.length);
t.is("zero", children[0].id);
t.is("one", children[1].id);
t.is("two", children[2].id);
}
},
{
name: "_getSiblingOfChild",
runTest: function(t){
var c = dijit.byId("container");
var children = c.getChildren();
t.is("one", c._getSiblingOfChild(children[0], 1).id);
t.is("two", c._getSiblingOfChild(children[1], 1).id);
t.is(null, c._getSiblingOfChild(children[2], 1));
t.is(null, c._getSiblingOfChild(children[0], -1));
t.is("zero", c._getSiblingOfChild(children[1], -1).id);
t.is("one", c._getSiblingOfChild(children[2], -1).id);
}
}
]
);
doh.run();
});
 
</script>
</head>
<body class="tundra">
 
<div id="container" dojoType="dijit.TestContainer">
<div id="zero" dojoType="dijit._Widget"></div>
<div id="one" dojoType="dijit._Widget"></div>
<div id="two" dojoType="dijit._Widget"></div>
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dijit/tests/_editor/test_richtext.css
New file
0,0 → 1,4
h1 {
border: 1px solid black;
background-color:red;
}
/trunk/api/js/dojo1.0/dijit/tests/_editor/test_RichText.html
New file
0,0 → 1,59
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Rich Text System 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="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
 
<script type="text/javascript" src="../../_editor/selection.js"></script>
<script type="text/javascript" src="../../_editor/RichText.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dijit._editor.RichText");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
 
</head>
<body>
 
<h1 class="testTitle">Rich Text Test</h1>
 
<div style="border: 1px dotted black;">
<h3>thud</h3>
<textarea dojoType="dijit._editor.RichText" id="editor1"
styleSheets="../../../dojo/resources/dojo.css">
<h1>header one</h1>
<ul>
<li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li>
<li>Right click on each of the form controls above. Menu should open.</li>
<li>Right click near the righthand window border. Menu should open to the left of the pointer.</li>
<li>Right click near the bottom window border. Menu should open above the pointer.</li>
</ul>
</textarea>
<button onclick="dijit.byId('editor1').addStyleSheet('test_richtext.css')">add stylesheet</button>
<button onclick="dijit.byId('editor1').removeStyleSheet('test_richtext.css')">remove stylesheet</button>
</div>
 
<div style="border: 1px dotted black;">
<h3>blah</h3>
<div dojoType="dijit._editor.RichText"
styleSheets="../../dojo/resources/dojo.css">
<ul>
<li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li>
<li>Right click on each of the form controls above. Menu should open.</li>
<li>Right click near the righthand window border. Menu should open to the left of the pointer.</li>
<li>Right click near the bottom window border. Menu should open above the pointer.</li>
</ul>
</div>
<h3>..after</h3>
</div>
 
</body>
</html>