sin/samba-mirror
1
0
Fork 0
mirror of https://github.com/samba-team/samba.git synced 2025-03-01 04:58:35 +03:00
Code

r19141: add a reasonable subset of the qooxdoo runtime environment, and example applications

Browse Source 
(This used to be commit ff28ab7314ff1eebcd62f387678b816091af8121)
This commit is contained in:
Derrell Lipman 2006-10-06 15:40:18 +00:00 committed by Gerald (Jerry) Carter
parent 77fc14c081
commit 10c06a1968
2098 changed files with 151833 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1303
swat/apps/qooxdoo-examples/at-a-glance/AtAGlance.js Normal file
View File

File diff suppressed because it is too large Load Diff

21
swat/apps/qooxdoo-examples/at-a-glance/index.html Normal file
View File

@ -0,0 +1,21 @@
<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>
<script type="text/javascript" src="AtAGlance.js"></script>
</head>
<body>
<script type="text/javascript">
qx.dev.log.Logger.ROOT_LOGGER.setMinLevel(qx.dev.log.Logger.LEVEL_ERROR);
qx.core.Init.getInstance().defineMain(function() {
new AtAGlance;
});
</script>
</body>
</html>

73
swat/apps/qooxdoo-examples/example/Atom_1.html Normal file
View File

@ -0,0 +1,73 @@
<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>qx.ui.basic.Atom is the parent class for buttons, menu entries, icons, checkboxes. While you can do,
you usually don't have to instantiate qx.ui.basic.Atom directly.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
// test no1
var nl1 = new qx.ui.basic.Atom("Test #1", "icon/16/reload.png", 16, 16);
nl1.setTop(48);
nl1.setLeft(20);
nl1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
nl1.setBackgroundColor(new qx.renderer.color.Color("white"));
nl1.setPadding(4);
d.add(nl1);
// test no2
var nl2 = new qx.ui.basic.Atom("Test #2");
nl2.setTop(48);
nl2.setLeft(120);
nl2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
nl2.setBackgroundColor(new qx.renderer.color.Color("white"));
nl2.setPadding(4);
d.add(nl2);
// test no3
var nl3 = new qx.ui.basic.Atom(null, "icon/16/reload.png");
nl3.setTop(48);
nl3.setLeft(200);
nl3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
nl3.setBackgroundColor(new qx.renderer.color.Color("white"));
nl3.setPadding(4);
d.add(nl3);
// test no4
var nl4 = new qx.ui.basic.Atom("<span style='font-size:14px'>Some great HTML</span><br/>for <b>you</b>", "icon/32/reload.png");
nl4.setTop(48);
nl4.setLeft(250);
nl4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
nl4.setBackgroundColor(new qx.renderer.color.Color("white"));
nl4.setPadding(4);
d.add(nl4);
// test no5
var nl5 = new qx.ui.basic.Atom(qx.util.Textile.textilize("*File Information*:\nJPEG-Photo\nCreated: 01/03/05"), "icon/48/icons.png");
with(nl5)
{
setTop(200);
setLeft(20);
setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
setPadding(3, 6);
};
d.add(nl5);
});
</script>
</body>
</html>

172
swat/apps/qooxdoo-examples/example/Atom_2.html Normal file
View File

@ -0,0 +1,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>

39
swat/apps/qooxdoo-examples/example/Atom_3.html Normal file
View File

@ -0,0 +1,39 @@
<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>Testing the new flash support for qx.ui.basic.Atom</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var a;
for (var i=1; i<11; i++)
{
var a = new qx.ui.basic.Atom("Flash Atom #" + i, "icon/16/reload.png", 16, 16, "./image/flash/color/file" + i + ".swf");
a.setTop(48 + ((i-1)*30));
a.setLeft(20);
a.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
a.setBackgroundColor(new qx.renderer.color.Color("white"));
a.setPadding(4);
d.add(a);
};
});
</script>
</body>
</html>

89
swat/apps/qooxdoo-examples/example/ButtonView_1.html Normal file
View File

@ -0,0 +1,89 @@
<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>qx.ui.pageview.buttonview.ButtonView implementation</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var bs = new qx.ui.pageview.buttonview.ButtonView;
bs.setLocation(20, 48);
bs.setRight(335);
bs.setBottom(48);
var bsb1 = new qx.ui.pageview.buttonview.ButtonViewButton("Display", "icon/32/display.png");
var bsb2 = new qx.ui.pageview.buttonview.ButtonViewButton("Penguin", "icon/32/penguin.png");
var bsb3 = new qx.ui.pageview.buttonview.ButtonViewButton("Colors", "icon/32/colors.png");
var bsb4 = new qx.ui.pageview.buttonview.ButtonViewButton("Icons", "icon/32/icons.png");
var bsb5 = new qx.ui.pageview.buttonview.ButtonViewButton("Paint", "icon/32/paint.png");
var bsb6 = new qx.ui.pageview.buttonview.ButtonViewButton("Applications", "icon/32/run.png");
var bsb7 = new qx.ui.pageview.buttonview.ButtonViewButton("System", "icon/32/control-center.png");
bsb1.setChecked(true);
bs.getBar().add(bsb1, bsb2, bsb3, bsb4, bsb5, bsb6, bsb7);
var p1 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb1);
var p2 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb2);
var p3 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb3);
var p4 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb4);
var p5 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb5);
var p6 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb6);
var p7 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb7);
bs.getPane().add(p1, p2, p3, p4, p5, p6, p7);
var f1 = new qx.ui.form.TextField("Display Input");
var f2 = new qx.ui.form.TextField("Penguin Input");
var f3 = new qx.ui.form.TextField("Colorize Input");
var f4 = new qx.ui.form.TextField("Icons Input");
var f5 = new qx.ui.form.TextField("Paint Input");
var f6 = new qx.ui.form.TextField("Applications Input");
var f7 = new qx.ui.form.TextField("System Input");
p1.add(f1);
p2.add(f2);
p3.add(f3);
p4.add(f4);
p5.add(f5);
p6.add(f6);
p7.add(f7);
var r1 = new qx.ui.form.RadioButton("Top", "top", null, true);
var r2 = new qx.ui.form.RadioButton("Right", "right");
var r3 = new qx.ui.form.RadioButton("Bottom", "bottom");
var r4 = new qx.ui.form.RadioButton("Left", "left");
r1.setTop(50);
r2.setTop(70);
r3.setTop(90);
r4.setTop(110);
p1.add(r1, r2, r3, r4);
var rm = new qx.manager.selection.RadioManager(null, [r1, r2, r3, r4]);
rm.addEventListener("changeSelected", function(e) {
bs.setBarPosition(e.getData().getValue());
});
d.add(bs);
});
</script>
</body>
</html>

98
swat/apps/qooxdoo-examples/example/ButtonView_2.html Normal file
View File

@ -0,0 +1,98 @@
<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>Yet Another qx.ui.pageview.buttonview.ButtonView Example</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var bs = new qx.ui.pageview.buttonview.ButtonView;
bs.set({ left: 20, top: 48, right: 335, bottom: 48 });
bs.setBarPosition("left");
var bsb1 = new qx.ui.pageview.buttonview.ButtonViewButton("Display", "icon/16/display.png");
var bsb2 = new qx.ui.pageview.buttonview.ButtonViewButton("Organizer", "icon/16/organizer.png");
var bsb3 = new qx.ui.pageview.buttonview.ButtonViewButton("Colorize", "icon/16/colors.png");
var bsb4 = new qx.ui.pageview.buttonview.ButtonViewButton("Icons", "icon/16/icons.png");
var bsb5 = new qx.ui.pageview.buttonview.ButtonViewButton("Paint", "icon/16/paint.png");
var bsb6 = new qx.ui.pageview.buttonview.ButtonViewButton("Applications", "icon/16/run.png");
var bsb7 = new qx.ui.pageview.buttonview.ButtonViewButton("System", "icon/16/control-center.png");
bsb1.setChecked(true);
bsb1.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bsb2.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bsb3.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bsb4.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bsb5.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bsb6.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bsb7.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
bs.getBar().add(bsb1, bsb2, bsb3, bsb4, bsb5, bsb6, bsb7);
bs.getBar().setHorizontalChildrenAlign("center");
bs.getBar().setVerticalChildrenAlign("bottom");
var p1 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb1);
var p2 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb2);
var p3 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb3);
var p4 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb4);
var p5 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb5);
var p6 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb6);
var p7 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb7);
bs.getPane().add(p1, p2, p3, p4, p5, p6, p7);
var f1 = new qx.ui.form.TextField("Display Input");
var f2 = new qx.ui.form.TextField("Sunshine Input");
var f3 = new qx.ui.form.TextField("Paint Input");
var f4 = new qx.ui.form.TextField("Icons Input");
var f5 = new qx.ui.form.TextField("Images Input");
var f6 = new qx.ui.form.TextField("Applications Input");
var f7 = new qx.ui.form.TextField("System Input");
p1.add(f1);
p2.add(f2);
p3.add(f3);
p4.add(f4);
p5.add(f5);
p6.add(f6);
p7.add(f7);
var r1 = new qx.ui.form.RadioButton("Top", "top");
var r2 = new qx.ui.form.RadioButton("Right", "right");
var r3 = new qx.ui.form.RadioButton("Bottom", "bottom");
var r4 = new qx.ui.form.RadioButton("Left", "left", null, true);
r1.setTop(50);
r2.setTop(70);
r3.setTop(90);
r4.setTop(110);
p1.add(r1, r2, r3, r4);
var rm = new qx.manager.selection.RadioManager(null, [r1, r2, r3, r4]);
rm.addEventListener("changeSelected", function(e) {
bs.setBarPosition(e.getData().getValue());
});
d.add(bs);
});
</script>
</body>
</html>

73
swat/apps/qooxdoo-examples/example/Button_1.html Normal file
View File

@ -0,0 +1,73 @@
<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>Test the qx.ui.form.Button constructor. qx.ui.form.Button is based on qx.ui.basic.Atom.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
function buttonExecute() { this.debug("Executed: " + this.getLabel()); };
var btn1 = new qx.ui.form.Button("Button No #1");
with(btn1)
{
setTop(48);
setLeft(20);
addEventListener("execute", buttonExecute);
};
d.add(btn1);
var btn2 = new qx.ui.form.Button("Button No #2");
with(btn2)
{
setTop(48);
setLeft(120);
addEventListener("execute", buttonExecute);
setEnabled(false);
};
d.add(btn2);
var btn3 = new qx.ui.form.Button("Button No #3");
with(btn3)
{
setTop(48);
setLeft(220);
addEventListener("execute", buttonExecute);
};
d.add(btn3);
var btn4 = new qx.ui.form.Button("Button No #4", "icon/16/forward.png");
with(btn4)
{
setTop(48);
setLeft(320);
addEventListener("execute", buttonExecute);
};
d.add(btn4);
});
</script>
</body>
</html>

104
swat/apps/qooxdoo-examples/example/CheckBox_1.html Normal file
View File

@ -0,0 +1,104 @@
<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>Tests for qx.ui.form.CheckBox. qx.ui.form.CheckBox extends qx.ui.basic.Atom and so it inherits all the options and properties defined there.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var c1 = new qx.ui.form.CheckBox("Send Data to Server", "c1checked", "c1");
with(c1)
{
setTop(48);
setLeft(20);
};
d.add(c1);
var c2 = new qx.ui.form.CheckBox("Delete all Data on Server", "c2checked", "c2");
with(c2)
{
setTop(78);
setLeft(20);
};
d.add(c2);
c2.setChecked(true);
var c3 = new qx.ui.form.CheckBox("Top Checkbox", "c3checked", "c3");
with(c3)
{
setTop(120);
setLeft(20);
setIconPosition("top");
};
d.add(c3);
var c4 = new qx.ui.form.CheckBox("Bottom Checkbox", "c4checked", "c4");
with(c4)
{
setTop(120);
setLeft(140);
setIconPosition("bottom");
};
d.add(c4);
var c5 = new qx.ui.form.CheckBox("Left Checkbox", "c5checked", "c5");
with(c5)
{
setTop(180);
setLeft(20);
setIconPosition("left");
};
d.add(c5);
var c6 = new qx.ui.form.CheckBox("Right Checkbox", "c6checked", "c6");
with(c6)
{
setTop(180);
setLeft(140);
setIconPosition("right");
};
d.add(c6);
var c7 = new qx.ui.form.CheckBox(null, "c7checked", "c7");
with(c7)
{
setTop(250);
setLeft(20);
};
d.add(c7);
var c8 = new qx.ui.form.CheckBox(null, "c7checked", "c7");
with(c8)
{
setTop(300);
setLeft(20);
setLabel("Label pure");
setShow("label");
setBorder(qx.renderer.border.BorderPresets.getInstance().black);
setBackgroundColor(new qx.renderer.color.Color("red"));
};
d.add(c8);
c8.addEventListener("changeChecked", function(e) {
this.setBackgroundColor(new qx.renderer.color.Color(this.getChecked() ? "green" : "red"));
});
});
</script>
</body>
</html>

83
swat/apps/qooxdoo-examples/example/ColorPopup_1.html Normal file
View File

@ -0,0 +1,83 @@
<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>Test for qx.ui.component.ColorPopup.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var mybtn = new qx.ui.form.Button("Open Popup");
mybtn.setLocation(20, 48);
mybtn.addEventListener("execute", function() {
mypop.setTop(qx.dom.DomLocation.getPageBoxBottom(this.getElement()));
mypop.setLeft(qx.dom.DomLocation.getPageBoxLeft(this.getElement()));
mypop.show();
});
var myview = new qx.ui.basic.Label("Selected Color");
myview.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
myview.setLocation(100, 48);
myview.setPadding(3, 6);
myview.setBackgroundImage("core/dotted_white.gif");
myview.addToDocument();
var mytables =
{
core : {
label : "Basic Colors",
values : [ "#000", "#333", "#666", "#999", "#CCC", "#FFF", "red", "green", "blue", "yellow", "teal", "maroon" ]
},
template : {
label : "Template Colors",
values : [ "#B07B30", "#B07BC9", "#E3AEC9", "#7A2A53" ]
},
recent : {
label : "Recent Colors",
// In this case we need named colors or rgb-value-strings, hex is not allowed currently
values : [ "rgb(122,195,134)", "orange" ]
}
}
var mypop = new qx.ui.component.ColorPopup(mytables);
mypop.setLocation(100, 100);
mypop.setValue(new qx.renderer.color.Color("#23F3C1"));
mybtn.addToDocument();
mypop.addToDocument();
mypop.addEventListener("changeValue", function(e) {
this.debug("Value Listener: " + e.getData());
myview.setBackgroundColor(e.getData());
myview.setBackgroundImage(e.getData() ? null : "core/dotted_white.gif");
});
mypop.addEventListener("changeRed", function(e) {
this.debug("Red Listener: " + e.getData());
});
mypop.addEventListener("changeGreen", function(e) {
this.debug("Green Listener: " + e.getData());
});
mypop.addEventListener("changeBlue", function(e) {
this.debug("Blue Listener: " + e.getData());
});
});
</script>
</body>
</html>

29
swat/apps/qooxdoo-examples/example/ColorSelector_1.html Normal file
View File

@ -0,0 +1,29 @@
<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>Test for qx.ui.component.ColorSelector.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var mycolor = new qx.ui.component.ColorSelector;
mycolor.setLocation(50, 50);
qx.ui.core.ClientDocument.getInstance().add(mycolor);
});
</script>
</body>
</html>

30
swat/apps/qooxdoo-examples/example/ColorSelector_2.html Normal file
View File

@ -0,0 +1,30 @@
<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>Test for qx.ui.component.ColorSelector.</p>
<p>Adding a default/previous/old color value to compare it with the new selection.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var mycolor = new qx.ui.component.ColorSelector(130, 180, 100);
mycolor.setLocation(50, 50);
qx.ui.core.ClientDocument.getInstance().add(mycolor);
});
</script>
</body>
</html>

101
swat/apps/qooxdoo-examples/example/ComboBox_1.html Normal file
View File

@ -0,0 +1,101 @@
<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>Testing ComboBox implementation.</p>
<p>The elements of the popup will be created on the first open of the qx.ui.form.ComboBox.</p>
</div>
<select style="position:absolute; left:300px; top:48px; width: 120px;">
<option>Item No 1</option>
<option>Item No 2</option>
<option>Item No 3</option>
<option>Item No 4</option>
<option>Item No 5</option>
<option>Item No 6</option>
<option>Item No 7</option>
<option>Item No 8</option>
<option>Item No 9</option>
<option disabled="true">Item No 10</option>
<option>Item No 11</option>
<option>Item No 12</option>
<option>Item No 13</option>
<option>Item No 14</option>
<option>Item No 15</option>
<option>Item No 16</option>
<option>Item No 17</option>
<option>Item No 18</option>
<option>Item No 19</option>
<option disabled="true">Item No 20</option>
<option>Item No 21</option>
<option>Item No 22</option>
<option>Item No 23</option>
<option>Item No 24</option>
<option>Item No 23</option>
<option>Item No 24</option>
<option>Item No 25</option>
<option>Item No 26</option>
<option>Item No 27</option>
<option>Item No 28</option>
<option>Item No 29</option>
<option disabled="true">Item No 30</option>
</select>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var c1 = new qx.ui.form.ComboBox;
c1.set({ top: 48, left: 20 });
var item;
for(var i=1; i<=30; i++)
{
item = new qx.ui.form.ListItem("Item No " + i);
!(i % 10) && (item.setEnabled(false));
c1.add(item);
};
c1.setSelected(c1.getList().getFirstChild());
c1.addEventListener("changeValue", function(e) {
this.debug("New value: " + e.getData());
});
c1.addEventListener("changeSelected", function(e) {
this.debug("New selected: " + e.getData());
});
var b1 = new qx.ui.form.CheckBox("Editable");
b1.set({ top: 50, left: 150 });
b1.addEventListener("changeChecked", function(e) {
c1.setEditable(e.getData());
});
d.add(c1, b1);
});
</script>
</body>
</html>

31
swat/apps/qooxdoo-examples/example/DateChooser_1.html Normal file
View File

@ -0,0 +1,31 @@
<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>The DateChooser shows calendar and allows choosing a date.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var chooser = new qx.ui.component.DateChooser;
chooser.setLocation(10, 50);
chooser.setWidth("auto");
chooser.setHeight("auto");
d.add(chooser);
});
</script>
</body>
</html>

57
swat/apps/qooxdoo-examples/example/Drag_1.html Normal file
View File

@ -0,0 +1,57 @@
<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>Show one way to drag a widget around the screen.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var a1 = new qx.ui.basic.Atom("Drag Me");
a1.set({ backgroundColor: "white", border: qx.renderer.border.BorderPresets.getInstance().groove });
a1.setPadding(10);
a1.setLocation(20, 48);
d.add(a1);
a1.addEventListener("mousedown", handleMouseDown);
a1.addEventListener("mousemove", handleMouseMove);
a1.addEventListener("mouseup", handleMouseUp);
function handleMouseDown(e)
{
this.setCapture(true);
a1._offsetX = e.getPageX() - a1.getLeft();
a1._offsetY = e.getPageY() - a1.getTop();
}
function handleMouseMove(e)
{
if (this.getCapture())
{
a1.setLeft(e.getPageX() - a1._offsetX);
a1.setTop(e.getPageY() - a1._offsetY);
}
}
function handleMouseUp(e)
{
this.setCapture(false);
}
});
</script>
</body>
</html>

107
swat/apps/qooxdoo-examples/example/Fields_1.html Normal file
View File

@ -0,0 +1,107 @@
<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 tests for some of the most used properties of qx.ui.core.Widget (coordinates, dimensions, backgroundColor, opacity, ...).</p>
<p>Also here are the first test of some widgets which extend qx.ui.core.Widget: qx.ui.form.TextField and qx.ui.form.PasswordField. These extended
widgets also interacts like the basic QxWidgets with the qx.event.handler.FocusHandler.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
function textChange(e) {
this.debug("Text changed: " + e.getData());
}
var t1 = new qx.ui.form.TextField;
t1.setValue("textfield");
t1.setTop(48);
t1.setLeft(20);
t1.addEventListener("changeValue", textChange);
t1.addEventListener("input", function(e) {
this.debug("Input: " + e.getData());
});
d.add(t1);
var t2 = new qx.ui.form.PasswordField;
t2.setValue("passwordfield");
t2.setTop(80);
t2.setLeft(20);
t2.addEventListener("changeValue", textChange);
d.add(t2);
var t3 = new qx.ui.form.TextArea;
t3.setValue("textarea");
t3.setTop(110);
t3.setLeft(20);
t3.setWidth(300);
t3.setHeight(60);
t3.addEventListener("changeValue", textChange);
d.add(t3);
var t4 = new qx.ui.form.TextField;
t4.setValue("textfield");
t4.setTop(200);
t4.setLeft(20);
t4.setWidth(200);
t4.setMaxLength(100);
t4.setReadOnly(true);
t4.addEventListener("changeValue", textChange);
d.add(t4);
var t5 = new qx.ui.form.TextField;
t5.setValue("You are foo!");
t5.setTop(240);
t5.setLeft(20);
t5.addEventListener("changeValue", textChange);
d.add(t5);
var t6 = new qx.ui.form.TextField;
t6.setTop(270);
t6.setLeft(20);
t6.addEventListener("changeText", textChange);
t6.addEventListener("input", function(e) {
this.debug("Input: " + e.getData());
});
t6.addEventListener("keydown", function(e) {
this.debug("Keypress: " + e.getKeyCode());
});
d.add(t6);
});
</script>
</body>
</html>

53
swat/apps/qooxdoo-examples/example/Flash_1.html Normal file
View File

@ -0,0 +1,53 @@
<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>Simple test for qx.ui.embed.Flash.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
// Try no version required
var fo1 = new qx.ui.embed.Flash("./image/flash/fo_tester.swf");
// Try version 7 required
// var fo1 = new qx.ui.embed.Flash("image/flash/fo_tester.swf", "7");
// Try version 9 required
// var fo1 = new qx.ui.embed.Flash("image/flash/fo_tester.swf", "9");
// Error handling methods:
// #1: Enable Express Install: Available in Flash Players >= 6.0.65
// fo1.setEnableExpressInstall(true);
// #2: Enable Redirect URL: Jump to an installer page
// fo1.setRedirectUrl("http://www.google.de");
fo1.setVariable("flashVarText", "this is passed in via FlashVars");
fo1.setScale("noscale");
fo1.setLeft(20);
fo1.setRight(335);
fo1.setTop(48);
fo1.setBottom(48);
fo1.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
fo1.setBackgroundColor("#FF6600");
d.add(fo1);
});
</script>
</body>
</html>

129
swat/apps/qooxdoo-examples/example/GalleryList_1.html Normal file
View File

@ -0,0 +1,129 @@
<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>
<style type="text/css">
.qx.ui.embed.GalleryList{
position: absolute;
visibility: visible;
}
.qx.ui.embed.GalleryList .galleryFrame{
padding: 2px;
}
.qx.ui.embed.GalleryList .galleryCell{
margin: 2px;
padding-bottom: 2px;
border: 1px solid #EEE;
background: #fff;
overflow: hidden;
white-space: normal;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
cursor: default;
-moz-user-select: none;
user-select: none;
position: relative;
}
.qx.ui.embed.GalleryList .galleryCell img{
vertical-align: bottom;
display: block;
}
.qx.ui.embed.GalleryList .galleryNumber{
width: 45px;
padding: 4px;
position: absolute;
top: 0px;
left: 0px;
}
.qx.ui.embed.GalleryList .galleryImageContainer{
position: absolute;
top: 0px;
left: 50px;
}
.qx.ui.embed.GalleryList .galleryText{
padding: 4px;
position: absolute;
top: 0px;
left: 130px;
}
.qx.ui.embed.GalleryList .galleryNumber,
.qx.ui.embed.GalleryList .galleryText h3{
font-weight: bold;
font-size: 11px;
}
.qx.ui.embed.GalleryList .galleryText p{
font-size: 10px;
}
.qx.ui.embed.GalleryList .galleryCell-Selected{
background: #9BBCFF;
border-color: #3B7CFF;
}
</style>
</head>
<body>
<script type="text/javascript" src="../../script/layout.js"></script>
<div id="demoDescription">
<p>ListSort implementation</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var imgPath = qx.manager.object.AliasManager.getInstance().resolvePath("icon/48/bug.png");
var galleryData = [];
for (var i=0; i<100; i++)
{
galleryData.push({
display : "bmzN9ci5",
width : 350,
height : 350,
thumbWidth : 48,
thumbHeight : 48,
title : "gohome.png",
timestamp : Math.random().toString(),
comment : "Cool Comment sadas asd dsa asdas dasd asd asdas dasdasdasd sadasdas dsds as",
id : "7686191121780974-10682",
src : imgPath,
number : "#" + i
});
};
var galleryList = new qx.ui.embed.GalleryList(galleryData);
galleryList.setWidth(400);
galleryList.setTop(48);
galleryList.setBottom(48);
galleryList.setLeft(250);
galleryList.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
galleryList.setBackgroundColor("white");
qx.ui.core.ClientDocument.getInstance().add(galleryList);
});
</script>
</body>
</html>

116
swat/apps/qooxdoo-examples/example/Gallery_1.html Normal file
View File

@ -0,0 +1,116 @@
<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>
<style type="text/css">
.qx_ui_embed_Gallery .galleryFrame{
padding: 2px;
}
.qx_ui_embed_Gallery .galleryCell{
border: 1px solid #444;
background: #fff;
margin: 2px;
float: left;
overflow: hidden;
font-family: Tahoma, Verdana, sans-serif;
font-size: 10px;
cursor: default;
-moz-user-select: none;
user-select: none;
}
.qx_ui_embed_Gallery .galleryCell img{
vertical-align: bottom;
display: block;
}
.qx_ui_embed_Gallery .galleryCell .galleryTitle,
.qx_ui_embed_Gallery .galleryCell .galleryComment{
background: #eee;
padding: 3px 6px;
text-align: center;
cursor: default;
overflow: hidden;
white-space: nowrap;
}
.qx_ui_embed_Gallery .galleryCell .galleryTitle{
border-bottom: 1px solid #aaa;
}
.qx_ui_embed_Gallery .galleryCell .galleryComment{
border-top: 1px solid #aaa;
}
.qx_ui_embed_Gallery .galleryCell-Selected{
background: #DCE8F6;
border: 1px solid #2760A1;
}
.qx_ui_embed_Gallery .galleryCell-Selected .galleryTitle,
.qx_ui_embed_Gallery .galleryCell-Selected .galleryComment{
background: #9BBFE7;
}
.qx_ui_embed_Gallery .galleryCell-Selected .galleryTitle{
border-bottom: 1px dotted #2760A1;
}
.qx_ui_embed_Gallery .galleryCell-Selected .galleryComment{
border-top: 1px dotted #2760A1;
}
</style>
</head>
<body>
<script type="text/javascript" src="../../script/layout.js"></script>
<div id="demoDescription">
<p>Test file for qx.ui.embed.Gallery</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var imgPath = qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/chart.png");
var galleryList = [];
for (var i=0; i<100; i++)
{
galleryList.push({
display : "bmzN9ci5",
width : 350,
height : 350,
thumbWidth : 64,
thumbHeight : 64,
title : "gohome.png",
timestamp : Math.random().toString(),
comment : "Cool Comment",
id : "7686191121780974-10682",
src : imgPath
});
};
var gallery = new qx.ui.embed.Gallery(galleryList);
gallery.setLeft(20);
gallery.setRight(335);
gallery.setTop(48);
gallery.setBottom(48);
gallery.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
qx.ui.core.ClientDocument.getInstance().add(gallery);
});
</script>
</body>
</html>

107
swat/apps/qooxdoo-examples/example/GroupBox_1.html Normal file
View File

@ -0,0 +1,107 @@
<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>Introducing qx.ui.groupbox.GroupBox.</p>
</div>
<fieldset style="position:absolute; top:48px; left:400px; width:200px; height:100px"><legend>builtin</legend>content content content content content content content content content content content content content content content</fieldset>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var fs = new qx.ui.groupbox.GroupBox("My first Fieldset");
with(fs)
{
setWidth("40%");
setBottom(48);
setTop(48);
setLeft(20);
setMaxWidth(350);
setMinWidth(250);
};
var a1 = new qx.ui.basic.Atom("TextField 1");
with(a1)
{
setTop(3);
setLeft(0);
setWidth("35%");
setHorizontalChildrenAlign("left");
};
var i1 = new qx.ui.form.TextField();
with(i1)
{
setTop(0);
setRight(0);
setWidth("60%");
};
fs.add(a1, i1);
var a2 = new qx.ui.basic.Atom("TextField 2", "icon/16/appearance.png");
with(a2)
{
setTop(33);
setLeft(0);
setWidth("35%");
setHorizontalChildrenAlign("left");
};
fs.add(a2);
var i2 = new qx.ui.form.TextField();
with(i2)
{
setTop(30);
setRight(0);
setWidth("60%");
};
fs.add(i2);
var a3 = new qx.ui.basic.Atom("TextField 3");
with(a3)
{
setTop(63);
setLeft(0);
setWidth("35%");
setHorizontalChildrenAlign("left");
};
fs.add(a3);
var i3 = new qx.ui.form.TextField();
with(i3)
{
setTop(60);
setRight(0);
setWidth("60%");
};
fs.add(i3);
d.add(fs);
});
</script>
</body>
</html>

153
swat/apps/qooxdoo-examples/example/GroupBox_2.html Normal file
View File

@ -0,0 +1,153 @@
<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>Test for qx.ui.groupbox.CheckGroupBox</p>
</div>
<fieldset style="position:absolute; top:48px; left:400px; width:200px; height:100px"><legend>builtin</legend>content content content content content content content content content content content content content content content</fieldset>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var fs = new qx.ui.groupbox.CheckGroupBox("CheckBox FieldSet");
with(fs)
{
setWidth("40%");
setBottom(48);
setTop(48);
setLeft(20);
setMaxWidth(350);
setMinWidth("auto");
};
d.add(fs);
var fsl = new qx.ui.layout.VerticalBoxLayout;
fsl.setLeft(0);
fsl.setRight(0);
fsl.setHeight("auto");
fsl.setSpacing(4);
fs.add(fsl);
var r1 = new qx.ui.layout.HorizontalBoxLayout;
r1.setLeft(0);
r1.setWidth("100%");
r1.setHeight("auto");
r1.setVerticalChildrenAlign("middle");
fsl.add(r1);
var a1 = new qx.ui.basic.Atom("TextField 1");
with(a1)
{
setLeft(0);
setWidth("40%");
setHorizontalChildrenAlign("left");
};
var i1 = new qx.ui.form.TextField;
with(i1)
{
setRight(0);
setWidth("60%");
};
r1.add(a1, i1);
var r2 = new qx.ui.layout.HorizontalBoxLayout;
r2.setLeft(0);
r2.setWidth("100%");
r2.setHeight("auto");
r2.setVerticalChildrenAlign("middle");
fsl.add(r2);
var a2 = new qx.ui.basic.Atom("TextField 2", "icon/16/appearance.png");
with(a2)
{
setLeft(0);
setWidth("40%");
setHorizontalChildrenAlign("left");
};
var i2 = new qx.ui.form.TextField;
with(i2)
{
setRight(0);
setWidth("60%");
};
r2.add(a2, i2);
var r3 = new qx.ui.layout.HorizontalBoxLayout;
r3.setLeft(0);
r3.setWidth("100%");
r3.setHeight("auto");
r3.setVerticalChildrenAlign("middle");
fsl.add(r3);
var a3 = new qx.ui.basic.Atom("TextField 3");
with(a3)
{
setLeft(0);
setWidth("40%");
setHorizontalChildrenAlign("left");
};
var i3 = new qx.ui.form.TextField;
with(i3)
{
setRight(0);
setWidth("60%");
};
r3.add(a3, i3);
fs.getLegendObject().addEventListener("changeChecked", function(e) {
i1.setEnabled(e.getData());
i2.setEnabled(e.getData());
i3.setEnabled(e.getData());
a1.setEnabled(e.getData());
a2.setEnabled(e.getData());
a3.setEnabled(e.getData());
});
});
</script>
</body>
</html>

160
swat/apps/qooxdoo-examples/example/GroupBox_3.html Normal file
View File

@ -0,0 +1,160 @@
<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>Test for qx.ui.groupbox.RadioGroupBox</p>
</div>
<fieldset style="position:absolute; top:48px; left:400px; width:200px; height:100px"><legend>builtin</legend>content content content content content content content content content content content content content content content</fieldset>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var fsr = new qx.ui.form.RadioButton("Simple configuration");
fsr.setLocation(27, 48);
d.add(fsr);
var fs = new qx.ui.groupbox.RadioGroupBox("RadioButton FieldSet");
with(fs)
{
setWidth("40%");
setBottom(48);
setTop(72);
setLeft(20);
setMaxWidth(350);
setMinWidth("auto");
};
d.add(fs);
var fag = new qx.manager.selection.RadioManager("fscontrol", [ fsr, fs.getLegendObject() ]);
var fsl = new qx.ui.layout.VerticalBoxLayout;
fsl.setLeft(0);
fsl.setRight(0);
fsl.setHeight("auto");
fsl.setSpacing(4);
fs.add(fsl);
var r1 = new qx.ui.layout.HorizontalBoxLayout;
r1.setLeft(0);
r1.setWidth("100%");
r1.setHeight("auto");
r1.setVerticalChildrenAlign("middle");
fsl.add(r1);
var a1 = new qx.ui.basic.Atom("TextField 1");
with(a1)
{
setLeft(0);
setWidth("40%");
setHorizontalChildrenAlign("left");
};
var i1 = new qx.ui.form.TextField;
with(i1)
{
setRight(0);
setWidth("60%");
};
r1.add(a1, i1);
var r2 = new qx.ui.layout.HorizontalBoxLayout;
r2.setLeft(0);
r2.setWidth("100%");
r2.setHeight("auto");
r2.setVerticalChildrenAlign("middle");
fsl.add(r2);
var a2 = new qx.ui.basic.Atom("TextField 2", "icon/16/appearance.png");
with(a2)
{
setLeft(0);
setWidth("40%");
setHorizontalChildrenAlign("left");
};
var i2 = new qx.ui.form.TextField;
with(i2)
{
setRight(0);
setWidth("60%");
};
r2.add(a2, i2);
var r3 = new qx.ui.layout.HorizontalBoxLayout;
r3.setLeft(0);
r3.setWidth("100%");
r3.setHeight("auto");
r3.setVerticalChildrenAlign("middle");
fsl.add(r3);
var a3 = new qx.ui.basic.Atom("TextField 3");
with(a3)
{
setLeft(0);
setWidth("40%");
setHorizontalChildrenAlign("left");
};
var i3 = new qx.ui.form.TextField;
with(i3)
{
setRight(0);
setWidth("60%");
};
r3.add(a3, i3);
fs.getLegendObject().addEventListener("changeChecked", function(e) {
i1.setEnabled(e.getData());
i2.setEnabled(e.getData());
i3.setEnabled(e.getData());
a1.setEnabled(e.getData());
a2.setEnabled(e.getData());
a3.setEnabled(e.getData());
});
});
</script>
</body>
</html>

71
swat/apps/qooxdoo-examples/example/Iframe_1.html Normal file
View File

@ -0,0 +1,71 @@
<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>Iframe implementation. Elastic.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
//----------
// qx.ui.embed.Iframe
//----------
w1 = new qx.ui.embed.Iframe();
w1.addEventListener("load", function(e) {
this.debug("Loaded: " + this.getSource());
});
// elastic
w1.set( { left: 20, top: 96, right: 335, bottom: 48 } );
w1.setSource("http://www.google.com");
d.add(w1);
function changeURL(e) {
this.setSource(e.getData());
};
// make qx.ui.embed.Iframe react to event "surfTo" via function changeURL()
d.addEventListener("surfTo", changeURL, w1);
//-------------
// radio group
//-------------
var rd1 = new qx.ui.form.RadioButton("Google", "http://www.google.com");
var rd2 = new qx.ui.form.RadioButton("Yahoo", "http://www.yahoo.com");
rd1.set( { left: 20, top: 48, checked: true } );
rd2.set( { left: 120, top: 48 } );
var rbm = new qx.manager.selection.RadioManager( name, [rd1, rd2]);
// elements of radio group fire event "surfTo"
rbm.addEventListener("changeSelected", function(e)
{
d.dispatchEvent( new qx.event.type.DataEvent("surfTo", e.getData().getValue() ) );
});
d.add(rd1, rd2);
});
</script>
</body>
</html>

260
swat/apps/qooxdoo-examples/example/Inline_1.html Normal file
View File

@ -0,0 +1,260 @@
<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>Inline widget.</p><p>Application layout is disabled by using qx.core.Settings. Scrollbars appear, if the content is bigger than the window.</p>
</div>
<div id="iframe1" class="manualFrame" style="overflow:hidden;position:static;margin-top:38px;margin-left:10px">
Inline Frame #1
</div>
<div id="iframe2" class="manualFrame" style="overflow:hidden;position:static;margin-top:20px;margin-left:10px">
Inline Frame #2
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var inlineWidget = new qx.ui.basic.Inline("iframe1");
inlineWidget.setHeight("auto");
inlineWidget.setWidth("auto");
var fieldSet = new qx.ui.groupbox.GroupBox("My first inline fieldset");
with(fieldSet)
{
// setWidth("auto");
// setWidth("100%");
setLeft(0);
setRight(0);
setHeight("auto");
};
inlineWidget.add(fieldSet);
d.add(inlineWidget);
var atom1 = new qx.ui.basic.Atom("Name");
var textfield1 = new qx.ui.form.TextField;
with(atom1)
{
setLeft(0);
setTop(3);
};
with(textfield1)
{
setLeft(80);
setRight(0);
setTop(0);
};
fieldSet.add(atom1, textfield1);
var atom2 = new qx.ui.basic.Atom("First Name");
var textfield2 = new qx.ui.form.TextField;
with(atom2)
{
setLeft(0);
setTop(33);
};
with(textfield2)
{
setLeft(80);
setRight(0);
setTop(30);
};
fieldSet.add(atom2, textfield2);
var atom3 = new qx.ui.basic.Atom("City");
var textfield3 = new qx.ui.form.TextField;
with(atom3)
{
setLeft(0);
setTop(63);
};
with(textfield3)
{
setLeft(80);
setRight(0);
setTop(60);
};
fieldSet.add(atom3, textfield3);
/*
Menu
*/
var m1 = new qx.ui.menu.Menu;
var mb1_01 = new qx.ui.menu.MenuButton("New");
var mb1_02 = new qx.ui.menu.MenuButton("Open");
var mb1_03 = new qx.ui.menu.MenuButton("Save");
var mb1_04 = new qx.ui.menu.MenuButton("Save as");
var mb1_05 = new qx.ui.menu.MenuButton("Close");
var mb1_06 = new qx.ui.menu.MenuButton("Restore last saved");
m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
var m2 = new qx.ui.menu.Menu;
var mb2_01 = new qx.ui.menu.MenuButton("Undo");
var mb2_02 = new qx.ui.menu.MenuButton("Redo");
var mb2_b1 = new qx.ui.menu.MenuSeparator();
var mb2_03 = new qx.ui.menu.MenuButton("Cut", "icon/16/edit-cut.png");
var mb2_04 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png");
var mb2_05 = new qx.ui.menu.MenuButton("Paste", "icon/16/edit-paste.png");
var mb2_06 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png");
var mb2_b2 = new qx.ui.menu.MenuSeparator();
var mb2_07 = new qx.ui.menu.MenuButton("Select All");
var mb2_08 = new qx.ui.menu.MenuButton("Find");
var mb2_09 = new qx.ui.menu.MenuButton("Find Again");
mb2_05.setEnabled(false);
mb2_06.setEnabled(false);
mb2_09.setEnabled(false);
m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05, mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
var m3 = new qx.ui.menu.Menu;
var m3_suba = new qx.ui.menu.Menu;
var m3_subb = new qx.ui.menu.Menu;
var m3_subc = new qx.ui.menu.Menu;
var mb3_01 = new qx.ui.menu.MenuCheckBox("File List", null, false);
var mb3_02 = new qx.ui.menu.MenuCheckBox("Syntax Highlighting", null, true);
var mb3_03 = new qx.ui.menu.MenuCheckBox("Statusbar", null, true);
var mb3_b1 = new qx.ui.menu.MenuSeparator();
var mb3_04 = new qx.ui.menu.MenuButton("Printer Font", null, null, m3_suba);
var mb3_05 = new qx.ui.menu.MenuButton("Editor Font", null, null, m3_subb);
var mb3_06 = new qx.ui.menu.MenuButton("Export Font", null, null, m3_subc);
m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05, mb3_06);
var mb3_suba_01 = new qx.ui.menu.MenuButton("Tahoma, 11pt");
var mb3_suba_02 = new qx.ui.menu.MenuButton("Tahoma, 12pt");
var mb3_suba_03 = new qx.ui.menu.MenuButton("Tahoma, 13pt");
var mb3_suba_04 = new qx.ui.menu.MenuButton("Tahoma, 14pt");
var mb3_suba_05 = new qx.ui.menu.MenuButton("Tahoma, 15pt");
m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03, mb3_suba_04, mb3_suba_05);
var mb3_subb_01 = new qx.ui.menu.MenuButton("Verdana, 11pt");
var mb3_subb_02 = new qx.ui.menu.MenuButton("Verdana, 12pt");
var mb3_subb_03 = new qx.ui.menu.MenuButton("Verdana, 13pt");
var mb3_subb_04 = new qx.ui.menu.MenuButton("Verdana, 14pt");
var mb3_subb_05 = new qx.ui.menu.MenuButton("Verdana, 15pt");
m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03, mb3_subb_04, mb3_subb_05);
var mb3_subc_01 = new qx.ui.menu.MenuButton("Courier, 11pt");
var mb3_subc_02 = new qx.ui.menu.MenuButton("Courier, 12pt");
var mb3_subc_03 = new qx.ui.menu.MenuButton("Courier, 13pt");
var mb3_subc_04 = new qx.ui.menu.MenuButton("Courier, 14pt");
var mb3_subc_05 = new qx.ui.menu.MenuButton("Courier, 15pt");
m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03, mb3_subc_04, mb3_subc_05);
var m4 = new qx.ui.menu.Menu;
var m4_suba = new qx.ui.menu.Menu;
var mb4_01 = new qx.ui.menu.MenuButton("View", null, null, m4_suba);
var mb4_b1 = new qx.ui.menu.MenuSeparator();
var mb4_02 = new qx.ui.menu.MenuButton("Editor Preferences...");
var mb4_03 = new qx.ui.menu.MenuButton("Editor Extensions");
var mb4_04 = new qx.ui.menu.MenuButton("Framework Preferences");
m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
var mb4_suba_01 = new qx.ui.menu.MenuButton("New Window");
var mb4_suba_b1 = new qx.ui.menu.MenuSeparator();
var mb4_suba_02 = new qx.ui.menu.MenuRadioButton("Overlapping", null, true);
var mb4_suba_03 = new qx.ui.menu.MenuRadioButton("Split Horizontally", null);
var mb4_suba_04 = new qx.ui.menu.MenuRadioButton("Split Vertically", null);
var mb4_suba_b2 = new qx.ui.menu.MenuSeparator();
var mb4_suba_05 = new qx.ui.menu.MenuButton("Next Window");
var mb4_suba_06 = new qx.ui.menu.MenuButton("Previous Window");
m4_suba.add(mb4_suba_01, mb4_suba_b1, mb4_suba_02, mb4_suba_03, mb4_suba_04, mb4_suba_b2, mb4_suba_05, mb4_suba_06);
var mb4_manager = new qx.manager.selection.RadioManager("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
var m5 = new qx.ui.menu.Menu;
var mb5_01 = new qx.ui.menu.MenuButton("Help");
var mb5_02 = new qx.ui.menu.MenuButton("About");
m5.add(mb5_01, mb5_02);
d.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m4, m4_suba, m5);
var inline2 = new qx.ui.basic.Inline("iframe2");
inline2.setHeight("auto");
inline2.setWidth("auto");
var mb1 = new qx.ui.toolbar.ToolBar;
var mbb1 = new qx.ui.toolbar.ToolBarMenuButton("File", m1);
var mbb2 = new qx.ui.toolbar.ToolBarMenuButton("Edit", m2);
var mbb3 = new qx.ui.toolbar.ToolBarMenuButton("View", m3);
var mbb4 = new qx.ui.toolbar.ToolBarMenuButton("Options", m4);
var mbb5 = new qx.ui.toolbar.ToolBarMenuButton("Help", m5);
mb1.add(mbb1, mbb2, mbb3, mbb4, mbb5);
with(mb1)
{
setWidth(400);
setHeight("auto");
};
inline2.add(mb1);
d.add(inline2);
});
</script>
</body>
</html>

67
swat/apps/qooxdoo-examples/example/ListView_1.html Normal file
View File

@ -0,0 +1,67 @@
<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>Testing qx.ui.listview.ListView with text cells.</p>
<p>Testing of column alignment, resizeable prohibition for columns and live resizing.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var ld = [];
var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
for (var i=0, t; i<1000; i++)
{
t=Math.round(Math.random()*4);
ld.push({ name : { text : "File " + i }, size : { text : Math.round(Math.random()*100) + "kb" }, type : { text : lt[t] }, modified : { text : "Nov " + Math.round(Math.random() * 30 + 1) + " 2005" }, rights: { text : "-rw-r--r--" }});
};
var lc =
{
name : { label : "Name", width : 100, type : "text" },
size: { label : "Size", width : 50, type : "text", align : "right", resizable : false },
type : { label : "Type", width : 80, type : "text" },
modified : { label : "Last Modified", width : 150, type : "text" },
rights : { label : "Rights", width: 80, type : "text" }
};
var lv = new qx.ui.listview.ListView(ld, lc);
lv.setBorder(qx.renderer.border.BorderPresets.getInstance().shadow);
lv.setBackgroundColor("white");
lv.setWidth(600);
lv.setHeight(350);
lv.setLocation(20, 48);
// Prohibit resizing of columns completly
// lv.setResizable(false);
qx.ui.core.ClientDocument.getInstance().add(lv);
var chk1 = new qx.ui.form.CheckBox("Enable Live Resize");
chk1.setLocation(20, 420);
qx.ui.core.ClientDocument.getInstance().add(chk1);
chk1.addEventListener("changeChecked", function(e) {
lv.setLiveResize(e.getData());
});
});
</script>
</body>
</html>

53
swat/apps/qooxdoo-examples/example/ListView_2.html Normal file
View File

@ -0,0 +1,53 @@
<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>Testing qx.ui.listview.ListView with text cells and an additional icon.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var ld = [];
var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
var li = [ "icons.png", "edit.png", "emoticon.png", "appearance.png", "file-new.png" ];
for (var i=0, t; i<1000; i++)
{
t=Math.round(Math.random()*4);
ld.push({ icon : { source : "icon/16/" + li[t] }, name : { text : "File " + i }, size : { text : Math.round(Math.random()*100) + "kb" }, type : { text : lt[t] }, modified : { text : "Nov " + Math.round(Math.random() * 30 + 1) + " 2005" }, rights: { text : "-rw-r--r--" }});
};
var lc =
{
icon : { label : "", width: 24, type : "image" },
name : { label : "Name", width : 100, type : "text" },
size: { label : "Size", width : 50, type : "text", align : "right" },
type : { label : "Type", width : 80, type : "text" },
modified : { label : "Last Modified", width : 150, type : "text" },
rights : { label : "Rights", width: 80, type : "text" }
};
var lv = new qx.ui.listview.ListView(ld, lc);
lv.setBorder(qx.renderer.border.BorderPresets.getInstance().shadow);
lv.setBackgroundColor("white");
lv.setWidth(600);
lv.setHeight(350);
lv.setLocation(20, 48);
qx.ui.core.ClientDocument.getInstance().add(lv);
});
</script>
</body>
</html>

51
swat/apps/qooxdoo-examples/example/ListView_3.html Normal file
View File

@ -0,0 +1,51 @@
<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>Testing qx.ui.listview.ListView with iconHtml cells.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var ld = [];
var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
for (var i=0, t; i<1000; i++)
{
t=Math.round(Math.random()*4);
ld.push({ name : { html : "E-Mail " + i, icon : "icon/16/email.png", iconWidth : 16, iconHeight : 16 }, size : { text : Math.round(Math.random()*100) + "kb" }, type : { text : lt[t] }, modified : { text : "Nov " + Math.round(Math.random() * 30 + 1) + " 2005" }, rights: { text : "-rw-r--r--" }, open : { uri : "http://www.google.com/search?q=" + i, html : "Open " + i }});
};
var lc =
{
name : { label : "Name", width : 120, type : "iconHtml" },
size: { label : "Size", width : 50, type : "text", align : "right" },
type : { label : "Type", width : 80, type : "text" },
modified : { label : "Last Modified", width : 150, type : "text" },
rights : { label : "Rights", width: 80, type : "text" }
};
var lv = new qx.ui.listview.ListView(ld, lc);
lv.setBorder(qx.renderer.border.BorderPresets.getInstance().shadow);
lv.setBackgroundColor("white");
lv.setWidth(600);
lv.setHeight(350);
lv.setLocation(20, 48);
qx.ui.core.ClientDocument.getInstance().add(lv);
});
</script>
</body>
</html>

58
swat/apps/qooxdoo-examples/example/ListView_4.html Normal file
View File

@ -0,0 +1,58 @@
<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>Testing qx.ui.listview.ListView with text cells.</p>
<p>Added some sort handling stuff.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var ld = [];
var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
for (var i=0, t; i<1000; i++)
{
t=Math.round(Math.random()*4);
ld.push({ name : { text : "File " + i }, size : { text : Math.round(Math.random()*100) + "kb" }, type : { text : lt[t] }, modified : { text : "Nov " + Math.round(Math.random() * 30 + 1) + " 2005" }, rights: { text : "-rw-r--r--" }});
};
var lc =
{
name : { label : "Name", width : 100, type : "text", sortable : true, sortProp : "text" },
size: { label : "Size", width : 50, type : "text", sortable : true, sortProp : "text", sortMethod : qx.util.Compare.byIntegerString, align : "right" },
type : { label : "Type", width : 80, type : "text", sortable : true, sortProp : "text" },
modified : { label : "Last Modified", width : 150, type : "text" },
rights : { label : "Rights", width: 80, type : "text" }
};
var lv = new qx.ui.listview.ListView(ld, lc);
lv.setBorder(qx.renderer.border.BorderPresets.getInstance().shadow);
lv.setBackgroundColor("white");
lv.setWidth(600);
lv.setHeight(350);
lv.setLocation(20, 48);
qx.ui.core.ClientDocument.getInstance().add(lv);
// Color Themes
qx.manager.object.ColorManager.getInstance().createThemeList(qx.ui.core.ClientDocument.getInstance(), 20, 448);
});
</script>
</body>
</html>

127
swat/apps/qooxdoo-examples/example/List_1.html Normal file
View File

@ -0,0 +1,127 @@
<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>List implementation</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var l1 = new qx.ui.form.List;
l1.set({ top : 48, left: 20, height: 200, width: 150, overflow : "scrollY" });
var item;
for( var i=1; i<=35; i++ )
{
// item = new qx.ui.form.ListItem("Item No " + i);
item = new qx.ui.form.ListItem("Item No " + i, "icon/" + ((i % 4) ? "16" : "48") + "/folder.png");
!(i % 9) && (item.setEnabled(false));
l1.add(item);
};
d.add(l1);
var l2 = new qx.ui.form.List;
l2.set({ top : 48, left: 400, height: 200, width: 150 });
l2.getManager().setMultiSelection(false);
//l2.setOverflow("scrollY");
l2.setHeight("auto");
var l2l = [ "red", "violett", "rose", "blue", "green", "cyan", "magenta", "yellow", "brown", "orange", "black", "white", "grey", "gray", "brown" ];
for (var i=0; i<l2l.length; i++) {
l2.add(new qx.ui.form.ListItem(l2l[i]));
};
d.add(l2);
var c1 = new qx.ui.form.CheckBox("Enable Multi-Selection");
var c2 = new qx.ui.form.CheckBox("Enable Drag-Selection");
var c3 = new qx.ui.form.CheckBox("Allow Deselection");
var c4 = new qx.ui.form.CheckBox("Enable Inline Find");
c1.setLocation(180, 48);
c2.setLocation(180, 68);
c3.setLocation(180, 88);
c4.setLocation(180, 108);
d.add(c1, c2, c3, c4);
c1.setChecked(true);
c2.setChecked(true);
c3.setChecked(true);
c4.setChecked(true);
c1.addEventListener("changeChecked", function(e) {
l1.getManager().setMultiSelection(e.getData());
});
c2.addEventListener("changeChecked", function(e) {
l1.getManager().setDragSelection(e.getData());
});
c3.addEventListener("changeChecked", function(e) {
l1.getManager().setCanDeselect(e.getData());
});
c4.addEventListener("changeChecked", function(e) {
l1.setEnableInlineFind(e.getData());
});
var rd1 = new qx.ui.form.RadioButton("Show Label", "label");
var rd2 = new qx.ui.form.RadioButton("Show Icon", "icon");
var rd3 = new qx.ui.form.RadioButton("Show Both", "both");
rd1.set( { left: 180, top: 128 } );
rd2.set( { left: 180, top: 148 } );
rd3.set( { left: 180, top: 168 } );
d.add(rd1, rd2, rd3);
rd3.setChecked(true);
var rbm = new qx.manager.selection.RadioManager( name, [rd1, rd2, rd3]);
rbm.addEventListener("changeSelected", function(e)
{
for( var i=0; i<l1.getChildrenLength(); i++ ) {
l1.getChildren()[i].setShow(e.getData().getValue());
}
});
// Icon Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 400);
// Color Themes
qx.manager.object.ColorManager.getInstance().createThemeList(d, 200, 400);
});
</script>
</body>
</html>

193
swat/apps/qooxdoo-examples/example/Menu_1.html Normal file
View File

@ -0,0 +1,193 @@
<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>qx.ui.menu.Menu Implementation.</p>
<p>Added qx.client.Command support tests.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var q1 = new qx.client.Command("Ctrl+Z");
q1.addEventListener("execute", function(e) {
alert("Undo");
});
var q2 = new qx.client.Command("Ctrl+Y");
q2.addEventListener("execute", function(e) {
alert("Redo");
});
var q3 = new qx.client.Command("Ctrl+X");
q3.addEventListener("execute", function(e) {
alert("Cut");
});
var q4 = new qx.client.Command("Ctrl+C");
q4.addEventListener("execute", function(e) {
alert("Copy");
});
var q5 = new qx.client.Command("Ctrl+V");
q5.addEventListener("execute", function(e) {
alert("Paste");
});
var q6 = new qx.client.Command("Del");
q6.addEventListener("execute", function(e) {
alert("Delete");
});
var q7 = new qx.client.Command("Ctrl+A");
q7.addEventListener("execute", function(e) {
alert("Select All");
});
var q8 = new qx.client.Command("Ctrl+F");
q8.addEventListener("execute", function(e) {
alert("Search");
});
var q9 = new qx.client.Command("Ctrl+G");
q9.addEventListener("execute", function(e) {
alert("Search Again");
});
var q10 = new qx.client.Command();
q10.addEventListener("execute", function(e) {
alert("Syntax Highlighting");
});
var q11 = new qx.client.Command("Esc");
q11.addEventListener("execute", function(e) {
alert("Escape");
});
var q12 = new qx.client.Command(null, qx.event.type.KeyEvent.keys.space);
q12.addEventListener("execute", function(e) {
alert("Space");
});
var m2 = new qx.ui.menu.Menu;
var mb2_01 = new qx.ui.menu.MenuButton("New Window");
var mb2_02 = new qx.ui.menu.MenuButton("Overlapping");
var mb2_03 = new qx.ui.menu.MenuButton("Split Vertical");
var mb2_04 = new qx.ui.menu.MenuButton("Split Horizontal");
var mb2_05 = new qx.ui.menu.MenuButton("Next Window");
var mb2_06 = new qx.ui.menu.MenuButton("Previous Window");
m2.add(mb2_01, mb2_02, mb2_03, mb2_04, mb2_05, mb2_06);
var m3 = new qx.ui.menu.Menu;
var mb3_01 = new qx.ui.menu.MenuButton("Tahoma, 11pt");
var mb3_02 = new qx.ui.menu.MenuButton("Tahoma, 12pt");
var mb3_03 = new qx.ui.menu.MenuButton("Tahoma, 13pt");
var mb3_04 = new qx.ui.menu.MenuButton("Tahoma, 14pt");
var mb3_05 = new qx.ui.menu.MenuButton("Tahoma, 15pt");
m3.add(mb3_01, mb3_02, mb3_03, mb3_04, mb3_05);
var m1 = new qx.ui.menu.Menu;
var mb1_01 = new qx.ui.menu.MenuButton("View/Lists", null, q12);
var mb1_02 = new qx.ui.menu.MenuButton("Syntax Highlighting", null, q10);
var ms1 = new qx.ui.menu.MenuSeparator();
var mb1_03 = new qx.ui.menu.MenuButton("Window Font", null, q11);
var mb1_04 = new qx.ui.menu.MenuButton("Printer Font", null, null, m3);
var ms2 = new qx.ui.menu.MenuSeparator();
var mb1_05 = new qx.ui.menu.MenuButton("Undo", null, q1);
var mb1_06 = new qx.ui.menu.MenuButton("Redo", null, q2);
var ms3 = new qx.ui.menu.MenuSeparator();
var mb1_07 = new qx.ui.menu.MenuButton("Cut", "icon/16/edit-cut.png", q3);
var mb1_08 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png", q4);
var mb1_09 = new qx.ui.menu.MenuButton("Paste", "icon/16/edit-paste.png", q5);
var mb1_10 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png", q6);
var mb1_11 = new qx.ui.menu.MenuButton("Select All", null, q7);
var ms4 = new qx.ui.menu.MenuSeparator();
var mb1_12 = new qx.ui.menu.MenuButton("Search", null, q8);
var mb1_13 = new qx.ui.menu.MenuButton("Search Again", null, q9);
var ms5 = new qx.ui.menu.MenuSeparator();
var mb1_14 = new qx.ui.menu.MenuButton("View", null, null, m2);
var mb1_15 = new qx.ui.menu.MenuButton("Editor Settings...");
var mb1_16 = new qx.ui.menu.MenuButton("Editor Plugins");
var mb1_17 = new qx.ui.menu.MenuButton("Framework Settings");
m1.add(mb1_01, mb1_02, ms1, mb1_03, mb1_04, ms2, mb1_05, mb1_06, ms3, mb1_07, mb1_08, mb1_09, mb1_10, mb1_11, ms4, mb1_12, mb1_13, ms5, mb1_14, mb1_15, mb1_16, mb1_17);
d.add(m1, m2, m3);
var w1 = new qx.ui.form.Button("Open");
w1.setTop(48);
w1.setLeft(20);
w1.addEventListener("click", function(e)
{
if (m1.isSeeable())
{
m1.hide();
}
else
{
var el = this.getElement();
m1.setLeft(qx.dom.DomLocation.getPageBoxLeft(el));
m1.setTop(qx.dom.DomLocation.getPageBoxBottom(el));
m1.show();
};
e.setPropagationStopped(true);
});
w1.addEventListener("mousedown", function(e)
{
e.setPropagationStopped(true);
});
d.add(w1);
// Icon Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 180, 48);
// Color Themes
qx.manager.object.ColorManager.getInstance().createThemeList(d, 380, 48);
});
</script>
</body>
</html>

190
swat/apps/qooxdoo-examples/example/NativeWindow_1.html Normal file
View File

@ -0,0 +1,190 @@
<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>Native Windows. Could be understood as an enhanced window.open with some additional options like to create modal windows.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var w1 = new qx.client.NativeWindow("http://www.google.com");
w1.setDimension(600, 400);
var d = qx.ui.core.ClientDocument.getInstance();
var btn1 = new qx.ui.form.Button("Open Native Window", "icon/16/appearance.png");
with(btn1)
{
setTop(48);
setLeft(20);
addEventListener("click", function() { w1.open(); } );
};
d.add(btn1);
var l = new qx.ui.layout.VerticalBoxLayout;
l.setLocation(20, 96);
l.setWidth("auto");
l.setHeight("auto");
d.add(l);
var fs1 = new qx.ui.groupbox.GroupBox("Initial Settings");
fs1.setHeight("auto");
l.add(fs1);
var chk1 = new qx.ui.form.CheckBox("Resizeable");
chk1.setLocation(0, 0);
chk1.setChecked(true);
chk1.addEventListener("changeChecked", function(e) {
w1.setResizeable(e.getData());
});
var chk2 = new qx.ui.form.CheckBox("Show Statusbar");
chk2.setLocation(0, 20);
chk2.setChecked(false);
chk2.addEventListener("changeChecked", function(e) {
w1.setShowStatusbar(e.getData());
});
var chk3 = new qx.ui.form.CheckBox("Show Menubar");
chk3.setLocation(0, 40);
chk3.setChecked(false);
chk3.addEventListener("changeChecked", function(e) {
w1.setShowMenubar(e.getData());
});
var chk4 = new qx.ui.form.CheckBox("Show Location");
chk4.setLocation(0, 60);
chk4.setChecked(false);
chk4.addEventListener("changeChecked", function(e) {
w1.setShowLocation(e.getData());
});
var chk5 = new qx.ui.form.CheckBox("Show Toolbar");
chk5.setLocation(0, 80);
chk5.setChecked(false);
chk5.addEventListener("changeChecked", function(e) {
w1.setShowToolbar(e.getData());
});
var chk6 = new qx.ui.form.CheckBox("Allow Scrollbars");
chk6.setLocation(0, 100);
chk6.setChecked(true);
chk6.addEventListener("changeChecked", function(e) {
w1.setAllowScrollbars(e.getData());
});
var chk7 = new qx.ui.form.CheckBox("Modal");
chk7.setLocation(0, 120);
chk7.setChecked(false);
chk7.addEventListener("changeChecked", function(e) {
w1.setModal(e.getData());
});
var chk8 = new qx.ui.form.CheckBox("Dependent");
chk8.setLocation(0, 140);
chk8.setChecked(true);
chk8.addEventListener("changeChecked", function(e) {
w1.setDependent(e.getData());
});
fs1.add(chk1, chk2, chk3, chk4, chk5, chk6, chk7, chk8);
var fs2 = new qx.ui.groupbox.GroupBox("Runtime Settings");
fs2.setHeight("auto");
l.add(fs2);
var tf1 = new qx.ui.form.TextField("http://www.google.com");
tf1.setLocation(0, 2);
tf1.setWidth(150);
var btn1 = new qx.ui.form.Button("Set Url", "icon/16/button-ok.png");
btn1.setLocation(155, 0);
btn1.addEventListener("click", function() {
w1.setUrl(tf1.getValue());
});
var tf2 = new qx.ui.form.TextField("600");
tf2.setLocation(0, 42);
tf2.setWidth(50);
var btn2 = new qx.ui.form.Button("Set Width", "icon/16/button-ok.png");
btn2.setLocation(55, 40);
btn2.addEventListener("click", function() {
w1.setWidth(parseInt(tf2.getValue()));
});
var tf3 = new qx.ui.form.TextField("400");
tf3.setLocation(0, 72);
tf3.setWidth(50);
var btn3 = new qx.ui.form.Button("Set Height", "icon/16/button-ok.png");
btn3.setLocation(55, 70);
btn3.addEventListener("click", function() {
w1.setHeight(parseInt(tf3.getValue()));
});
var btn4 = new qx.ui.form.Button("Center to screen", "icon/16/paint.png");
btn4.setLocation(0, 110);
btn4.addEventListener("click", function() {
w1.centerToScreen()
});
var btn5 = new qx.ui.form.Button("Center to screen area", "icon/16/paint.png");
btn5.setLocation(0, 140);
btn5.addEventListener("click", function() {
w1.centerToScreenArea()
});
var btn6 = new qx.ui.form.Button("Center to opener", "icon/16/paint.png");
btn6.setLocation(0, 170);
btn6.addEventListener("click", function() {
w1.centerToOpener()
});
fs2.add(tf1, btn1, tf2, btn2, tf3, btn3, btn4, btn5, btn6);
});
</script>
</body>
</html>

114
swat/apps/qooxdoo-examples/example/RadioButton_1.html Normal file
View File

@ -0,0 +1,114 @@
<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>Tests for qx.ui.form.RadioButton. qx.ui.form.RadioButton extends qx.ui.basic.Atom and so it inherits all the options and properties defined there.</p>
<p>To group multiple QxRadioButtons you must define a instance of qx.manager.selection.RadioManager and add them to this new instance. All QxRadioButtons assigned to the same group make sure that only one of them is checked at the same time.</p>
<p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var rb1 = new qx.ui.form.RadioButton("Option #1", "rb1");
with(rb1)
{
setTop(80);
setLeft(20);
};
d.add(rb1);
var rb2 = new qx.ui.form.RadioButton("Option #2", "rb2");
with(rb2)
{
setTop(110);
setLeft(20);
};
d.add(rb2);
rb2.setChecked(true);
var rb3 = new qx.ui.form.RadioButton("Top RadioButton", "rb3");
with(rb3)
{
setTop(160);
setLeft(20);
setIconPosition("top");
};
d.add(rb3);
var rb4 = new qx.ui.form.RadioButton("Bottom RadioButton", "rb4");
with(rb4)
{
setTop(160);
setLeft(160);
setIconPosition("bottom");
};
d.add(rb4);
var rb5 = new qx.ui.form.RadioButton("Left RadioButton", "rb5");
with(rb5)
{
setTop(220);
setLeft(20);
setIconPosition("left");
};
d.add(rb5);
var rb6 = new qx.ui.form.RadioButton("Right RadioButton", "rb6");
with(rb6)
{
setTop(220);
setLeft(160);
setIconPosition("right");
};
d.add(rb6);
var rb7 = new qx.ui.form.RadioButton(null, "rb7");
with(rb7)
{
setTop(280);
setLeft(20);
};
d.add(rb7);
var rg1 = new qx.manager.selection.RadioManager("mygroup", [rb1, rb2, rb3, rb4, rb5, rb6, rb7]);
var linfo = new qx.ui.basic.Atom("Current Value: \"" + rg1.getSelected().getLabel() + "\" (" + rg1.getSelected().getValue() + ")", "icon/16/forward.png");
with(linfo)
{
setBorder(qx.renderer.border.BorderPresets.getInstance().black);
setPadding(2, 4);
setBackgroundColor("white");
setTop(48);
setLeft(20);
};
rg1.addEventListener("changeSelected", function(e) {
linfo.setLabel("Current Value: \"" + e.getData().getLabel() + "\" (" + e.getData().getValue() + ")");
});
d.add(linfo);
});
</script>
</body>
</html>

73
swat/apps/qooxdoo-examples/example/RepeatButton_1.html Normal file
View File

@ -0,0 +1,73 @@
<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>Test the qx.ui.form.RepeatButton constructor. qx.ui.form.RepeatButton is based on qx.ui.form.Button but adds some interval handled event mechanism.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
function buttonExecute() { this.debug("Executed: " + this.getLabel()); };
var btn1 = new qx.ui.form.RepeatButton("Repeat Button No #1");
with(btn1)
{
setTop(48);
setLeft(20);
addEventListener("execute", buttonExecute);
};
d.add(btn1);
var btn2 = new qx.ui.form.RepeatButton("Repeat Button No #2");
with(btn2)
{
setTop(48);
setLeft(160);
addEventListener("execute", buttonExecute);
setEnabled(false);
};
d.add(btn2);
var btn3 = new qx.ui.form.RepeatButton("Repeat Button No #3");
with(btn3)
{
setTop(48);
setLeft(300);
addEventListener("execute", buttonExecute);
};
d.add(btn3);
var btn4 = new qx.ui.form.RepeatButton("Repeat Button No #4", "icon/16/forward.png");
with(btn4)
{
setTop(148);
setLeft(20);
addEventListener("execute", buttonExecute);
};
d.add(btn4);
});
</script>
</body>
</html>

192
swat/apps/qooxdoo-examples/example/RpcTreeFullControl_1.html Normal file
View File

@ -0,0 +1,192 @@
<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>
Shows a tree which listens for tree events. This script communicates via
JSON-RPC to a backend server. Each time a new tree node is opened, the
children are requested from the server. See the server-side functions
at backend/php/services/qooxdoo/fs.php.
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(
function()
{
var addChildren = function(parent, children)
{
var t;
var trs;
var child;
for (i = 0; i < children.length; i++)
{
child = children[i];
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().newRow();
// Here's our indentation and tree-lines
trs.addIndent();
// If not a file or directory, change the icon
var bIsDirectory = ((child.mode & 0040000) != 0);
var bIsFile = ((child.mode & 0100000) != 0);
if (! bIsDirectory && ! bIsFile)
{
trs.addIcon("icon/16/desktop.png",
"icon/16/dictionary.png");
}
else
{
trs.addIcon();
}
// The label
trs.addLabel(child.name);
// All else should be right justified
obj = new qx.ui.basic.HorizontalSpacer;
trs.addObject(obj, true);
// Add the permissions
mode = "";
mode = ((child.mode & 0001) ? "x" : "-") + mode;
mode = ((child.mode & 0002) ? "w" : "-") + mode;
mode = ((child.mode & 0004) ? "r" : "-") + mode;
mode = ((child.mode & 0010) ? "x" : "-") + mode;
mode = ((child.mode & 0020) ? "w" : "-") + mode;
mode = ((child.mode & 0040) ? "r" : "-") + mode;
mode = ((child.mode & 0100) ? "x" : "-") + mode;
mode = ((child.mode & 0200) ? "w" : "-") + mode;
mode = ((child.mode & 0400) ? "r" : "-") + mode;
obj = new qx.ui.basic.Label(mode);
obj.setWidth(80);
obj.setStyleProperty("fontFamily", "monospace");
trs.addObject(obj, true);
// Add a file size, date and mode
obj = new qx.ui.basic.Label(child.size + "");
obj.setWidth(50);
obj.setStyleProperty("fontFamily", "monospace");
trs.addObject(obj, true);
var d = new Date();
d.setTime(child.mtime * 1000);
obj = new qx.ui.basic.Label(d.toString().slice(0,33));
obj.setWidth(200);
obj.setStyleProperty("fontFamily", "monospace");
trs.addObject(obj, true);
if (bIsDirectory)
{
t = new qx.ui.treefullcontrol.TreeFolder(trs);
}
else
{
t = new qx.ui.treefullcontrol.TreeFile(trs);
}
parent.add(t);
}
}
/*
* Reset the default of always showing the plus/minus symbol. The
* default is 'false'. We want to always display it for each folder
* (and then stop displaying it if we determine upon open that there
* are no contents).
*/
var constructor = qx.OO.classes["qx.ui.treefullcontrol.TreeFolder"];
qx.Proto = constructor.prototype;
qx.OO.changeProperty({
name : "alwaysShowPlusMinusSymbol",
type : qx.constant.Type.BOOLEAN,
defaultValue : true });
var rpc = new qx.io.remote.Rpc();
rpc.setTimeout(10000);
rpc.setUrl("/services/");
rpc.setServiceName("qooxdoo.fs");
rpc.setCrossDomain(false);
var mycall = null;
var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
var t = new qx.ui.treefullcontrol.Tree(trs);
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(700);
setBottom(48);
setHideNode(true); // hide the root node
setUseTreeLines(true); // display tree lines
};
/*
* All subtrees will use this root node's event listeners. Create an
* event listener for an open while empty.
*/
t.addEventListener(
qx.constant.Event.TREEOPENWHILEEMPTY,
function(e)
{
var parent = e.getData();
var hierarchy = parent.getHierarchy(new Array());
parent.debug("Requesting children...");
// Strip off the root node
hierarchy.shift();
mycall = rpc.callAsync(
function(result, ex, id)
{
mycall = null;
if (ex == null) {
parent.debug("Children obtained. Rendering...");
addChildren(parent, result);
parent.debug("Rendering complete.");
} else {
alert("Async(" + id + ") exception: " + ex);
}
},
"readDirEntries",
hierarchy,
true);
});
qx.ui.core.ClientDocument.getInstance().add(t);
var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sandbox");
var tf = new qx.ui.treefullcontrol.TreeFolder(trs);
t.add(tf);
});
/*
* Local Variables:
* mode: java
* End:
*/
</script>
</body>
</html>

106
swat/apps/qooxdoo-examples/example/Spinner_1.html Normal file
View File

@ -0,0 +1,106 @@
<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>Test for qx.ui.form.Spinner.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var s1 = new qx.ui.form.Spinner;
with(s1)
{
setLeft(20);
setTop(64);
};
d.add(s1);
d.add( (new qx.ui.basic.Label("100").set({left:20, top:48})) );
d.add( (new qx.ui.basic.Label("0").set({left:20, top:90})) );
var s2 = new qx.ui.form.Spinner;
with(s2)
{
setLeft(100);
setTop(64);
setValue(30);
setMin(-30);
setMax(30);
};
d.add(s2);
d.add( (new qx.ui.basic.Label("30").set({left:100, top:48})) );
d.add( (new qx.ui.basic.Label("-30").set({left:100, top:90})) );
var s3 = new qx.ui.form.Spinner;
with(s3)
{
setLeft(180);
setTop(64);
setValue(0);
setMin(-3000);
setMax(3000);
};
d.add(s3);
d.add( (new qx.ui.basic.Label("3000").set({left:180, top:48})) );
d.add( (new qx.ui.basic.Label("-3000").set({left:180, top:90})) );
/*
s3._manager.addEventListener("changeValue", function(e) {
this.debug("Value: " + e.getData());
});
*/
var s4 = new qx.ui.form.Spinner;
with(s4)
{
setLeft(260);
setTop(64);
setValue(0);
setMin(100);
setMax(200);
};
d.add(s4);
d.add( (new qx.ui.basic.Label("200").set({left:260, top:48})) );
d.add( (new qx.ui.basic.Label("100").set({left:260, top:90})) );
var s5 = new qx.ui.form.Spinner( -200, null, -100);
with(s5)
{
setLeft(340);
setTop(64);
};
d.add(s5);
d.add( (new qx.ui.basic.Label("-100").set({left:340, top:48})) );
d.add( (new qx.ui.basic.Label("-200").set({left:340, top:90})) );
});
</script>
</body>
</html>

70
swat/apps/qooxdoo-examples/example/SplitPane_1.html Normal file
View File

@ -0,0 +1,70 @@
<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>Test for Splitpane functionality.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var frame = new qx.ui.layout.CanvasLayout;
frame.setLocation(20, 48);
frame.setBottom(48);
frame.setRight(300);
frame.setBackgroundColor("#134275");
frame.setPadding(20);
frame.addToDocument();
// the splitpane itself
var splitpane = new qx.ui.splitpane.HorizontalSplitPane("1*", "2*");
splitpane.setEdge(0);
frame.add(splitpane);
// left Widget
var leftWidget = new qx.ui.form.TextArea("LeftWidget");
leftWidget.setWrap(true);
leftWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
leftWidget.setWidth("100%");
leftWidget.setHeight("100%");
// rightWidget (another splitpane)
var rightWidget = new qx.ui.splitpane.VerticalSplitPane;
rightWidget.setHeight("100%");
rightWidget.setWidth("100%");
// add widgets to splitpane
splitpane.addLeft(leftWidget);
splitpane.addRight(rightWidget);
// right top widget
var topWidget = new qx.ui.form.TextArea("Right Top Widget");
topWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
topWidget.setHeight("100%");
topWidget.setWidth("100%");
// right bottom widget
var bottomWidget = new qx.ui.embed.Iframe("http://www.qooxdoo.org");
bottomWidget.setHeight("100%");
bottomWidget.setWidth("100%");
// add widgets to right splitpane
rightWidget.addTop(topWidget);
rightWidget.addBottom(bottomWidget);
});
</script>
</body>
</html>

72
swat/apps/qooxdoo-examples/example/SplitPane_2.html Normal file
View File

@ -0,0 +1,72 @@
<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>Test for Splitpane functionality with enabled live resize.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var frame = new qx.ui.layout.CanvasLayout;
frame.setLocation(20, 48);
frame.setBottom(48);
frame.setRight(300);
frame.setBackgroundColor("#134275");
frame.setPadding(20);
frame.addToDocument();
// the splitpane itself
var splitpane = new qx.ui.splitpane.HorizontalSplitPane("1*", "2*");
splitpane.setEdge(0);
splitpane.setLiveResize(true);
frame.add(splitpane);
// left Widget
var leftWidget = new qx.ui.form.TextArea("LeftWidget");
leftWidget.setWrap(true);
leftWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
leftWidget.setWidth("100%");
leftWidget.setHeight("100%");
// rightWidget (another splitpane)
var rightWidget = new qx.ui.splitpane.VerticalSplitPane;
rightWidget.setHeight("100%");
rightWidget.setWidth("100%");
rightWidget.setLiveResize(true);
// add widgets to splitpane
splitpane.addLeft(leftWidget);
splitpane.addRight(rightWidget);
// right top widget
var topWidget = new qx.ui.form.TextArea("Right Top Widget");
topWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
topWidget.setHeight("100%");
topWidget.setWidth("100%");
// right bottom widget
var bottomWidget = new qx.ui.embed.Iframe("http://www.qooxdoo.org");
bottomWidget.setHeight("100%");
bottomWidget.setWidth("100%");
// add widgets to right splitpane
rightWidget.addTop(topWidget);
rightWidget.addBottom(bottomWidget);
});
</script>
</body>
</html>

152
swat/apps/qooxdoo-examples/example/TabView_1.html Normal file
View File

@ -0,0 +1,152 @@
<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>Tabbar implementation.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var tf1 = new qx.ui.pageview.tabview.TabView;
tf1.set({ left: 20, top: 48, right: 335, bottom: 48 });
var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Edit");
var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Find");
var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Backup");
t1_1.setChecked(true);
tf1.getBar().add(t1_1, t1_2, t1_3);
var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
tf1.getPane().add(p1_1, p1_2, p1_3);
var f2 = new qx.ui.form.TextField("Find Anywhere");
var f3 = new qx.ui.form.TextField("Backup Input");
p1_2.add(f2);
p1_3.add(f3);
var c1 = new qx.ui.form.CheckBox("Place bar on top");
var c2 = new qx.ui.form.CheckBox("Align tabs to left");
c1.setTop(0);
c1.setChecked(true);
c2.setTop(20);
c2.setChecked(true);
p1_1.add(c1, c2);
c1.addEventListener("changeChecked", function(e) {
tf1.setPlaceBarOnTop(e.getData());
});
c2.addEventListener("changeChecked", function(e) {
tf1.setAlignTabsToLeft(e.getData());
});
var tf2 = new qx.ui.pageview.tabview.TabView;
tf2.set({ left: 0, top: 50, right: 0, bottom: 0 });
var t2_1 = new qx.ui.pageview.tabview.TabViewButton("Search for Files", "icon/16/file-open.png");
var t2_2 = new qx.ui.pageview.tabview.TabViewButton("Search the Web", "icon/16/network.png");
var t2_3 = new qx.ui.pageview.tabview.TabViewButton("Search for Text", "icon/16/contents.png");
var t2_4 = new qx.ui.pageview.tabview.TabViewButton("Search for Persons", "icon/16/emoticon.png");
var t2_5 = new qx.ui.pageview.tabview.TabViewButton("Search in Mails", "icon/16/mail.png");
t2_1.setChecked(true);
tf2.getBar().add(t2_1, t2_2, t2_3, t2_4, t2_5);
var p2_1 = new qx.ui.pageview.tabview.TabViewPage(t2_1);
var p2_2 = new qx.ui.pageview.tabview.TabViewPage(t2_2);
var p2_3 = new qx.ui.pageview.tabview.TabViewPage(t2_3);
var p2_4 = new qx.ui.pageview.tabview.TabViewPage(t2_4);
var p2_5 = new qx.ui.pageview.tabview.TabViewPage(t2_5);
tf2.getPane().add(p2_1, p2_2, p2_3, p2_4, p2_5);
var t2_1 = new qx.ui.form.TextField("Files...");
var t2_2 = new qx.ui.form.TextField("Web...");
var t2_3 = new qx.ui.form.TextField("Printers...");
var t2_4 = new qx.ui.form.TextField("Persons...");
var t2_5 = new qx.ui.form.TextField("Mails...");
t2_1.set({ top: 2, left: 0, width: 140 });
t2_2.set({ top: 2, left: 0, width: 140 });
t2_3.set({ top: 2, left: 0, width: 140 });
t2_4.set({ top: 2, left: 0, width: 140 });
t2_5.set({ top: 2, left: 0, width: 140 });
p2_1.add(t2_1);
p2_2.add(t2_2);
p2_3.add(t2_3);
p2_4.add(t2_4);
p2_5.add(t2_5);
var b2_1 = new qx.ui.form.Button("Search", "icon/16/search.png");
var b2_2 = new qx.ui.form.Button("Search", "icon/16/search.png");
var b2_3 = new qx.ui.form.Button("Search", "icon/16/search.png");
var b2_4 = new qx.ui.form.Button("Search", "icon/16/search.png");
var b2_5 = new qx.ui.form.Button("Search", "icon/16/search.png");
b2_1.set({ top: 0, left: 150 });
b2_2.set({ top: 0, left: 150 });
b2_3.set({ top: 0, left: 150 });
b2_4.set({ top: 0, left: 150 });
b2_5.set({ top: 0, left: 150 });
p2_1.add(b2_1);
p2_2.add(b2_2);
p2_3.add(b2_3);
p2_4.add(b2_4);
p2_5.add(b2_5);
function dosearch(e) {
alert("Searching...");
};
b2_1.addEventListener("click", dosearch);
b2_2.addEventListener("click", dosearch);
b2_3.addEventListener("click", dosearch);
b2_4.addEventListener("click", dosearch);
b2_5.addEventListener("click", dosearch);
p1_2.add(tf2);
d.add(tf1);
});
</script>
</body>
</html>

127
swat/apps/qooxdoo-examples/example/TabView_2.html Normal file
View File

@ -0,0 +1,127 @@
<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>Tabbar implementation.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var tf1 = new qx.ui.pageview.tabview.TabView;
tf1.set({ left: 20, top: 48, right: 335, bottom: 48 });
var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Edit");
var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Find");
var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Backup");
var t1_4 = new qx.ui.pageview.tabview.TabViewButton("System");
var t1_5 = new qx.ui.pageview.tabview.TabViewButton("Tools");
var t1_6 = new qx.ui.pageview.tabview.TabViewButton("Infos");
// set tab 1 active
t1_1.setChecked(true);
// add close images to tab
t1_1.setShowCloseButton(true);
t1_2.setShowCloseButton(true);
t1_3.setShowCloseButton(true);
t1_4.setShowCloseButton(true);
t1_5.setShowCloseButton(true);
t1_6.setShowCloseButton(true);
// modify the default images
t1_2.setCloseButtonImage("icon/16/error.png");
t1_4.setCloseButtonImage("icon/16/apply.png");
// add an eventlistener on the buttons
t1_1.addEventListener("closetab", _ontabclose);
t1_2.addEventListener("closetab", _ontabclose);
t1_3.addEventListener("closetab", _ontabclose);
t1_4.addEventListener("closetab", _ontabclose);
t1_5.addEventListener("closetab", _ontabclose);
t1_6.addEventListener("closetab", _ontabclose);
// this handler gets called if a tab-button fires a "closetab" event
function _ontabclose(e){
var btn = e.getData();
var pagesArray = tf1.getPane().getChildren();
var pageSearched = null;
for(var i = 0, l = pagesArray.length; i < l; i++){
var tmpPage = pagesArray[i];
if(tmpPage.getButton() === btn){
pageSearched = tmpPage;
}
}
if(pageSearched){
var itemsList = tf1.getBar().getChildren();
var lengthList = itemsList.length;
var btnIndex = itemsList.indexOf(btn);
// never remove the last tab
if( lengthList > 1 ) {
// Select another tab
if (btnIndex < lengthList-1 ){
itemsList[btnIndex+1].setChecked(true);
}
else {
itemsList[btnIndex-1].setChecked(true);
}
btn.getManager().remove(btn);
tf1.getBar().remove(btn);
tf1.getPane().remove(pageSearched);
pageSearched.dispose();
btn.dispose();
} else {
alert("Last Tab won't be removed!");
}
}
e.stopPropagation();
}
tf1.getBar().add(t1_1, t1_2, t1_3, t1_4, t1_5, t1_6);
var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
var p1_4 = new qx.ui.pageview.tabview.TabViewPage(t1_4);
var p1_5 = new qx.ui.pageview.tabview.TabViewPage(t1_5);
var p1_6 = new qx.ui.pageview.tabview.TabViewPage(t1_6);
p1_1.setBackgroundColor("green");
p1_2.setBackgroundColor("red");
p1_3.setBackgroundColor("blue");
p1_4.setBackgroundColor("black");
p1_5.setBackgroundColor("yellow");
p1_6.setBackgroundColor("orange");
tf1.getPane().add(p1_1, p1_2, p1_3, p1_4, p1_5, p1_6);
d.add(tf1);
});
</script>
</body>
</html>

52
swat/apps/qooxdoo-examples/example/Table_1.html Normal file
View File

@ -0,0 +1,52 @@
<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>A table with virtual scrolling, model-view-controller, renderers,
fixed columns, editing, sorting, column resizing, column reordering,
column hiding.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
// table model
var tableModel = new qx.ui.table.SimpleTableModel();
tableModel.setColumns([ "ID", "A number", "A date", "Boolean test" ]);
var rowData = [];
var now = new Date().getTime();
var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
for (var row = 0; row < 100; row++) {
var date = new Date(now + Math.random() * dateRange - dateRange / 2);
rowData.push([ row, Math.random() * 10000, date, (Math.random() > 0.5) ]);
}
tableModel.setData(rowData);
tableModel.setColumnEditable(1, true);
tableModel.setColumnEditable(2, true);
// table
var table = new qx.ui.table.Table(tableModel);
with (table) {
set({ left:10, top:30, right:300, bottom:30 });
setMetaColumnCounts([1, -1]);
getSelectionModel().setSelectionMode(qx.ui.table.SelectionModel.MULTIPLE_INTERVAL_SELECTION);
getTableColumnModel().setDataCellRenderer(3, new qx.ui.table.BooleanDataCellRenderer());
};
d.add(table);
});
</script>
</body>
</html>

252
swat/apps/qooxdoo-examples/example/ToolBar_1.html Normal file
View File

@ -0,0 +1,252 @@
<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>Introduce all classes needed for creating real qx.ui.toolbar.ToolBars. This includes qx.ui.toolbar.ToolBars,
qx.ui.toolbar.ToolBarParts, qx.ui.toolbar.ToolBarSeparator and qx.ui.toolbar.ToolBarButtons.</p>
<p>The qx.ui.toolbar.ToolBarButtons and QxRadioButtons in this example are beautifully
decoupled by "global" qx.event.type.DataEvent.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var tb = new qx.ui.toolbar.ToolBar;
with(tb)
{
setTop(48);
setLeft(20);
setRight(335);
// setWidth("auto");
};
var btns1 = [
{ type : "button", icon : "file-new", text : "New" },
{ type : "separator" },
{ type : "button", icon : "edit-copy", text : "Copy" },
{ type : "button", icon : "edit-cut", text : "Cut" },
{ type : "button", icon : "edit-paste", text : "Paste" }
];
var btns2 = [
{ type : "button", icon : "up", text : "Upload" },
{ type : "button", icon : "down", text : "Download" }
];
var btns3 = [
{ type : "button", icon : "help", text : "Help" }
];
var bars = [ btns1, btns2, btns3 ];
function changeLayout(e) {
this.setShow(e.getData());
};
function changeSize(e) {
var v = e.getData();
var o = v == 22 ? 32 : 22;
this.setIcon(this.getIcon().replace(o, v));
};
function buttonExecute() { this.debug("Executed: " + this.getLabel()); };
var useParts = true;
for (var j=0; j<bars.length; j++)
{
var btns = bars[j];
if (useParts) {
var tbp = new qx.ui.toolbar.ToolBarPart;
};
for (var i=0; i<btns.length; i++)
{
var btn = btns[i];
switch(btn.type)
{
case "separator":
var o = new qx.ui.toolbar.ToolBarSeparator;
break;
case "button":
var o = new qx.ui.toolbar.ToolBarButton(btn.text, "icon/22/" + btn.icon + ".png");
// beautiful decoupling: toolbar buttons don't know about radio boxes
d.addEventListener("changeLayout", changeLayout, o);
d.addEventListener("changeSize", changeSize, o);
o.addEventListener("execute", buttonExecute);
break;
};
if (useParts)
{
tbp.add(o);
}
else
{
tb.add(o);
};
};
if (useParts) {
tb.add(tbp);
};
};
d.add(tb);
var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
with(rd1)
{
setTop(140);
setLeft(20);
setChecked(true);
};
with(rd2)
{
setTop(160);
setLeft(20);
};
with(rd3)
{
setTop(180);
setLeft(20);
};
var rbm = new qx.manager.selection.RadioManager();
rbm.add(rd1);
rbm.add(rd2);
rbm.add(rd3);
// beautiful decoupling: radio boxes don't know about toolbar buttons
rbm.addEventListener("changeSelected", function(e) {
d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
});
d.add(rd1, rd2, rd3);
// Alignment
var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
var ra2 = new qx.ui.form.RadioButton("Centered", "center");
var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
with(ra1)
{
setTop(140);
setLeft(220);
setChecked(true);
};
with(ra2)
{
setTop(160);
setLeft(220);
};
with(ra3)
{
setTop(180);
setLeft(220);
};
var ram = new qx.manager.selection.RadioManager();
ram.add(ra1);
ram.add(ra2);
ram.add(ra3);
d.add(ra1, ra2, ra3);
ram.addEventListener("changeSelected", function(e) {
tb.setHorizontalChildrenAlign(e.getData().getValue());
});
// Icon Sizes
var b3 = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
with(b3)
{
setTop(140);
setLeft(420);
setHorizontalAlign("center");
};
b3.addEventListener("execute", function(e) {
d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
});
var b4 = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
with(b4)
{
setTop(170);
setLeft(420);
setHorizontalAlign("center");
};
b4.addEventListener("execute", function(e) {
d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
});
d.add(b3, b4);
// Icon & Color Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
/*
Test for cloning support
tb2 = tb.clone(true);
tb2.setTop(400);
*/
});
</script>
</body>
</html>

269
swat/apps/qooxdoo-examples/example/ToolBar_2.html Normal file
View File

@ -0,0 +1,269 @@
<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>Introducing qx.ui.toolbar.ToolBarCheckBox and qx.ui.toolbar.ToolBarRadioButton.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
function changeLayout(e) {
this.setShow(e.getData());
};
function changeSize(e) {
var v = e.getData();
var o = v == 22 ? 32 : 22;
this.setIcon(this.getIcon().replace(o, v));
};
var tb = new qx.ui.toolbar.ToolBar;
with(tb)
{
setTop(48);
setLeft(20);
setRight(335);
setParent(d);
};
var tbp1 = new qx.ui.toolbar.ToolBarPart;
tb.add(tbp1);
var tbp2 = new qx.ui.toolbar.ToolBarPart;
tb.add(tbp2);
var tbp3 = new qx.ui.toolbar.ToolBarPart;
tb.add(tbp3);
var tbp4 = new qx.ui.toolbar.ToolBarPart;
tb.add(tbp4);
// Default
var tbd1 = new qx.ui.toolbar.ToolBarButton("Default", "icon/22/file-new.png");
tbp1.add(tbd1);
d.addEventListener("changeLayout", changeLayout, tbd1);
d.addEventListener("changeSize", changeSize, tbd1);
tbd1._marker = true;
tbp1.setDisplay(false);
tbd1.setDisplay(false);
// Checkbox
var tbc1 = new qx.ui.toolbar.ToolBarCheckBox("Check", "icon/22/configure.png", true);
tbp2.add(tbc1);
d.addEventListener("changeLayout", changeLayout, tbc1);
d.addEventListener("changeSize", changeSize, tbc1);
// Radio
var tbr1 = new qx.ui.toolbar.ToolBarRadioButton("Radio1", "icon/22/view-choose.png");
tbp3.add(tbr1);
d.addEventListener("changeLayout", changeLayout, tbr1);
d.addEventListener("changeSize", changeSize, tbr1);
var tbr2 = new qx.ui.toolbar.ToolBarRadioButton("Radio2", "icon/22/view-detailed.png", true);
tbp3.add(tbr2);
d.addEventListener("changeLayout", changeLayout, tbr2);
d.addEventListener("changeSize", changeSize, tbr2);
var tbr3 = new qx.ui.toolbar.ToolBarRadioButton("Radio3", "icon/22/view-icon.png");
tbp3.add(tbr3);
d.addEventListener("changeLayout", changeLayout, tbr3);
d.addEventListener("changeSize", changeSize, tbr3);
// Radio Mananger
var tbr_manager = new qx.manager.selection.RadioManager(null, [tbr1, tbr2, tbr3]);
// Radio
var tbs1 = new qx.ui.toolbar.ToolBarRadioButton("Radio1", "icon/22/view-choose.png");
tbp4.add(tbs1);
tbs1.setDisableUncheck(true);
d.addEventListener("changeLayout", changeLayout, tbs1);
d.addEventListener("changeSize", changeSize, tbs1);
var tbs2 = new qx.ui.toolbar.ToolBarRadioButton("Radio2", "icon/22/view-detailed.png", true);
tbp4.add(tbs2);
tbs2.setDisableUncheck(true);
d.addEventListener("changeLayout", changeLayout, tbs2);
d.addEventListener("changeSize", changeSize, tbs2);
var tbs3 = new qx.ui.toolbar.ToolBarRadioButton("Radio3", "icon/22/view-icon.png");
tbp4.add(tbs3);
tbs3.setDisableUncheck(true);
d.addEventListener("changeLayout", changeLayout, tbs3);
d.addEventListener("changeSize", changeSize, tbs3);
// Radio Mananger
var tbs_manager = new qx.manager.selection.RadioManager(null, [tbs1, tbs2, tbs3]);
var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
with(rd1)
{
setTop(140);
setLeft(20);
};
with(rd2)
{
setTop(160);
setLeft(20);
};
with(rd3)
{
setTop(180);
setLeft(20);
};
var rbm = new qx.manager.selection.RadioManager();
rbm.add(rd1);
rbm.add(rd2);
rbm.add(rd3);
// beautiful decoupling: radio boxes don't know about toolbar buttons
rbm.addEventListener("changeSelected", function(e)
{
d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
});
d.add(rd1, rd2, rd3);
// apply default layout
rd1.setChecked(true);
// Alignment
var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
var ra2 = new qx.ui.form.RadioButton("Centered", "center");
var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
with(ra1)
{
setTop(140);
setLeft(220);
setChecked(true);
};
with(ra2)
{
setTop(160);
setLeft(220);
};
with(ra3)
{
setTop(180);
setLeft(220);
};
var ram = new qx.manager.selection.RadioManager();
ram.add(ra1);
ram.add(ra2);
ram.add(ra3);
d.add(ra1, ra2, ra3);
ram.addEventListener("changeSelected", function(e) {
tb.setHorizontalChildrenAlign(e.getData().getValue());
});
// Icon Sizes
var b3 = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
with(b3)
{
setTop(140);
setLeft(420);
setHorizontalAlign("center");
};
b3.addEventListener("execute", function(e) {
d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
});
var b4 = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
with(b4)
{
setTop(170);
setLeft(420);
setHorizontalAlign("center");
};
b4.addEventListener("execute", function(e) {
d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
});
d.add(b3, b4);
var chkShowBtn1 = new qx.ui.form.CheckBox("Show First Button");
chkShowBtn1.setLocation(20, 500);
chkShowBtn1.addEventListener("changeChecked", function(e) {
tbd1.setDisplay(e.getData());
});
var chkShowPart1 = new qx.ui.form.CheckBox("Show First Part");
chkShowPart1.setLocation(220, 500);
chkShowPart1.addEventListener("changeChecked", function(e) {
tbp1.setDisplay(e.getData());
});
d.add(chkShowBtn1, chkShowPart1);
// Icon & Color Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
});
</script>
</body>
</html>

184
swat/apps/qooxdoo-examples/example/ToolBar_3.html Normal file
View File

@ -0,0 +1,184 @@
<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>Again a nice example which shows how to use qx.ui.toolbar.ToolBar as a menubar system.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var c1 = new qx.client.Command();
c1.addEventListener("execute", function(e) {
this.debug("Execute: " + e.getData().getLabel());
});
var m1 = new qx.ui.menu.Menu;
var mb1_01 = new qx.ui.menu.MenuButton("New", null, c1);
var mb1_02 = new qx.ui.menu.MenuButton("Open", null, c1);
var mb1_03 = new qx.ui.menu.MenuButton("Save", null, c1);
var mb1_04 = new qx.ui.menu.MenuButton("Save as", null, c1);
var mb1_05 = new qx.ui.menu.MenuButton("Close", null, c1);
var mb1_06 = new qx.ui.menu.MenuButton("Restore last saved", null, c1);
m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
var m2 = new qx.ui.menu.Menu;
var mb2_01 = new qx.ui.menu.MenuButton("Undo", null, c1);
var mb2_02 = new qx.ui.menu.MenuButton("Redo", null, c1);
var mb2_b1 = new qx.ui.menu.MenuSeparator();
var mb2_03 = new qx.ui.menu.MenuButton("Cut", "icon/16/edit-cut.png", c1);
var mb2_04 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png", c1);
var mb2_05 = new qx.ui.menu.MenuButton("Paste", "icon/16/edit-paste.png", c1);
var mb2_06 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png", c1);
var mb2_b2 = new qx.ui.menu.MenuSeparator();
var mb2_07 = new qx.ui.menu.MenuButton("Select All", null, c1);
var mb2_08 = new qx.ui.menu.MenuButton("Find", null, c1);
var mb2_09 = new qx.ui.menu.MenuButton("Find Again", null, c1);
mb2_05.setEnabled(false);
mb2_06.setEnabled(false);
mb2_09.setEnabled(false);
m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05, mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
var m3 = new qx.ui.menu.Menu;
var m3_suba = new qx.ui.menu.Menu;
var m3_subb = new qx.ui.menu.Menu;
var m3_subc = new qx.ui.menu.Menu;
var m3_subd = new qx.ui.menu.Menu;
var mb3_01 = new qx.ui.menu.MenuCheckBox("File List", c1, false);
var mb3_02 = new qx.ui.menu.MenuCheckBox("Syntax Highlighting", c1, true);
var mb3_03 = new qx.ui.menu.MenuCheckBox("Statusbar", c1, true);
var mb3_b1 = new qx.ui.menu.MenuSeparator();
var mb3_04 = new qx.ui.menu.MenuButton("Printer Font", null, null, m3_suba);
var mb3_05 = new qx.ui.menu.MenuButton("Editor Font", null, null, m3_subb);
var mb3_06 = new qx.ui.menu.MenuButton("Export Font", null, null, m3_subc);
var mb3_b2 = new qx.ui.menu.MenuSeparator();
var mb3_07 = new qx.ui.menu.MenuButton("Advanced", null, null, m3_subd);
m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05, mb3_06, mb3_b2, mb3_07);
var mb3_suba_01 = new qx.ui.menu.MenuButton("Tahoma, 11pt", null, c1);
var mb3_suba_02 = new qx.ui.menu.MenuButton("Tahoma, 12pt", null, c1);
var mb3_suba_03 = new qx.ui.menu.MenuButton("Tahoma, 13pt", null, c1);
var mb3_suba_04 = new qx.ui.menu.MenuButton("Tahoma, 14pt", null, c1);
var mb3_suba_05 = new qx.ui.menu.MenuButton("Tahoma, 15pt", null, c1);
m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03, mb3_suba_04, mb3_suba_05);
var mb3_subb_01 = new qx.ui.menu.MenuButton("Verdana, 11pt", null, c1);
var mb3_subb_02 = new qx.ui.menu.MenuButton("Verdana, 12pt", null, c1);
var mb3_subb_03 = new qx.ui.menu.MenuButton("Verdana, 13pt", null, c1);
var mb3_subb_04 = new qx.ui.menu.MenuButton("Verdana, 14pt", null, c1);
var mb3_subb_05 = new qx.ui.menu.MenuButton("Verdana, 15pt", null, c1);
m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03, mb3_subb_04, mb3_subb_05);
var mb3_subc_01 = new qx.ui.menu.MenuButton("Courier, 11pt", null, c1);
var mb3_subc_02 = new qx.ui.menu.MenuButton("Courier, 12pt", null, c1);
var mb3_subc_03 = new qx.ui.menu.MenuButton("Courier, 13pt", null, c1);
var mb3_subc_04 = new qx.ui.menu.MenuButton("Courier, 14pt", null, c1);
var mb3_subc_05 = new qx.ui.menu.MenuButton("Courier, 15pt", null, c1);
m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03, mb3_subc_04, mb3_subc_05);
var mb3_subd_02_suba = new qx.ui.menu.Menu();
var mb3_subd_02_suba_01 = new qx.ui.menu.MenuButton("First", null, c1);
var mb3_subd_02_suba_02 = new qx.ui.menu.MenuButton("Second", null, c1);
var mb3_subd_02_suba_03 = new qx.ui.menu.MenuButton("Third", null, c1);
mb3_subd_02_suba.add(mb3_subd_02_suba_01, mb3_subd_02_suba_02, mb3_subd_02_suba_03);
var mb3_subd_01 = new qx.ui.menu.MenuButton("First", null, c1);
var mb3_subd_02 = new qx.ui.menu.MenuButton("Second", null, c1, mb3_subd_02_suba);
var mb3_subd_03 = new qx.ui.menu.MenuButton("Third", null, c1);
m3_subd.add(mb3_subd_01, mb3_subd_02, mb3_subd_03);
var m4 = new qx.ui.menu.Menu;
var m4_suba = new qx.ui.menu.Menu;
var mb4_01 = new qx.ui.menu.MenuButton("View", null, c1, m4_suba);
var mb4_b1 = new qx.ui.menu.MenuSeparator();
var mb4_02 = new qx.ui.menu.MenuButton("Editor Preferences...", null, c1);
var mb4_03 = new qx.ui.menu.MenuButton("Editor Extensions", null, c1);
var mb4_04 = new qx.ui.menu.MenuButton("Framework Preferences", null, c1);
m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
var mb4_suba_01 = new qx.ui.menu.MenuButton("New Window", null, c1);
var mb4_suba_b1 = new qx.ui.menu.MenuSeparator();
var mb4_suba_02 = new qx.ui.menu.MenuRadioButton("Overlapping", c1, true);
var mb4_suba_03 = new qx.ui.menu.MenuRadioButton("Split Horizontally", c1);
var mb4_suba_04 = new qx.ui.menu.MenuRadioButton("Split Vertically", c1);
var mb4_suba_b2 = new qx.ui.menu.MenuSeparator();
var mb4_suba_05 = new qx.ui.menu.MenuButton("Next Window", null, c1);
var mb4_suba_06 = new qx.ui.menu.MenuButton("Previous Window", null, c1);
m4_suba.add(mb4_suba_01, mb4_suba_b1, mb4_suba_02, mb4_suba_03, mb4_suba_04, mb4_suba_b2, mb4_suba_05, mb4_suba_06);
var mb4_manager = new qx.manager.selection.RadioManager("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
var m5 = new qx.ui.menu.Menu;
var mb5_01 = new qx.ui.menu.MenuButton("Help", null, c1);
var mb5_02 = new qx.ui.menu.MenuButton("About", null, c1);
m5.add(mb5_01, mb5_02);
d.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m3_subd, mb3_subd_02_suba, m4, m4_suba, m5);
var mb1 = new qx.ui.toolbar.ToolBar;
mb1.setTop(48);
mb1.setRight(335);
mb1.setLeft(20);
var mbb1 = new qx.ui.toolbar.ToolBarMenuButton("File", m1);
var mbb2 = new qx.ui.toolbar.ToolBarMenuButton("Edit", m2);
var mbb3 = new qx.ui.toolbar.ToolBarMenuButton("View", m3);
var mbb4 = new qx.ui.toolbar.ToolBarMenuButton("Options", m4);
var mbb5 = new qx.ui.toolbar.ToolBarMenuButton("Help", m5);
mb1.add(mbb1, mbb2, mbb3, mbb4, mbb5);
d.add(mb1);
// Icon & Color Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 348);
qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 348);
});
</script>
</body>
</html>

196
swat/apps/qooxdoo-examples/example/ToolBar_4.html Normal file
View File

@ -0,0 +1,196 @@
<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>Again a nice example which shows how to use qx.ui.toolbar.ToolBar as a menubar system.</p>
<p>Added some parts and a new flex zone which aligns the help button to the right edge</p>
<p>Added some image and a qx.ui.toolbar.ToolBarCheckBox, you can event combine all these features as you can easily see here.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var c1 = new qx.client.Command();
c1.addEventListener("execute", function(e) {
this.debug("Execute: " + e.getData().getLabel());
});
var m1 = new qx.ui.menu.Menu;
var mb1_01 = new qx.ui.menu.MenuButton("New", null, c1);
var mb1_02 = new qx.ui.menu.MenuButton("Open", null, c1);
var mb1_03 = new qx.ui.menu.MenuButton("Save", null, c1);
var mb1_04 = new qx.ui.menu.MenuButton("Save as", null, c1);
var mb1_05 = new qx.ui.menu.MenuButton("Close", null, c1);
var mb1_06 = new qx.ui.menu.MenuButton("Restore last saved", null, c1);
m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
var m2 = new qx.ui.menu.Menu;
var mb2_01 = new qx.ui.menu.MenuButton("Undo", null, c1);
var mb2_02 = new qx.ui.menu.MenuButton("Redo", null, c1);
var mb2_b1 = new qx.ui.menu.MenuSeparator();
var mb2_03 = new qx.ui.menu.MenuButton("Cut", "icon/16/edit-cut.png", c1);
var mb2_04 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png", c1);
var mb2_05 = new qx.ui.menu.MenuButton("Paste", "icon/16/edit-paste.png", c1);
var mb2_06 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png", c1);
var mb2_b2 = new qx.ui.menu.MenuSeparator();
var mb2_07 = new qx.ui.menu.MenuButton("Select All", null, c1);
var mb2_08 = new qx.ui.menu.MenuButton("Find", null, c1);
var mb2_09 = new qx.ui.menu.MenuButton("Find Again", null, c1);
mb2_05.setEnabled(false);
mb2_06.setEnabled(false);
mb2_09.setEnabled(false);
m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05, mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
var m3 = new qx.ui.menu.Menu;
var m3_suba = new qx.ui.menu.Menu;
var m3_subb = new qx.ui.menu.Menu;
var m3_subc = new qx.ui.menu.Menu;
var m3_subd = new qx.ui.menu.Menu;
var mb3_01 = new qx.ui.menu.MenuCheckBox("File List", c1, false);
var mb3_02 = new qx.ui.menu.MenuCheckBox("Syntax Highlighting", c1, true);
var mb3_03 = new qx.ui.menu.MenuCheckBox("Statusbar", c1, true);
var mb3_b1 = new qx.ui.menu.MenuSeparator();
var mb3_04 = new qx.ui.menu.MenuButton("Printer Font", null, null, m3_suba);
var mb3_05 = new qx.ui.menu.MenuButton("Editor Font", null, null, m3_subb);
var mb3_06 = new qx.ui.menu.MenuButton("Export Font", null, null, m3_subc);
var mb3_b2 = new qx.ui.menu.MenuSeparator();
var mb3_07 = new qx.ui.menu.MenuButton("Advanced", null, null, m3_subd);
m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05, mb3_06, mb3_b2, mb3_07);
var mb3_suba_01 = new qx.ui.menu.MenuButton("Tahoma, 11pt", null, c1);
var mb3_suba_02 = new qx.ui.menu.MenuButton("Tahoma, 12pt", null, c1);
var mb3_suba_03 = new qx.ui.menu.MenuButton("Tahoma, 13pt", null, c1);
var mb3_suba_04 = new qx.ui.menu.MenuButton("Tahoma, 14pt", null, c1);
var mb3_suba_05 = new qx.ui.menu.MenuButton("Tahoma, 15pt", null, c1);
m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03, mb3_suba_04, mb3_suba_05);
var mb3_subb_01 = new qx.ui.menu.MenuButton("Verdana, 11pt", null, c1);
var mb3_subb_02 = new qx.ui.menu.MenuButton("Verdana, 12pt", null, c1);
var mb3_subb_03 = new qx.ui.menu.MenuButton("Verdana, 13pt", null, c1);
var mb3_subb_04 = new qx.ui.menu.MenuButton("Verdana, 14pt", null, c1);
var mb3_subb_05 = new qx.ui.menu.MenuButton("Verdana, 15pt", null, c1);
m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03, mb3_subb_04, mb3_subb_05);
var mb3_subc_01 = new qx.ui.menu.MenuButton("Courier, 11pt", null, c1);
var mb3_subc_02 = new qx.ui.menu.MenuButton("Courier, 12pt", null, c1);
var mb3_subc_03 = new qx.ui.menu.MenuButton("Courier, 13pt", null, c1);
var mb3_subc_04 = new qx.ui.menu.MenuButton("Courier, 14pt", null, c1);
var mb3_subc_05 = new qx.ui.menu.MenuButton("Courier, 15pt", null, c1);
m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03, mb3_subc_04, mb3_subc_05);
var mb3_subd_02_suba = new qx.ui.menu.Menu();
var mb3_subd_02_suba_01 = new qx.ui.menu.MenuButton("First", null, c1);
var mb3_subd_02_suba_02 = new qx.ui.menu.MenuButton("Second", null, c1);
var mb3_subd_02_suba_03 = new qx.ui.menu.MenuButton("Third", null, c1);
mb3_subd_02_suba.add(mb3_subd_02_suba_01, mb3_subd_02_suba_02, mb3_subd_02_suba_03);
var mb3_subd_01 = new qx.ui.menu.MenuButton("First", null, c1);
var mb3_subd_02 = new qx.ui.menu.MenuButton("Second", null, c1, mb3_subd_02_suba);
var mb3_subd_03 = new qx.ui.menu.MenuButton("Third", null, c1);
m3_subd.add(mb3_subd_01, mb3_subd_02, mb3_subd_03);
var m4 = new qx.ui.menu.Menu;
var m4_suba = new qx.ui.menu.Menu;
var mb4_01 = new qx.ui.menu.MenuButton("View", null, c1, m4_suba);
var mb4_b1 = new qx.ui.menu.MenuSeparator();
var mb4_02 = new qx.ui.menu.MenuButton("Editor Preferences...", null, c1);
var mb4_03 = new qx.ui.menu.MenuButton("Editor Extensions", null, c1);
var mb4_04 = new qx.ui.menu.MenuButton("Framework Preferences", null, c1);
m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
var mb4_suba_01 = new qx.ui.menu.MenuButton("New Window", null, c1);
var mb4_suba_b1 = new qx.ui.menu.MenuSeparator();
var mb4_suba_02 = new qx.ui.menu.MenuRadioButton("Overlapping", c1, true);
var mb4_suba_03 = new qx.ui.menu.MenuRadioButton("Split Horizontally", c1);
var mb4_suba_04 = new qx.ui.menu.MenuRadioButton("Split Vertically", c1);
var mb4_suba_b2 = new qx.ui.menu.MenuSeparator();
var mb4_suba_05 = new qx.ui.menu.MenuButton("Next Window", null, c1);
var mb4_suba_06 = new qx.ui.menu.MenuButton("Previous Window", null, c1);
m4_suba.add(mb4_suba_01, mb4_suba_b1, mb4_suba_02, mb4_suba_03, mb4_suba_04, mb4_suba_b2, mb4_suba_05, mb4_suba_06);
var mb4_manager = new qx.manager.selection.RadioManager("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
var m5 = new qx.ui.menu.Menu;
var mb5_01 = new qx.ui.menu.MenuButton("Help", null, c1);
var mb5_02 = new qx.ui.menu.MenuButton("About", null, c1);
m5.add(mb5_01, mb5_02);
d.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m3_subd, mb3_subd_02_suba, m4, m4_suba, m5);
var mb1 = new qx.ui.toolbar.ToolBar;
mb1.setTop(48);
mb1.setRight(335);
mb1.setLeft(20);
var mp1 = new qx.ui.toolbar.ToolBarPart;
var mp2 = new qx.ui.toolbar.ToolBarPart;
var mp3 = new qx.ui.toolbar.ToolBarPart;
mb1.add(mp1, mp2, new qx.ui.basic.HorizontalSpacer, mp3);
var mbb1 = new qx.ui.toolbar.ToolBarMenuButton("File", m1, "icon/16/file-new.png");
var mbb2 = new qx.ui.toolbar.ToolBarMenuButton("Edit", m2, "icon/16/edit.png");
var mbb3 = new qx.ui.toolbar.ToolBarMenuButton("View", m3, "icon/16/appearance.png");
var mbb4 = new qx.ui.toolbar.ToolBarMenuButton("Options", m4, "icon/16/control-center.png");
var mbb5 = new qx.ui.toolbar.ToolBarMenuButton("Help", m5, "icon/16/help.png");
var tbb1 = new qx.ui.toolbar.ToolBarCheckBox("Checkbox", "icon/16/chart.png", true);
mp1.add(mbb1, mbb2);
mp2.add(mbb3, mbb4, tbb1);
mp3.add(mbb5);
d.add(mb1);
// Icon & Color Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 348);
qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 348);
});
</script>
</body>
</html>

111
swat/apps/qooxdoo-examples/example/ToolTip_1.html Normal file
View File

@ -0,0 +1,111 @@
<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>Test for QxToolTips. Each qx.ui.popup.ToolTip could be assigned to any
instance of qx.ui.core.Widget. You could also use one qx.ui.popup.ToolTip instance
for multiple QxWidgets (to show the same tooltip any multiple items).</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var c1 = new qx.ui.basic.Atom("Hover me");
with(c1)
{
setTop(48);
setLeft(20);
setBackgroundColor(new qx.renderer.color.Color("#BDD2EF"));
setWidth(100);
setHeight(100);
setTabIndex(1);
setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
};
d.add(c1);
var c2 = new qx.ui.basic.Atom("Hover me");
with(c2)
{
setTop(48);
setLeft(140);
setBackgroundColor(new qx.renderer.color.Color("#D1DFAD"));
setWidth(100);
setHeight(100);
setTabIndex(1);
setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
};
d.add(c2);
var c3 = new qx.ui.basic.Atom("Hover me");
with(c3)
{
setTop(48);
setLeft(260);
setBackgroundColor(new qx.renderer.color.Color("#D1A4AD"));
setWidth(100);
setHeight(100);
setTabIndex(1);
setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
};
d.add(c3);
var c4 = new qx.ui.basic.Atom("Hover me");
with(c4)
{
setTop(48);
setLeft(380);
setBackgroundColor(new qx.renderer.color.Color("#F5E0BB"));
setWidth(100);
setHeight(100);
setTabIndex(1);
setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
};
d.add(c4);
var c5 = new qx.ui.basic.Atom("Hover me", "icon/32/colors.png");
with(c5)
{
setTop(248);
setLeft(20);
setBackgroundColor(new qx.renderer.color.Color("#F5E0BB"));
setTabIndex(1);
setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
setPadding(4);
};
d.add(c5);
var tt1 = new qx.ui.popup.ToolTip("Hello World #1");
c1.setToolTip(tt1);
c2.setToolTip(tt1);
var tt2 = new qx.ui.popup.ToolTip(null, "icon/16/help.png");
c3.setToolTip(tt2);
var tt3 = new qx.ui.popup.ToolTip("Hello World #3", "icon/16/help.png");
c4.setToolTip(tt3);
var tt4 = new qx.ui.popup.ToolTip("Such a great tooltip with a<br/>(show) timeout of 50ms.", "icon/32/bug.png");
c5.setToolTip(tt4);
tt4.setShowInterval(50);
});
</script>
</body>
</html>

235
swat/apps/qooxdoo-examples/example/TreeFullControl_1.html Normal file
View File

@ -0,0 +1,235 @@
<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>Shows a tree, with user-defined icons for some nodes.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
var t = new qx.ui.treefullcontrol.Tree(trs);
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(200);
setBottom(48);
};
qx.ui.core.ClientDocument.getInstance().add(t);
// One icon for selected and one for unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
t.add(te1);
desktop = te1;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te1.add(te1_1, te1_2, te1_3, te1_4);
// One icon specified, and used for both selected unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
te1_2.add(te1_2_1, te1_2_2);
arbeitsplatz = te1_2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
posteingang = te2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
editieren = te2_5;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_5_3.add(te2_5_3_1, te2_5_3_2);
te2_5.add(te2_5_1, te2_5_2, te2_5_3);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
for (var i=0;i<50; i++) {
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
};
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
spam = te2_9;
te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
t.add(te2);
qx.ui.core.ClientDocument.getInstance().add(t);
var commandFrame = new qx.ui.groupbox.GroupBox("Control");
with(commandFrame)
{
setTop(48);
setLeft(250);
setWidth("auto");
setHeight("auto");
};
qx.ui.core.ClientDocument.getInstance().add(commandFrame);
var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
with(tCurrentLabel)
{
setLeft(0);
setTop(0);
};
commandFrame.add(tCurrentLabel);
var tCurrentInput = new qx.ui.form.TextField;
with(tCurrentInput)
{
setLeft(0);
setRight(0);
setTop(20);
setReadOnly(true);
};
commandFrame.add(tCurrentInput);
t.getManager().addEventListener("changeSelection", function(e) {
tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
});
var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
with(tDoubleClick) {
setTop(60);
setLeft(0);
};
commandFrame.add(tDoubleClick);
tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
with(tTreeLines) {
setTop(80);
setLeft(0);
setChecked(true);
};
commandFrame.add(tTreeLines);
tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
});
</script>
</body>
</html>

270
swat/apps/qooxdoo-examples/example/TreeFullControl_2.html Normal file
View File

@ -0,0 +1,270 @@
<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>Shows a tree, with user-defined extra fields. In this example, the extra
fields include a left-justified icon, a checkbox between the node icon and the
label, and a whole series of right-justified fields. Additionally, the root node may be hidden. </p>
</div>
<script type="text/javascript">
var treeRowStructure;
function stuff(vLabel, vIcon, vIconSelected)
{
treeRowStructure = qx.ui.treefullcontrol.TreeRowStructure.getInstance().newRow();
// A left-justified icon
if (Math.floor(Math.random() * 4) == 0)
{
obj = new qx.ui.basic.Image("icon/16/alarm.png", 16);
}
else
{
obj = new qx.ui.basic.Image(null, 16);
}
treeRowStructure.addObject(obj, true);
// Here's our indentation and tree-lines
treeRowStructure.addIndent();
// The standard tree icon follows
treeRowStructure.addIcon(
arguments.length >= 2 ? vIcon : "icon/16/desktop.png",
arguments.length >= 3 ? vIconSelected : "icon/16/dictionary.png");
// A checkbox comes right after the tree icon
obj = new qx.ui.form.CheckBox(
null, 23, null, Math.floor(Math.random() * 2) == 0 ? false : true);
obj.setPadding(0, 0);
treeRowStructure.addObject(obj, true);
// The label
treeRowStructure.addLabel(vLabel);
// All else should be right justified
obj = new qx.ui.basic.HorizontalSpacer;
treeRowStructure.addObject(obj, true);
// Add a file size, date and mode
obj = new qx.ui.basic.Label(Math.round(Math.random() * 100) + "kb");
obj.setWidth(50);
treeRowStructure.addObject(obj, true);
obj = new qx.ui.basic.Label(
"May " + Math.round(Math.random() * 30 + 1) + " 2005");
obj.setWidth(150);
treeRowStructure.addObject(obj, true);
obj = new qx.ui.basic.Label("-rw-r--r--");
obj.setWidth(80);
treeRowStructure.addObject(obj, true);
return treeRowStructure;
}
qx.core.Init.getInstance().defineMain(function()
{
var x = new qx.ui.basic.Atom("Test #1", "icon/16/reload.png", 16, 16);
x.debug("In main");
var t = new qx.ui.treefullcontrol.Tree(stuff("Root"));
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(600);
setBottom(48);
};
qx.ui.core.ClientDocument.getInstance().add(t);
// One icon for selected and one for unselected states
var te1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Desktop"));
t.add(te1);
desktop = te1;
var te1_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Files"));
var te1_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Workspace"));
var te1_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Network"));
var te1_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Trash"));
te1.add(te1_1, te1_2, te1_3, te1_4);
// One icon specified, and used for both selected unselected states
var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(stuff("Windows (C:)", "icon/16/harddrive.png"));
var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(stuff("Documents (D:)", "icon/16/harddrive.png"));
te1_2.add(te1_2_1, te1_2_2);
arbeitsplatz = te1_2;
var te2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Inbox"));
posteingang = te2;
var te2_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Presets"));
var te2_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Sent"));
var te2_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Trash", "icon/16/trash.png"));
var te2_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Data"));
var te2_5 = new qx.ui.treefullcontrol.TreeFolder(stuff("Edit"));
editieren = te2_5;
var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Chat"));
var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Pustefix"));
var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("TINC"));
var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Announce"));
var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Devel"));
te2_5_3.add(te2_5_3_1, te2_5_3_2);
te2_5.add(te2_5_1, te2_5_2, te2_5_3);
var te2_6 = new qx.ui.treefullcontrol.TreeFolder(stuff("Lists"));
var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Relations"));
var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Company"));
var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Questions"));
var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Internal"));
var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(stuff("Products"));
var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(stuff("Press"));
var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(stuff("Development"));
var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(stuff("Competition"));
te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
var te2_7 = new qx.ui.treefullcontrol.TreeFolder(stuff("Personal"));
var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(stuff("Bugs"));
var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(stuff("Family"));
var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(stuff("Projects"));
var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(stuff("Holiday"));
te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
var te2_8 = new qx.ui.treefullcontrol.TreeFolder(stuff("Big"));
for (var i=0;i<50; i++) {
te2_8.add(new qx.ui.treefullcontrol.TreeFolder(stuff("Item " + i)));
};
var te2_9 = new qx.ui.treefullcontrol.TreeFolder(stuff("Spam"));
spam = te2_9;
te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
t.add(te2);
qx.ui.core.ClientDocument.getInstance().add(t);
var commandFrame = new qx.ui.groupbox.GroupBox("Control");
with(commandFrame)
{
setTop(48);
setLeft(650);
setWidth("auto");
setHeight("auto");
};
qx.ui.core.ClientDocument.getInstance().add(commandFrame);
var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
with(tCurrentLabel)
{
setLeft(0);
setTop(0);
};
commandFrame.add(tCurrentLabel);
var tCurrentInput = new qx.ui.form.TextField;
with(tCurrentInput)
{
setLeft(0);
setRight(0);
setTop(20);
setReadOnly(true);
};
commandFrame.add(tCurrentInput);
t.getManager().addEventListener("changeSelection", function(e) {
tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
});
var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
with(tDoubleClick) {
setTop(60);
setLeft(0);
};
commandFrame.add(tDoubleClick);
tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
with(tTreeLines) {
setTop(80);
setLeft(0);
setChecked(true);
};
commandFrame.add(tTreeLines);
tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
var tHideNode = new qx.ui.form.CheckBox("Hide the root node?");
with(tHideNode) {
setTop(100);
setLeft(0);
setChecked(false);
};
commandFrame.add(tHideNode);
tHideNode.addEventListener("changeChecked", function(e) { t.setHideNode(e.getData()); });
});
</script>
</body>
</html>

298
swat/apps/qooxdoo-examples/example/TreeFullControl_3.html Normal file
View File

@ -0,0 +1,298 @@
<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>Shows a tree, with user-defined icons for some nodes. This tests
listening for tree events. A separate alert is generated upon opening a
folder that has contents; when opening a folder that has no contents; and
closing a folder.</p><p>We also demonstrate changing the default value of
'allowShowPlusMinusSymbol' so that all folders initially have a plus/minus
symbol. Then, upon opening an empty folder, we remove that
icon.</p><p>Lastly, we demonstrate in the alert presented by tree events,
use of the getHierarchy() method to obtain a full "path" for a tree
node.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
/*
* Reset the default of always showing the plus/minus symbol. The
* default is 'false'. We want to always display it for each folder
* (and then stop displaying it if we determine upon open that there are
* no contents).
*
* The changeProperty() function assumes that it is being called
* shortly after defineClass() is called. We therefore need to kludge
* qx.Proto to point to the right place.
*
* TODO: There should be a mechanism to change a property attribute
* without having to jump through these hoops.
*/
var constructor = qx.OO.classes["qx.ui.treefullcontrol.TreeFolder"];
qx.Proto = constructor.prototype;
qx.OO.changeProperty({ name : "alwaysShowPlusMinusSymbol", type : qx.constant.Type.BOOLEAN, defaultValue : true });
var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
var t = new qx.ui.treefullcontrol.Tree(trs);
/*
* All subtrees will use this root node's event listeners. Create event
* listeners for each of the possible events.
*/
t.addEventListener(qx.constant.Event.TREEOPENWITHCONTENT, function(e) {
alert('treeOpenWithContent ' + e.getData().getHierarchy(new Array()).join("/"));
});
t.addEventListener(qx.constant.Event.TREECLOSE, function(e) {
alert('treeClose ' + e.getData().getHierarchy(new Array()).join("/"));
});
/*
* We handle opening an empty folder specially. We demonstrate how to
* disable the plus/minus sign once we've determined there's nothing in
* it. This feature might be used to dynamically retrieve the contents
* of the folder, and if nothing is available, indicate it by removing
* the plus/minus sign.
*/
t.addEventListener(qx.constant.Event.TREEOPENWHILEEMPTY, function(e) {
alert('treeOpenWhileEmpty ' + e.getData().getHierarchy(new Array()).join("/"));
e.getData().setAlwaysShowPlusMinusSymbol(false);
});
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(200);
setBottom(48);
};
qx.ui.core.ClientDocument.getInstance().add(t);
// One icon for selected and one for unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
t.add(te1);
desktop = te1;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te1.add(te1_1, te1_2, te1_3, te1_4);
// One icon specified, and used for both selected unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
te1_2.add(te1_2_1, te1_2_2);
arbeitsplatz = te1_2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
posteingang = te2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
editieren = te2_5;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_5_3.add(te2_5_3_1, te2_5_3_2);
te2_5.add(te2_5_1, te2_5_2, te2_5_3);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
for (var i=0;i<50; i++) {
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
};
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
spam = te2_9;
te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
t.add(te2);
qx.ui.core.ClientDocument.getInstance().add(t);
var commandFrame = new qx.ui.groupbox.GroupBox("Control");
with(commandFrame)
{
setTop(48);
setLeft(250);
setWidth("auto");
setHeight("auto");
};
qx.ui.core.ClientDocument.getInstance().add(commandFrame);
var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
with(tCurrentLabel)
{
setLeft(0);
setTop(0);
};
commandFrame.add(tCurrentLabel);
var tCurrentInput = new qx.ui.form.TextField;
with(tCurrentInput)
{
setLeft(0);
setRight(0);
setTop(20);
setReadOnly(true);
};
commandFrame.add(tCurrentInput);
t.getManager().addEventListener("changeSelection", function(e) {
tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
});
var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
with(tDoubleClick) {
setTop(60);
setLeft(0);
};
commandFrame.add(tDoubleClick);
tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
with(tTreeLines) {
setTop(80);
setLeft(0);
setChecked(true);
};
commandFrame.add(tTreeLines);
tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
var tHideNode = new qx.ui.form.CheckBox("Hide the root node?");
with(tHideNode) {
setTop(100);
setLeft(0);
setChecked(false);
};
commandFrame.add(tHideNode);
tHideNode.addEventListener("changeChecked", function(e) { t.setHideNode(e.getData()); });
});
</script>
</body>
</html>

384
swat/apps/qooxdoo-examples/example/TreeFullControl_4.html Normal file
View File

@ -0,0 +1,384 @@
<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>Shows a tree and allows playing with the settings of the Tree
properties <i>hideNode</i> and <i>rootOpenClose</i>. Also demonstrates
manipulating display (or not) of tree lines at specific indentation
levels, using the <i>excludeSpecificTreeLines</i> property.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
var t = new qx.ui.treefullcontrol.Tree(trs);
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(200);
setBottom(48);
};
qx.ui.core.ClientDocument.getInstance().add(t);
// One icon for selected and one for unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
t.add(te1);
desktop = te1;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te1.add(te1_1, te1_2, te1_3, te1_4);
// One icon specified, and used for both selected unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
te1_2.add(te1_2_1, te1_2_2);
arbeitsplatz = te1_2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
posteingang = te2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
editieren = te2_5;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_5_3.add(te2_5_3_1, te2_5_3_2);
te2_5.add(te2_5_1, te2_5_2, te2_5_3);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
for (var i=0;i<50; i++) {
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
};
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
spam = te2_9;
te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
t.add(te2);
qx.ui.core.ClientDocument.getInstance().add(t);
var commandFrame = new qx.ui.groupbox.GroupBox("Control");
with(commandFrame)
{
setTop(48);
setLeft(250);
setWidth("auto");
setHeight("auto");
};
qx.ui.core.ClientDocument.getInstance().add(commandFrame);
var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
with(tCurrentLabel)
{
setLeft(0);
setTop(0);
};
commandFrame.add(tCurrentLabel);
var tCurrentInput = new qx.ui.form.TextField;
with(tCurrentInput)
{
setLeft(0);
setRight(0);
setTop(20);
setReadOnly(true);
};
commandFrame.add(tCurrentInput);
t.getManager().addEventListener("changeSelection", function(e) {
tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
});
var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
with(tDoubleClick) {
setTop(60);
setLeft(0);
};
commandFrame.add(tDoubleClick);
tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
with(tTreeLines) {
setTop(80);
setLeft(0);
setChecked(true);
};
commandFrame.add(tTreeLines);
tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
var tHideNode = new qx.ui.form.CheckBox("Hide the root node?");
with(tHideNode) {
setTop(100);
setLeft(0);
setChecked(false);
};
commandFrame.add(tHideNode);
tHideNode.addEventListener("changeChecked", function(e) { t.setHideNode(e.getData()); });
var tIncludeRootOpenClose =
new qx.ui.form.CheckBox("Include root open/close button?");
with(tIncludeRootOpenClose) {
setTop(120);
setLeft(0);
setChecked(true);
};
commandFrame.add(tIncludeRootOpenClose);
tIncludeRootOpenClose.addEventListener("changeChecked", function(e) { t.setRootOpenClose(e.getData()); });
tExcludeTreeLines0 =
new qx.ui.form.CheckBox("Exclude tree lines at level 0?");
with(tExcludeTreeLines0) {
setTop(140);
setLeft(0);
setChecked(false);
};
commandFrame.add(tExcludeTreeLines0);
tExcludeTreeLines0.addEventListener(
"changeChecked",
function(e)
{
var excl = t.getExcludeSpecificTreeLines();
if (e.getData()) {
excl[0] = true;
} else {
delete(excl[0]);
}
t.setExcludeSpecificTreeLines(excl);
});
tExcludeTreeLines1 =
new qx.ui.form.CheckBox("Exclude tree lines at level 1?");
with(tExcludeTreeLines1) {
setTop(160);
setLeft(0);
setChecked(false);
};
commandFrame.add(tExcludeTreeLines1);
tExcludeTreeLines1.addEventListener(
"changeChecked",
function(e)
{
var excl = t.getExcludeSpecificTreeLines();
if (e.getData()) {
excl[1] = true;
} else {
delete(excl[1]);
}
t.setExcludeSpecificTreeLines(excl);
});
tExcludeTreeLines2 =
new qx.ui.form.CheckBox("Exclude tree lines at level 2?");
with(tExcludeTreeLines2) {
setTop(180);
setLeft(0);
setChecked(false);
};
commandFrame.add(tExcludeTreeLines2);
tExcludeTreeLines2.addEventListener(
"changeChecked",
function(e)
{
var excl = t.getExcludeSpecificTreeLines();
if (e.getData()) {
excl[2] = true;
} else {
delete(excl[2]);
}
t.setExcludeSpecificTreeLines(excl);
});
tExcludeTreeLines3 =
new qx.ui.form.CheckBox("Exclude tree lines at level 3?");
with(tExcludeTreeLines3) {
setTop(200);
setLeft(0);
setChecked(false);
};
commandFrame.add(tExcludeTreeLines3);
tExcludeTreeLines3.addEventListener(
"changeChecked",
function(e)
{
var excl = t.getExcludeSpecificTreeLines();
if (e.getData()) {
excl[3] = true;
} else {
delete(excl[3]);
}
t.setExcludeSpecificTreeLines(excl);
});
tExcludeTreeLines4 =
new qx.ui.form.CheckBox("Exclude tree lines at level 4?");
with(tExcludeTreeLines4) {
setTop(220);
setLeft(0);
setChecked(false);
};
commandFrame.add(tExcludeTreeLines4);
tExcludeTreeLines4.addEventListener(
"changeChecked",
function(e)
{
var excl = t.getExcludeSpecificTreeLines();
if (e.getData()) {
excl[4] = true;
} else {
delete(excl[4]);
}
t.setExcludeSpecificTreeLines(excl);
});
});
</script>
</body>
</html>

247
swat/apps/qooxdoo-examples/example/TreeFullControl_5.html Normal file
View File

@ -0,0 +1,247 @@
<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>Shows a tree, with user-defined icons for some nodes.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
var t = new qx.ui.treefullcontrol.Tree(trs);
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(200);
setBottom(48);
};
qx.ui.core.ClientDocument.getInstance().add(t);
// One icon for selected and one for unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
t.add(te1);
desktop = te1;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te1.add(te1_1, te1_2, te1_3, te1_4);
// One icon specified, and used for both selected unselected states
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
te1_2.add(te1_2_1, te1_2_2);
arbeitsplatz = te1_2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
posteingang = te2;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
editieren = te2_5;
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_5_3.add(te2_5_3_1, te2_5_3_2);
te2_5.add(te2_5_1, te2_5_2, te2_5_3);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
for (var i=0;i<50; i++) {
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
};
trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
spam = te2_9;
te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
t.add(te2);
qx.ui.core.ClientDocument.getInstance().add(t);
var commandFrame = new qx.ui.groupbox.GroupBox("Control");
with(commandFrame)
{
setTop(48);
setLeft(250);
setWidth("auto");
setHeight("auto");
};
qx.ui.core.ClientDocument.getInstance().add(commandFrame);
var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
with(tCurrentLabel)
{
setLeft(0);
setTop(0);
};
commandFrame.add(tCurrentLabel);
var tCurrentInput = new qx.ui.form.TextField;
with(tCurrentInput)
{
setLeft(0);
setRight(0);
setTop(20);
setReadOnly(true);
};
commandFrame.add(tCurrentInput);
t.getManager().addEventListener("changeSelection", function(e) {
tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
});
var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
with(tDoubleClick) {
setTop(60);
setLeft(0);
};
commandFrame.add(tDoubleClick);
tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
with(tTreeLines) {
setTop(80);
setLeft(0);
setChecked(true);
};
commandFrame.add(tTreeLines);
tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
var tGetSelectedElement = new qx.ui.form.CheckBox("Retry getSelectedElement()");
with(tGetSelectedElement) {
setTop(100);
setLeft(0);
setChecked(true);
};
commandFrame.add(tGetSelectedElement);
tGetSelectedElement.addEventListener("changeChecked", function(e) { var oo = t.getSelectedElement(); t.debug(oo); });
});
</script>
</body>
</html>

191
swat/apps/qooxdoo-examples/example/Tree_1.html Normal file
View File

@ -0,0 +1,191 @@
<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>Shows a tree, with user-defined icons for some nodes.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var t = new qx.ui.tree.Tree("Root");
with(t)
{
setBackgroundColor(255);
setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
setOverflow("scrollY");
setHeight(null);
setTop(48);
setLeft(20);
setWidth(200);
setBottom(48);
};
qx.ui.core.ClientDocument.getInstance().add(t);
// One icon for selected and one for unselected states
var te1 = new qx.ui.tree.TreeFolder("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
t.add(te1);
var te1_1 = new qx.ui.tree.TreeFolder("Files");
var te1_2 = new qx.ui.tree.TreeFolder("Workspace");
var te1_3 = new qx.ui.tree.TreeFolder("Network");
var te1_4 = new qx.ui.tree.TreeFolder("Trash");
te1.add(te1_1, te1_2, te1_3, te1_4);
// One icon specified, and used for both selected unselected states
var te1_2_1 = new qx.ui.tree.TreeFile("Windows (C:)", "icon/16/harddrive.png");
var te1_2_2 = new qx.ui.tree.TreeFile("Documents (D:)", "icon/16/harddrive.png");
te1_2.add(te1_2_1, te1_2_2);
var te2 = new qx.ui.tree.TreeFolder("Inbox");
var te2_1 = new qx.ui.tree.TreeFolder("Presets");
var te2_2 = new qx.ui.tree.TreeFolder("Sent");
var te2_3 = new qx.ui.tree.TreeFolder("Trash", "icon/16/trash.png");
var te2_4 = new qx.ui.tree.TreeFolder("Data");
var te2_5 = new qx.ui.tree.TreeFolder("Edit");
var te2_5_1 = new qx.ui.tree.TreeFolder("Chat");
var te2_5_2 = new qx.ui.tree.TreeFolder("Pustefix");
var te2_5_3 = new qx.ui.tree.TreeFolder("TINC");
var te2_5_3_1 = new qx.ui.tree.TreeFolder("Announce");
var te2_5_3_2 = new qx.ui.tree.TreeFolder("Devel");
te2_5_3.add(te2_5_3_1, te2_5_3_2);
te2_5.add(te2_5_1, te2_5_2, te2_5_3);
var te2_6 = new qx.ui.tree.TreeFolder("Lists");
var te2_6_1 = new qx.ui.tree.TreeFolder("Relations");
var te2_6_2 = new qx.ui.tree.TreeFolder("Company");
var te2_6_3 = new qx.ui.tree.TreeFolder("Questions");
var te2_6_4 = new qx.ui.tree.TreeFolder("Internal");
var te2_6_5 = new qx.ui.tree.TreeFolder("Products");
var te2_6_6 = new qx.ui.tree.TreeFolder("Press");
var te2_6_7 = new qx.ui.tree.TreeFolder("Development");
var te2_6_8 = new qx.ui.tree.TreeFolder("Competition");
te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
var te2_7 = new qx.ui.tree.TreeFolder("Personal");
var te2_7_1 = new qx.ui.tree.TreeFolder("Bugs");
var te2_7_2 = new qx.ui.tree.TreeFolder("Family");
var te2_7_3 = new qx.ui.tree.TreeFolder("Projects");
var te2_7_4 = new qx.ui.tree.TreeFolder("Holiday");
te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
var te2_8 = new qx.ui.tree.TreeFolder("Big");
for (var i=0;i<50; i++) {
te2_8.add(new qx.ui.tree.TreeFolder("Item " + i));
};
var te2_9 = new qx.ui.tree.TreeFolder("Spam");
te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
t.add(te2);
qx.ui.core.ClientDocument.getInstance().add(t);
var commandFrame = new qx.ui.groupbox.GroupBox("Control");
with(commandFrame)
{
setTop(48);
setLeft(250);
setWidth("auto");
setHeight("auto");
};
qx.ui.core.ClientDocument.getInstance().add(commandFrame);
var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
with(tCurrentLabel)
{
setLeft(0);
setTop(0);
};
commandFrame.add(tCurrentLabel);
var tCurrentInput = new qx.ui.form.TextField;
with(tCurrentInput)
{
setLeft(0);
setRight(0);
setTop(20);
setReadOnly(true);
};
commandFrame.add(tCurrentInput);
t.getManager().addEventListener("changeSelection", function(e) {
tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
});
var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
with(tDoubleClick) {
setTop(60);
setLeft(0);
};
commandFrame.add(tDoubleClick);
tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
with(tTreeLines) {
setTop(80);
setLeft(0);
setChecked(true);
};
commandFrame.add(tTreeLines);
tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
});
</script>
</body>
</html>

308
swat/apps/qooxdoo-examples/example/Window_1.html Normal file
View File

@ -0,0 +1,308 @@
<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>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var w1 = new qx.ui.window.Window("First Window", "icon/16/bell.png");
w1.setSpace(20, 400, 48, 250);
d.add(w1);
var w2 = new qx.ui.window.Window("Second Window", "icon/16/colors.png");
w2.setSpace(250, "auto", 120, "auto");
d.add(w2);
var w3 = new qx.ui.window.Window("Third Window", "icon/16/network.png");
w3.setSpace(100, 300, 200, 300);
w3.setMaxWidth(450);
w3.setMaxHeight(400);
d.add(w3);
var wm1 = new qx.ui.window.Window("First Modal Dialog");
wm1.setSpace(150, 200, 150, 200);
wm1.setModal(true);
d.add(wm1);
var wm2 = new qx.ui.window.Window("Second Modal Dialog");
wm2.setSpace(100, 200, 100, 150);
wm2.setModal(true);
wm2.setShowClose(false);
d.add(wm2);
var a1 = new qx.ui.basic.Atom("Welcome to your first own Window.<br/>Have fun!", "icon/32/chart.png");
a1.set({ top: 4, left: 4 });
w1.add(a1);
var tf1 = new qx.ui.pageview.tabview.TabView;
tf1.set({ left: 10, top: 52, right: 10, bottom: 10 });
var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Explore");
var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Internet");
var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Future");
t1_1.setChecked(true);
tf1.getBar().add(t1_1, t1_2, t1_3);
var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
tf1.getPane().add(p1_1, p1_2, p1_3);
w1.add(tf1);
var at1 = new qx.ui.basic.Atom("Your second window", "icon/22/find.png");
at1.setLocation(8, 8);
w2.add(at1);
var btn1 = new qx.ui.form.Button("Open Modal Dialog 1", "icon/16/control-center.png");
btn1.setLocation(4, 4);
w3.add(btn1);
btn1.addEventListener("execute", function(e) {
wm1.open();
});
var btn2 = new qx.ui.form.Button("Open Modal Dialog 2", "icon/16/control-center.png");
btn2.setLocation(4, 4);
wm1.add(btn2);
btn2.addEventListener("execute", function(e) {
wm2.open();
});
var chkm1 = new qx.ui.form.CheckBox("Modal", null, null, true);
chkm1.setLocation(4, 50);
wm1.add(chkm1);
chkm1.addEventListener("changeChecked", function(e) {
wm1.setModal(e.getData());
});
var fs1 = new qx.ui.groupbox.GroupBox("Settings");
fs1.setLocation(4, 40);
fs1.setRight(4);
fs1.setBottom(4);
var chk1 = new qx.ui.form.CheckBox("Show Icon");
chk1.setLocation(0, 0);
chk1.setChecked(true);
chk1.addEventListener("changeChecked", function(e) {
w2.setShowIcon(e.getData());
});
var chk2 = new qx.ui.form.CheckBox("Show Caption");
chk2.setLocation(0, 20);
chk2.setChecked(true);
chk2.addEventListener("changeChecked", function(e) {
w2.setShowCaption(e.getData());
});
var chk3 = new qx.ui.form.CheckBox("Resizeable");
chk3.setLocation(0, 50);
chk3.setChecked(true);
chk3.addEventListener("changeChecked", function(e) {
w2.setResizeable(e.getData());
});
var chk4 = new qx.ui.form.CheckBox("Moveable");
chk4.setLocation(0, 70);
chk4.setChecked(true);
chk4.addEventListener("changeChecked", function(e) {
w2.setMoveable(e.getData());
});
var chk5 = new qx.ui.form.CheckBox("Show Close");
chk5.setLocation(140, 0);
chk5.setChecked(true);
chk5.addEventListener("changeChecked", function(e) {
w2.setShowClose(e.getData());
});
var chk6 = new qx.ui.form.CheckBox("Show Maximize/Restore");
chk6.setLocation(140, 20);
chk6.setChecked(true);
chk6.addEventListener("changeChecked", function(e) {
w2.setShowMaximize(e.getData());
});
var chk7 = new qx.ui.form.CheckBox("Show Minimize");
chk7.setLocation(140, 40);
chk7.setChecked(true);
chk7.addEventListener("changeChecked", function(e) {
w2.setShowMinimize(e.getData());
});
var chk8 = new qx.ui.form.CheckBox("Allow Close");
chk8.setLocation(140, 70);
chk8.setChecked(true);
chk8.addEventListener("changeChecked", function(e) {
w2.setAllowClose(e.getData());
});
var chk9 = new qx.ui.form.CheckBox("Allow Maximize");
chk9.setLocation(140, 90);
chk9.setChecked(true);
chk9.addEventListener("changeChecked", function(e) {
w2.setAllowMaximize(e.getData());
});
var chk10 = new qx.ui.form.CheckBox("Allow Minimize");
chk10.setLocation(140, 110);
chk10.setChecked(true);
chk10.addEventListener("changeChecked", function(e) {
w2.setAllowMinimize(e.getData());
});
var l1 = new qx.ui.basic.Atom("Move Method", "icon/16/misc.png");
l1.setLocation(0, 100);
var rb1 = new qx.ui.form.RadioButton("Frame", "frame");
rb1.setLocation(0, 120);
var rb2 = new qx.ui.form.RadioButton("Opaque", "opaque");
rb2.setLocation(0, 140);
rb2.setChecked(true);
var rb3 = new qx.ui.form.RadioButton("Translucent", "translucent");
rb3.setLocation(0, 160);
var rbm1 = new qx.manager.selection.RadioManager("move", [rb1, rb2, rb3]);
rbm1.addEventListener("changeSelected", function(e) {
w2.setMoveMethod(e.getData().getValue());
});
var l2 = new qx.ui.basic.Atom("Resize Method", "icon/16/misc.png");
l2.setLocation(0, 190);
var rb4 = new qx.ui.form.RadioButton("Frame", "frame");
rb4.setLocation(0, 210);
rb4.setChecked(true);
var rb5 = new qx.ui.form.RadioButton("Opaque", "opaque");
rb5.setLocation(0, 230);
var rb6 = new qx.ui.form.RadioButton("Lazy Opaque", "lazyopaque");
rb6.setLocation(0, 250);
var rb7 = new qx.ui.form.RadioButton("Translucent", "translucent");
rb7.setLocation(0, 270);
var rbm2 = new qx.manager.selection.RadioManager("resize", [rb4, rb5, rb6, rb7]);
rbm2.addEventListener("changeSelected", function(e) {
w2.setResizeMethod(e.getData().getValue());
});
var chk11 = new qx.ui.form.CheckBox("Show Statusbar");
chk11.setLocation(140, 140);
chk11.setChecked(false);
chk11.addEventListener("changeChecked", function(e) {
w2.setShowStatusbar(e.getData());
});
var btnpack = new qx.ui.form.Button("Pack Window", "icon/16/cdrom.png");
btnpack.setLocation(140, 170);
btnpack.addEventListener("execute", function(e) {
w2.pack();
});
fs1.add(chk1, chk2, chk3, chk4, chk5, chk6, chk7, chk8, chk9, chk10, l1, rb1, rb2, rb3, l2, rb4, rb5, rb6, rb7, chk11, btnpack);
w2.add(fs1);
var icon1 = new qx.ui.basic.Image("icon/32/error.png");
var warn1 = new qx.ui.basic.Label("Do you want to delete<br/>all your personal data?");
icon1.setTop(10);
icon1.setLeft(10);
warn1.setTop(10);
warn1.setLeft(48);
var btn3 = new qx.ui.form.Button("Yes", "icon/16/button-ok.png");
var btn4 = new qx.ui.form.Button("No", "icon/16/button-cancel.png");
btn3.addEventListener("execute", function(e) {
alert("Thank you!");
wm2.close();
});
btn4.addEventListener("execute", function(e) {
alert("Sorry, please click 'Yes'!");
});
btn3.set({ bottom : 10, right : 10 });
btn4.set({ bottom : 10, left : 10 });
wm2.add(btn3, btn4, icon1, warn1);
// Icon & Color Themes
//qx.manager.object.ImageManager.getInstance().createThemeList(w3, 20, 248);
qx.manager.object.ColorManager.getInstance().createThemeList(w3, 4, 58);
w1.open();
w2.open();
w3.open();
});
</script>
<div id="demoDescription">
<p>This is the qx.ui.window.Window widget. These should emulate the default look and behaviour of the application windows running under Microsoft Windows(TM).</p>
</div>
</body>
</html>

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file1.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file10.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file2.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file3.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file4.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file5.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file6.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file7.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file8.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/color/file9.swf Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/fo_tester.fla Normal file
View File

Binary file not shown.

BIN
swat/apps/qooxdoo-examples/example/image/flash/fo_tester.swf Normal file
View File

Binary file not shown.

18
swat/apps/qooxdoo-examples/example/index.html Normal file
View File

@ -0,0 +1,18 @@
<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>Please choose an example from above.</p>
</div>
</body>
</html>

82
swat/apps/qooxdoo-examples/index.html Normal file
View File

@ -0,0 +1,82 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<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]-->
<style type="text/css">
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0;
padding: 0;
}
img{
box-sizing: content-box;
-moz-box-sizing: content-box;
}
#content{
margin: 40px 20px 0;
width: 400px;
}
h1{
font-size: 20px;
margin-bottom: 20px;
}
h2{
font-size: 14px;
}
a{
color: #335EA8;
}
li{
margin-left: 16px;
list-style: square;
margin-bottom: 20px;
}
p{
font-size: 12px;
}
</style>
</head>
<body>
<div id="demoHead">qooxdoo: <span>The new era of web interface development</span></div>
<div id="demoFoot"></div>
<div id="content" style="position:absolute;top:0px;left:0px">
<h1>qooxdoo <span>demo</demo></h1>
<ul>
<li>
<h2><a href="at-a-glance/index.html">At-a-Glance</a></h2>
<p>A good example for qooxdoo's versatility.</p>
</li>
<li>
<h2><a href="showcase/Showcase_1.html">Showcase</a></h2>
<p>Complex application-like interface using multiple qooxdoo widgets.</p>
</li>
<li>
<h2><a href="example/index.html">Example</a></h2>
<p>Easily to understand examples. The basic features of each qooxdoo widget is demonstrated in a separate example. This section is probably the one you are looking for!</p>
</li>
<li>
<h2><a href="test/index.html">Test</a></h2>
<p>These tests demonstrate internal functionality of qooxdoo. Not really useful for the typical qooxdoo user, but needed for developers to test some complex layout stuff, performance related problems and more. The tests may not always be up-to-date and functioning!</p>
</li>
<li>
<h2><a href="performance/index.html">Performance</a></h2>
<p>These tests are used to test performance of different javascript/qooxdoo rountines and allows them to compare them with each other</p>
</li>
</ul>
</div>
</body>
</html>

57
swat/apps/qooxdoo-examples/performance/ArrayCreate_1.html Normal file
View File

@ -0,0 +1,57 @@
<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>Tests for empty Array creation performance</p>
<ol>
<li>Using "[]"</li>
<li>Using "new Array"</li>
<li>Using "new Array()"</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function ArrayCreate1(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = [];
};
};
function ArrayCreate2(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Array;
};
};
function ArrayCreate3(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Array();
};
};
new qx.dev.TimeTracker(ArrayCreate1, ArrayCreate2, ArrayCreate3);
});
</script>
</body>
</html>

47
swat/apps/qooxdoo-examples/performance/ArrayCreate_2.html Normal file
View File

@ -0,0 +1,47 @@
<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>Tests for filled Array creation performance</p>
<ol>
<li>Using "[ values ]"</li>
<li>Using "new Array(values)"</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function ArrayCreate1(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = [ 1, 2, 3, 4, 5 ];
};
};
function ArrayCreate2(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Array(1, 2, 3, 4, 5);
};
};
new qx.dev.TimeTracker(ArrayCreate1, ArrayCreate2);
});
</script>
</body>
</html>

43
swat/apps/qooxdoo-examples/performance/GlobalObject_1.html Normal file
View File

@ -0,0 +1,43 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Create 10.000 new (non stored) objects inside a loop. Identical to LocalObject_1.html.</p>
<h1>Result</h1>
<p>The performance in IE is quite good (~330ms for each loop), compared to the same stuff executed without the precreated stuff.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
});
</script>
</body>
</html>

51
swat/apps/qooxdoo-examples/performance/GlobalObject_2.html Normal file
View File

@ -0,0 +1,51 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (globally stored). After this create 10.000 new (non stored) objects inside a loop.</p>
<p>Keep global storage over runtime.</p>
<h1>Result</h1>
<p>The performance in IE is poor (~1150ms for each loop), compared to the same stuff executed without so much precreated objects (previous example).</p>
<p>It makes no difference if we use a global or a local variable here. It's identical to LocalObject_2.html.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
window.store = [];
for (var i=0; i<50000; i++) {
window.store.push({});
};
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
});
</script>
</body>
</html>

53
swat/apps/qooxdoo-examples/performance/GlobalObject_3.html Normal file
View File

@ -0,0 +1,53 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (globally stored). After this create 10.000 new (non stored) objects inside a loop.</p>
<p>Use removeAll to clean up global storage after first loop.</p>
<h1>Result</h1>
<p>The additional cleanup (remove all entries) of the global storage optimizes performance after the first loop. First loop is done after ~1150ms. The following loop needs ~490ms. Not bad, but poorly compared to the version, where the storage have never exist before. (See first examples, which executes in ~350ms.)</p>
<p>It makes no difference if we use a global or a local variable here. It's identical to LocalObject_3.html.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
window.store = [];
for (var i=0; i<50000; i++) {
window.store.push({});
};
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
qx.lang.Array.removeAll(window.store);
});
</script>
</body>
</html>

52
swat/apps/qooxdoo-examples/performance/GlobalObject_4.html Normal file
View File

@ -0,0 +1,52 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (globally stored). After this create 10.000 new (non stored) objects inside a loop.</p>
<p>Overwrite global storage to clean up after first loop.</p>
<h1>Result</h1>
<p>The additional cleanup (overwrite with null) of the global storage optimizes performance after the first loop. First loop is done after ~1150ms. The following loop needs ~350ms. Quite good. The same value as in the first example, where the data have never exist.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
window.store = [];
for (var i=0; i<50000; i++) {
window.store.push({});
};
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
window.store = null;
});
</script>
</body>
</html>

43
swat/apps/qooxdoo-examples/performance/LocalObject_1.html Normal file
View File

@ -0,0 +1,43 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Create 10.000 new (non stored) objects inside a loop. Identical to GlobalObject_1.html.</p>
<h1>Result</h1>
<p>The performance in IE is quite good (~330ms for each loop), compared to the same stuff executed without the precreated stuff.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
});
</script>
</body>
</html>

51
swat/apps/qooxdoo-examples/performance/LocalObject_2.html Normal file
View File

@ -0,0 +1,51 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (locally stored). After this create 10.000 new (not stored) objects inside a loop.</p>
<p>As the loop will be executed inside the scope of "store", the browser must keep the information about "store" with each execution of "test", even if called from the timeout.</p>
<h1>Result</h1>
<p>The performance in IE is poor (~1150ms for each loop), compared to the same stuff executed without so much precreated objects (previous example).</p>
<p>It makes no difference if we use a global or a local variable here. It's identical to GlobalObject_2.html.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var store = [];
for (var i=0; i<50000; i++) {
store.push({});
};
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
});
</script>
</body>
</html>

52
swat/apps/qooxdoo-examples/performance/LocalObject_3.html Normal file
View File

@ -0,0 +1,52 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (locally stored). After this create 10.000 new (not stored) objects inside a loop.</p>
<h1>Result</h1>
<p>The additional cleanup (remove all entries) of the local storage optimizes performance after the first loop. First loop is done after ~1150ms. The following loop needs ~490ms. Not bad, but poorly compared to the version, where the storage have never exist before. (See first examples, which executes in ~350ms.)</p>
<p>It makes no difference if we use a global or a local variable here. It's identical to GlobalObject_3.html.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var store = [];
for (var i=0; i<50000; i++) {
store.push({});
};
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
qx.lang.Array.removeAll(store);
});
</script>
</body>
</html>

53
swat/apps/qooxdoo-examples/performance/LocalObject_4.html Normal file
View File

@ -0,0 +1,53 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (locally stored). After this create 10.000 new (not stored) objects inside a loop.</p>
<p>The "store" variable will be resetted after the first loop with "null".</p>
<h1>Result</h1>
<p>The additional cleanup (overwrite with null) of the global storage optimizes performance after the first loop. First loop is done after ~1150ms. The following loop needs ~350ms. Quite good. The same value as in the first example, where the data have never exist.</p>
<p>Interesting because theoratically the function implemenetation of "test" is inside the scope of "store".</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var store = [];
for (var i=0; i<50000; i++) {
store.push({});
};
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
test();
store = null;
});
</script>
</body>
</html>

50
swat/apps/qooxdoo-examples/performance/LocalObject_5.html Normal file
View File

@ -0,0 +1,50 @@
<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>JS Object Storage Performance</p>
<h1>Test Description</h1>
<p>Precreate 50.000 objects (locally stored). After this create 10.000 new (not stored) objects inside a loop.</p>
<p>The test method is implemented outside of the scope of "store".</p>
<h1>Result</h1>
<p>We need no additional cleanup to get a good performance of the function. First loop is done after ~1150ms. The following loop needs ~350ms. Quite good. The same value as in the first example, where the data have never exist.</p>
</div>
<script type="text/javascript">
function test()
{
var _s = (new Date).valueOf();
for (var i=0; i<10000; i++) {
new Object()
};
window.status = "time: " + (new Date).valueOf() + " | measured: " + ((new Date).valueOf() - _s) + "ms";
window.setTimeout(test, 1000);
}
qx.core.Init.getInstance().defineMain(function()
{
var store = [];
for (var i=0; i<50000; i++) {
store.push({});
};
test();
});
</script>
</body>
</html>

110
swat/apps/qooxdoo-examples/performance/NumberCreate_1.html Normal file
View File

@ -0,0 +1,110 @@
<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>Tests for Number creation performance</p>
<ol>
<li>Using simple number</li>
<li>Using parseInt</li>
<li>Using parseFloat</li>
<li>Using new with string int</li>
<li>Using new with string float</li>
<li>Using new with simple number</li>
<li>Using new with parseInt</li>
<li>Using new with parseFloat</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var n1 = "2392";
var n2 = "223.92";
function NumberCreate1(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = 2392;
};
};
function NumberCreate2(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = parseInt(n1);
};
};
function NumberCreate3(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = parseFloat(n2);
};
};
function NumberCreate4(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Number(n1);
};
};
function NumberCreate5(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Number(n2);
};
};
function NumberCreate6(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Number(2392);
};
};
function NumberCreate7(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Number(parseInt(n1));
};
};
function NumberCreate8(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Number(parseFloat(n2));
};
};
new qx.dev.TimeTracker(NumberCreate1, NumberCreate2, NumberCreate3, NumberCreate4, NumberCreate5, NumberCreate6, NumberCreate7, NumberCreate8);
});
</script>
</body>
</html>

57
swat/apps/qooxdoo-examples/performance/ObjectCreate_1.html Normal file
View File

@ -0,0 +1,57 @@
<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>Tests for empty Object creation performance</p>
<ol>
<li>Using "{}"</li>
<li>Using "new Object"</li>
<li>Using "new Object()"</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function ObjectCreate1(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = {};
};
};
function ObjectCreate2(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Object;
};
};
function ObjectCreate3(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = new Object();
};
};
new qx.dev.TimeTracker(ObjectCreate1, ObjectCreate2, ObjectCreate3);
});
</script>
</body>
</html>

77
swat/apps/qooxdoo-examples/performance/ObjectCreate_2.html Normal file
View File

@ -0,0 +1,77 @@
<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>Tests for filled Object creation performance</p>
<ol>
<li>Using "{ content }"</li>
<li>Using "new Object; obj.key = value"</li>
<li>Using "new Object(); obj.key = value"</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function ObjectCreate1(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++) {
foo = {
key1 : 1,
key2 : 2,
key3 : 3,
key4 : 4,
key5 : 5
};
};
};
function ObjectCreate2(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++)
{
foo = new Object;
foo.key1 = 1;
foo.key2 = 2;
foo.key3 = 3;
foo.key4 = 4;
foo.key5 = 5;
};
};
function ObjectCreate3(vLoops)
{
var foo;
for (var i=0; i<vLoops; i++)
{
foo = new Object();
foo.key1 = 1;
foo.key2 = 2;
foo.key3 = 3;
foo.key4 = 4;
foo.key5 = 5;
};
};
new qx.dev.TimeTracker(ObjectCreate1, ObjectCreate2, ObjectCreate3);
});
</script>
</body>
</html>

92
swat/apps/qooxdoo-examples/performance/ObjectLevel_1.html Executable file
View File

@ -0,0 +1,92 @@
<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>Testing the influence of inheritance to object creation performance.</p>
<p>Result: Each inheritance level increases the negative effect.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function l1() {
this.store = true;
}
function l2() {
l1.call(this);
}
l2.prototype = new l1;
function l3() {
l2.call(this);
}
l3.prototype = new l2;
function l4() {
l3.call(this);
}
l4.prototype = new l3;
function l5() {
l4.call(this);
}
l5.prototype = new l4;
function l6() {
l5.call(this);
}
l6.prototype = new l5;
function t1(vLoops) {
for (var i=0; i<vLoops; i++) {
new l1;
}
}
function t2(vLoops) {
for (var i=0; i<vLoops; i++) {
new l2;
}
}
function t3(vLoops) {
for (var i=0; i<vLoops; i++) {
new l3;
}
}
function t4(vLoops) {
for (var i=0; i<vLoops; i++) {
new l4;
}
}
function t5(vLoops) {
for (var i=0; i<vLoops; i++) {
new l5;
}
}
function t6(vLoops) {
for (var i=0; i<vLoops; i++) {
new l6;
}
}
new qx.dev.TimeTracker(t1, t2, t3, t4, t5, t6);
});
</script>
</body>
</html>

88
swat/apps/qooxdoo-examples/performance/ObjectLevel_2.html Executable file
View File

@ -0,0 +1,88 @@
<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>Testing the influence of inheritance to object creation performance.</p>
<p>Don't execute superclass constructor.</p>
<p>Result: No negative effect!</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function l1() {
this.store = true;
}
function l2() {
}
l2.prototype = new l1;
function l3() {
}
l3.prototype = new l2;
function l4() {
}
l4.prototype = new l3;
function l5() {
}
l5.prototype = new l4;
function l6() {
}
l6.prototype = new l5;
function t1(vLoops) {
for (var i=0; i<vLoops; i++) {
new l1;
}
}
function t2(vLoops) {
for (var i=0; i<vLoops; i++) {
new l2;
}
}
function t3(vLoops) {
for (var i=0; i<vLoops; i++) {
new l3;
}
}
function t4(vLoops) {
for (var i=0; i<vLoops; i++) {
new l4;
}
}
function t5(vLoops) {
for (var i=0; i<vLoops; i++) {
new l5;
}
}
function t6(vLoops) {
for (var i=0; i<vLoops; i++) {
new l6;
}
}
new qx.dev.TimeTracker(t1, t2, t3, t4, t5, t6);
});
</script>
</body>
</html>

97
swat/apps/qooxdoo-examples/performance/ObjectLevel_3.html Normal file
View File

@ -0,0 +1,97 @@
<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>Testing the influence of inheritance to object creation performance.</p>
<p>Result: Each inheritance level increases the negative effect.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function l1() {
this.store = true;
}
function l2() {
this._t = l1;
this._t();
}
l2.prototype = new l1;
function l3() {
this._t = l2;
this._t();
}
l3.prototype = new l2;
function l4() {
this._t = l3;
this._t();
}
l4.prototype = new l3;
function l5() {
this._t = l4;
this._t();
}
l5.prototype = new l4;
function l6() {
this._t = l5;
this._t();
}
l6.prototype = new l5;
function t1(vLoops) {
for (var i=0; i<vLoops; i++) {
new l1;
}
}
function t2(vLoops) {
for (var i=0; i<vLoops; i++) {
new l2;
}
}
function t3(vLoops) {
for (var i=0; i<vLoops; i++) {
new l3;
}
}
function t4(vLoops) {
for (var i=0; i<vLoops; i++) {
new l4;
}
}
function t5(vLoops) {
for (var i=0; i<vLoops; i++) {
new l5;
}
}
function t6(vLoops) {
for (var i=0; i<vLoops; i++) {
new l6;
}
}
new qx.dev.TimeTracker(t1, t2, t3, t4, t5, t6);
});
</script>
</body>
</html>

62
swat/apps/qooxdoo-examples/performance/ObjectSize_1.html Executable file
View File

@ -0,0 +1,62 @@
<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>Testing the incluence to the performance of data using the prototype mechanism on classes.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var emptyObject = function() {};
var protoObject1 = function() {};
var protoObject2 = function() {};
for (var i=0; i<1000; i++)
{
protoObject1.prototype["i" + i] = function() {
alert("Hello World: " + i);
};
}
for (var i=0; i<1000; i++)
{
protoObject2.prototype["i" + i] = "Hello World";
}
function empty(vLoops)
{
for (var i=0; i<vLoops; i++) {
new emptyObject;
}
}
function protos1(vLoops)
{
for (var i=0; i<vLoops; i++) {
new protoObject1;
}
}
function protos2(vLoops)
{
for (var i=0; i<vLoops; i++) {
new protoObject2;
}
}
new qx.dev.TimeTracker(empty, protos1, protos2);
});
</script>
</body>
</html>

83
swat/apps/qooxdoo-examples/performance/Qooxdoo_1.html Normal file
View File

@ -0,0 +1,83 @@
<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>Tests for qooxdoo object performance</p>
<ol>
<li>qx.core.Object</li>
<li>qx.core.Target</li>
<li>qx.event.type.Event</li>
<li>qx.event.type.MouseEvent</li>
<li>qx.ui.basic.Terminator</li>
<li>qx.ui.layout.CanvasLayout</li>
<li>qx.ui.layout.BoxLayout</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function TestObject(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.core.Object;
};
};
function TestTarget(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.core.Target;
};
};
function TestEvent(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.event.type.Event;
};
};
function TestMouseEvent(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.event.type.MouseEvent;
};
};
function TestTerminator(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.ui.basic.Terminator;
};
};
function TestCanvasLayout(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.ui.layout.CanvasLayout;
};
};
function TestBoxLayout(vLoops)
{
for (var i=0; i<vLoops; i++) {
new qx.ui.layout.BoxLayout;
};
};
new qx.dev.TimeTracker(TestObject, TestTarget, TestEvent, TestMouseEvent, TestTerminator, TestCanvasLayout, TestBoxLayout);
});
</script>
</body>
</html>

95
swat/apps/qooxdoo-examples/performance/StringConcat_1.html Normal file
View File

@ -0,0 +1,95 @@
<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>Tests for String Performance. Using new String instances for concat.</p>
<ol>
<li>Operator +=</li>
<li>Operators = and +</li>
<li>Concat function</li>
<li>Array Push</li>
<li>Array Index</li>
<li>StringBuilder Object</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
function StringConcatShort(vLoops)
{
var s = "";
for (var i=0; i<vLoops; i++) {
s += "a";
};
};
function StringConcatShortAlt(vLoops)
{
var s = "";
for (var i=0; i<vLoops; i++) {
s = s + "a";
};
};
function StringConcatMethod(vLoops)
{
var s = "";
for (var i=0; i<vLoops; i++) {
s=s.concat("a");
};
};
function StringConcatArrayPush(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s.push("a");
};
s = s.join("");
};
function StringConcatArrayAdd(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s[s.length] = "a";
};
s = s.join("");
};
function StringConcatStringBuilder(vLoops)
{
var s = new qx.type.StringBuilder;
for (var i=0; i<vLoops; i++) {
s.add("a");
};
s = s.get();
};
new qx.dev.TimeTracker(StringConcatShort, StringConcatShortAlt,
StringConcatMethod, StringConcatArrayPush, StringConcatArrayAdd,
StringConcatStringBuilder);
});
</script>
</body>
</html>

98
swat/apps/qooxdoo-examples/performance/StringConcat_2.html Normal file
View File

@ -0,0 +1,98 @@
<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>Tests for String Performance. Using cached string instances for concat.</p>
<ol>
<li>Operator +=</li>
<li>Operators = and +</li>
<li>Concat function</li>
<li>Array Push</li>
<li>Array Index</li>
<li>StringBuilder Object</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var e = "";
var a = "a";
function StringConcatShort(vLoops)
{
var s = e;
for (var i=0; i<vLoops; i++) {
s += a;
};
};
function StringConcatShortAlt(vLoops)
{
var s = e;
for (var i=0; i<vLoops; i++) {
s = s + a;
};
};
function StringConcatMethod(vLoops)
{
var s = e;
for (var i=0; i<vLoops; i++) {
s=s.concat(a);
};
};
function StringConcatArrayPush(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s.push(a);
};
s = s.join(e);
};
function StringConcatArrayAdd(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s[s.length] = a;
};
s = s.join(e);
};
function StringConcatStringBuilder(vLoops)
{
var s = new qx.type.StringBuilder;
for (var i=0; i<vLoops; i++) {
s.add(a);
};
s = s.get();
};
new qx.dev.TimeTracker(StringConcatShort, StringConcatShortAlt,
StringConcatMethod, StringConcatArrayPush, StringConcatArrayAdd,
StringConcatStringBuilder);
});
</script>
</body>
</html>

109
swat/apps/qooxdoo-examples/performance/StringConcat_3.html Normal file
View File

@ -0,0 +1,109 @@
<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>Tests for String Performance.</p>
<p>Getting an filled array of strings and try to combine them.</p>
<ol>
<li>Operator +=</li>
<li>Operators = and +</li>
<li>Concat function</li>
<li>Array Push</li>
<li>Array Index</li>
<li>Array Append</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var e = "";
var a = "a";
function getStringArr(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s.push(a);
};
return s;
};
function StringConcatShort(vLoops)
{
var s = e;
for (var i=0; i<vLoops; i++) {
s += getStringArr(vLoops).join(e);
};
};
function StringConcatShortAlt(vLoops)
{
var s = e;
for (var i=0; i<vLoops; i++) {
s = s + getStringArr(vLoops).join(e);
};
};
function StringConcatMethod(vLoops)
{
var s = e;
for (var i=0; i<vLoops; i++) {
s=s.concat(getStringArr(vLoops).join(e));
};
};
function StringConcatArrayPush(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s.push(getStringArr(vLoops).join(e));
};
s = s.join(e);
};
function StringConcatArrayAdd(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s[s.length] = getStringArr(vLoops).join(e);
};
s = s.join(e);
};
function StringConcatArrayAppend(vLoops)
{
var s = [];
for (var i=0; i<vLoops; i++) {
s.push.apply(s, getStringArr(vLoops));
};
s = s.join(e);
};
new qx.dev.TimeTracker(StringConcatShort, StringConcatShortAlt, StringConcatMethod, StringConcatArrayPush, StringConcatArrayAdd, StringConcatArrayAppend);
});
</script>
</body>
</html>

84
swat/apps/qooxdoo-examples/performance/TypeCheck_1.html Normal file
View File

@ -0,0 +1,84 @@
<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>Tests for typical value checks and their performance.</p>
<ol>
<li>Typeof with Strings</li>
<li>Typeof with Constants</li>
<li>Instanceof</li>
</ol>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var STR = "string";
var NR = "number";
var OBJ = "object";
var str = "Hello World"
var nr1 = 1000;
var nr2 = Infinity;
var nr3 = NaN;
var nr4 = 0.432;
var obj1 = {};
var obj2 = { key1 : "hello world", key2 : "hello world", key3 : "hello world" }
function typeCheckTypeof1(vLoops)
{
for (var i=0; i<vLoops; i++)
{
typeof str === "string";
typeof nr1 === "number";
typeof nr2 === "number";
typeof nr3 === "number";
typeof nr4 === "number";
typeof obj1 === "object";
typeof obj2 === "object";
}
}
function typeCheckTypeof2(vLoops)
{
for (var i=0; i<vLoops; i++)
{
typeof str === STR;
typeof nr1 === NR;
typeof nr2 === NR;
typeof nr3 === NR;
typeof nr4 === NR;
typeof obj1 === OBJ;
typeof obj2 === OBJ;
}
}
function typeCheckInstanceOf(vLoops)
{
for (var i=0; i<vLoops; i++)
{
str instanceof String
nr1 instanceof Number
nr2 instanceof Number
nr3 instanceof Number
nr4 instanceof Number
obj1 instanceof Object
obj2 instanceof Object
}
}
new qx.dev.TimeTracker(typeCheckTypeof1, typeCheckTypeof2, typeCheckInstanceOf);
});
</script>
</body>
</html>

18
swat/apps/qooxdoo-examples/performance/index.html Normal file
View File

@ -0,0 +1,18 @@
<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>Please choose an example from above.</p>
</div>
</body>
</html>

128
swat/apps/qooxdoo-examples/showcase/Showcase_1.html Normal file
View File

@ -0,0 +1,128 @@
<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>A small example how a webmail application can look and feel using qooxdoo.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var doc = qx.ui.core.ClientDocument.getInstance();
var dockLayout = new qx.ui.layout.DockLayout;
dockLayout.setLocation(20, 48);
dockLayout.setDimension(700, 500);
dockLayout.setBackgroundColor("white");
dockLayout.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
doc.add(dockLayout);
var menubar = new qx.ui.menu.MenuBar;
var toolbar = new qx.ui.toolbar.ToolBar;
var tree = new qx.ui.tree.Tree("Inbox");
var status = new qx.ui.basic.Atom("Status", "icon/16/network.png");
tree.setWidth(200);
tree.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
tree.add(new qx.ui.tree.TreeFolder("Drafts"));
tree.add(new qx.ui.tree.TreeFolder("Sent"));
tree.add(new qx.ui.tree.TreeFolder("Trash"));
tree.add(new qx.ui.tree.TreeFolder("Junk"));
status.setWidth(null);
status.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
status.setHorizontalChildrenAlign("left");
status.setPadding(2, 4);
status.setBackgroundColor("threedface");
dockLayout.addTop(menubar);
dockLayout.addTop(toolbar);
dockLayout.addBottom(status);
dockLayout.addLeft(tree);
var btns = [
{ text : "New", icon : "icon/16/mail-new.png" },
{ text : "Send/Receive", icon : "icon/16/mail-send.png" },
{ text : "Adressbook", icon : "icon/16/appointment.png" }
];
for (var i=0; i<btns.length; i++) {
toolbar.add(new qx.ui.toolbar.ToolBarButton(btns[i].text, btns[i].icon));
};
var filemnu = new qx.ui.menu.Menu;
var editmnu = new qx.ui.menu.Menu;
var optimnu = new qx.ui.menu.Menu;
var helpmnu = new qx.ui.menu.Menu;
filemnu.add(new qx.ui.menu.MenuButton("New Mail"));
filemnu.add(new qx.ui.menu.MenuButton("Exit"));
editmnu.add(new qx.ui.menu.MenuButton("Cut"));
editmnu.add(new qx.ui.menu.MenuButton("Copy"));
editmnu.add(new qx.ui.menu.MenuButton("Paste"));
optimnu.add(new qx.ui.menu.MenuButton("View"));
optimnu.add(new qx.ui.menu.MenuButton("Settings"));
helpmnu.add(new qx.ui.menu.MenuButton("Help"));
helpmnu.add(new qx.ui.menu.MenuButton("About"));
var filemn = new qx.ui.menu.MenuBarButton("File", filemnu);
var editmn = new qx.ui.menu.MenuBarButton("Edit", editmnu);
var optimn = new qx.ui.menu.MenuBarButton("Options", optimnu);
var helpmn = new qx.ui.menu.MenuBarButton("Help", helpmnu);
menubar.add(filemn, editmn, optimn, new qx.ui.basic.HorizontalSpacer, helpmn);
doc.add(filemnu, editmnu, optimnu, helpmnu);
var ld = [];
var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
for (var i=0, t; i<333; i++)
{
t=Math.round(Math.random()*4);
ld.push({ subject : { text : "Subject " + i }, from : { text : "qooxdoo User" }, date : { text : "01/26/2006" }});
};
var lc =
{
subject : { label : "Subject", width : 200, type : "text" },
from : { label : "From", width : 100, type : "text" },
date: { label : "Date", width : 100, type : "text" }
};
var view = new qx.ui.listview.ListView(ld, lc);
view.setLocation(220, 95);
view.setDimension(499, 430);
view.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
doc.add(view);
});
</script>
</body>
</html>

18
swat/apps/qooxdoo-examples/showcase/index.html Normal file
View File

@ -0,0 +1,18 @@
<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>Please choose a showcase from above.</p>
</div>
</body>
</html>

286
swat/apps/qooxdoo-examples/test/Atom_1.html Normal file
View File

@ -0,0 +1,286 @@
<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 speed tests for qx.ui.basic.Atom. Please regard, that many of things in the finished
page are modified on the already created and visible qx.ui.basic.Atom instances. This is not
a good example in scripting qooxdoo. It's always faster to configure a instance of qx.ui.core.Widget
completely, before add it to the qx.ui.core.ClientDocument or any other visible parent qx.ui.core.Widget.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
/*
----------------------------------------------
TEST LEVEL I
----------------------------------------------
*/
var la1 = new qx.ui.basic.Atom("Test No #1", "icon/16/bell.png");
with(la1)
{
setTop(48);
setLeft(20);
setIconPosition("left");
};
d.add(la1);
var la2 = new qx.ui.basic.Atom("Test No #2", "icon/16/bell.png");
with(la2)
{
setTop(148);
setLeft(20);
setIconPosition("right");
};
d.add(la2);
var la3 = new qx.ui.basic.Atom("Test No #3", "icon/16/bell.png");
with(la3)
{
setTop(248);
setLeft(20);
setIconPosition("top");
};
d.add(la3);
var la4 = new qx.ui.basic.Atom("Test No #4", "icon/16/bell.png");
with(la4)
{
setTop(348);
setLeft(20);
setIconPosition("bottom");
};
d.add(la4);
/*
----------------------------------------------
TEST LEVEL II
----------------------------------------------
*/
var lb1 = new qx.ui.basic.Atom("Test No #1", "icon/16/bell.png");
with(lb1)
{
setTop(48);
setLeft(120);
setIconPosition("left");
};
d.add(lb1);
lb1.setIconPosition("right");
var lb2 = new qx.ui.basic.Atom("Test No #2", "icon/16/bell.png");
with(lb2)
{
setTop(148);
setLeft(120);
setIconPosition("right");
};
d.add(lb2);
lb2.setIconPosition("left");
var lb3 = new qx.ui.basic.Atom("Test No #3", "icon/16/bell.png");
with(lb3)
{
setTop(248);
setLeft(120);
setIconPosition("top");
};
d.add(lb3);
lb3.setIconPosition("bottom");
var lb4 = new qx.ui.basic.Atom("Test No #4", "icon/16/bell.png");
with(lb4)
{
setTop(348);
setLeft(120);
setIconPosition("bottom");
};
d.add(lb4);
lb4.setIconPosition("top");
/*
----------------------------------------------
TEST LEVEL III
----------------------------------------------
*/
var lc1 = new qx.ui.basic.Atom("Test No #1", "icon/16/bell.png");
with(lc1)
{
setTop(48);
setLeft(220);
setIconPosition("left");
};
d.add(lc1);
lc1.setIconPosition("top");
var lc2 = new qx.ui.basic.Atom("Test No #2", "icon/16/bell.png");
with(lc2)
{
setTop(148);
setLeft(220);
setIconPosition("right");
};
d.add(lc2);
lc2.setIconPosition("bottom");
var lc3 = new qx.ui.basic.Atom("Test No #3", "icon/16/bell.png");
with(lc3)
{
setTop(248);
setLeft(220);
setIconPosition("top");
};
d.add(lc3);
lc3.setIconPosition("right");
var lc4 = new qx.ui.basic.Atom("Test No #4", "icon/16/bell.png");
with(lc4)
{
setTop(348);
setLeft(220);
setIconPosition("bottom");
};
d.add(lc4);
lc4.setIconPosition("left");
/*
----------------------------------------------
TEST LEVEL IV
----------------------------------------------
*/
var ld1 = new qx.ui.basic.Atom("Test No #1", "icon/16/bell.png");
with(ld1)
{
setTop(48);
setLeft(320);
setIconPosition("left");
};
d.add(ld1);
ld1.setIconPosition("bottom");
var ld2 = new qx.ui.basic.Atom("Test No #2", "icon/16/bell.png");
with(ld2)
{
setTop(148);
setLeft(320);
setIconPosition("right");
};
d.add(ld2);
ld2.setIconPosition("top");
var ld3 = new qx.ui.basic.Atom("Test No #3", "icon/16/bell.png");
with(ld3)
{
setTop(248);
setLeft(320);
setIconPosition("top");
};
d.add(ld3);
ld3.setIconPosition("left");
var ld4 = new qx.ui.basic.Atom("Test No #4", "icon/16/bell.png");
with(ld4)
{
setTop(348);
setLeft(320);
setIconPosition("bottom");
};
d.add(ld4);
ld4.setIconPosition("right");
/*
----------------------------------------------
TEST LEVEL V
----------------------------------------------
*/
var le1 = new qx.ui.basic.Atom("Test No #1", "icon/16/bell.png");
with(le1)
{
setTop(48);
setLeft(420);
setIconPosition("right");
};
d.add(le1);
le1.setIconPosition("top");
var le2 = new qx.ui.basic.Atom("Test No #2", "icon/16/bell.png");
with(le2)
{
setTop(148);
setLeft(420);
setIconPosition("left");
};
d.add(le2);
le2.setIconPosition("bottom");
var le3 = new qx.ui.basic.Atom("Test No #3", "icon/16/bell.png");
with(le3)
{
setTop(248);
setLeft(420);
setIconPosition("top");
};
d.add(le3);
le3.setIconPosition("right");
var le4 = new qx.ui.basic.Atom("Test No #4", "icon/16/bell.png");
with(le4)
{
setTop(348);
setLeft(420);
setIconPosition("bottom");
};
d.add(le4);
le4.setIconPosition("left");
});
</script>
</body>
</html>

187
swat/apps/qooxdoo-examples/test/Atom_2.html Normal file
View File

@ -0,0 +1,187 @@
<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>Example to show correct calculations of qx.ui.basic.Atom sizes. Normally a qx.ui.basic.Atom has only the size of its content.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var w = qx.ui.core.ClientDocument.getInstance();
function alertoff() {
alert(this.getElement().offsetWidth + "x" + this.getElement().offsetHeight);
};
var l1 = new qx.ui.layout.CanvasLayout();
var l2 = new qx.ui.layout.CanvasLayout();
with(l1)
{
setTop(100);
setLeft(20);
setWidth(500);
setHeight(1);
setBackgroundColor("red");
setOverflow("hidden");
};
with(l2)
{
setTop(123);
setLeft(20);
setWidth(500);
setHeight(1);
setBackgroundColor("red");
setOverflow("hidden");
};
w.add(l1);
w.add(l2);
var a1 = new qx.ui.basic.Atom("Pure Text", "icon/22/folder.png");
var a2 = new qx.ui.basic.Atom(null, "icon/22/folder.png");
with(a1) {
setBorder(new qx.renderer.border.Border(1, "solid", "black"));
setTop(100);
setLeft(120);
};
with(a2) {
setBorder(new qx.renderer.border.Border(1, "solid", "black"));
setTop(100);
setLeft(300);
};
w.add(a1);
w.add(a2);
a1.addEventListener("click", alertoff);
a2.addEventListener("click", alertoff);
var l3 = new qx.ui.layout.CanvasLayout();
var l4 = new qx.ui.layout.CanvasLayout();
with(l3)
{
setTop(200);
setLeft(20);
setWidth(500);
setHeight(1);
setBackgroundColor("red");
setOverflow("hidden");
};
with(l4)
{
setTop(233);
setLeft(20);
setWidth(500);
setHeight(1);
setBackgroundColor("red");
setOverflow("hidden");
};
w.add(l3);
w.add(l4);
var b1 = new qx.ui.basic.Atom("Pure Text", "icon/32/network.png");
var b2 = new qx.ui.basic.Atom(null, "icon/32/network.png");
with(b1) {
setBorder(new qx.renderer.border.Border(1, "solid", "black"));
setTop(200);
setLeft(120);
};
with(b2) {
setBorder(new qx.renderer.border.Border(1, "solid", "black"));
setTop(200);
setLeft(300);
};
w.add(b1);
w.add(b2);
b1.addEventListener("click", alertoff);
b2.addEventListener("click", alertoff);
var l5 = new qx.ui.layout.CanvasLayout();
var l6 = new qx.ui.layout.CanvasLayout();
with(l5)
{
setTop(300);
setLeft(20);
setWidth(500);
setHeight(1);
setBackgroundColor("red");
setOverflow("hidden");
};
with(l6)
{
setTop(317);
setLeft(20);
setWidth(500);
setHeight(1);
setBackgroundColor("red");
setOverflow("hidden");
};
w.add(l5);
w.add(l6);
var c1 = new qx.ui.basic.Atom("Pure Text", "icon/16/network.png");
var c2 = new qx.ui.basic.Atom(null, "icon/16/network.png");
with(c1) {
setBorder(new qx.renderer.border.Border(1, "solid", "black"));
setTop(300);
setLeft(120);
};
with(c2) {
setBorder(new qx.renderer.border.Border(1, "solid", "black"));
setTop(300);
setLeft(300);
};
w.add(c1);
w.add(c2);
c1.addEventListener("click", alertoff);
c2.addEventListener("click", alertoff);
});
</script>
</body>
</html>

322
swat/apps/qooxdoo-examples/test/Atom_3.html Normal file
View File

@ -0,0 +1,322 @@
<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>Layout tests for qx.ui.basic.Atom reimplementation.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var a1 = new qx.ui.basic.Atom;
a1.setLabel("hello world");
a1.setTop(48);
a1.setLeft(20);
a1.setPadding(2, 4);
a1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(a1);
var a2 = new qx.ui.basic.Atom;
a2.setIcon("icon/32/run.png");
a2.setTop(48);
a2.setLeft(120);
a2.setPadding(2, 4);
a2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(a2);
var b1 = new qx.ui.basic.Atom;
b1.setLabel("hello world");
b1.setIcon("icon/32/run.png");
b1.setIconPosition("left");
b1.setTop(100);
b1.setLeft(20);
b1.setPadding(2, 4);
b1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(b1);
var b2 = new qx.ui.basic.Atom;
b2.setLabel("hello world");
b2.setIcon("icon/32/run.png");
b2.setIconPosition("top");
b2.setTop(100);
b2.setLeft(120);
b2.setPadding(2, 4);
b2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(b2);
var b3 = new qx.ui.basic.Atom;
b3.setLabel("hello world");
b3.setIcon("icon/32/run.png");
b3.setIconPosition("right");
b3.setTop(100);
b3.setLeft(220);
b3.setPadding(2, 4);
b3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(b3);
var b4 = new qx.ui.basic.Atom;
b4.setLabel("hello world");
b4.setIcon("icon/32/run.png");
b4.setIconPosition("bottom");
b4.setTop(100);
b4.setLeft(320);
b4.setPadding(2, 4);
b4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(b4);
var c1 = new qx.ui.basic.Atom;
c1.setLabel("hello world");
c1.setIcon("icon/32/run.png");
c1.setShow("icon");
c1.setTop(180);
c1.setLeft(20);
c1.setPadding(2, 4);
c1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(c1);
var c2 = new qx.ui.basic.Atom;
c2.setLabel("hello world");
c2.setIcon("icon/32/run.png");
c2.setShow("label");
c2.setTop(180);
c2.setLeft(120);
c2.setPadding(2, 4);
c2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(c2);
var d1 = new qx.ui.basic.Atom;
d1.setLabel("hello world");
d1.setIcon("icon/32/run.png");
d1.setShow("icon");
d1.setTop(250);
d1.setLeft(20);
d1.setPadding(2, 4);
d1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(d1);
d1.setShow("both");
var d2 = new qx.ui.basic.Atom;
d2.setLabel("hello world");
d2.setIcon("icon/32/run.png");
d2.setShow("label");
d2.setTop(250);
d2.setLeft(120);
d2.setPadding(2, 4);
d2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(d2);
d2.setShow("both");
var d3 = new qx.ui.basic.Atom;
d3.setLabel("hello world");
d3.setIcon("icon/32/run.png");
d3.setShow("none");
d3.setTop(250);
d3.setLeft(220);
d3.setPadding(2, 4);
d3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(d3);
d3.setShow("both");
var e1 = new qx.ui.basic.Atom;
e1.setIcon("icon/32/run.png");
e1.setShow("none");
e1.setTop(300);
e1.setLeft(20);
e1.setPadding(2, 4);
e1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(e1);
e1.setShow("both");
e1.setLabel("hello world");
var e2 = new qx.ui.basic.Atom;
e2.setLabel("hello world");
e2.setShow("none");
e2.setTop(300);
e2.setLeft(120);
e2.setPadding(2, 4);
e2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(e2);
e2.setShow("both");
e2.setIcon("icon/32/run.png");
var e3 = new qx.ui.basic.Atom;
e3.setShow("none");
e3.setTop(300);
e3.setLeft(220);
e3.setPadding(2, 4);
e3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(e3);
e3.setShow("both");
e3.setIcon("icon/32/run.png");
e3.setLabel("hello world");
var e4 = new qx.ui.basic.Atom;
e4.setShow("none");
e4.setTop(300);
e4.setLeft(320);
e4.setPadding(2, 4);
e4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(e4);
e4.setShow("both");
e4.setLabel("hello world");
e4.setIcon("icon/32/run.png");
var f1 = new qx.ui.basic.Atom;
f1.setLabel("hello world");
f1.setIcon("icon/32/run.png");
f1.setIconPosition("left");
f1.setTop(350);
f1.setLeft(20);
f1.setPadding(2, 4);
f1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(f1);
f1.setIconPosition("top");
var f2 = new qx.ui.basic.Atom;
f2.setLabel("hello world");
f2.setIcon("icon/32/run.png");
f2.setIconPosition("left");
f2.setTop(350);
f2.setLeft(120);
f2.setPadding(2, 4);
f2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(f2);
f2.setIconPosition("right");
var f3 = new qx.ui.basic.Atom;
f3.setLabel("hello world");
f3.setIcon("icon/32/run.png");
f3.setIconPosition("left");
f3.setTop(350);
f3.setLeft(220);
f3.setPadding(2, 4);
f3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(f3);
f3.setIconPosition("bottom");
var g1 = new qx.ui.basic.Atom;
g1.setLabel("hello world");
g1.setIcon("icon/32/run.png");
g1.setIconPosition("top");
g1.setTop(450);
g1.setLeft(20);
g1.setPadding(2, 4);
g1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(g1);
g1.setIconPosition("right");
var g2 = new qx.ui.basic.Atom;
g2.setLabel("hello world");
g2.setIcon("icon/32/run.png");
g2.setIconPosition("top");
g2.setTop(450);
g2.setLeft(120);
g2.setPadding(2, 4);
g2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(g2);
g2.setIconPosition("bottom");
var g3 = new qx.ui.basic.Atom;
g3.setLabel("hello world");
g3.setIcon("icon/32/run.png");
g3.setIconPosition("top");
g3.setTop(450);
g3.setLeft(220);
g3.setPadding(2, 4);
g3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(g3);
g3.setIconPosition("left");
var h1 = new qx.ui.basic.Atom;
h1.setLabel("hello world");
h1.setIcon("icon/32/run.png");
h1.setIconPosition("left");
h1.setTop(520);
h1.setLeft(20);
h1.setPadding(2, 4);
h1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(h1);
h1.setSpacing(20);
var h2 = new qx.ui.basic.Atom;
h2.setLabel("hello world");
h2.setIcon("icon/32/run.png");
h2.setIconPosition("top");
h2.setTop(520);
h2.setLeft(150);
h2.setPadding(2, 4);
h2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
d.add(h2);
h2.setSpacing(20);
var i1 = new qx.ui.basic.Atom;
i1.setLabel("hello world");
i1.setIcon("icon/32/run.png");
i1.setIconPosition("left");
i1.setTop(600);
i1.setLeft(20);
i1.setPadding(2, 4);
i1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
i1.setHeight(150);
i1.setWidth(150);
d.add(i1);
var i2 = new qx.ui.basic.Atom;
i2.setLabel("hello world");
i2.setIcon("icon/32/run.png");
i2.setIconPosition("top");
i2.setTop(600);
i2.setLeft(200);
i2.setPadding(2, 4);
i2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
i2.setWidth(150);
i2.setHeight(150);
d.add(i2);
});
</script>
</body>
</html>

46
swat/apps/qooxdoo-examples/test/Atom_4.html Normal file
View File

@ -0,0 +1,46 @@
<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">
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var icons = [ "clock", "colors", "date", "folder", "locale", "penguin" ];
var sizes = [ 16, 22, 32, 48, 64, 48, 32, 22, 16 ];
var atom;
var toppos = 48;
for (var j=0; j<sizes.length; j++)
{
for (var i=0; i<icons.length; i++)
{
atom = new qx.ui.basic.Atom("Atom " + (i+1) + "." + (j+1), "icon/" + sizes[j] + "/" + icons[i] + ".png");
atom.setTop(toppos);
atom.setLeft(20 + (120 *i));
d.add(atom);
};
toppos += sizes[j] + 20;
};
});
</script>
</body>
</html>

43
swat/apps/qooxdoo-examples/test/Atom_5.html Normal file
View File

@ -0,0 +1,43 @@
<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>Adding many qx.ui.basic.Atom widgets without setting the icon-width and -height.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var atom;
var toppos = 48;
for (var i=0; i<20; i++)
{
for (var j=0; j<10; j++)
{
atom = new qx.ui.basic.Atom("Date", "icon/16/date.png");
atom.setTop(toppos);
atom.setLeft(20 + (j*50));
d.add(atom);
};
toppos += 20;
};
});
</script>
</body>
</html>

43
swat/apps/qooxdoo-examples/test/Atom_6.html Normal file
View File

@ -0,0 +1,43 @@
<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>Adding many qx.ui.basic.Atom widgets setting the icon-width and -height.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var atom;
var toppos = 48;
for (var i=0; i<20; i++)
{
for (var j=0; j<10; j++)
{
atom = new qx.ui.basic.Atom("Date", "icon/16/date.png", 16, 16);
atom.setTop(toppos);
atom.setLeft(20 + (j*50));
d.add(atom);
};
toppos += 20;
};
});
</script>
</body>
</html>

43
swat/apps/qooxdoo-examples/test/Atom_7.html Normal file
View File

@ -0,0 +1,43 @@
<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">
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var atom;
var toppos = 48;
for (var i=0; i<20; i++)
{
for (var j=0; j<10; j++)
{
atom = new qx.ui.basic.Atom(null, "icon/16/date.png", 16, 16);
atom.setTop(toppos);
atom.setLeft(20 + (j*50));
d.add(atom);
};
toppos += 20;
};
});
</script>
</body>
</html>

43
swat/apps/qooxdoo-examples/test/Atom_8.html Normal file
View File

@ -0,0 +1,43 @@
<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">
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var atom;
var toppos = 48;
for (var i=0; i<20; i++)
{
for (var j=0; j<10; j++)
{
atom = new qx.ui.basic.Atom("Date");
atom.setTop(toppos);
atom.setLeft(20 + (j*50));
d.add(atom);
};
toppos += 20;
};
});
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More