### Default MultiComboBox Setup
Source: https://github.com/dojo/dojox/blob/master/form/tests/test_MultiComboBox.html
Demonstrates the basic setup of a MultiComboBox with a datastore and search attribute. The widget is initialized and started.
```javascript
var memberTagStore = new dojo.data.ItemFileReadStore({
identifier: "id",
items: [
{ id: "1", tag: "apple" },
{ id: "2", tag: "banana" },
{ id: "3", tag: "orange" },
{ id: "4", tag: "grape" },
{ id: "5", tag: "strawberry" },
{ id: "6", tag: "raspberry" },
{ id: "7", tag: "blackberry" },
{ id: "8", tag: "blueberry" }
]
});
var widget = new dojox.form.MultiComboBox({ store:memberTagStore, searchAttr:"tag" },"frogin");
widget.startup();
```
--------------------------------
### Initialize Charting and Run Example
Source: https://github.com/dojo/dojox/blob/master/charting/tests/gradients/test_grad_bars1.html
Sets up the Dojo environment and calls the function to render the charts when the DOM is ready. Disables the 'start' button after execution.
```javascript
};
dojo.addOnLoad(run);
```
--------------------------------
### MVC Repeat Simple Example Setup
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/test_async-mvc_repeat-simple.html
Initializes the Dojo environment with necessary modules and configures MVC debugging. It then creates a ListController with a stateful model containing address data and parses the UI.
```javascript
@import "css/app-format.css";
@import "../../../dijit/themes/claro/claro.css";
require = { parseOnLoad: 0, isDebug: 1, async: 1, mvc: {debugBindings: 1} };
require([
"dojo/parser",
"dojox/mvc/getStateful",
"dojox/mvc/ListController",
"dijit/form/Button",
"dijit/form/TextBox",
"dojox/mvc/Group",
"dojox/mvc/Repeat",
"dojo/domReady!"
], function(parser, getStateful, ListController){
ctrl = new ListController({
model: getStateful([
{ First: "Anne", Last: "Ackerman", Location: "NY", Office: "1S76", Email: "a.a@test.com", Tel: "123-764-8237", Fax: "123-764-8228" },
{ First: "Ben", Last: "Beckham", Location: "NY", Office: "5N47", Email: "b.b@test.com", Tel: "123-764-8599", Fax: "123-764-8600" },
{ First: "Chad", Last: "Chapman", Location: "CA", Office: "1278", Email: "c.c@test.com", Tel: "408-764-8237", Fax: "408-764-8228" },
{ First: "Irene", Last: "Ira", Location: "NJ", Office: "F09", Email: "i.i@test.com", Tel: "514-764-6532", Fax: "514-764-7300" },
{ First: "John", Last: "Jacklin", Location: "CA", Office: "6701", Email: "j.j@test.com", Tel: "408-764-1234", Fax: "408-764-4321" }
]),
cursorIndex: 0
});
parser.parse();
});
at: "dojox/mvc/at"
```
--------------------------------
### Basic Chart2D Widget Setup
Source: https://github.com/dojo/dojox/blob/master/charting/tests/test_widget2d_deprecated.html
Sets up a basic Chart2D widget, including necessary Dojo imports and theme selection. This is a foundational example for creating charts.
```html
Chart 2D
Chart 2D
Examples of charts using widgets.
```
--------------------------------
### Basic Heading RTL Setup
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/bidi/test_Heading_rtl.html
This snippet shows the basic require and ready function setup for dojox/mobile applications, including parsing and registry usage for RTL environments.
```javascript
require([
"dojo/ready",
"dijit/registry",
"dojo/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/TabBar"
], function(ready, registry, parser){
ready(function(){
var btn1 = registry.byId("btn1");
btn1.connect(btn1, "onClick", function(){
console.log(this.label + " button was clicked");
});
});
});
```
--------------------------------
### Basic Grid Setup with CSS and Dojo Requires
Source: https://github.com/dojo/dojox/blob/master/grid/tests/test_markup.html
Sets up the necessary CSS imports and Dojo module requirements for using dojox.grid.Grid. This is a foundational setup for most grid implementations.
```html
@import "../../../dojo/resources/dojo.css";
@import "../resources/Grid.css";
@import "../resources/tundraGrid.css";
#grid, #grid2 {
width: 65em;
height: 25em;
padding: 1px;
}
dojo.require("dijit.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.data.CsvStore");
dojo.require("dojo.parser");
```
--------------------------------
### Initial Data Setup
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/doh/WidgetList_tests/doh_mvc_repeat_select_manualsave.html
Initializes a StatefulArray with sample task data, including unique IDs, completion status, subject, due date, priority, and description.
```javascript
var uniqueIdSeq = 3;
initialRows = getStateful([
{ uniqueId: 0, Completed: false, Subject: "Pick up my kids", Due: new Date((new Date()).getTime() + 48 * 3600000), Priority: 1, Description: "At the kindergarden" },
{ uniqueId: 1, Completed: true, Subject: "Take dojox.mvc learning course", Due: new Date((new Date()).getTime() + 72 * 3600000), Priority: 2, Description: "Need to find course material at http://dojotoolkit.org/" },
{ uniqueId: 2, Completed: false, Subject: "Wash my car", Due: new Date((new Date()).getTime() + 120 * 3600000), Priority: 3, Description: "Need to buy a cleaner before that" }
]);
```
--------------------------------
### Dojo XHR GET Request Example
Source: https://github.com/dojo/dojox/blob/master/widget/tests/test_Loader.html
Demonstrates a simple asynchronous GET request using dojo.xhrGet. The response is handled as text and updates the innerHTML of a specified content element.
```javascript
function getHoney(){
// simple xhrGet example
var foo = dojo.xhrGet({
url: 'honey.php?delay=0',
handleAs: 'text',
load: function(result){
content.innerHTML = result;
}
});
}
```
--------------------------------
### PasswordValidator: Get Values Example
Source: https://github.com/dojo/dojox/blob/master/form/tests/test_PasswordValidator.html
Demonstrates retrieving values from various form configurations, including scenarios with and without old passwords.
```javascript
dojo.forEach([form1, form2, form3, form4, form5, form6], function(i) {
console.dir(i.get("value"));
});
```
--------------------------------
### DojoX Mobile Opener and Select List Setup
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_Opener-RoundSelectList-async.html
Initializes Dojo mobile components, including Opener and ScrollableView, and sets up event handlers. Requires dojo/ready, dojo/_base/html, dojo/_base/lang, dijit/registry, dojox/mobile, dojox/mobile/compat, dojox/mobile/parser, dojox/mobile/deviceTheme, dojox/mobile/Opener, and dojox/mobile/ScrollableView.
```javascript
require([
"dojo/ready", // ready
"dojo/_base/html", // dojo.byId
"dojo/_base/lang", // dojo.trim
"dijit/registry", // byId
"dojox/mobile", // This is a mobile app.
"dojox/mobile/compat", // This mobile app supports running on desktop browsers
"dojox/mobile/parser", // This mobile app uses declarative programming with fast mobile parser
"dojox/mobile/deviceTheme", // This mobile app automatically changes it's theme to match devices
"dojox/mobile/Opener",
"dojox/mobile/ScrollableView"
], function(ready, html, lang, registry){
ready(function(){
ringtone = html.byId('ringtone');
listPicker = registry.byId('listPicker');
trim = lang.trim;
});
});
```
--------------------------------
### Initialize Application and Fetch Data
Source: https://github.com/dojo/dojox/blob/master/charting/tests/BidiSupport/mirror_DataSeries.html
Sets up the application by parsing the DOM, registering a test for parsing, and then fetching data to populate the spinners and charts. This function is executed when the DOM is ready.
```javascript
dojo.addOnLoad(function(){
makeCharts();
store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}}
);
doh.register("parse", function(){
dojo.parser.parse();
});
doh.run();
});
```
--------------------------------
### Initialize StatefulModel and Parse HTML
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/doh/doh_new-mvc_input-output-simple.html
Sets up the dojox.mvc.StatefulModel with initial data and parses the HTML to connect widgets. This is the setup for the data binding example.
```javascript
var model;
require([
"doh/runner", "dojo/dom", "dojo/parser", "dojo/when", "dijit/registry",
"dojox/mvc/getStateful", "dijit/form/TextBox", "dijit/form/Button",
"dojox/mvc/Group", "dojox/mvc/Output"
], function(doh, ddom, parser, when, registry, getStateful){
// The dojox.mvc.StatefulModel class creates a data model instance
// where each leaf within the data model is decorated with dojo.Stateful
// properties that widgets can bind to and watch for their changes.
//model = mvc.newStatefulModel({data :{"First": "John", "Last": "Doe", "Email": "jdoe@example.com"}});
model = getStateful({"First": "John", "Last": "Doe", "Email": "jdoe@example.com"});
// the StatefulModel created above is initialized with
// model.First set to "John", model.Last set to "Doe" and model.Email set to "jdoe@example.com"
when(parser.parse(), function(){
// Test cases follow...
doh.run();
});
});
```
--------------------------------
### ProgressIndicator on Heading Example
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_ProgressIndicator-heading.html
Attaches two ProgressIndicator widgets to different headings, starts them, simulates network latency, and then stops them, updating the heading labels.
```javascript
require([
"dojo/dom-class", "dojo/ready", "dijit/registry", "dojox/mobile/ProgressIndicator", "dojox/mobile/parser", "dojox/mobile", "dojox/mobile/compat"
], function(domClass, ready, registry, ProgressIndicator){
ready(function(){
var prog1 = new ProgressIndicator({size:30, center:false});
prog1.domNode.style.position = "absolute";
prog1.domNode.style.margin = "5px";
domClass.add(prog1.domNode, "mblProgWhite");
var head1 = registry.byId("head1");
prog1.placeAt(head1.domNode);
prog1.start();
setTimeout(function(){
// network latency simulation
prog1.stop();
head1.set("label", "Done");
}, 5000);
var prog2 = new ProgressIndicator({size:30, center:false});
prog2.domNode.style.position = "absolute";
prog2.domNode.style.margin = "5px";
prog2.domNode.style.right = "0px";
domClass.add(prog2.domNode, "mblProgWhite");
var head2 = registry.byId("head2");
prog2.placeAt(head2.domNode);
prog2.start();
setTimeout(function(){
// network latency simulation
prog2.stop();
head2.set("label", "Done");
}, 5000);
});
});
```
--------------------------------
### Setup Stateful Model with DataStore
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/1.7/doh/doh_mvc_search-results-repeat-store.html
Initializes a dojo.data.ItemFileWriteStore and creates a stateful model from it. Parses the page widgets after the model is ready.
```javascript
var writeStore = new dojo.data.ItemFileWriteStore({
url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")
});
var modelPromise = dojox.mvc.newStatefulModel({
store: new dojo.store.DataStore({
store: writeStore
})
});
modelPromise.then(function(model){
results = model;
dojo.parser.parse();
startTests();
});
```
--------------------------------
### Benchmark Setup and Utilities
Source: https://github.com/dojo/dojox/blob/master/lang/tests/bench_decl.html
Sets up constants for benchmark timing, defines utility functions for running tests, finding thresholds, and calculating statistics. This code is essential for the benchmarking process.
```javascript
var d = dojo, oo = dojox.lang.oo, nothing = function(){};
// test harness
var DELAY = 20, // pause in ms between tests
LIMIT = 50, // the lower limit of a test
COUNT = 50;
// the basic unit to run a test with timing
var runTest = function(f, n){
var start = new Date();
for(var i = 0; i < n; ++i){
f();
}
var end = new Date();
return end.getTime() - start.getTime();
};
// find the threshold number of tests just exceeding the limit
var findThreshold = function(f, limit){
// very simplistic search probing only powers of two
var n = 1;
while(runTest(f, n) + runTest(nothing, n) < limit) n <<= 1;
return n;
};
var _runUnitTest = function(a, f, n, k, m, next){
a[k++] = runTest(f, n) - runTest(nothing, n);
if(k < m){
setTimeout(d.hitch(null, _runUnitTest, a, f, n, k, m, next), DELAY);
}else{
next(a);
}
};
var runTests = function(f, n, m, next){
var a = new Array(m);
_runUnitTest(a, f, n, 0, m, next);
};
// statistics
var statNames = ["minimum", "firstDecile", "lowerQuartile", "median", "upperQuartile", "lastDecile", "maximum", "average"];
var statAbbr = {
minimum: "min",
maximum: "max",
median: "med",
lowerQuartile: "25%",
upperQuartile: "75%",
firstDecile: "10%",
lastDecile: "90%",
average: "avg"
};
var getWeightedValue = function(a, pos){
var p = pos * (a.length - 1),
t = Math.ceil(p),
f = t - 1;
if(f <= 0){
return a[0];
}
if(t >= a.length){
return a[a.length - 1];
}
return a[f] * (t - p) + a[t] * (p - f);
};
var getStats = function(a, n){
var t = a.slice(0);
t.sort(function(a, b){ return a - b; });
var result = {
// the five-number summary
minimum: t[0],
maximum: t[t.length - 1],
median: getWeightedValue(t, 0.5),
lowerQuartile: getWeightedValue(t, 0.25),
upperQuartile: getWeightedValue(t, 0.75),
// extended to the Bowley's seven-figure summary
firstDecile: getWeightedValue(t, 0.1),
lastDecile: getWeightedValue(t, 0.9)
};
// add the average
for(var i = 0, sum = 0; i < t.length; sum += t[i++]);
result.average = sum / t.length;
d.forEach(statNames, function(name){
if(result.hasOwnProperty(name) && typeof result[name] == "number"){
result[name] /= n;
}
});
return result;
};
var testGroups = [];
var registerGroup = function(fs, bi, m, node, title){
var n = findThreshold(fs[bi].fun, LIMIT),
x = {
functions: fs,
stats: [],
process: function(a){
if(a){
this.stats.push(getStats(a, n));
console.log("test #" + this.stats.length + " is completed: " + this.functions[this.stats.length - 1].name);
}
if(this.stats.length < this.functions.length){
//setTimeout(d.hitch(null, runTests, this.functions[this.stats.length].fun, n, m, d.hitch(this, "process")), DELAY);
var f = d.hitch(null, runTests, this.functions[this.stats.length].fun, n, m, d.hitch(this, "process"));
f();
return;
}
var diff = Math.max.apply(Math, d.map(this.stats, function(s){ return s.upperQuartile - s.lowerQuartile; })),
prec = 1 - Math.floor(Math.log(diff) / Math.LN10),
fastest = 0,
stablest = 0;
d.forEach(this.stats, function(s, i){
if(i){
if(s.median < this.stats[fastest].median){
fastest = i;
}
if(s.upperQuartile - s.lowerQuartile < this.stats[i].upperQuartile - this.stats[i].lowerQuartile){
stablest = i;
}
}
}, this);
// add the table
var tab = ["
");
d.place(tab.join(""), node);
// next
run();
}
};
testGroups.push(function(){
console.log("all tests will be repeated " + n + " times in " + m + " series");
d.place("
" + title + "
", node);
x.process();
});
};
function run(){
if(testGroups.length){
testGroups.shift()();
}else{
setTimeout(function(){
console.log("Done!");
alert("Done!");
}, DELAY);
}
}
```
--------------------------------
### SpinWheel with Icons Setup
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_SpinWheel-icons.html
Demonstrates the require statement and basic CSS for setting up a SpinWheel with icons. Ensure the SpinWheel widget and necessary modules are loaded.
```javascript
require([
"dijit/registry", "dojox/mobile/parser", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/SpinWheel"
]);
#spin1 {
width: 312px;
margin: 10px auto;
}
```
--------------------------------
### Basic ScrollableView Configuration
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_ScrollableView-v-vh-af-inp.html
Example of configuring a ScrollableView with vertical scrolling and specific header and footer classes. This setup is common for creating distinct view sections in a mobile application.
```html
```
--------------------------------
### Basic Rating Widget Setup
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_Rating.html
This snippet shows the basic require statement for using the Rating widget and its dependencies. It also includes CSS for styling different rating group examples.
```javascript
require([
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/Rating"
]);
```
```css
.group {
margin: 20px;
padding: 10px;
border: 1px solid gray;
border-radius: 6px;
}
.group2 .mblRating .mblSpriteIconParent {
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0.3)));
}
.group3 {
}
.group4 {
background-color: black;
}
```
--------------------------------
### Grid Auto Width Setup and Resize Connection
Source: https://github.com/dojo/dojox/blob/master/grid/tests/test_data_grid_autowidth.html
Sets up the grid and connects the window resize event to the grid's resize method to test percentage-based width sticking.
```javascript
@import "../../../dojo/resources/dojo.css";
@import "../resources/Grid.css";
@import "../resources/tundraGrid.css";
body { font-size: 0.9em; font-family: Geneva, Arial, Helvetica, sans-serif; }
.heading { font-weight: bold; padding-bottom: 0.25em; }
.grid { width: 85%; height: 20em; padding: 1px; }
dojo.require("dijit.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
// A quick-and-dirty resize of the grid when the window resizes to
// test that percentages "stick" when they are supposed to.
dojo.connect(window, "resize", grid2, "resize");
});
```
--------------------------------
### Dojo Setup and Data Definition
Source: https://github.com/dojo/dojox/blob/master/grid/tests/test_treegrid_model.html
Initializes Dojo, imports necessary modules, and defines hierarchical data for the grid using ItemFileWriteStore.
```javascript
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/claro/claro.css";
@import "../../../dojox/grid/resources/Grid.css";
@import "../../../dojox/grid/resources/claroGrid.css";
.grid {
width: 70em;
height: 40em;
}
dojo.require("dojox.grid.TreeGrid");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
var dataItems = {
identifier: 'id',
label: 'name',
items: [
{ id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km', timezone: '-1 UTC to +4 UTC', children:[{_reference:'EG'}, {_reference:'KE'}, {_reference:'SD'}] },
{ id: 'EG', name:'Egypt', type:'country' },
{ id: 'KE', name:'Kenya', type:'country', children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}]
},
{ id: 'Nairobi', name:'Nairobi', type:'city' },
{ id: 'Mombasa', name:'Mombasa', type:'city' },
{ id: 'SD', name:'Sudan', type:'country', children:{\_reference:'Khartoum'} },
{ id: 'Khartoum', name:'Khartoum', type:'city' },
{ id: 'AS', name:'Asia', type:'continent', children:[{_reference:'CN'}, {_reference:'IN'}, {_reference:'RU'}, {_reference:'MN'}] },
{ id: 'CN', name:'China', type:'country' },
{ id: 'IN', name:'India', type:'country' },
{ id: 'RU', name:'Russia', type:'country' },
{ id: 'MN', name:'Mongolia', type:'country' },
{ id: 'OC', name:'Oceania', type:'continent', population:'21 million', children:{\_reference:'AU'}},
{ id: 'AU', name:'Australia', type:'country', population:'21 million'},
{ id: 'EU', name:'Europe', type:'continent', children:[{_reference:'DE'}, {_reference:'FR'}, {_reference:'ES'}, {_reference:'IT'}] },
{ id: 'DE', name:'Germany', type:'country' },
{ id: 'FR', name:'France', type:'country' },
{ id: 'ES', name:'Spain', type:'country' },
{ id: 'IT', name:'Italy', type:'country' },
{ id: 'NA', name:'North America', type:'continent', children:[{_reference:'MX'}, {_reference:'CA'}, {_reference:'US'}] },
{ id: 'MX', name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] },
{ id: 'Mexico City', name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'},
{ id: 'Guadalajara', name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' },
{ id: 'CA', name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] },
{ id: 'Ottawa', name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'},
{ id: 'Toronto', name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' },
{ id: 'US', name:'United States of America', type:'country' },
{ id: 'SA', name:'South America', type:'continent', children:[{_reference:'BR'}, {_reference:'AR'}] },
{ id: 'BR', name:'Brazil', type:'country', population:'186 million' },
{ id: 'AR', name:'Argentina', type:'country', population:'40 million' }
]
};
var dataItems2 = dojo.clone(dataItems);
function add_item(child, parentId){
if(child){
jsonStore.fetchItemByIdentity({
identity: parentId,
onItem: function(item){
if(item){
continentModel.newItem(child, item);
}
}
});
}
}
```
--------------------------------
### Late Binding Example with StatefulModel
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/1.7/test_mvc_ref-template-13263.html
This snippet defines custom TextBox and Group classes, a templated widget, and a StatefulModel. It then parses the DOM, sets the model reference late, and starts up the templated widget.
```javascript
var model;
require([
'dojo/_base/declare',
'dojox/mvc',
'dojox/mvc/Group',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'dojox/mvc/StatefulModel',
'dojo/ready',
'dojo/parser',
'dijit/form/TextBox'
], function (declare, mvc, Group, _TemplatedMixin, _WidgetsInTemplateMixin, StatefulModel, ready, parser, TextBox) {
declare('test.TextBox', [TextBox], {
startup: function () {
console.log('starting...', this.id, this.binding);
this.inherited(arguments);
console.log('started', this.id, this.binding);
}
});
var testGroup = declare('test.Group', [Group], {
startup: function () {
console.log('starting...', this.id, this.binding);
this.inherited(arguments);
console.log('started', this.id, this.binding);
}
});
declare('test.Templated', [testGroup, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: ''
});
model = new StatefulModel({
data: {
fn: 'first',
ln: 'last'
}
});
ready(function () {
parser.parse();
console.log('setting ref after parsing...');
dijit.byId('late').set('ref', model);
var prog = new test.Templated({ ref: model }, 'prog');
prog.startup();
});
});
```
--------------------------------
### DojoX MVC Initialization and Data Setup
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/1.7/test_mvc_ref-set-repeat-simple.html
Initializes DojoX MVC, required modules, and sets up memory stores with sample data for master-detail pattern examples. This code is essential for setting up the data binding environment.
```javascript
@import "css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
dojo.require("dojox.mvc");
dojo.require("dojox.mvc.Output");
dojo.require("dojox.mvc.Group");
dojo.require("dojox.mvc.Repeat");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.store.Memory");
dojo.require("dojo.parser");
var search_results_init1 = [
{
"Query" : "Engineers1",
"Results" : [
{ "First" : "Anne1", "Last" : "Ackerman1" },
{ "First" : "Ben1", "Last" : "Beckham1" },
{ "First" : "Chad1", "Last" : "Chapman1" }
]
}
];
var search_results_init2 = [
{
"Query" : "Engineers2",
"Results" : [
{ "First" : "Anne2", "Last" : "Ackerman2" },
{ "First" : "Ben2", "Last" : "Beckham2" }
]
}
];
var search_results_init3 = [
{
"Query" : "Engineers3",
"Results" : [
{ "First" : "", "Last" : "" }
]
}
];
var memStore1 = new dojo.store.Memory({data : search_results_init1});
var model1 = dojox.mvc.newStatefulModel({ store : memStore1 })[0];
var memStore2 = new dojo.store.Memory({data : search_results_init2});
var model2 = dojox.mvc.newStatefulModel({ store : memStore2 })[0];
var memStore3 = new dojo.store.Memory({data : search_results_init3});
var model3 = dojox.mvc.newStatefulModel({ store : memStore3 })[0];
```
--------------------------------
### DojoX GFX Basic Example
Source: https://github.com/dojo/dojox/blob/master/_autodocs/api-reference/gfx.md
Demonstrates creating a surface, drawing a rectangle, circle, and path, and applying a transformation to the rectangle.
```javascript
require(["dojox/gfx"], function(gfx){
// Create a surface
var surface = gfx.createSurface("myDiv", 600, 400);
// Create a rectangle
var rect = surface.createRect({
x: 10, y: 10, width: 100, height: 50
}).setFill("blue").setStroke({color: "black", width: 2});
// Create a circle
var circle = surface.createCircle({
cx: 200, cy: 100, r: 50
}).setFill("red");
// Create a path
var path = surface.createPath("M 300 300 L 400 350 L 350 400 Z")
.setFill("green")
.setStroke({color: "black", width: 1});
// Transform a shape
var t = gfx.matrix.translate(50, 50);
rect.setTransform(t);
});
```
--------------------------------
### Setup Stateful Model with Data Store and Query
Source: https://github.com/dojo/dojox/blob/master/mvc/tests/1.7/mobile/test_Android-repeat-data-store.html
Initializes a stateful model using a data store and applies a query to filter the data. This is typically done on application startup.
```javascript
var writeStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
var modelPromise = dojox.mvc.newStatefulModel({
store: new dojo.store.DataStore({store: writeStore}),
query:{"Location" : "CA"}
});
// example of using a query parm for Location
modelPromise.then(function(results){
model = results;
nextIndexToAdd = model.data.length;
//dojo.parser.parse();
dojox.mobile.parser.parse();
});
```
--------------------------------
### DojoX Mobile i18n Setup and Locale Handling
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_i18n.html
Initializes Dojo, sets the locale based on URL parameters, and loads necessary modules for i18n and mobile widgets. This snippet is typically found at the start of an i18n-enabled Dojo application.
```javascript
Settings require(\[ "dojo/\_base/kernel" \], function(dojo){ var lang = location.search.match(/lang=(\\w\*)/) ? RegExp.$1 : null; if(lang){ dojo.locale = lang; } require(\[ "dojo/\_base/window", "dojo/dom", "dojo/ready", "dijit/registry", "dojo/i18n!dojox/mobile/tests/nls/sample", "dojoxx/mobile/i18n", "dojoxx/mobile/parser", "dojoxx/mobile", "dojoxx/mobile/compat", "dojoxx/mobile/TabBar", "dojoxx/mobile/IconContainer" \], function(win, dom, ready, registry, sample, i18n){ var bundle = i18n.registerBundle(sample); changeLocale = function(){ win.doc.forms\[0\].submit(); } ready(function(){ dom.byId("sel").value = lang; registry.byId("item1").set("label", bundle\["MINUTES"\].replace("%1", "30")); }); }); });
```
--------------------------------
### Initialize and Use BidiEngine
Source: https://github.com/dojo/dojox/blob/master/string/tests/BidiEngine/test_BidiEngine.html
Demonstrates how to instantiate the BidiEngine and use its bidiTransform method to process text based on specified source and target formats. It also shows how to display mapping arrays.
```javascript
var doTransform, showMap, changeInp;
require(["dojox/string/BidiEngine"], function(BidiEngine) {
var bdEngine = new BidiEngine();
doTransform = function() {
var txt = document.getElementById("inp").value;
document.getElementById("div0").innerHTML = txt;
document.getElementById("div1").innerHTML = txt;
var sp = document.getElementById("sform").value + document.getElementById("sdir").value + document.getElementById("sswap").value + document.getElementById("sshap").value + "N";
var tp = document.getElementById("tform").value + document.getElementById("tdir").value + document.getElementById("tswap").value + document.getElementById("tshap").value + "N";
document.getElementById("div11").innerHTML = sp + " - " + tp;
var rCls = sp.substring(0,2).toLowerCase();
var tCls = tp.substring(0,2).toLowerCase();
document.getElementById("div0").className = rCls;
document.getElementById("div2").className = tCls;
var res = bdEngine.bidiTransform(txt, sp, tp);
document.getElementById("div2").innerHTML = res;
document.getElementById("div3").innerHTML = res;
var arrays = [bdEngine.sourceToTarget, bdEngine.targetToSource, bdEngine.levels];
var divNames = ["div5", "div6", "div7"];
for (var i=0; i<3; i++) {
showMap(arrays[i], divNames[i]);
}
};
showMap = function (arr, divName) {
var map = "", sps;
for (var i=0; iOk magical.
]]>
```
--------------------------------
### SetPath Example
Source: https://github.com/dojo/dojox/blob/master/gfx/tests/svgweb/test_gfx.html
An example demonstrating the use of setPath with lineTo and moveTo commands to define a path's geometry.
```javascript
surface.createPath()
.moveTo(10, 20).lineTo(80, 150)
```
--------------------------------
### Another New Item Data Example
Source: https://github.com/dojo/dojox/blob/master/grid/tests/enhanced/test_enhanced_grid_dnd.html
Provides another example of a new item object, similar to newItem1 and newItem2.
```javascript
var newItem3 = {
A: "new a3", B: "new b3", C: "new c3", D: "new d3",E: "new e3",F: "new f3",G: "new g3",H: "new h3",I: "new i3",J: "new j3",K: "new k3",L: "new l3",M: "new m3",N: "new n3",O: "new o3",P: "new c3",Q: "new q3",R: "new r3",S: "new s3",T: "new t3",U: "new u3",V: "new v3",W: "new w3",X: "new x3",Y: "new y3",Z: "new z3"
};
```
--------------------------------
### HTML and Dojo Setup for DataGrid
Source: https://github.com/dojo/dojox/blob/master/grid/tests/test_data_grid_empty.html
Sets up the necessary CSS imports, grid container style, and Dojo/Dojox modules required for the DataGrid.
```html
DojoX Grid Empty Data
@import "../../../dojo/resources/dojo.css";
@import "../resources/Grid.css";
#grid { width: 65em; height: 25em; }
```
--------------------------------
### Dojo/Dojox Peller Test Setup
Source: https://github.com/dojo/dojox/blob/master/string/tests/peller.html
Initializes logging and the test array. This setup is used across various loop tests.
```javascript
var lq = [];
function log(s) {
lq.push(s);
//console.log(s);
}
function dumpLog() {
dojo.forEach(lq, function(l) {
console.log(l);
});
lq = [];
}
var g_a = new Array(100000);
for(var i=0; i<100000;i++){
g_a[i]=i;
}
```
--------------------------------
### Screen Size Aware Demo Setup
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_ScreenSizeAware-demo-tag.html
Sets up the ScreenSizeAware widget and event handlers for a responsive mobile application. Requires several dojox/mobile and dojo/_base modules.
```javascript
require("dojo/_base/connect", "dojo/data/ItemFileWriteStore", "dojo/dom-construct", "dojo/ready", "dijit/registry", "dojox/mobile/Heading", "dojox/mobile/ScrollableView", "dojox/mobile/EdgeToEdgeDataList", "dojox/mobile/parser", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/FixedSplitter", "dojox/mobile/ScreenSizeAware", "dojox/mobile/Container" "], function(connect, ItemFileWriteStore, domConstruct, ready, registry, Heading, ScrollableView, EdgeToEdgeDataList){
var viewCache = {};
function leftItemSelected(e){
var item = e ? registry.getEnclosingWidget(e.target) : registry.byId("list1").getChildren()[0];
if(!item){
return;
}
var id = viewCache[item.data];
if(!id){
// Dynamically creates a new view
id = item.id ? item.id + "View" : undefined;
var view = new ScrollableView({ id: id }, domConstruct.create("DIV", null, "rightPane"));
id = viewCache[item.data] = view.id;
var heading = new Heading({ label: item.label, back: "Home", moveTo: "view1", fixed: "top" });
view.addFixedBar(heading);
var store = new ItemFileWriteStore({url: item.data});
var list = new EdgeToEdgeDataList({ store: store });
list.placeAt(view.containerNode);
this.updateBackButton();
this.updateTransition();
view.startup();
}
item.transitionTo(id);
}
function leftItemsLoaded(){
if(!ssa.isPhone()){
ssa.leftItemSelected();
ssa.updateSelectedItem();
}
}
ready(function(){
connect.connect(registry.byId("list1").domNode, "onclick", ssa, leftItemSelected);
connect.connect(registry.byId("list1"), "onComplete", null, leftItemsLoaded);
connect.connect(ssa, "leftItemSelected", ssa, leftItemSelected);
connect.connect(ssa, "getDestinationId", null, function(item){
return viewCache[item.data];
});
});
store1 = new ItemFileWriteStore({url: "data/insurance.json"});
});
```
--------------------------------
### Initialize Clock and Start Animation
Source: https://github.com/dojo/dojox/blob/master/gfx/demos/clock.html
Sets the initial time on the clock and starts the interval to advance the time every second.
```javascript
resetTime();
window.setInterval(advanceTime, 1000);
```
--------------------------------
### Basic Heading Setup with Event Handling
Source: https://github.com/dojo/dojox/blob/master/mobile/tests/test_Heading.html
Demonstrates how to initialize a dojox/mobile Heading and attach an onClick event listener to a button within it. Requires dojo/ready, dijit/registry, and dojox/mobile modules.
```javascript
require([ "dojo/ready", "dijit/registry", "dojox/mobile/parser", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/TabBar" ], function(ready, registry){
ready(function(){
var btn1 = registry.byId("btn1");
btn1.connect(btn1, "onClick", function(){
console.log(this.label + " button was clicked");
});
});
});
```