- What is wJS?
- wJS structure
- Examples
- Namespaces
- Object-oriented programming
- Manage events
- Example of adding event management functionality to the class Person
- Example of defining event in the class Person
- Example of adding event handler
- Example of dispatching an event in the class Person
- Example of removing event handler
- Example of marking an event handler function as being compatible with declarative processing
- Binding
- Controls
- Example of creating a Rating control
- Example of creating a ToggleSwitch control
- Example of creating a DatePicker control
- Example of creating a TimePicker control
- Example of creating a Tooltip control
- Example of creating a Repeater control
- Example of creating a FlipView control
- Example of creating a ListView control
- Example of filtering items in the ListView control
- Example of grouping items in the ListView control
- Example of viewing data at two different zoom levels
- Example of placing commands in the appbar
- Example of placing commands in the toolbar
- Network
wJS is a collection of frequently used functions for WinJS apps.
(function () {
'use strict';
W.nsDef('System', {
Console: {
WriteLine: function (msg) {
console.log(msg);
}
}
});
System.out = {
println: function (msg) {
console.log(msg);
}
};
System.Console.WriteLine('A message from the WriteLine() method.');
// A message from the WriteLine() method.
System.out.println('A message from the println() method.');
// A message from the println() method.
}());(function () {
'use strict';
W.nsDef('System');
W.nsChildDef(System, 'Console', {
WriteLine: function (msg) {
console.log(msg);
}
});
W.nsChildDef(System, 'out');
System.out.println = function (msg) {
console.log(msg);
};
System.Console.WriteLine('A message from the WriteLine() method.');
// A message from the WriteLine() method.
System.out.println('A message from the println() method.');
// A message from the println() method.
}());(function () {
'use strict';
var TCar = W.clsDef(function (model, color) {
this.model = model;
this.color = color;
this.constructor._count += 1;
}, {
_model: undefined,
model: {
set: function (value) {
this._model = value;
},
get: function () {
return this._model;
}
},
_color: undefined,
color: {
set: function (value) {
this._color = value;
},
get: function () {
return this._color;
}
},
display: function () {
console.log(this.model + ' has ' + this.color + ' color.');
}
}, {
_count: 0,
count: {
set: function (value) {
throw new Error('UnimplementedMethod');
},
get: function () {
return this._count;
}
}
}),
cars = [];
cars.push(new TCar('Jaguar XE R-Sport', 'DarkRed'));
cars.push(new TCar('Porsche 718 Cayman S', 'DarkCyan'));
cars[0].display();
// Jaguar XE R-Sport has DarkRed color.
cars[1].display();
// Porsche 718 Cayman S has DarkCyan color.
cars[1].model = 'McLaren 570S';
cars[1].color = 'DarkOrange';
cars[1].display();
// McLaren 570S has DarkOrange color.
console.log('Number of instances of the TCar class: ' + TCar.count);
// Number of instances of the TCar class: 2
try {
TCar.count = 10;
} catch (e) {
console.log(e);
// Error: UnimplementedMethod(…)
}
}());(function () {
'use strict';
var TMechanicalCar = W.clsChildDef(TCar, function (model, color, fuelTank) {
this.model = model;
this.color = color;
this.fuelTank = fuelTank;
this.constructor._count += 1;
}, {
_fuelTank: undefined,
fuelTank: {
set: function (value) {
this._fuelTank = value;
},
get: function () {
return this._fuelTank;
}
},
display: function () {
console.log(this.model + ' has ' + this.color + ' color and ' + this.fuelTank + ' gal fuel tank.');
}
}, {
_count: 0,
count: {
set: function (value) {
throw new Error('UnimplementedMethod');
},
get: function () {
return this._count;
}
}
}),
TElectricCar = W.clsChildDef(TCar, function (model, color, batteryType) {
this.model = model;
this.color = color;
this.batteryType = batteryType;
this.constructor._count += 1;
}, {
_batteryType: undefined,
batteryType: {
set: function (value) {
this._batteryType = value;
},
get: function () {
return this._batteryType;
}
},
display: function () {
console.log(this.model + ' has ' + this.color + ' color and ' + this.batteryType + ' battery.');
}
}, {
_count: 0,
count: {
set: function (value) {
throw new Error('UnimplementedMethod');
},
get: function () {
return this._count;
}
}
}),
cars = [];
cars.push(new TMechanicalCar('Subaru BRZ', 'LightSkyBlue', 13.2));
cars.push(new TElectricCar('Tesla Model X', 'WhiteSmoke', 'Li-ion'));
cars[0].display();
// Subaru BRZ has LightSkyBlue color and 13.2 gal fuel tank.
cars[1].display();
// Tesla Model X has WhiteSmoke color and Li-ion battery.
console.log('Number of instances of the TCar class: ' + TCar.count);
// Number of instances of the TCar class: 0
console.log('Number of instances of the TMechanicalCar class: ' + TMechanicalCar.count);
// Number of instances of the TMechanicalCar class: 1
console.log('Number of instances of the TElectricCar class: ' + TElectricCar.count);
// Number of instances of the TElectricCar class: 1
}());W.evtMgmtAdd(Person);W.evtDef(Person, "WeightChanged");var myPerson = new Person(64),
listener = function (evt) {
console.log("WeightChanged event fired!");
console.log(myPerson.weight);
};
W.evtHndAdd(myPerson, "WeightChanged", listener);
myPerson.weight += 1;
myPerson.weight -= 1;var Person = W.clsDef(function (weight) {
this.weight = weight;
}, {
_weightValue: undefined,
weight: {
get: function () {
return this._weightValue;
},
set: function (val) {
this._weightValue = val;
W.evtRaise(this, "WeightChanged");
}
}
});W.evtHndDel(myPerson, "WeightChanged", listener);
myPerson.weight = 90;
<body class="win-type-body">
<div class="basicToolbar" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{ id: 'cmdAdd', label: 'Add', section: 'primary', type: 'button', icon: 'add', onclick: cmd.click }"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{ id: 'cmdEdit', label: 'Edit', section: 'primary', type: 'button', icon: 'edit', onclick: cmd.click }"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{ id: 'cmdDelete', label: 'Delete', section: 'primary', type: 'button', icon: 'delete', onclick: cmd.click }"></button>
<!-- Secondary command -->
<button data-win-control="WinJS.UI.Command" data-win-options="{ id: 'cmdShare', label: 'Share', section: 'secondary', type: 'button', onclick: cmd.click }"></button>
</div>
<script>
(function () {
'use strict';
W.nsDef("cmd", {
click: W.evtHndMark(function (e) {
var t = e.currentTarget;
if (t.winControl) {
console.log(t.winControl.label);
}
})
});
W.uiCtrlRender();
}());
</script>
</body>
<body>
<div id="yourTemplate" data-win-control="WinJS.Binding.Template">
<input data-win-bind="value: someProperty" name="someProperty" type="text" />
</div>
<div id="yourTargetContainer"></div>
<script>
(function () {
'use strict';
var ViewModel = W.clsDef(function () {
// this is the constructor function
}, {
// object literal for methods and attributes on the "class"
_someProperty: undefined,
someProperty: {
set: function (value) { this._someProperty = value; },
get: function () { return this._someProperty; }
}
}),
vm,
tplEl,
targetContainer;
vm = new W.ObsPrx(ViewModel, function (self) { self.someProperty = "test"; });
vm.bind("someProperty", function () { console.log("Value changed!"); });
W.pageParsed(function () {
tplEl = document.getElementById("yourTemplate");
targetContainer = document.getElementById("yourTargetContainer");
W.uiCtrlRender(function () {
tplEl.winControl.render(vm, targetContainer).then(function (e) {
var el = targetContainer.querySelector("input[name='someProperty']");
if (el) {
el.addEventListener("change", function (e) {
var propName = e.target.getAttribute("name");
vm.setProperty(propName, e.target.value);
});
}
});
});
});
}());
</script>
</body>
<head>
<style>
#basicListView { height: 100%; margin-top: 10px; margin-right: 20px; }
#templateContainer { display: -ms-grid; -ms-grid-columns: 1fr; min-height: 150px; }
#itemContainer { background-color: lightgray; width: 100%; padding: 10px; }
</style>
</head>
<body class="win-type-body">
<div id="flavorItemTemplate" data-win-control="WinJS.Binding.Template">
<div id="templateContainer">
<div id="itemContainer">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: DataExample.flavorList.dataSource,
itemTemplate: select('#flavorItemTemplate'),
selectionMode: 'none',
layout: { type: WinJS.UI.ListLayout } }">
</div>
<script>
(function () {
'use strict';
var flavors = [{ title: "Basic banana", text: "Low-fat frozen yogurt" },
{ title: "Banana blast", text: "Ice cream" },
{ title: "Brilliant banana", text: "Frozen custard" },
{ title: "Orange surprise", text: "Sherbet" },
{ title: "Original orange", text: "Sherbet" },
{ title: "Vanilla", text: "Ice cream" },
{ title: "Very vanilla", text: "Frozen custard" },
{ title: "Marvelous mint", text: "Gelato" },
{ title: "Succulent strawberry", text: "Sorbet" }],
flavorList = W.bndLstNew(flavors);
W.nsDef("DataExample", { flavorList: flavorList });
W.uiCtrlRender();
}());
</script>
</body>
<body class="win-type-body">
<div id="container">
<h3>Name:</h3>
<h2><span data-win-bind="innerText: name"></span></h2>
<h3>Age:</h3>
<h2><span data-win-bind="innerText: age"></span></h2>
<h3>Designation:</h3>
<h2><span data-win-bind="innerText: designation"></span></h2>
<h3>City:</h3>
<h2><span data-win-bind="innerText: city"></span></h2>
<h3>Fav Color:</h3>
<div data-win-bind="style.background: favcolor">
<div class="favcolor" data-win-bind="innerText: favcolor"></div>
</div>
</div>
<script>
(function () {
'use strict';
var person = {
name: "Abbas Gussenov",
age: 26,
designation: "Software Developer",
city: "Terekty",
favcolor: "green"
};
W.bndDat2El('container', person);
}());
</script>
</body>
<body class="win-type-body">
<div id="templateDiv" data-win-control="WinJS.Binding.Template">
<div class="templateItem" data-win-bind="style.background: color" style="color: white">
<ol>
<li><span>Name: </span><span data-win-bind="textContent: name"></span></li>
<li><span>Birthday: </span><span data-win-bind="textContent: birthday"></span></li>
<li><span>Pet's name: </span><span data-win-bind="textContent: petname"></span></li>
<li><span>Dessert: </span><span data-win-bind="textContent: dessert"></span></li>
</ol>
</div>
</div>
<div id="renderDiv"></div>
<fieldset id="templateControlObject">
<legend>Pick a name:</legend>
<select id="templateControlObjectSelector">
<option value="0">Show John Doe</option>
<option value="1">Show Jane Dow</option>
<option value="2">Show Jake Doe</option>
</select>
</fieldset>
<script>
(function () {
'use strict';
var Person = W.bndClsNew({ name: "", color: "", birthday: "", petname: "", dessert: "" }),
people = [
new Person({ name: "John Doe", color: "red", birthday: "2/2/2002", petname: "Spot", dessert: "chocolate cake" }),
new Person({ name: "Jane Doe", color: "green", birthday: "3/3/2003", petname: "Xena", dessert: "cherry pie" }),
new Person({ name: "Jake Doe", color: "blue", birthday: "2/2/2002", petname: "Pablo", dessert: "ice cream" })
],
selector;
function handleChange(evt) {
var templateElement = document.querySelector("#templateDiv"),
renderElement = document.querySelector("#renderDiv"),
selected = evt.target.selectedIndex,
templateControl = templateElement.winControl;
renderElement.innerHTML = "";
templateElement.winControl.render(people[selected], renderElement);
}
selector = document.querySelector("#templateControlObjectSelector");
W.evtHndAdd(selector, "change", handleChange, false);
W.uiCtrlRender();
}());
</script>
</body>
<body class="win-type-body">
<h1>Example 1 (declaratively)</h1>
<div data-win-control="WinJS.UI.Rating" data-win-options="{ maxRating: 4, enableClear: false }"></div>
<h1>Example 2 (programmatically)</h1>
<div id="rating"></div>
<button class="action win-button" id="btnInc" type="button">Increase</button>
<script>
(function () {
'use strict';
W.uiCtrlRender();
var ratingCtrl = W.uiCtrlRatingNew();
W.evtHndAdd(document.getElementById("btnInc"), "click", function () {
var ratingControl = W.uiCtrlGet("rating");
ratingControl.userRating += 1;
});
}());
</script>
</body>
<body class="win-type-body">
<div id="locationServices"></div>
<div id="info"></div>
<div data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{title :'Wi-Fi', labelOff: 'OFF', labelOn:'ON', checked:true}">
</div>
<script>
(function () {
'use strict';
var toggleBtn,
infoEl;
function chgEvtHnd(args) {
if (toggleBtn.checked) {
infoEl.innerHTML = 'Location Services enabled';
} else {
infoEl.innerHTML = 'Location Services disabled';
}
}
W.uiCtrlRender(function () {
toggleBtn = W.uiCtrlToggleNew('locationServices', 'Location Services', 'Disabled', 'Enabled', true, chgEvtHnd);
infoEl = document.getElementById('info');
});
}());
</script>
</body>
<body class="win-type-body">
<h3>Example 1 (programmatically)</h3>
<div id="birthday"></div>
<div id="info"></div>
<h3>Example 2 (declaratively)</h3>
<div data-win-control="WinJS.UI.DatePicker"
data-win-options="{ monthPattern: '{month.abbreviated}',
datePattern: '{day.integer(2)}',
yearPattern: '{year.abbreviated}' }">
</div>
<script>
(function () {
'use strict';
var datePick, infoEl = document.getElementById("info");
W.uiCtrlRender();
datePick = new W.uiCtrlDateNew("birthday", function (args) {
infoEl.innerHTML = "The selected date is " + datePick.current.toDateString();
}, '{month.abbreviated}', '{day.integer(2)}', '{year.abbreviated}');
}());
</script>
</body>
<body class="win-type-body">
<h3>Example 1 (programmatically)</h3>
<div id="timeSelector"></div>
<div id="info"></div>
<h3>Example 2 (declaratively)</h3>
<div data-win-control="WinJS.UI.TimePicker"
data-win-options="{ clock: '24HourClock', minuteIncrement: 15 }">
</div>
<script>
(function () {
'use strict';
var timePick, infoEl = document.getElementById("info");
W.uiCtrlRender();
timePick = new W.uiCtrlTimeNew("timeSelector", function (args) {
infoEl.innerHTML = "The selected time is " + timePick.current.toTimeString();
}, '24HourClock', 15, 'Hour: {hour.integer(2)}', 'Min: {minute.integer(2)}', '{period.abbreviated(2)}');
}());
</script>
</body>
<head>
<style>
.win-tooltip
{
background-color: bisque;
border-radius:30px;
border-color:red;
}
</style>
</head>
<body class="win-type-body">
<button id="btnSave" class="action win-button">Save</button>
<button data-win-control="WinJS.UI.Tooltip" class="action win-button"
data-win-options="{ innerHTML: 'Removes the <b>Employee</b> record' }">Remove</button>
<script>
(function () {
'use strict';
W.pageParsed(function () {
var tooltip = W.uiCtrlTipNew("btnSave", 'Saves the <b>Employee</b> record');
W.uiCtrlRender();
});
}());
</script>
</body>
<body class="win-type-body">
<h1>Example 1 (programmatically)</h1>
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Employee Designation</th>
</tr>
</thead>
<tbody id="repeaterData">
<tr>
<td data-win-bind="textContent:id"></td>
<td data-win-bind="textContent:name"></td>
<td data-win-bind="textContent:designation"></td>
</tr>
</tbody>
</table>
<h1>Example 2 (declaratively)</h1>
<div id="repeaterData2" data-win-control="WinJS.UI.Repeater">
<div data-win-control="WinJS.UI.ItemContainer" data-win-bind="dataset.name:name">
<div data-win-bind="textContent:name"></div>
</div>
</div>
<script>
(function () {
'use strict';
var employees = W.bndLstNew([{ id: 1, name: "Abbas Gussenov", designation: "Software Developer" },
{ id: 2, name: "John Smith", designation: "Web Designer" }]),
repeaterControl1;
repeaterControl1 = W.uiCtrlRepeaterNew("repeaterData");
repeaterControl1.data = employees;
W.uiCtrlRender(function () {
var repeaterControl2 = document.getElementById('repeaterData2').winControl;
repeaterControl2.data = employees;
repeaterControl2.addEventListener("invoked", function (e) {
console.log(e.target.dataset.name);
});
});
}());
</script>
</body>
<body class="win-type-body">
<h1>Example 1 (programmatically)</h1>
<div id="template">
<div>
<h4 data-win-bind="innerText: name"></h4>
<h6 data-win-bind="innerText: vendor"></h6>
</div>
</div>
<div id="flipView1" style="height: 128px;"></div>
<h1>Example 2 (declaratively)</h1>
<div id="template2" data-win-control="WinJS.Binding.Template">
<div>
<h4 data-win-bind="innerText: name"></h4>
<h6 data-win-bind="innerText: vendor"></h6>
</div>
</div>
<div id="flipView2" style="height: 128px;" data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemTemplate: select('#template2'), itemDataSource: SampleData.Products.dataSource }">
</div>
<script>
(function () {
'use strict';
var Products = W.bndLstNew([{ id: 1, name: "iPad", vendor: "Apple" },
{ id: 2, name: "iPhone", vendor: "Apple" }]);
W.nsDef("SampleData", {
Products: Products
});
var template = W.bndTplNew("template"),
flipView1 = W.uiCtrlFlipNew("flipView1", template, SampleData.Products);
W.uiCtrlRender();
}());
</script>
</body>
<body class="win-type-body">
<h3>Example 1 (programmatically)</h3>
<div id="template">
<div style="height: 60px; width: 100px;">
<h4 data-win-bind="innerText: name"></h4>
<h6 data-win-bind="innerText: vendor"></h6>
</div>
</div>
<div id="listView1" style="height: 128px;"></div>
<h3>Example 2 (declaratively)</h3>
<div id="template2" data-win-control="WinJS.Binding.Template">
<div style="height: 60px; width: 100px;">
<h4 data-win-bind="innerText: name"></h4>
<h6 data-win-bind="innerText: vendor"></h6>
</div>
</div>
<div data-win-control="WinJS.UI.ListView" style="height: 180px;"
data-win-options="{ itemTemplate: select('#template2'),
layout: { type: WinJS.UI.GridLayout, maximumRowsOrColumns: 5 },
itemDataSource: SampleData.Products.dataSource }">
</div>
<script>
(function () {
'use strict';
var Products = W.bndLstNew([{ id: 1, name: "iPad", vendor: "Apple" },
{ id: 2, name: "iPhone", vendor: "Apple" },
{ id: 3, name: "Kindle", vendor: "Amazon" },
{ id: 4, name: "Xbox", vendor: "Microsoft" },
{ id: 5, name: "PlayStation", vendor: "Sony" },
{ id: 6, name: "Galaxy", vendor: "Samsung" },
{ id: 7, name: "MacBook", vendor: "Apple" },
{ id: 8, name: "ZenBook", vendor: "ASUS" },
{ id: 9, name: "Core i7", vendor: "Intel" },
{ id: 10, name: "GeForce", vendor: "NVIDIA" }]),
listControl1, template;
W.nsDef("SampleData", { Products: Products });
template = W.bndTplNew("template");
listControl1 = W.uiCtrlLstNew("listView1", "grid", template, SampleData.Products, 0);
listControl1.addEventListener("iteminvoked", function (e) {
var index = e.detail.itemIndex;
e.detail.itemPromise.then(function (item) {
console.log(item.data.name);
});
});
W.uiCtrlRender();
}());
</script>
</body>
<body class="win-type-body">
<div id="template">
<div style="height: 60px; width: 100px;">
<h4 data-win-bind="innerText: name"></h4>
<h6 data-win-bind="innerText: vendor"></h6>
</div>
</div>
<div id="listView1" style="height: 128px;"></div>
<div><input id="txtSearch" /></div>
<script>
(function () {
'use strict';
var Products = W.bndLstNew([{ id: 1, name: "iPad", vendor: "Apple" },
{ id: 2, name: "iPhone", vendor: "Apple" },
{ id: 3, name: "Kindle", vendor: "Amazon" },
{ id: 4, name: "Xbox", vendor: "Microsoft" },
{ id: 5, name: "PlayStation", vendor: "Sony" },
{ id: 6, name: "Galaxy", vendor: "Samsung" },
{ id: 7, name: "MacBook", vendor: "Apple" },
{ id: 8, name: "ZenBook", vendor: "ASUS" },
{ id: 9, name: "Core i7", vendor: "Intel" },
{ id: 10, name: "GeForce", vendor: "NVIDIA" }]),
listControl1, template, filterText;
W.nsDef("SampleData", { Products: Products });
template = W.bndTplNew("template");
listControl1 = W.uiCtrlLstNew("listView1", "grid", template, SampleData.Products, 0);
listControl1.addEventListener("iteminvoked", function (e) {
var index = e.detail.itemIndex;
e.detail.itemPromise.then(function (item) {
console.log(item.data.name);
});
});
filterText = document.getElementById('txtSearch');
filterText.addEventListener("keyup", function () {
W.uiCtrlLstFilter(listControl1, SampleData.Products, "vendor", filterText.value);
});
}());
</script>
</body>
<body class="win-type-body">
<div id="GroupHeader" data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText: vendor"></div>
</div>
<div id="product" data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText:name" style="width:128px;"></div>
</div>
<div id="lvProducts" style="height: 180px;" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#product'),
groupHeaderTemplate: select('#GroupHeader'),
itemDataSource: SampleData.Products.dataSource }">
</div>
<script>
(function () {
'use strict';
var products = W.bndLstNew([{ id: 1, name: "iPad", vendor: "Apple" },
{ id: 2, name: "iPhone", vendor: "Apple" },
{ id: 3, name: "Kindle", vendor: "Amazon" },
{ id: 4, name: "Xbox", vendor: "Microsoft" },
{ id: 5, name: "PlayStation", vendor: "Sony" },
{ id: 6, name: "Galaxy", vendor: "Samsung" },
{ id: 7, name: "MacBook", vendor: "Apple" },
{ id: 8, name: "ZenBook", vendor: "ASUS" },
{ id: 9, name: "Core i7", vendor: "Intel" },
{ id: 10, name: "GeForce", vendor: "NVIDIA"}]),
listControl1;
W.nsDef("SampleData", {
Products: products
});
W.uiCtrlRender(function () {
W.uiCtrlGet("lvProducts", function (listView1) {
W.uiCtrlLstGrp(listView1, SampleData.Products, "vendor");
});
});
}());
</script>
</body>
<body class="win-type-body">
<div id="GroupHeader" data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText: vendor"></div>
</div>
<div id="ProductTemplate" data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText:name" style="width:128px;"></div>
</div>
<!-- Zoom out-->
<div id="VendorTemplate" data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText: vendor" style="width:128px;"></div>
</div>
<div data-win-control="WinJS.UI.SemanticZoom" style="height:170px;">
<!-- Zoom In-->
<div id="lvProducts" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#ProductTemplate'),
groupHeaderTemplate: select('#GroupHeader'),
itemDataSource: SampleData.Products.dataSource }">
</div>
<!-- Zoom Out-->
<div id="lvVendors" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#VendorTemplate')}">
</div>
</div>
<script>
(function () {
'use strict';
var products = W.bndLstNew([{ id: 1, name: "iPad", vendor: "Apple" },
{ id: 2, name: "iPhone", vendor: "Apple" },
{ id: 3, name: "Kindle", vendor: "Amazon" },
{ id: 4, name: "Xbox", vendor: "Microsoft" },
{ id: 5, name: "PlayStation", vendor: "Sony" },
{ id: 6, name: "Galaxy", vendor: "Samsung" },
{ id: 7, name: "MacBook", vendor: "Apple" },
{ id: 8, name: "ZenBook", vendor: "ASUS" },
{ id: 9, name: "Core i7", vendor: "Intel" },
{ id: 10, name: "GeForce", vendor: "NVIDIA" }]);
W.nsDef("SampleData", {
Products: products
});
W.uiCtrlRender(function () {
W.uiCtrlLstZoom(W.uiCtrlGet("lvProducts"), W.uiCtrlGet("lvVendors"), SampleData.Products, "vendor");
});
}());
</script>
</body>
<body class="win-type-body">
<div id="appBar">
<button id="cmdAdd"></button>
<button id="cmdRemove"></button>
<button id="cmdCamera"></button>
</div>
<script>
(function () {
'use strict';
function addMethod() { console.log("Add button pressed"); }
function remMethod() { console.log("Remove button pressed"); }
function camMethod() { console.log("Camera button pressed"); }
var cmdAdd = W.uiCtrlBarCmdNew('cmdAdd', 'Add', 'add', addMethod),
cmdRem = W.uiCtrlBarCmdNew('cmdRemove', 'Remove', 'remove', remMethod),
cmdCam = W.uiCtrlBarCmdNew('cmdCamera', 'Click Photo', 'camera', camMethod),
appBar = W.uiCtrlBarNew('appBar');
W.uiCtrlRender();
}());
</script>
</body>
<body class="win-type-body">
<div id="appBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id: 'cmdAdd', label: 'Add', icon: 'add', section: 'primary', tooltip: 'Add' }">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id: 'cmdRemove', label: 'Remove', icon: 'remove', section: 'primary', tooltip: 'Remove' }">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id: 'cmdCamera', label: 'Click Photo', icon: 'camera', section: 'secondary', tooltip: 'click' }">
</button>
</div>
<script>
(function () {
'use strict';
function addMethod() { console.log("Add Button Pressed"); }
function removeMethod() { console.log("Remove button pressed"); }
function cameraMethod() { console.log("Camera button pressed"); }
W.pageReady("control_appbar_declarative.html", function (el, options) {
el.querySelector("#cmdAdd").addEventListener("click", addMethod, false);
el.querySelector("#cmdRemove").addEventListener("click", removeMethod, false);
el.querySelector("#cmdCamera").addEventListener("click", cameraMethod, false);
});
}());
</script>
</body>
<body class="win-type-body">
<div class="basicToolbar" id="tb">
<!-- Primary commands -->
<button id="cmdAdd"></button>
<button id="cmdEdit"></button>
<button id="cmdDelete"></button>
<!-- Secondary command -->
<button id="cmdShare"></button>
</div>
<script>
(function () {
'use strict';
W.nsDef("samples", {
clickcommand: function (ev) {
var command = ev.currentTarget;
if (command.winControl) {
console.log(command.winControl.label);
}
}
});
var cmdAdd = W.uiCmdNew('cmdAdd', 'Add', 'primary', 'button', 'add', samples.clickcommand),
cmdEdit = W.uiCmdNew('cmdEdit', 'Edit', 'primary', 'button', 'edit', samples.clickcommand),
cmdDelete = W.uiCmdNew('cmdDelete', 'Delete', 'primary', 'button', 'delete', samples.clickcommand),
cmdShare = W.uiCmdNew('cmdShare', 'Share', 'secondary', 'button', null, samples.clickcommand),
toolbar = W.uiCtrlTbNew('tb');
}());
</script>
</body>
<body>
<div>
<input id="inputurl" value="https: * api.github.com" />
<button class="action win-button" id="connect" type="button">Connect</button>
<button class="action win-button" id="cancel" type="button">Cancel</button>
</div>
<div id="output"></div>
<script>
(function () {
'use strict';
var input = document.getElementById("inputurl"),
cancelBtn = document.getElementById("cancel"),
connectBtn = document.getElementById("connect"),
xhrPromise;
function connect(url) {
var resultDiv = document.getElementById("output");
xhrPromise = W.netUrlConnect(url, function (result, status) {
if (result.status === 200) {
resultDiv.style.backgroundColor = "Green";
resultDiv.innerText = "Success";
}
}, function (e) {
resultDiv.style.backgroundColor = "red";
resultDiv.innerText = e.statusText;
});
}
W.evtHndAdd(input, "change", function (e) {
connect(e.target.value);
});
W.evtHndAdd(cancelBtn, "click", function () {
xhrPromise.cancel();
}, false);
W.evtHndAdd(connectBtn, "click", function () {
connect(input.value);
}, false);
}());
</script>
</body>