swat.obsolete/apps/qooxdoo-examples/test/ColorTheme_3.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>Color Theme Test for qx.renderer.border.BorderObject's</p>
  16     <ul>
  17       <li>First Col: qooxdoo solution for borders</li>
  18       <li>Second Col: html solution without color value</li>
  19       <li>Third Col: html solution with color value: white</li>
  20     </ul>
  21     <p>The default color Theme is: <em>OS Default</em></p>
  22   </div>
  23
  24   <div style="position: absolute; left: 120px; top: 48px; width: 50px">
  25     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px outset">&#160;</div>
  26     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px inset">&#160;</div>
  27     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px ridge">&#160;</div>
  28     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px groove">&#160;</div>
  29
  30     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 1px outset">&#160;</div>
  31     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 1px inset">&#160;</div>
  32   </div>
  33
  34   <div style="position: absolute; left: 180px; top: 48px; width: 50px">
  35     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px outset white">&#160;</div>
  36     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px inset white">&#160;</div>
  37     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px ridge white">&#160;</div>
  38     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 2px groove white">&#160;</div>
  39
  40     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 1px outset white">&#160;</div>
  41     <div style="width:50px; height: 50px; margin-bottom: 10px; border: 1px inset white">&#160;</div>
  42   </div>
  43
  44   <script type="text/javascript">
  45   qx.core.Init.getInstance().defineMain(function()
  46   {
  47     var d = qx.ui.core.ClientDocument.getInstance();
  48
  49
  50
  51     var w1 = new qx.ui.basic.Terminator;
  52     w1.setDimension(50, 50);
  53     w1.setLocation(20, 48);
  54     w1.setBorder(new qx.renderer.border.BorderObject(2, "outset"));
  55     d.add(w1);
  56
  57     var w2 = new qx.ui.basic.Terminator;
  58     w2.setDimension(50, 50);
  59     w2.setLocation(20, 108);
  60     w2.setBorder(new qx.renderer.border.BorderObject(2, "inset"));
  61     d.add(w2);
  62
  63     var w3 = new qx.ui.basic.Terminator;
  64     w3.setDimension(50, 50);
  65     w3.setLocation(20, 168);
  66     w3.setBorder(new qx.renderer.border.BorderObject(2, "ridge"));
  67     d.add(w3);
  68
  69     var w4 = new qx.ui.basic.Terminator;
  70     w4.setDimension(50, 50);
  71     w4.setLocation(20, 228);
  72     w4.setBorder(new qx.renderer.border.BorderObject(2, "groove"));
  73     d.add(w4);
  74
  75     var w5 = new qx.ui.basic.Terminator;
  76     w5.setDimension(50, 50);
  77     w5.setLocation(20, 288);
  78     w5.setBorder(new qx.renderer.border.BorderObject(1, "outset"));
  79     d.add(w5);
  80
  81     var w6 = new qx.ui.basic.Terminator;
  82     w6.setDimension(50, 50);
  83     w6.setLocation(20, 348);
  84     w6.setBorder(new qx.renderer.border.BorderObject(1, "inset"));
  85     d.add(w6);
  86
  87
  88
  89     var border1 = new qx.renderer.border.BorderObject(2, "outset");
  90     var border2 = new qx.renderer.border.BorderObject(1, "outset");
  91
  92     var w7 = new qx.ui.layout.CanvasLayout;
  93     w7.setDimension(50, 50);
  94     w7.setLocation(20, 408);
  95     w7.setBorder(border1);
  96     d.add(w7);
  97
  98     var w7c = new qx.ui.basic.Terminator;
  99     w7c.setDimension("100%", "100%");
 100     w7c.setBackgroundColor(new qx.renderer.color.Color("red"));
 101     w7.add(w7c);
 102
 103
 104
 105     var w8 = new qx.ui.layout.CanvasLayout;
 106     w8.setDimension(50, 50);
 107     w8.setLocation(20, 468);
 108     w8.setBorder(border2);
 109     d.add(w8);
 110
 111     var w8c = new qx.ui.basic.Terminator;
 112     w8c.setDimension("100%", "100%");
 113     w8c.setBackgroundColor(new qx.renderer.color.Color("red"));
 114     w8.add(w8c);
 115
 116
 117
 118
 119     w7.addEventListener("click", function(e) {
 120       this.setBorder(this.getBorder() == null ? border1 : this.getBorder() == border1 ? border2 : null)
 121     });
 122
 123     w8.addEventListener("click", function(e) {
 124       this.setBorder(this.getBorder() == null ? border1 : this.getBorder() == border1 ? border2 : null)
 125     });
 126
 127
 128
 129
 130
 131
 132     var w9 = new qx.ui.layout.CanvasLayout;
 133
 134     w9.setDimension(100, 100);
 135     w9.setLocation(400, 400);
 136     w9.setBorder(border1);
 137     w9.setOverflow("scroll");
 138
 139     d.add(w9);
 140
 141     var w9c = new qx.ui.basic.Image("icon/32/colors.png");
 142
 143     w9c.setTop(150);
 144     w9c.setLeft(300);
 145
 146     w9.add(w9c);
 147
 148
 149
 150     w9.addEventListener("click", function(e) {
 151       this.setOverflow(this.getOverflow() == "scroll" ? "scrollX" : this.getOverflow() == "scrollX" ? "scrollY" : this.getOverflow() == "scrollY" ? "" : "scroll");
 152     });
 153
 154
 155
 156     // Color Themes
 157     qx.manager.object.ColorManager.getInstance().createThemeList(d, 400, 128);
 158
 159
 160
 161
 162
 163
 164     /*
 165     var c1 = new qx.renderer.color.Color("gray");
 166     this.debug("RGB-Transform I: " + c1.getRed() + "," + c1.getGreen() + "," + c1.getBlue());
 167
 168     // This could not work with the default theme "OS Default", as this does not define any rgb colors
 169     var c2 = new qx.renderer.color.ColorObject("threedface");
 170     this.debug("RGB-Transform II: " + c2.getRed() + "," + c2.getGreen() + "," + c2.getBlue());
 171     */
 172   });
 173   </script>
 174
 175 </body>
 176 </html>