swat.obsolete/apps/qooxdoo-examples/test/Border_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     <p>Test for qx.renderer.border.Border, a cross-browser advanced border engine.
  16     Each instance of qx.renderer.border.Border allows to affect multiple QxTerminators.
  17     When the one property of the qx.renderer.border.Border change, it informs all bounded
  18     QxTerminators to rerender the border.</p>
  19
  20     <p>The qx.renderer.border.Border constructor also allows you to convert a string
  21     (css-like) into and qx.renderer.border.Border instance (last example).</p>
  22   </div>
  23
  24   <script type="text/javascript">
  25   qx.core.Init.getInstance().defineMain(function()
  26   {
  27     var d = qx.ui.core.ClientDocument.getInstance();
  28
  29
  30
  31     var c1 = new qx.ui.basic.Terminator;
  32     with(c1)
  33     {
  34       setTop(48);
  35       setLeft(20);
  36       setWidth(150);
  37       setHeight(40);
  38       setBackgroundColor(new qx.renderer.color.Color("#fff"));
  39     };
  40     d.add(c1);
  41
  42     var c2 = new qx.ui.basic.Terminator;
  43     with(c2)
  44     {
  45       setTop(48);
  46       setLeft(200);
  47       setWidth(150);
  48       setHeight(40);
  49       setBackgroundColor(new qx.renderer.color.Color("#fff"));
  50     };
  51     d.add(c2);
  52
  53     var b1 = new qx.renderer.border.Border;
  54
  55     // before set border properties
  56     c1.setBorder(b1);
  57
  58     b1.setWidth(2);
  59     b1.setStyle("solid");
  60     b1.setColor(new qx.renderer.color.Color("black"));
  61     b1.setBottomStyle("dotted");
  62     b1.setTopColor(new qx.renderer.color.Color("blue"));
  63
  64     // after set border properties
  65     c2.setBorder(b1);
  66
  67
  68
  69
  70
  71
  72
  73
  74     var c3 = new qx.ui.basic.Terminator;
  75     with(c3)
  76     {
  77       setTop(110);
  78       setLeft(20);
  79       setWidth(40);
  80       setHeight(40);
  81       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
  82     };
  83     d.add(c3);
  84
  85     c3.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
  86
  87     var c4 = new qx.ui.basic.Terminator;
  88     with(c4)
  89     {
  90       setTop(110);
  91       setLeft(80);
  92       setWidth(40);
  93       setHeight(40);
  94       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
  95     };
  96     d.add(c4);
  97
  98     c4.setBorder(qx.renderer.border.BorderPresets.getInstance().thinOutset);
  99
 100     var c5 = new qx.ui.basic.Terminator;
 101     with(c5)
 102     {
 103       setTop(110);
 104       setLeft(140);
 105       setWidth(40);
 106       setHeight(40);
 107       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
 108     };
 109     d.add(c5);
 110
 111     c5.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
 112
 113
 114     var c6 = new qx.ui.basic.Terminator;
 115     with(c6)
 116     {
 117       setTop(110);
 118       setLeft(200);
 119       setWidth(40);
 120       setHeight(40);
 121       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
 122     };
 123     d.add(c6);
 124
 125     c6.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 126
 127
 128     var c7 = new qx.ui.basic.Terminator;
 129     with(c7)
 130     {
 131       setTop(110);
 132       setLeft(260);
 133       setWidth(40);
 134       setHeight(40);
 135       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
 136     };
 137     d.add(c7);
 138
 139     c7.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
 140
 141     var c8 = new qx.ui.basic.Terminator;
 142     with(c8)
 143     {
 144       setTop(110);
 145       setLeft(320);
 146       setWidth(40);
 147       setHeight(40);
 148       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
 149     };
 150     d.add(c8);
 151
 152     c8.setBorder(qx.renderer.border.BorderPresets.getInstance().ridge);
 153
 154
 155
 156     var c9 = new qx.ui.basic.Terminator;
 157     with(c9)
 158     {
 159       setTop(110);
 160       setLeft(380);
 161       setWidth(40);
 162       setHeight(40);
 163       setBackgroundColor(new qx.renderer.color.ColorObject("threedface"));
 164     };
 165     d.add(c9);
 166
 167     var b2 = qx.renderer.border.Border.fromString("2px solid red");
 168     c9.setBorder(b2);
 169
 170
 171
 172     // Color Themes
 173     qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
 174   });
 175   </script>
 176 </body>
 177 </html>