summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/example/Atom_2.html
blob: db698a7232fd6b99a4e027cf17415596b0246397 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>qooxdoo &raquo; Demo</title>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
  <!--[if IE]>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
  <![endif]-->
  <script type="text/javascript" src="../../script/qx.js"></script>
</head>
<body>
  <script type="text/javascript" src="../../script/layout.js"></script>

  <div id="demoDescription">
    <p>Some more complex tests for qx.ui.basic.Atom.</p>
    <p>You can change all the properties before "really creating" the object or any time after this was done.</p>
  </div>

  <div style="display:none" id="control">
    <p>
      Width:
      <a href="javascript://" onclick="void(at1.setWidth(null))">null</a> |
      <a href="javascript://" onclick="void(at1.setWidth('auto'))">auto</a> |
      <a href="javascript://" onclick="void(at1.setWidth(25))">25</a> |
      <a href="javascript://" onclick="void(at1.setWidth(50))">50</a> |
      <a href="javascript://" onclick="void(at1.setWidth(100))">100</a> |
      <a href="javascript://" onclick="void(at1.setWidth(200))">200</a>
    </p>
    <p>
      Height:
      <a href="javascript://" onclick="void(at1.setHeight(null))">null</a> |
      <a href="javascript://" onclick="void(at1.setHeight('auto'))">auto</a> |
      <a href="javascript://" onclick="void(at1.setHeight(25))">25</a> |
      <a href="javascript://" onclick="void(at1.setHeight(50))">50</a> |
      <a href="javascript://" onclick="void(at1.setHeight(100))">100</a> |
      <a href="javascript://" onclick="void(at1.setHeight(200))">200</a>
    </p>
    <hr/>
    <p>
      Label Size:
      <a href="javascript://" onclick="void(at1.setLabel(null))">null</a> |
      <a href="javascript://" onclick="void(at1.setLabel('short'))">short</a> |
      <a href="javascript://" onclick="void(at1.setLabel('some cool label'))">medium</a> |
      <a href="javascript://" onclick="void(at1.setLabel('ultra long label description'))">long</a> |
      <a href="javascript://" onclick="void(at1.setLabel('<b>hello <i>world</i></b>'))">html</a> |
      <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>
    </p>
    <p>
      Icon Size:
      <a href="javascript://" onclick="void(at1.setIcon(null))">null</a> |
      <a href="javascript://" onclick="void(at1.setIcon('icon/16/date.png'))">16px</a> |
      <a href="javascript://" onclick="void(at1.setIcon('icon/32/colors.png'))">32px</a> |
      <a href="javascript://" onclick="void(at1.setIcon('icon/48/memory.png'))">48px</a>
    </p>
    <p>
      Icon Position:
      <a href="javascript://" onclick="void(at1.setIconPosition('top'))">top</a> |
      <a href="javascript://" onclick="void(at1.setIconPosition('right'))">right</a> |
      <a href="javascript://" onclick="void(at1.setIconPosition('bottom'))">bottom</a> |
      <a href="javascript://" onclick="void(at1.setIconPosition('left'))">left</a>
    </p>
    <p>
      Spacing:
      <a href="javascript://" onclick="void(at1.setSpacing(0))">0</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(2))">2</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(4))">4</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(6))">6</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(8))">8</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(10))">10</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(25))">25</a> |
      <a href="javascript://" onclick="void(at1.setSpacing(50))">50</a>
    </p>
    <hr/>
    <p>
      Show:
      <a href="javascript://" onclick="void(at1.setShow('none'))">None</a> |
      <a href="javascript://" onclick="void(at1.setShow('label'))">Label</a> |
      <a href="javascript://" onclick="void(at1.setShow('icon'))">Icon</a> |
      <a href="javascript://" onclick="void(at1.setShow('both'))">Both</a>
    </p>
    <hr/>
    <p>
      Horizontal Children Align:
      <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('left'))">left</a> |
      <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('center'))">center</a> |
      <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('right'))">right</a>
    </p>
    <p>
      Vertical Children Align:
      <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('top'))">top</a> |
      <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('middle'))">middle</a> |
      <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('bottom'))">bottom</a>
    </p>
    <hr/>
    <p>
      Padding:
      <a href="javascript://" onclick="void(at1.setPadding(null))">None</a> |
      <a href="javascript://" onclick="void(at1.setPadding(2, 4))">2, 4</a> |
      <a href="javascript://" onclick="void(at1.setPadding(4, 8))">4, 8</a> |
      <a href="javascript://" onclick="void(at1.setPadding(16))">16</a>
    </p>
    <p>
      Border:
      <a href="javascript://" onclick="void(at1.setBorder(null))">null</a> |
      <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(1, 'solid', 'black')))">1</a> |
      <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(5, 'solid', 'black')))">5</a> |
      <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(10, 'solid', 'black')))">10</a> |
      <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(25, 'solid', 'black')))">25</a> |
      <a href="javascript://" onclick="void(at1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset))">outset</a> |
      <a href="javascript://" onclick="void(at1.setBorder(qx.renderer.border.BorderPresets.getInstance().inset))">inset</a>
    </p>
    <hr/>
    <p>
      Opacity:
      <a href="javascript://" onclick="void(at1.setOpacity(null))">null</a> |
      <a href="javascript://" onclick="void(at1.setOpacity(0))">0</a> |
      <a href="javascript://" onclick="void(at1.setOpacity(0.25))">0.25</a> |
      <a href="javascript://" onclick="void(at1.setOpacity(0.5))">0.5</a> |
      <a href="javascript://" onclick="void(at1.setOpacity(0.75))">0.75</a> |
      <a href="javascript://" onclick="void(at1.setOpacity(1))">1</a>
    </p>
    <p>
      Enabled:
      <a href="javascript://" onclick="void(at1.setEnabled(false))">false</a> |
      <a href="javascript://" onclick="void(at1.setEnabled(true))">true</a>
    </p>
  </div>

  <script type="text/javascript">
  var at1;

  qx.core.Init.getInstance().defineMain(function()
  {
    var d = qx.ui.core.ClientDocument.getInstance();

    at1 = new qx.ui.basic.Atom("My first qx.ui.basic.Atom", "icon/32/colors.png");

    with(at1)
    {
      setTop(48);
      setLeft(20);

      setIconPosition("right");

      setBorder(qx.renderer.border.BorderPresets.getInstance().black);
      setBackgroundColor(new qx.renderer.color.Color("white"));
      setPadding(2, 4);
    };

    var ct1 = new qx.ui.basic.Label(document.getElementById("control").innerHTML);

    with(ct1)
    {
      setWidth(300);
      setRight(335);

      setHeight(null);
      setTop(48);
      setBottom(48);

      setOverflow("auto");

      setBackgroundColor(new qx.renderer.color.Color("white"));
      setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
      setPadding(10);
    };

    d.add(at1, ct1);
  });
  </script>
</body>
</html>