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.
319 lines
8.7 KiB
319 lines
8.7 KiB
2 years ago
|
<html xmlns:dojo xmlns:myown>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var djConfig = {
|
||
|
|
// debugAtAllCosts: true,
|
||
|
|
isDebug: true
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="../../dojo.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require('dojo.widget.HtmlWidget');
|
||
|
|
dojo.require("dojo.widget.TabContainer");
|
||
|
|
dojo.require("dojo.widget.ContentPane");
|
||
|
|
dojo.require("dojo.widget.Button");
|
||
|
|
// dojo.hostenv.writeIncludes();
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.registerNamespace("myown", "myown");
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- TEST 1 -->
|
||
|
|
|
||
|
|
<!-- test that widgets are attached correctly -->
|
||
|
|
|
||
|
|
<!-- xmp is a very special element type - browser ignores all markup until it reaches /xmp tag -->
|
||
|
|
<!-- You might want to use a plain javascript string instead -->
|
||
|
|
<xmp id="Test1Template" style="display:block;">
|
||
|
|
<div>
|
||
|
|
<div dojoAttachPoint="subContainerWidget" dojoType="dojo:TabContainer" doLayout="false" >
|
||
|
|
<div dojoAttachPoint="contentPane1" dojoType="dojo:ContentPane" label="pane 1">
|
||
|
|
Pane 1
|
||
|
|
<div dojoAttachPoint="testElement"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoAttachPoint="contentPane2" dojoType="dojo:ContentPane" label="pane 2">
|
||
|
|
Pane 2
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</xmp>
|
||
|
|
|
||
|
|
<!-- Declared in BODY so can refer to XMP elements. -->
|
||
|
|
<script>
|
||
|
|
dojo.widget.defineWidget('myown.Test1', dojo.widget.HtmlWidget, {
|
||
|
|
widgetsInTemplate: true,
|
||
|
|
isContainer: true,
|
||
|
|
|
||
|
|
templateString: dojo.byId('Test1Template').textContent || dojo.byId('Test1Template').innerText,
|
||
|
|
|
||
|
|
subContainerWidget: null,
|
||
|
|
contentPane1: null,
|
||
|
|
contentPane2: null,
|
||
|
|
contentPane3: null,
|
||
|
|
testElement: null,
|
||
|
|
|
||
|
|
testSubWidgets1: function() {
|
||
|
|
var strs = [];
|
||
|
|
|
||
|
|
if (!this.subContainerWidget) {
|
||
|
|
strs.push('subContainerWidget missing');
|
||
|
|
} else if (this.subContainerWidget.constructor != dojo.widget.TabContainer) {
|
||
|
|
strs.push('subContainerWidget is not a TabContainer');
|
||
|
|
} else {
|
||
|
|
if (this.subContainerWidget.contentPane1) {
|
||
|
|
strs.push('this.subContainerWidget.contentPane1 exists and it shouldnt');
|
||
|
|
}
|
||
|
|
if (this.subContainerWidget.contentPane3) {
|
||
|
|
strs.push('this.subContainerWidget.contentPane3 exists and it shouldnt?');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.contentPane1) {
|
||
|
|
strs.push('this.contentPane1 missing');
|
||
|
|
} else if (this.contentPane1.constructor != dojo.widget.ContentPane) {
|
||
|
|
strs.push('this.contentPane1 is not a ContentPane');
|
||
|
|
} else if (this.contentPane1.parent != this.subContainerWidget){
|
||
|
|
strs.push('this.contentPane1 has wrong widget parent');
|
||
|
|
} else if (!this.contentPane1._processedSubWidgets){
|
||
|
|
strs.push('this.contentPane1._processedSubWidgets should be set!');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.contentPane2) {
|
||
|
|
strs.push('this.contentPane2 missing');
|
||
|
|
} else if (this.contentPane2.constructor != dojo.widget.ContentPane) {
|
||
|
|
strs.push('this.contentPane2 is not a ContentPane');
|
||
|
|
} else if (!this.contentPane2._processedSubWidgets){
|
||
|
|
strs.push('this.contentPane2._processedSubWidgets should be set!');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.contentPane3) {
|
||
|
|
strs.push('this.contentPane3 exists and it shouldnt');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.testElement) {
|
||
|
|
strs.push('testElement missing');
|
||
|
|
} else if (this.testElement.tagName != 'DIV') {
|
||
|
|
strs.push('testElement is not a DIV');
|
||
|
|
}
|
||
|
|
|
||
|
|
return strs;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- can use widget immediately in markup - no parsing occurs until document loaded and scripts run -->
|
||
|
|
<div dojoType="myown:Test1" widgetId="test1Widget" >
|
||
|
|
<div dojoAttachPoint="contentPane3" widgetId="contentPane3" dojoType="dojo:ContentPane" label="pane 3">
|
||
|
|
Pane 3
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
^ Pane 3 ooops - In code how to set test1Widget.containerNode = test1Widget.subContainerWidget.containerNode <em>before</em> child nodes are added? Cannot do automagically because widget template may have multiple containers. Same issue with ButtonA missing below.
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function doTest1() {
|
||
|
|
var strs = [];
|
||
|
|
var test1Widget = dojo.widget.byId('test1Widget');
|
||
|
|
if (!test1Widget) {
|
||
|
|
strs.push('test1Widget not created');
|
||
|
|
} else {
|
||
|
|
strs = strs.concat(test1Widget.testSubWidgets1());
|
||
|
|
}
|
||
|
|
|
||
|
|
var contentPane3 = dojo.widget.byId('contentPane3');
|
||
|
|
if (!contentPane3) {
|
||
|
|
strs.push('contentPane3 missing');
|
||
|
|
} else if (contentPane3.constructor != dojo.widget.ContentPane) {
|
||
|
|
strs.push('contentPane3 is not a ContentPane');
|
||
|
|
} else if (contentPane3._processedSubWidgets){
|
||
|
|
strs.push('contentPane3._processedSubWidgets should NOT be set!');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (test1Widget && contentPane3) {
|
||
|
|
if (contentPane3.domNode.parentNode != test1Widget.subContainerWidget.containerNode) {
|
||
|
|
strs.push('contentPane3 domNode isnt child of correct dom node');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if(strs.length == 0){
|
||
|
|
strs.push('all tests are passed!');
|
||
|
|
}
|
||
|
|
|
||
|
|
alert(strs.join('\n'));
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<br>
|
||
|
|
<button onClick="doTest1()">Run test 1</button>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- TEST 2 -->
|
||
|
|
|
||
|
|
<xmp id="Test2Template" style="display:block;">
|
||
|
|
<div>
|
||
|
|
<div dojoType="myown:Test2"></div>
|
||
|
|
</div>
|
||
|
|
</xmp>
|
||
|
|
<script>
|
||
|
|
dojo.widget.defineWidget('myown.Test2', dojo.widget.HtmlWidget, {
|
||
|
|
widgetsInTemplate: true,
|
||
|
|
isContainer: true,
|
||
|
|
templateString: dojo.byId('Test2Template').textContent || dojo.byId('Test2Template').innerText
|
||
|
|
});
|
||
|
|
|
||
|
|
function doTest2() {
|
||
|
|
var test2Widget = dojo.widget.createWidget('myown:Test2');
|
||
|
|
alert('This alert shouldnt show?' + test2Widget);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
This test is recursive and hangs the browser or maybe even cause a PC problems. Should we detect this?<br>
|
||
|
|
<button onClick="doTest2()">Run test 2</button>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- TEST 3 -->
|
||
|
|
|
||
|
|
<!-- test that can have subcontainers in subcontainers. More attachpoint checks, especially that subwidget attachpoints dont affect this widget -->
|
||
|
|
|
||
|
|
|
||
|
|
<xmp id="Test3Template" style="display:block;">
|
||
|
|
<div>
|
||
|
|
<div dojoAttachPoint="subContainerWidget" dojoType="myown:Test1" >
|
||
|
|
<div dojoType="dojo:ContentPane" label="pane 3">
|
||
|
|
<div dojoAttachPoint="buttonwidgetA" dojoType="dojo:Button">button A</div>
|
||
|
|
<div dojoAttachPoint="testElement3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="button" dojoAttachPoint="buttonWidgetB">button B
|
||
|
|
<div dojoAttachPoint="testElement3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</xmp>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
dojo.widget.defineWidget('myown.Test3', dojo.widget.HtmlWidget, {
|
||
|
|
widgetsInTemplate: true,
|
||
|
|
isContainer: true,
|
||
|
|
|
||
|
|
templateString: dojo.byId('Test3Template').textContent || dojo.byId('Test3Template').innerText,
|
||
|
|
|
||
|
|
// should be set
|
||
|
|
subContainerWidget: null,
|
||
|
|
buttonWidgetB: null,
|
||
|
|
testElement3: null,
|
||
|
|
|
||
|
|
// should not be set
|
||
|
|
buttonwidgetA: null,
|
||
|
|
buttonwidgetB: null,
|
||
|
|
testElement3: null,
|
||
|
|
|
||
|
|
// should not be set
|
||
|
|
testElement: null,
|
||
|
|
contentPane1: null,
|
||
|
|
contentPaneX: null,
|
||
|
|
|
||
|
|
testSubWidgets3: function() {
|
||
|
|
var strs = [];
|
||
|
|
|
||
|
|
if (!this.subContainerWidget) {
|
||
|
|
strs.push('this.subContainerWidget missing');
|
||
|
|
} else if (this.subContainerWidget.constructor != myown.Test1) {
|
||
|
|
strs.push('this.subContainerWidget is not a myown:Test1');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.buttonWidgetB) {
|
||
|
|
strs.push('this.buttonWidgetB missing');
|
||
|
|
} else if (this.buttonWidgetB.constructor != dojo.widget.Button) {
|
||
|
|
strs.push('this.buttonWidgetB is not a Button');
|
||
|
|
} else if (this.buttonWidgetB.domNode.parentNode != this.domNode) {
|
||
|
|
strs.push('this.buttonWidgetB.domNode is on wrong element node');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.testElement3) {
|
||
|
|
strs.push('this.testElement3 missing');
|
||
|
|
} else if (this.testElement3.parentNode != this.buttonWidgetB.containerNode) {
|
||
|
|
strs.push('this.testElement3 is on wrong node');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (this.contentPane1) {
|
||
|
|
strs.push('this.contentPane1 exists and it shouldnt');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.testElement) {
|
||
|
|
strs.push('this.testElement exists and it shouldnt');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.contentPaneX) {
|
||
|
|
strs.push('this.contentPaneX exists and it shouldnt');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.buttonWidgetB && this.buttonWidgetB.contentPaneX) {
|
||
|
|
strs.push('this.contentPaneX exists on buttonB and it shouldnt');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.subContainerWidget) {
|
||
|
|
if (this.subContainerWidget.contentPaneX) {
|
||
|
|
strs.push('this.contentPaneX exists on subContainerWidget and it shouldnt');
|
||
|
|
}
|
||
|
|
if (this.subContainerWidget.subContainerWidget && this.subContainerWidget.subContainerWidget.contentPaneX) {
|
||
|
|
strs.push('this.contentPaneX exists on subContainerWidget.subContainerWidget and it shouldnt');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return strs;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<!-- misdefined dojoAttachPoint shouldnt affect anything -->
|
||
|
|
<div dojoType="myown:Test3" widgetId="test3Widget">
|
||
|
|
<div dojoAttachPoint="contentPaneX" dojoType="dojo:ContentPane" label="pane X">
|
||
|
|
Pane X in myown:Test3
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function doTest3() {
|
||
|
|
var strs = [];
|
||
|
|
var test3Widget = dojo.widget.byId('test3Widget');
|
||
|
|
if (!test3Widget) {
|
||
|
|
strs.push('test3Widget not created');
|
||
|
|
} else {
|
||
|
|
strs = strs.concat(test3Widget.testSubWidgets3());
|
||
|
|
}
|
||
|
|
|
||
|
|
if(strs.length == 0){
|
||
|
|
strs.push('all tests are passed!');
|
||
|
|
}
|
||
|
|
|
||
|
|
alert(strs.join('\n'));
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<br>
|
||
|
|
<button onClick="doTest3()">Run test 3</button>
|
||
|
|
<br>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|