swat/apps/qooxdoo-examples/test/Atom_2.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   <div id="demoDescription">
  15     <p>Example to show correct calculations of qx.ui.basic.Atom sizes. Normally a qx.ui.basic.Atom has only the size of its content.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       var w = qx.ui.core.ClientDocument.getInstance();
  22
  23
  24       function alertoff() {
  25         alert(this.getElement().offsetWidth + "x" + this.getElement().offsetHeight);
  26       };
  27
  28       var l1 = new qx.ui.layout.CanvasLayout();
  29       var l2 = new qx.ui.layout.CanvasLayout();
  30
  31       with(l1)
  32       {
  33         setTop(100);
  34         setLeft(20);
  35         setWidth(500);
  36         setHeight(1);
  37         setBackgroundColor("red");
  38         setOverflow("hidden");
  39       };
  40
  41       with(l2)
  42       {
  43         setTop(123);
  44         setLeft(20);
  45         setWidth(500);
  46         setHeight(1);
  47         setBackgroundColor("red");
  48         setOverflow("hidden");
  49       };
  50
  51       w.add(l1);
  52       w.add(l2);
  53
  54
  55
  56       var a1 = new qx.ui.basic.Atom("Pure Text", "icon/22/folder.png");
  57       var a2 = new qx.ui.basic.Atom(null, "icon/22/folder.png");
  58
  59       with(a1) {
  60         setBorder(new qx.renderer.border.Border(1, "solid", "black"));
  61         setTop(100);
  62         setLeft(120);
  63       };
  64
  65       with(a2) {
  66         setBorder(new qx.renderer.border.Border(1, "solid", "black"));
  67         setTop(100);
  68         setLeft(300);
  69       };
  70
  71       w.add(a1);
  72       w.add(a2);
  73
  74       a1.addEventListener("click", alertoff);
  75       a2.addEventListener("click", alertoff);
  76
  77
  78
  79       var l3 = new qx.ui.layout.CanvasLayout();
  80       var l4 = new qx.ui.layout.CanvasLayout();
  81
  82       with(l3)
  83       {
  84         setTop(200);
  85         setLeft(20);
  86         setWidth(500);
  87         setHeight(1);
  88         setBackgroundColor("red");
  89         setOverflow("hidden");
  90       };
  91
  92       with(l4)
  93       {
  94         setTop(233);
  95         setLeft(20);
  96         setWidth(500);
  97         setHeight(1);
  98         setBackgroundColor("red");
  99         setOverflow("hidden");
 100       };
 101
 102       w.add(l3);
 103       w.add(l4);
 104
 105
 106       var b1 = new qx.ui.basic.Atom("Pure Text", "icon/32/network.png");
 107       var b2 = new qx.ui.basic.Atom(null, "icon/32/network.png");
 108
 109       with(b1) {
 110         setBorder(new qx.renderer.border.Border(1, "solid", "black"));
 111         setTop(200);
 112         setLeft(120);
 113       };
 114
 115       with(b2) {
 116         setBorder(new qx.renderer.border.Border(1, "solid", "black"));
 117         setTop(200);
 118         setLeft(300);
 119       };
 120
 121       w.add(b1);
 122       w.add(b2);
 123
 124       b1.addEventListener("click", alertoff);
 125       b2.addEventListener("click", alertoff);
 126
 127
 128
 129
 130
 131
 132       var l5 = new qx.ui.layout.CanvasLayout();
 133       var l6 = new qx.ui.layout.CanvasLayout();
 134
 135       with(l5)
 136       {
 137         setTop(300);
 138         setLeft(20);
 139         setWidth(500);
 140         setHeight(1);
 141         setBackgroundColor("red");
 142         setOverflow("hidden");
 143       };
 144
 145       with(l6)
 146       {
 147         setTop(317);
 148         setLeft(20);
 149         setWidth(500);
 150         setHeight(1);
 151         setBackgroundColor("red");
 152         setOverflow("hidden");
 153       };
 154
 155       w.add(l5);
 156       w.add(l6);
 157
 158
 159       var c1 = new qx.ui.basic.Atom("Pure Text", "icon/16/network.png");
 160       var c2 = new qx.ui.basic.Atom(null, "icon/16/network.png");
 161
 162       with(c1) {
 163         setBorder(new qx.renderer.border.Border(1, "solid", "black"));
 164         setTop(300);
 165         setLeft(120);
 166       };
 167
 168       with(c2) {
 169         setBorder(new qx.renderer.border.Border(1, "solid", "black"));
 170         setTop(300);
 171         setLeft(300);
 172       };
 173
 174       w.add(c1);
 175       w.add(c2);
 176
 177       c1.addEventListener("click", alertoff);
 178       c2.addEventListener("click", alertoff);
 179
 180
 181
 182
 183
 184     });
 185   </script>
 186 </body>
 187 </html>