widgetsInTemplate.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <html>
  2. <head>
  3. <title>testing widgetsInTemplate support</title>
  4. <script type="text/javascript" src="../../dojo/dojo.js"
  5. djConfig="parseOnLoad: true, isDebug: true"></script>
  6. <script type="text/javascript">
  7. dojo.require("doh.runner");
  8. dojo.require("dijit.form.Button");
  9. dojo.require("dijit.form.CheckBox");
  10. dojo.require("dijit.ProgressBar");
  11. dojo.addOnLoad(function(){
  12. var testW;
  13. doh.register("t",
  14. [
  15. {
  16. name: "dojoAttachPoint",
  17. runTest: function(t){
  18. var testW = dijit.byId("test1Widget");
  19. t.t(testW.normalNode);
  20. t.f(isNaN(testW.normalNode.nodeType));
  21. t.t(testW.buttonWidget instanceof dijit.form.Button);
  22. t.t(testW.checkboxWidget instanceof dijit.form.CheckBox);
  23. t.t(testW.progressBarWidget instanceof dijit.ProgressBar);
  24. // alert((testW.buttonWidget instanceof dijit.form.Button)+(testW.checkboxWidget instanceof dijit.form.CheckBox)+(testW.progressBarWidget instanceof dijit.ProgressBar)+
  25. // (testW.buttonWidget._counter==1)+(testW.checkboxWidget._counter==1)+(testW.progressBarWidget._counter==1));
  26. testW = dijit.byId("test2Widget");
  27. t.t(testW.containerNode);
  28. t.f(isNaN(testW.containerNode.nodeType));
  29. t.is(undefined,testW.buttonWidget);
  30. t.t(testW.checkboxWidget instanceof dijit.form.CheckBox);
  31. }
  32. },
  33. {
  34. name: "dojoAttachEvent",
  35. runTest: function(t){
  36. var testW = dijit.byId("test1Widget");
  37. testW.buttonWidget._counter=0;
  38. testW.buttonWidget.onClick(testW.buttonWidget);
  39. testW.checkboxWidget._counter=0;
  40. testW.checkboxWidget.onClick(testW.checkboxWidget);
  41. testW.progressBarWidget._counter=0;
  42. testW.progressBarWidget.onChange(testW.progressBarWidget);
  43. t.is(1,testW.buttonWidget._counter);
  44. t.is(1,testW.checkboxWidget._counter);
  45. t.is(1,testW.progressBarWidget._counter);
  46. }
  47. }
  48. ]
  49. );
  50. doh.run();
  51. });
  52. </script>
  53. <style type="text/css">
  54. @import "../themes/tundra/tundra.css";
  55. </style>
  56. </head>
  57. <body>
  58. <h1>testing widgetsInTemplate support</h1>
  59. <xmp id="Test1Template" style="display:none;">
  60. <div>
  61. <div dojoAttachPoint="normalNode" >normal node</div>
  62. <button dojoAttachPoint="buttonWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.Button">button #1</button>
  63. <div dojoAttachPoint="checkboxWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.CheckBox"></div> checkbox #1
  64. <div dojoAttachPoint="progressBarWidget" dojoAttachEvent="onChange:onClick" style="width:400px" annotate="true"
  65. maximum="200" progress="20" dojoType="dijit.ProgressBar"></div>
  66. </div>
  67. </xmp>
  68. <script>
  69. dojo.declare('Test1Widget',
  70. [dijit._Widget, dijit._Templated],
  71. {
  72. widgetsInTemplate: true,
  73. // isContainer: true,
  74. templateString: dojo.byId('Test1Template').textContent || dojo.byId('Test1Template').innerText,
  75. onClick: function(e){
  76. if(e.target){
  77. alert('onClick widgetId='+e.target.id);
  78. }else{
  79. if(e._counter == undefined){
  80. e._counter = 1;
  81. }else{
  82. e._counter++;
  83. }
  84. }
  85. }
  86. });
  87. </script>
  88. <!-- can use widget immediately in markup - no parsing occurs until document loaded and scripts run -->
  89. <div dojoType="Test1Widget" id="test1Widget" ></div>
  90. <xmp id="Test2Template" style="display:none;">
  91. <div>
  92. <div dojoAttachPoint="containerNode" ><div dojoAttachPoint="checkboxWidget" dojoType="dijit.form.CheckBox"></div> checkbox #2</div>
  93. </div>
  94. </xmp>
  95. <script>
  96. dojo.declare('Test2Widget',
  97. [dijit._Widget, dijit._Templated],
  98. {
  99. widgetsInTemplate: true,
  100. templateString: dojo.byId('Test2Template').textContent || dojo.byId('Test2Template').innerText
  101. });
  102. </script>
  103. <div dojoType="Test2Widget" id="test2Widget" ><button dojoAttachPoint="buttonWidget" dojoType="dijit.form.Button">button #2</button></div>
  104. </body>
  105. </html>