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.
318 lines
8.7 KiB
318 lines
8.7 KiB
<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>
|
|
|