You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
9.9 KiB
235 lines
9.9 KiB
<!DOCTYPE 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>ContentPane Tests</title> |
|
<script type="text/javascript" src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script> |
|
<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true"></script> |
|
<script language="JavaScript" type="text/javascript"> |
|
var WIDGET_CLASSNAME1 = "mblContentPane"; |
|
var WIDGET2_CLASSNAME1 = "mblRoundRect"; |
|
var WIDGET2_CLASSNAME2 = "mblShadow"; |
|
var WIDGET_INNERHTML1 = "Pane 1 : Thank you!"; |
|
var WIDGET_INNERHTML2 = "Pane 2 : HTML fragment example"; |
|
var WIDGET_INNERHTML3 = "Pane 3 : Thank you!"; |
|
var WIDGET_INNERHTML4 = "Pane 4 : HTML fragment example"; |
|
var WIDGET_INNERHTML5 = "Pane 5 : DOM Tree"; |
|
|
|
require([ |
|
"dojo/_base/connect", |
|
"dojo/dom-construct", // dojo.place, dojo.create |
|
"dojo/dom-class", |
|
"dojo/ready", // dojo.ready |
|
"dojo/string", // dojo.trim |
|
"dijit/registry", // dijit.byId |
|
"doh/runner", //doh functions |
|
"dojox/mobile/ContentPane", |
|
"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 |
|
"dojox/mobile/parser", // This mobile app uses declarative programming with fast mobile parser |
|
"dojox/mobile/RoundRect" |
|
], function(connect, domConst, domClass, ready, string, registry, runner, ContentPane){ |
|
function _initContentPane(widgetIds){ |
|
registry.byId(widgetIds[0]).set("content", "<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Pane 3 : Thank you!</div>"); |
|
registry.byId(widgetIds[1]).set("href", "fragment2.html"); |
|
|
|
var dom = domConst.create("DIV", { |
|
dojoType: "dojox.mobile.RoundRect", |
|
shadow: "true" |
|
}); |
|
dom.innerHTML = "Pane 5 : DOM Tree"; |
|
registry.byId(widgetIds[2]).set("content", dom); |
|
|
|
} |
|
function _createContentPaneProgrammatically(widgetIds, placeHolderId){ |
|
var r = new ContentPane({id:widgetIds[0], content:"<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Pane 1 : Thank you!</div>"}); |
|
domConst.place(r.domNode, placeHolderId[0], "replace"); |
|
r.startup(); |
|
r = new ContentPane({id:widgetIds[1], href:"fragment1.html"}); |
|
domConst.place(r.domNode, placeHolderId[1], "replace"); |
|
r.startup(); |
|
r = new ContentPane({id:widgetIds[2]}); |
|
domConst.place(r.domNode, placeHolderId[2], "replace"); |
|
r.startup(); |
|
r = new ContentPane({id:widgetIds[3]}); |
|
domConst.place(r.domNode, placeHolderId[3], "replace"); |
|
r.startup(); |
|
r = new ContentPane({id:widgetIds[4]}); |
|
domConst.place(r.domNode, placeHolderId[4], "replace"); |
|
r.startup(); |
|
} |
|
function _createContentPaneProgrammaticallyWithSourceNodeReference(widgetIds){ |
|
new ContentPane({content:"<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Pane 1 : Thank you!</div>"}, widgetIds[0]); |
|
new ContentPane({href:"fragment1.html"}, widgetIds[1]); |
|
new ContentPane({}, widgetIds[2]); |
|
new ContentPane({}, widgetIds[3]); |
|
new ContentPane({}, widgetIds[4]); |
|
|
|
} |
|
function _assertCorrectContentPanes(widgetIds){ |
|
var widget = registry.byId(widgetIds[0]); |
|
_assertCorrectContentPane(widget, WIDGET_INNERHTML1); |
|
widget = registry.byId(widgetIds[1]); |
|
_assertCorrectContentPane(widget, WIDGET_INNERHTML2); |
|
widget = registry.byId(widgetIds[2]); |
|
_assertCorrectContentPane(widget, WIDGET_INNERHTML3); |
|
widget = registry.byId(widgetIds[3]); |
|
_assertCorrectContentPane(widget, WIDGET_INNERHTML4); |
|
widget = registry.byId(widgetIds[4]); |
|
_assertCorrectContentPane(widget, WIDGET_INNERHTML5); |
|
} |
|
function _assertCorrectContentPane(widget, titleText){ |
|
runner.assertNotEqual(null, widget, "ContentPane: Did not instantiate."); |
|
runner.assertTrue(domClass.contains(widget.domNode, WIDGET_CLASSNAME1), WIDGET_CLASSNAME1 + " id=" + widget.domNode.id); |
|
var c = widget.getChildren(); |
|
runner.assertNotEqual(null, c, "ContentPane: Does not have children (null)."); |
|
runner.assertNotEqual(undefined, c, "ContentPane: Does not have children (undefined)."); |
|
runner.assertNotEqual(null, c[0], "ContentPane: Did not instantiate first child (null). id=" + |
|
widget.domNode.id + " c=" + c + " c[0]=" + c[0]); |
|
runner.assertNotEqual(undefined, c[0], "ContentPane: Did not instantiate first child (undefined). id=" + |
|
widget.domNode.id + " c=" + c + " c[0]=" + c[0]); |
|
runner.assertTrue(domClass.contains(c[0].domNode, WIDGET2_CLASSNAME1), WIDGET2_CLASSNAME1 + " id=" + c[0].domNode.id); |
|
runner.assertTrue(domClass.contains(c[0].domNode, WIDGET2_CLASSNAME2), WIDGET2_CLASSNAME2 + " id=" + c[0].domNode.id); |
|
runner.assertEqual(titleText, string.trim(c[0].domNode.innerHTML.replace(/\r\n/g,"")), "id=" + c[0].domNode.id); |
|
} |
|
function _showView2(){ |
|
var view1 = registry.byId("view1"); |
|
view1.performTransition("view2", 1, "none"); |
|
} |
|
ready(function(){ |
|
_initContentPane(["view1-pane3","view1-pane4","view1-pane5"]); |
|
_createContentPaneProgrammatically(["view1-pane6","view1-pane7","view1-pane8","view1-pane9","view1-pane10"], |
|
["view1-pane6place","view1-pane7place","view1-pane8place","view1-pane9place","view1-pane10place"]); |
|
_initContentPane(["view1-pane8","view1-pane9","view1-pane10"]); |
|
_createContentPaneProgrammaticallyWithSourceNodeReference(["view1-pane11","view1-pane12","view1-pane13","view1-pane14","view1-pane15"]); |
|
_initContentPane(["view1-pane13","view1-pane14","view1-pane15"]); |
|
|
|
_showView2(); |
|
_initContentPane(["view2-pane3","view2-pane4","view2-pane5"]); |
|
_createContentPaneProgrammatically(["view2-pane6","view2-pane7","view2-pane8","view2-pane9","view2-pane10"], |
|
["view2-pane6place","view2-pane7place","view2-pane8place","view2-pane9place","view2-pane10place"]); |
|
_initContentPane(["view2-pane8","view2-pane9","view2-pane10"]); |
|
_createContentPaneProgrammaticallyWithSourceNodeReference(["view2-pane11","view2-pane12","view2-pane13","view2-pane14","view2-pane15"]); |
|
_initContentPane(["view2-pane13","view2-pane14","view2-pane15"]); |
|
|
|
runner.register("dojox.mobile.test.doh.ContentPane", [ |
|
{ |
|
name: "ContentPane Verification1", |
|
timeout: 10000, |
|
runTest: function(){ |
|
var widget = registry.byId("view1-pane14"); |
|
var d = new runner.Deferred(); |
|
// The loading of the content of the different ContentPane instances is performed |
|
// asynchronously in an undefined order. Hence the use of setTimeout such that the |
|
// checks are performed after the loading of all ContentPanes in view1. |
|
setTimeout(d.getTestCallback(function(){ |
|
_assertCorrectContentPanes(["view1-pane1","view1-pane2","view1-pane3","view1-pane4","view1-pane5"]); |
|
_assertCorrectContentPanes(["view1-pane6","view1-pane7","view1-pane8","view1-pane9","view1-pane10"]); |
|
_assertCorrectContentPanes(["view1-pane11","view1-pane12","view1-pane13","view1-pane14","view1-pane15"]); |
|
}), 5000); |
|
return d; |
|
} |
|
}, |
|
{ |
|
name: "ContentPane Verification2", |
|
timeout: 10000, |
|
runTest: function(){ |
|
var widget = registry.byId("view2-pane14"); |
|
var d = new runner.Deferred(); |
|
// The loading of the content of the different ContentPane instances is performed |
|
// asynchronously in an undefined order. Hence the use of setTimeout such that the |
|
// checks are performed after the loading of all ContentPanes in view1. |
|
setTimeout(d.getTestCallback(function(){ |
|
_assertCorrectContentPanes(["view2-pane1","view2-pane2","view2-pane3","view2-pane4","view2-pane5"]); |
|
_assertCorrectContentPanes(["view2-pane6","view2-pane7","view2-pane8","view2-pane9","view2-pane10"]); |
|
_assertCorrectContentPanes(["view2-pane11","view2-pane12","view2-pane13","view2-pane14","view2-pane15"]); |
|
}), 5000); |
|
return d; |
|
} |
|
} |
|
]); |
|
|
|
runner.run(); |
|
|
|
}); |
|
}) |
|
</script> |
|
</head> |
|
<body style="visibility:hidden;"> |
|
<div id="view1" dojoType="dojox.mobile.View"> |
|
<h1>View 1</h1> |
|
|
|
<div id="view1-pane1" data-dojo-type="dojox.mobile.ContentPane" |
|
data-dojo-props='content:"<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Pane 1 : Thank you!</div>"'></div> |
|
|
|
<div id="view1-pane2" data-dojo-type="dojox.mobile.ContentPane" |
|
data-dojo-props='href:"fragment1.html"'></div> |
|
|
|
<div id="view1-pane3" data-dojo-type="dojox.mobile.ContentPane"></div> |
|
|
|
<div id="view1-pane4" data-dojo-type="dojox.mobile.ContentPane"></div> |
|
|
|
<div id="view1-pane5" data-dojo-type="dojox.mobile.ContentPane"></div> |
|
<hr/> |
|
<div id="view1-pane6place"></div> |
|
|
|
<div id="view1-pane7place"></div> |
|
|
|
<div id="view1-pane8place"></div> |
|
|
|
<div id="view1-pane9place"></div> |
|
|
|
<div id="view1-pane10place"></div> |
|
<hr/> |
|
<div id="view1-pane11"></div> |
|
|
|
<div id="view1-pane12"></div> |
|
|
|
<div id="view1-pane13"></div> |
|
|
|
<div id="view1-pane14"></div> |
|
|
|
<div id="view1-pane15"></div> |
|
|
|
</div> |
|
<div id="view2" dojoType="dojox.mobile.View"> |
|
<h1>View 2</h1> |
|
|
|
<div id="view2-pane1" data-dojo-type="dojox.mobile.ContentPane" |
|
data-dojo-props='content:"<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Pane 1 : Thank you!</div>"'></div> |
|
|
|
<div id="view2-pane2" data-dojo-type="dojox.mobile.ContentPane" |
|
data-dojo-props='href:"fragment1.html"'></div> |
|
|
|
<div id="view2-pane3" data-dojo-type="dojox.mobile.ContentPane"></div> |
|
|
|
<div id="view2-pane4" data-dojo-type="dojox.mobile.ContentPane"></div> |
|
|
|
<div id="view2-pane5" data-dojo-type="dojox.mobile.ContentPane"></div> |
|
<hr/> |
|
<div id="view2-pane6place"></div> |
|
|
|
<div id="view2-pane7place"></div> |
|
|
|
<div id="view2-pane8place"></div> |
|
|
|
<div id="view2-pane9place"></div> |
|
|
|
<div id="view2-pane10place"></div> |
|
<hr/> |
|
<div id="view2-pane11"></div> |
|
|
|
<div id="view2-pane12"></div> |
|
|
|
<div id="view2-pane13"></div> |
|
|
|
<div id="view2-pane14"></div> |
|
|
|
<div id="view2-pane15"></div> |
|
|
|
</div> |
|
</body> |
|
</html>
|
|
|