dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
313 lines (301 loc) • 12 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>ListItem Programmatic 3</title>
<script type="text/javascript" src="../../deviceTheme.js"></script>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
require([
"dojo/_base/declare",
"dojox/mobile/parser",
"dojo/ready", // dojo.ready
"dijit/registry", // dijit.byId
"doh/runner", // doh functions
"dojox/mobile/Heading",
"dojox/mobile/ListItem",
"dojox/mobile/IconItem",
"dojox/mobile/IconContainer",
"dojox/mobile/IconMenuItem",
"dojox/mobile/IconMenu",
"dojox/mobile/TabBarButton",
"dojox/mobile/TabBar",
"dojox/mobile/ToolBarButton",
"dojox/mobile", // This is a mobile app.
"dojox/mobile/View", // This mobile app uses mobile view
"dojox/mobile/compat" // This mobile app supports running on desktop browsers
], function(declare, parser, ready, registry, runner,
Heading, ListItem, IconItem, IconContainer,
IconMenuItem, IconMenu, TabBarButton, TabBar, ToolBarButton){
// This test mimics a particular case which happens in dojox/mvc due to
// the binding mechanism: the values of widget properties are set before
// the widget is actually started, that is before this.inherited completed.
// This holds for the following properties:
// ListItem: icon, checked, deleteIcon, rightIcon, rightIcon2, uncheckIcon.
// IconItem: icon
// IconMenuItem: icon
// TabBarButton: icon (icon1 and icon2 are not delayed)
// ToolBarButton: icon
// For these properties, the widgets use a mechanism which reapplies the setters
// once the startup is completed.
// The present test checks that these properties have the expected values even
// if the setters are called before startup completion.
function _createListItem1(){
var MyListItem1 = declare(
"dojox.mobile.MyListItem1",
ListItem, {
startup: function(){
this.set("checked", true);
this.inherited(arguments);
}
});
var list = registry.byId("listInSelectMode");
var item = new MyListItem1();
list.addChild(item);
return item;
};
function _assertCorrectListItem1(widget){
runner.assertTrue(widget.get("checked"),
"'checked' property not correctly set if setter called before startup completed");
};
// 2. Test the icon-related properties for a ListItem added to a list which is in "select" mode.
// In "select" mode, the values of the properties "rightIcon" and "uncheckIcon" are overridden
// by the setter of "checked".
function _createListItem2(){
var MyListItem2 = declare(
"dojox.mobile.MyListItem2",
ListItem, {
startup: function(){
this.set("icon", "../images/a-icon1.png");
this.set("deleteIcon", "../images/a-icon2.png");
this.set("rightIcon", "../images/a-icon3.png");
this.set("rightIcon2", "../images/a-icon4.png");
this.set("uncheckIcon", "../images/a-icon5.png");
this.inherited(arguments);
}
});
var list = registry.byId("listInSelectMode");
var item = new MyListItem2();
list.addChild(item);
return item;
};
function _assertCorrectListItem2(widget){
runner.assertEqual("../images/a-icon1.png", widget.get("icon"),
"'icon' property not correctly set if setter called before startup completed (list in select mode)");
runner.assertEqual("../images/a-icon2.png", widget.get("deleteIcon"),
"'deleteIcon' property not correctly set if setter called before startup completed (list in select mode)");
runner.assertEqual("mblDomButtonCheck", widget.get("rightIcon"),
"'rightIcon' property not correctly set if setter called before startup completed (list in select mode)");
runner.assertEqual("../images/a-icon4.png", widget.get("rightIcon2"),
"'rightIcon2' property not correctly set if setter called before startup completed (list in select mode)");
runner.assertEqual(undefined, widget.get("uncheckIcon"),
"'uncheckIcon' property not correctly set if setter called before startup completed (list in select mode)");
};
// 3. Test the icon-related properties for a ListItem added to a list which is not in "select" mode.
// In this case, the values of the properties "rightIcon" and "uncheckIcon" are not overridden
// by the setter of "checked" (because the setter is not called).).
function _createListItem3(){
var MyListItem3 = declare(
"dojox.mobile.MyListItem3",
ListItem, {
startup: function(){
// This mimics what happens in dojox/mvc due to the binding mechanism:
// the values of properties are set before the widget is actually started,
// that is before this.inherited completed its execution.
// The properties below are among those for which ListItem uses a mechanism
// which reapplies the setters once the startup is completed.
this.set("icon", "../images/a-icon1.png");
this.set("deleteIcon", "../images/a-icon2.png");
this.set("rightIcon", "../images/a-icon3.png");
this.set("rightIcon2", "../images/a-icon4.png");
this.set("uncheckIcon", "../images/a-icon5.png");
this.inherited(arguments);
}
});
var list = registry.byId("listNotInSelectMode");
var item = new MyListItem3();
list.addChild(item);
return item;
};
function _assertCorrectListItem3(widget){
runner.assertEqual("../images/a-icon1.png", widget.get("icon"),
"'icon' property not correctly set if setter called before startup completed (list not in select mode)");
runner.assertEqual("../images/a-icon2.png", widget.get("deleteIcon"),
"'deleteIcon' property not correctly set if setter called before startup completed (list not in select mode)");
runner.assertEqual("../images/a-icon3.png", widget.get("rightIcon"),
"'rightIcon' property not correctly set if setter called before startup completed (list not in select mode)");
runner.assertEqual("../images/a-icon4.png", widget.get("rightIcon2"),
"'rightIcon2' property not correctly set if setter called before startup completed (list not in select mode)");
runner.assertEqual("../images/a-icon5.png", widget.get("uncheckIcon"),
"'uncheckIcon' property not correctly set if setter called before startup completed (list not in select mode)");
};
// 4. Test the icon property for an IconItem added to an IconContainer
function _createIconItem(){
var MyIconItem = declare(
"dojox.mobile.MyIconItem",
IconItem, {
startup: function(){
this.set("icon", "../images/a-icon1.png");
this.inherited(arguments);
}
});
var list = registry.byId("iconContainer");
var item = new MyIconItem();
list.addChild(item);
return item;
};
function _assertCorrectIconItem(widget){
runner.assertEqual("../images/a-icon1.png", widget.get("icon"),
"'icon' property not correctly set if setter called before startup completed (IconItem)");
};
// 5. Test the icon property for an IconMenuItem added to an IconMenu
function _createIconMenuItem(){
var MyIconMenuItem = declare(
"dojox.mobile.MyIconMenuItem",
IconMenuItem, {
startup: function(){
this.set("icon", "../images/a-icon1.png");
this.inherited(arguments);
}
});
var list = registry.byId("iconMenu");
var item = new MyIconMenuItem();
list.addChild(item);
return item;
};
function _assertCorrectIconMenuItem(widget){
runner.assertEqual("../images/a-icon1.png", widget.get("icon"),
"'icon' property not correctly set if setter called before startup completed (IconMenuItem)");
};
// 6. Test the icon1 and icon2 properties for a TabBarButton added to a TabBar
function _createTabBarButton(){
var MyTabBarButton = declare(
"dojox.mobile.MyTabBarButton",
TabBarButton, {
startup: function(){
this.set("icon", "../images/a-icon1.png");
this.set("icon1", "../images/a-icon2.png");
this.set("icon2", "../images/a-icon3.png");
this.inherited(arguments);
}
});
var list = registry.byId("tabBar");
var item = new MyTabBarButton();
list.addChild(item);
return item;
};
function _assertCorrectIconTabBarButton(widget){
runner.assertEqual("../images/a-icon1.png", widget.get("icon"),
"'icon' property not correctly set if setter called before startup completed (TabBarButton)");
runner.assertEqual("../images/a-icon2.png", widget.get("icon1"),
"'icon1' property not correctly set if setter called before startup completed (TabBarButton)");
runner.assertEqual("../images/a-icon3.png", widget.get("icon2"),
"'icon2' property not correctly set if setter called before startup completed (TabBarButton)");
};
// 7. Test the icon property for a ToolBarButton added to a parent
function _createToolBarButton(){
var MyToolBarButton = declare(
"dojox.mobile.MyToolBarButton",
ToolBarButton, {
startup: function(){
this.set("icon", "../images/a-icon1.png");
this.inherited(arguments);
}
});
var list = registry.byId("toolBar");
var item = new MyToolBarButton();
list.addChild(item);
return item;
};
function _assertCorrectIconToolBarButton(widget){
runner.assertEqual("../images/a-icon1.png", widget.get("icon"),
"'icon' property not correctly set if setter called before startup completed (ToolBarButton)");
};
ready(function(){
runner.register("dojox.mobile.test.doh.ItemBase_subclasses_Programmatic", [
{
name: "ItemBase_subclasses_Programmatic ListItem.checked",
timeout: 2000,
runTest: function(){
var widget = _createListItem1();
_assertCorrectListItem1(widget);
}
},
{
name: "ItemBase_subclasses_Programmatic ListItem.icon (select mode)",
timeout: 2000,
runTest: function(){
var widget = _createListItem2();
_assertCorrectListItem2(widget);
}
},
{
name: "ItemBase_subclasses_Programmatic ListItem.icon (not select mode)",
timeout: 2000,
runTest: function(){
var widget = _createListItem3();
_assertCorrectListItem3(widget);
}
},
{
name: "ItemBase_subclasses_Programmatic IconItem.icon",
timeout: 2000,
runTest: function(){
var widget = _createIconItem();
_assertCorrectIconItem(widget);
}
},
{
name: "ItemBase_subclasses_Programmatic IconMenuItem.icon",
timeout: 2000,
runTest: function(){
var widget = _createIconMenuItem();
_assertCorrectIconMenuItem(widget);
}
},
{
name: "ItemBase_subclasses_Programmatic TabBarButton.icon/icon1/icon2",
timeout: 2000,
runTest: function(){
var widget = _createTabBarButton();
_assertCorrectIconTabBarButton(widget);
}
},
{
name: "ItemBase_subclasses_Programmatic ToolBarButton.icon",
timeout: 2000,
runTest: function(){
var widget = _createToolBarButton();
_assertCorrectIconToolBarButton(widget);
}
}
]);
runner.run();
});
});
</script>
</head>
<body style="visibility:hidden;">
<div id="view" data-dojo-type="dojox/mobile/View" selected="true">
<h1 data-dojo-type="dojox/mobile/Heading">RoundRectList</h1>
<!-- A list in single select mode -->
<ul id="listInSelectMode" data-dojo-type="dojox/mobile/RoundRectList"
data-dojo-props="select:'single'">
</ul>
<!-- A list which is not in a select mode -->
<ul id="listNotInSelectMode" data-dojo-type="dojox/mobile/RoundRectList">
</ul>
<ul id="iconContainer" data-dojo-type="dojox/mobile/IconContainer">
</ul>
<ul id="iconMenu" data-dojo-type="dojox/mobile/IconMenu">
</ul>
<ul id="tabBar" data-dojo-type="dojox/mobile/TabBar">
</ul>
<div id="toolBar" data-dojo-type="dojox/mobile/Heading">
</div>
</div>
</body>
</html>