swat/apps/qooxdoo-examples/test/CanvasLayout_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   <div id="demoDescription">
  15
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var d = qx.ui.core.ClientDocument.getInstance();
  22
  23     var w1 = new qx.ui.layout.CanvasLayout;
  24
  25     w1.setWidth(100);
  26     w1.setHeight(100);
  27     w1.setLeft(100);
  28     w1.setTop(100);
  29     w1.setBackgroundColor(new qx.renderer.color.Color("red"));
  30
  31     d.add(w1);
  32
  33
  34
  35
  36
  37
  38     var w2 = new qx.ui.layout.CanvasLayout;
  39
  40     w2.setWidth("25%");
  41     w2.setHeight(100);
  42     w2.setLeft(200);
  43     w2.setTop(200);
  44     w2.setBackgroundColor(new qx.renderer.color.Color("blue"));
  45
  46     d.add(w2);
  47
  48
  49
  50     var w3 = new qx.ui.layout.CanvasLayout;
  51
  52     w3.setRight(400);
  53     w3.setHeight(100);
  54     w3.setLeft(300);
  55     w3.setTop(300);
  56     w3.setBackgroundColor(new qx.renderer.color.Color("green"));
  57
  58     d.add(w3);
  59
  60
  61
  62
  63
  64     var w4 = new qx.ui.layout.CanvasLayout;
  65
  66     w4.setLeft(10);
  67     w4.setRight(10);
  68     w4.setTop(10);
  69     w4.setBottom(10);
  70     w4.setBackgroundColor(new qx.renderer.color.Color("white"));
  71
  72     w2.add(w4);
  73
  74
  75
  76
  77
  78     var w5 = new qx.ui.layout.CanvasLayout;
  79
  80     w5.setLeft(0);
  81     w5.setTop(0);
  82     w5.setWidth("50%");
  83     w5.setHeight(50);
  84     w5.setBackgroundColor(new qx.renderer.color.Color("white"));
  85
  86     w3.add(w5);
  87
  88
  89
  90
  91     var w6 = new qx.ui.layout.CanvasLayout;
  92
  93     w6.setBottom(50);
  94     w6.setLeft(350);
  95     w6.setHeight("30%");
  96     w6.setWidth(50);
  97     w6.setBackgroundColor(new qx.renderer.color.Color("yellow"));
  98     w6.setZIndex(100);
  99     w6.setMinHeight(100);
 100     w6.setMaxHeight(150);
 101
 102     d.add(w6);
 103
 104
 105
 106     var w7 = new qx.ui.layout.CanvasLayout;
 107
 108     w7.setTop(150);
 109     w7.setLeft(20);
 110     w7.setWidth(100);
 111     w7.setHeight(100);
 112     w7.setBackgroundColor(new qx.renderer.color.Color("aqua"));
 113     w7.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 114
 115     d.add(w7);
 116
 117
 118
 119     var w8 = new qx.ui.layout.CanvasLayout;
 120
 121     w8.setTop(280);
 122     w8.setLeft(20);
 123     w8.setWidth("auto");
 124     w8.setHeight("auto");
 125     w8.setBackgroundColor(new qx.renderer.color.Color("fuchsia"));
 126     w8.setBorder(new qx.renderer.border.Border(5, "solid", new qx.renderer.color.Color("black")));
 127     w8.setPaddingTop(10);
 128
 129     //w8.getBorder().setLeftWidth(20);
 130     //w8.getBorder().setLeftWidth(0);
 131
 132     // d.add(w8);
 133
 134
 135     var w9 = new qx.ui.layout.CanvasLayout;
 136
 137     w9.setTop(0);
 138     w9.getLeft(0);
 139     w9.setWidth(40);
 140     w9.setHeight(20);
 141     w9.setBackgroundColor(new qx.renderer.color.Color("white"));
 142
 143     w8.add(w9);
 144
 145
 146
 147     var w10 = new qx.ui.layout.CanvasLayout;
 148
 149     w10.setTop(0);
 150     w10.getLeft(0);
 151     w10.setWidth(10);
 152     w10.setHeight(50);
 153     w10.setBackgroundColor(new qx.renderer.color.Color("red"));
 154
 155     w8.add(w10);
 156
 157     d.add(w8);
 158
 159
 160
 161
 162
 163
 164     var w11 = new qx.ui.layout.CanvasLayout;
 165
 166     w11.setTop(200);
 167     w11.setLeft(40);
 168     w11.setWidth("auto");
 169     w11.setHeight("auto");
 170     w11.setBackgroundColor(new qx.renderer.color.Color("green"));
 171     w11.setDisplay(false);
 172     w11.setBorder(qx.renderer.border.BorderPresets.getInstance().white);
 173     w11.setPaddingLeft(20);
 174
 175     d.add(w11);
 176
 177     w8.addEventListener("click", function(e) {
 178       w11.toggleDisplay();
 179     });
 180
 181
 182     /*
 183     w11.addEventListener("show", function(e) {
 184       this.debug("Show W11");
 185     });
 186
 187     w11.addEventListener("hide", function(e) {
 188       this.debug("Hide W11");
 189     });
 190     */
 191
 192
 193     var w12 = new qx.ui.basic.Image("icon/64/energy.png");
 194     w11.add(w12);
 195
 196
 197
 198
 199     var w12 = new qx.ui.basic.Image("icon/48/clock.png");
 200
 201     w12.setTop(350);
 202     w12.setLeft(20);
 203
 204     d.add(w12);
 205
 206
 207     var w13 = new qx.ui.basic.Image("icon/48/alarm.png");
 208
 209     w13.setTop(350);
 210     w13.setLeft(80);
 211
 212     d.add(w13);
 213
 214
 215
 216
 217
 218     var w14 = new qx.ui.layout.CanvasLayout;
 219
 220     w14.setTop(400);
 221     w14.setLeft(20);
 222     w14.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 223     //w14.setWidth("auto");
 224     w14.setMinWidth("auto");
 225     w14.setWidth("30%");
 226
 227     w14.setHeight("auto");
 228     w14.setPadding(10);
 229     w14.setBackgroundColor(new qx.renderer.color.Color("white"));
 230
 231     d.add(w14);
 232
 233
 234     var w15 = new qx.ui.basic.Image("icon/48/clock.png");
 235
 236     w15.setTop(0);
 237     w15.setLeft(20);
 238
 239     w14.add(w15);
 240
 241
 242     var w16 = new qx.ui.basic.Image("icon/128/date.png");
 243
 244     w16.setTop(20);
 245     w16.setLeft(80);
 246
 247     w14.add(w16);
 248
 249
 250     var w16a = new qx.ui.layout.CanvasLayout;
 251
 252     w16a.setMarginTop(160);
 253     w16a.setBottom(20);
 254     w16a.setRight(20);
 255
 256     w16a.setBackgroundColor(new qx.renderer.color.Color("yellow"));
 257
 258     w16a.setWidth(30);
 259     w16a.setHeight(30);
 260
 261     w14.add(w16a);
 262
 263
 264
 265     w16a.addEventListener("click", function(e)
 266     {
 267       var v16Margin = w16a.getMarginTop() + 20;
 268       if (v16Margin > 240) {
 269         v16Margin = 100;
 270       };
 271
 272       w16a.setMarginTop(v16Margin);
 273     });
 274
 275
 276
 277
 278     var w17_b1 = new qx.renderer.border.Border(5, "solid", new qx.renderer.color.Color("black"));
 279     var w17_b2 = new qx.renderer.border.Border(10, "solid", new qx.renderer.color.Color("black"));
 280
 281     var w17_p1 = 10;
 282     var w17_p2 = 5;
 283
 284     var w17 = new qx.ui.layout.CanvasLayout;
 285
 286     w17.setBackgroundColor(new qx.renderer.color.Color("orange"));
 287     w17.setWidth(50);
 288     w17.setHeight(50);
 289     w17.setTop(50);
 290     w17.setLeft(200);
 291
 292     w17.setBorder(w17_b1);
 293     w17.setPadding(w17_p1);
 294
 295     d.add(w17);
 296
 297
 298     w17.addEventListener("click", function(e)
 299     {
 300       if (w17.getBorder() == w17_b1)
 301       {
 302         w17.setBorder(w17_b2);
 303         w17.setPadding(w17_p2);
 304       }
 305       else
 306       {
 307         w17.setBorder(w17_b1);
 308         w17.setPadding(w17_p1);
 309       };
 310     });
 311
 312
 313     var w18 = new qx.ui.layout.CanvasLayout;
 314
 315     w18.setBackgroundColor(new qx.renderer.color.Color("white"));
 316     w18.setWidth("100%");
 317     w18.setHeight("100%");
 318     w18.setLeft(0);
 319     w18.setTop(0);
 320
 321     w17.add(w18);
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331     var w19_b1 = new qx.renderer.border.Border(5, "solid", new qx.renderer.color.Color("black"));
 332
 333     var w19_p1 = 10;
 334     var w19_p2 = 5;
 335
 336     var w19 = new qx.ui.layout.CanvasLayout;
 337
 338     w19.setBackgroundColor(new qx.renderer.color.Color("orange"));
 339     w19.setWidth(50);
 340     w19.setHeight(50);
 341     w19.setTop(50);
 342     w19.setLeft(270);
 343
 344     w19.setBorder(w19_b1);
 345     w19.setPadding(w19_p1);
 346
 347     d.add(w19);
 348
 349
 350     var _t22 = true;
 351     w19.addEventListener("click", function(e)
 352     {
 353       if (_t22)
 354       {
 355         w19_b1.setWidth(10);
 356         w19.setPadding(w19_p2);
 357       }
 358       else
 359       {
 360         w19_b1.setWidth(5);
 361         w19.setPadding(w19_p1);
 362       };
 363
 364       _t22 = !_t22;
 365     });
 366
 367
 368     var w20 = new qx.ui.layout.CanvasLayout;
 369
 370     w20.setBackgroundColor(new qx.renderer.color.Color("white"));
 371     w20.setWidth("100%");
 372     w20.setHeight("100%");
 373     w20.setLeft(0);
 374     w20.setTop(0);
 375
 376     w19.add(w20);
 377
 378
 379
 380
 381
 382     var w21_b1 = new qx.renderer.border.Border(5, "solid", new qx.renderer.color.Color("black"));
 383     var w21_b2 = new qx.renderer.border.Border(5, "solid", new qx.renderer.color.Color("blue"));
 384
 385     var w21 = new qx.ui.layout.CanvasLayout;
 386
 387     w21.setBackgroundColor(new qx.renderer.color.Color("orange"));
 388     w21.setWidth(50);
 389     w21.setHeight(50);
 390     w21.setTop(50);
 391     w21.setLeft(340);
 392
 393     w21.setBorder(w21_b1);
 394     w21.setPadding(10);
 395
 396     d.add(w21);
 397
 398
 399     w21.addEventListener("click", function(e)
 400     {
 401       if (w21.getBorder() == w21_b1)
 402       {
 403         w21.setBorder(w21_b2);
 404       }
 405       else
 406       {
 407         w21.setBorder(w21_b1);
 408       };
 409     });
 410
 411
 412     var w22 = new qx.ui.layout.CanvasLayout;
 413
 414     w22.setBackgroundColor(new qx.renderer.color.Color("white"));
 415     w22.setWidth("100%");
 416     w22.setHeight("100%");
 417     w22.setLeft(0);
 418     w22.setTop(0);
 419
 420     w21.add(w22);
 421
 422
 423
 424
 425
 426
 427
 428     var w23_b1 = new qx.renderer.border.BorderObject(5, "solid", new qx.renderer.color.Color("black"));
 429
 430     var w23 = new qx.ui.layout.CanvasLayout;
 431
 432     w23.setBackgroundColor(new qx.renderer.color.Color("orange"));
 433     w23.setWidth(50);
 434     w23.setHeight(50);
 435     w23.setTop(50);
 436     w23.setLeft(410);
 437
 438     w23.setBorder(w23_b1);
 439     w23.setPadding(10);
 440
 441     d.add(w23);
 442
 443     w23.addEventListener("mouseover", function(e)
 444     {
 445       w23_b1.setColor(new qx.renderer.color.Color("blue"));
 446       w23_b1.setStyle("dotted");
 447     });
 448
 449     w23.addEventListener("mouseout", function(e)
 450     {
 451       w23_b1.setColor(new qx.renderer.color.Color("black"));
 452       w23_b1.setStyle("solid");
 453     });
 454
 455     var w24 = new qx.ui.layout.CanvasLayout;
 456
 457     w24.setBackgroundColor(new qx.renderer.color.Color("white"));
 458     w24.setWidth("100%");
 459     w24.setHeight("100%");
 460     w24.setLeft(0);
 461     w24.setTop(0);
 462     w24.setAnonymous(true);
 463
 464     w23.add(w24);
 465
 466
 467
 468
 469
 470
 471     var w25_b1 = qx.renderer.border.BorderPresets.getInstance().outset;
 472     var w25_b2 = qx.renderer.border.BorderPresets.getInstance().inset;
 473
 474     var w25_p1 = 10;
 475     var w25_p2 = 5;
 476
 477     var w25 = new qx.ui.layout.CanvasLayout;
 478
 479     w25.setBackgroundColor(new qx.renderer.color.ColorObject("ThreeDFace"));
 480     w25.setWidth(50);
 481     w25.setHeight(50);
 482     w25.setTop(50);
 483     w25.setLeft(480);
 484
 485     w25.setBorder(w25_b1);
 486     w25.setPadding(w25_p1);
 487
 488     d.add(w25);
 489
 490
 491     w25.addEventListener("click", function(e)
 492     {
 493       if (w25.getBorder() == w25_b1)
 494       {
 495         w25.setBorder(w25_b2);
 496         w25.setPadding(w25_p2);
 497       }
 498       else
 499       {
 500         w25.setBorder(w25_b1);
 501         w25.setPadding(w25_p1);
 502       };
 503     });
 504
 505
 506     var w26 = new qx.ui.layout.CanvasLayout;
 507
 508     w26.setBackgroundColor(new qx.renderer.color.Color("white"));
 509     w26.setWidth("100%");
 510     w26.setHeight("100%");
 511     w26.setLeft(0);
 512     w26.setTop(0);
 513
 514     w25.add(w26);
 515
 516
 517
 518
 519
 520
 521
 522     var w27 = new qx.ui.layout.CanvasLayout;
 523
 524     w27.setBackgroundColor(new qx.renderer.color.ColorObject("ThreeDFace"));
 525     w27.setWidth(50);
 526     w27.setHeight(50);
 527     w27.setTop(50);
 528     w27.setLeft(550);
 529
 530     w27.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 531     w27.setPadding(10, 10, 10, 10);
 532
 533     d.add(w27);
 534
 535
 536     w27.addEventListener("click", function(e)
 537     {
 538       if (w27.getBorder() == qx.renderer.border.BorderPresets.getInstance().outset)
 539       {
 540         w27.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
 541         w27.setPadding(12, 8, 8, 12);
 542       }
 543       else
 544       {
 545         w27.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 546         w27.setPadding(10, 10, 10, 10);
 547       };
 548     });
 549
 550
 551     var w28 = new qx.ui.layout.CanvasLayout;
 552
 553     w28.setBackgroundColor(new qx.renderer.color.Color("white"));
 554     w28.setWidth("100%");
 555     w28.setHeight("100%");
 556     w28.setLeft(0);
 557     w28.setTop(0);
 558
 559     w27.add(w28);
 560
 561
 562
 563
 564
 565
 566
 567     var w29_b1 = qx.renderer.border.BorderPresets.getInstance().outset;
 568     var w29_b2 = qx.renderer.border.BorderPresets.getInstance().inset;
 569
 570     var w29_p1 = 10;
 571     var w29_p2 = 5;
 572
 573     var w29 = new qx.ui.layout.CanvasLayout;
 574
 575     w29.setBackgroundColor(new qx.renderer.color.ColorObject("ThreeDFace"));
 576     w29.setWidth(50);
 577     w29.setHeight(50);
 578     w29.setTop(50);
 579     w29.setLeft(620);
 580
 581     w29.setBorder(w29_b1);
 582     w29.setPadding(w29_p1);
 583
 584     d.add(w29);
 585
 586
 587     w29.addEventListener("click", function(e)
 588     {
 589       if (w29.getBorder() == w29_b1)
 590       {
 591         w29.setBorder(w29_b2);
 592         w29.setPadding(w29_p2);
 593       }
 594       else
 595       {
 596         w29.setBorder(w29_b1);
 597         w29.setPadding(w29_p1);
 598       };
 599     });
 600
 601
 602     var w30 = new qx.ui.layout.CanvasLayout;
 603
 604     w30.setBackgroundColor(new qx.renderer.color.Color("white"));
 605     w30.setLeft(0);
 606     w30.setRight(0);
 607     w30.setTop(0);
 608     w30.setBottom(0);
 609
 610     w29.add(w30);
 611
 612
 613   });
 614   </script>
 615 </body>
 616 </html>