swat.obsolete/apps/qooxdoo-examples/example/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>Some more complex tests for qx.ui.basic.Atom.</p>
  16     <p>You can change all the properties before "really creating" the object or any time after this was done.</p>
  17   </div>
  18
  19   <div style="display:none" id="control">
  20     <p>
  21       Width:
  22       <a href="javascript://" onclick="void(at1.setWidth(null))">null</a> |
  23       <a href="javascript://" onclick="void(at1.setWidth('auto'))">auto</a> |
  24       <a href="javascript://" onclick="void(at1.setWidth(25))">25</a> |
  25       <a href="javascript://" onclick="void(at1.setWidth(50))">50</a> |
  26       <a href="javascript://" onclick="void(at1.setWidth(100))">100</a> |
  27       <a href="javascript://" onclick="void(at1.setWidth(200))">200</a>
  28     </p>
  29     <p>
  30       Height:
  31       <a href="javascript://" onclick="void(at1.setHeight(null))">null</a> |
  32       <a href="javascript://" onclick="void(at1.setHeight('auto'))">auto</a> |
  33       <a href="javascript://" onclick="void(at1.setHeight(25))">25</a> |
  34       <a href="javascript://" onclick="void(at1.setHeight(50))">50</a> |
  35       <a href="javascript://" onclick="void(at1.setHeight(100))">100</a> |
  36       <a href="javascript://" onclick="void(at1.setHeight(200))">200</a>
  37     </p>
  38     <hr/>
  39     <p>
  40       Label Size:
  41       <a href="javascript://" onclick="void(at1.setLabel(null))">null</a> |
  42       <a href="javascript://" onclick="void(at1.setLabel('short'))">short</a> |
  43       <a href="javascript://" onclick="void(at1.setLabel('some cool label'))">medium</a> |
  44       <a href="javascript://" onclick="void(at1.setLabel('ultra long label description'))">long</a> |
  45       <a href="javascript://" onclick="void(at1.setLabel('<b>hello <i>world</i></b>'))">html</a> |
  46       <a href="javascript://" onclick="void(at1.setLabel('<p>Hello tester.</p><ul><li>cool</li><li><b>test</b></li><li>file</li></ul>'))">complex</a>
  47     </p>
  48     <p>
  49       Icon Size:
  50       <a href="javascript://" onclick="void(at1.setIcon(null))">null</a> |
  51       <a href="javascript://" onclick="void(at1.setIcon('icon/16/date.png'))">16px</a> |
  52       <a href="javascript://" onclick="void(at1.setIcon('icon/32/colors.png'))">32px</a> |
  53       <a href="javascript://" onclick="void(at1.setIcon('icon/48/memory.png'))">48px</a>
  54     </p>
  55     <p>
  56       Icon Position:
  57       <a href="javascript://" onclick="void(at1.setIconPosition('top'))">top</a> |
  58       <a href="javascript://" onclick="void(at1.setIconPosition('right'))">right</a> |
  59       <a href="javascript://" onclick="void(at1.setIconPosition('bottom'))">bottom</a> |
  60       <a href="javascript://" onclick="void(at1.setIconPosition('left'))">left</a>
  61     </p>
  62     <p>
  63       Spacing:
  64       <a href="javascript://" onclick="void(at1.setSpacing(0))">0</a> |
  65       <a href="javascript://" onclick="void(at1.setSpacing(2))">2</a> |
  66       <a href="javascript://" onclick="void(at1.setSpacing(4))">4</a> |
  67       <a href="javascript://" onclick="void(at1.setSpacing(6))">6</a> |
  68       <a href="javascript://" onclick="void(at1.setSpacing(8))">8</a> |
  69       <a href="javascript://" onclick="void(at1.setSpacing(10))">10</a> |
  70       <a href="javascript://" onclick="void(at1.setSpacing(25))">25</a> |
  71       <a href="javascript://" onclick="void(at1.setSpacing(50))">50</a>
  72     </p>
  73     <hr/>
  74     <p>
  75       Show:
  76       <a href="javascript://" onclick="void(at1.setShow('none'))">None</a> |
  77       <a href="javascript://" onclick="void(at1.setShow('label'))">Label</a> |
  78       <a href="javascript://" onclick="void(at1.setShow('icon'))">Icon</a> |
  79       <a href="javascript://" onclick="void(at1.setShow('both'))">Both</a>
  80     </p>
  81     <hr/>
  82     <p>
  83       Horizontal Children Align:
  84       <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('left'))">left</a> |
  85       <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('center'))">center</a> |
  86       <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('right'))">right</a>
  87     </p>
  88     <p>
  89       Vertical Children Align:
  90       <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('top'))">top</a> |
  91       <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('middle'))">middle</a> |
  92       <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('bottom'))">bottom</a>
  93     </p>
  94     <hr/>
  95     <p>
  96       Padding:
  97       <a href="javascript://" onclick="void(at1.setPadding(null))">None</a> |
  98       <a href="javascript://" onclick="void(at1.setPadding(2, 4))">2, 4</a> |
  99       <a href="javascript://" onclick="void(at1.setPadding(4, 8))">4, 8</a> |
 100       <a href="javascript://" onclick="void(at1.setPadding(16))">16</a>
 101     </p>
 102     <p>
 103       Border:
 104       <a href="javascript://" onclick="void(at1.setBorder(null))">null</a> |
 105       <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(1, 'solid', 'black')))">1</a> |
 106       <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(5, 'solid', 'black')))">5</a> |
 107       <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(10, 'solid', 'black')))">10</a> |
 108       <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(25, 'solid', 'black')))">25</a> |
 109       <a href="javascript://" onclick="void(at1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset))">outset</a> |
 110       <a href="javascript://" onclick="void(at1.setBorder(qx.renderer.border.BorderPresets.getInstance().inset))">inset</a>
 111     </p>
 112     <hr/>
 113     <p>
 114       Opacity:
 115       <a href="javascript://" onclick="void(at1.setOpacity(null))">null</a> |
 116       <a href="javascript://" onclick="void(at1.setOpacity(0))">0</a> |
 117       <a href="javascript://" onclick="void(at1.setOpacity(0.25))">0.25</a> |
 118       <a href="javascript://" onclick="void(at1.setOpacity(0.5))">0.5</a> |
 119       <a href="javascript://" onclick="void(at1.setOpacity(0.75))">0.75</a> |
 120       <a href="javascript://" onclick="void(at1.setOpacity(1))">1</a>
 121     </p>
 122     <p>
 123       Enabled:
 124       <a href="javascript://" onclick="void(at1.setEnabled(false))">false</a> |
 125       <a href="javascript://" onclick="void(at1.setEnabled(true))">true</a>
 126     </p>
 127   </div>
 128
 129   <script type="text/javascript">
 130   var at1;
 131
 132   qx.core.Init.getInstance().defineMain(function()
 133   {
 134     var d = qx.ui.core.ClientDocument.getInstance();
 135
 136     at1 = new qx.ui.basic.Atom("My first qx.ui.basic.Atom", "icon/32/colors.png");
 137
 138     with(at1)
 139     {
 140       setTop(48);
 141       setLeft(20);
 142
 143       setIconPosition("right");
 144
 145       setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 146       setBackgroundColor(new qx.renderer.color.Color("white"));
 147       setPadding(2, 4);
 148     };
 149
 150     var ct1 = new qx.ui.basic.Label(document.getElementById("control").innerHTML);
 151
 152     with(ct1)
 153     {
 154       setWidth(300);
 155       setRight(335);
 156
 157       setHeight(null);
 158       setTop(48);
 159       setBottom(48);
 160
 161       setOverflow("auto");
 162
 163       setBackgroundColor(new qx.renderer.color.Color("white"));
 164       setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
 165       setPadding(10);
 166     };
 167
 168     d.add(at1, ct1);
 169   });
 170   </script>
 171 </body>
 172 </html>