git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/bench/create_widgets.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4         <head>
   5                 <title>PROGRAMMATIC - Dojo Widget Creation Test</title>
   6                 <script type="text/javascript" src="../../dojo/dojo.js"></script>
   7                 <script type="text/javascript" src="../dijit.js"></script>
   8                 <script type="text/javascript">
   9                         var queryCount = location.search.match(/count=(\d*)/);
  10                         var count = (queryCount ? parseInt(queryCount[1]) : 100);
  11                         var queryClass = location.search.match(/class=([a-zA-z.]*)/);
  12                         var className = (queryClass ? queryClass[1] : "form.Button");
  13
  14                         dojo.require("dijit." + className);
  15                         dojo.require("dojo.parser");
  16                         logMessage = window.alert;
  17                 </script>
  18                 <style type="text/css">
  19                         @import "../themes/tundra/tundra.css";
  20                         /* group multiple buttons in a row */
  21                         .box {
  22                                 display: block;
  23                                 text-align: center;
  24                         }
  25                         .box .dojoButton {
  26                                 width: 80px;
  27                                 margin-right: 10px;
  28                         }
  29                         .dojoButtonContents {
  30                                 font-size: 1.6em;
  31                         }
  32
  33                         #buttonContainer {
  34                                 border: 1px solid black;
  35                                 width: 100%;
  36                         }
  37
  38                         #results {
  39                                 color: darkred;
  40                         }
  41                 </style>
  42         </head>
  43         <body class=tundra>
  44                 <script language='javascript'>
  45                         document.write("<h2>Currently Creating "+count+" "+className+" instances</h2>");
  46                 </script>
  47                 Pass <code>?count=<i><b>100</b></i></code> in the query string to change the number of widgets.<br>
  48                 Pass <code>?class=<i><b>form.Button</b></i></code> in the query string to change the widget class.
  49                 <h3 id="results"></h3>
  50
  51                 <div id="buttonContainer" class='box'></div>
  52                 <br>
  53                 <script type="text/javascript">
  54                         // See if we can make a widget in script and attach it to the DOM ourselves.
  55                         var constructor = dojo.getObject("dijit."+className);
  56                         function makeEm(){
  57                                 var container = dojo.byId("buttonContainer");
  58                                 var t0 = new Date().getTime();
  59                                 for (var i = 1; i <= count; i++) {
  60                                         var it =
  61                                                 new constructor(
  62                                                                 {label:"Button "+i, onclick:'logMessage("clicked simple")'}
  63                                                         );
  64                                         container.appendChild(it.domNode);
  65                                         it.domNode.style.display = '';
  66                                 }
  67                                 var t1 = new Date().getTime();
  68                                 dojo.byId("results").innerHTML = "It took " + (t1 - t0) + " msec to create " + count + " "+className+" instances programmatically.";
  69                         }
  70                         dojo.addOnLoad(makeEm);
  71                 </script>
  72         </body>
  73 </html>