swat.obsolete/apps/qooxdoo-examples/test/Builder_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <script type="text/javascript">
  15     qx.core.Init.getInstance().defineMain(function() {
  16       new qx.client.Builder().build(qx.ui.core.ClientDocument.getInstance(), document.getElementById('widgets'));
  17     });
  18
  19     // test delegate object
  20     var d = {
  21       hello : 'world',
  22       click : function(e) {
  23         alert(e + '\n\nclick received at delegate object\n\n' + this.hello);
  24       }
  25     }
  26
  27     // test delegate function
  28     var f = function(e) {
  29         alert(e + '\n\nclick received at delegate function\n\n');
  30     }
  31   </script>
  32   <div id="demoDescription">
  33     <p>qx.client.Builder demo.</p>
  34     <p>Build your web apps using qooxdooml.</p>
  35     <p>Textarea example</p>
  36   </div>
  37   <textarea id='widgets' style='display:none'>
  38     <qx.client.builder.Container>
  39       <qx.ui.form.Button id='btn' label='Click Me!!!' location='20,50'>
  40
  41         <!-- function body event listener -->
  42         <qx.client.builder.EventListener type='click' args='event'>
  43           btn.setLabel(btn.getLabel() + ".");
  44           alert(event + "\n\nClicked on: " + this.getLabel());
  45         </qx.client.builder.EventListener>
  46
  47         <!--
  48     global object.method delegation
  49     when the button is clicked, d.click(event) will be called
  50     -->
  51         <qx.client.builder.EventListener type='click' delegate='d.click'/>
  52
  53         <!--
  54     global function delegation
  55     when the button is clicked, f(event) will be called
  56     -->
  57         <qx.client.builder.EventListener type='click' delegate='f'/>
  58
  59       </qx.ui.form.Button>
  60       <qx.ui.basic.Atom id='atom1' label='Test No #1' icon='icon/16/penguin.png' border='qx.renderer.border.BorderPresets.getInstance().black' location='20,90'/>
  61
  62       <qx.ui.form.Button label='Test No #2' icon='icon/16/penguin.png' location='20,120'>
  63           <qx.client.builder.EventListener type='click'>
  64             atom1.setLabel(atom1.getLabel() + ".");
  65           </qx.client.builder.EventListener>
  66       </qx.ui.form.Button>
  67       <qx.ui.basic.Atom label='Test No #3' icon='icon/16/penguin.png' location='20,160'/>
  68       <qx.ui.basic.Atom label='a' icon='icon/16/penguin.png' location='20,200'/>
  69       <qx.ui.basic.Atom label='b' icon='icon/16/penguin.png' location='20,240'/>
  70     </qx.client.builder.Container>
  71   </textarea>
  72 </body>
  73 </html>