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 » 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>
|
