diff options
| author | Derrell Lipman <derrell@samba.org> | 2006-12-30 05:09:59 +0000 |
|---|---|---|
| committer | Gerald (Jerry) Carter <jerry@samba.org> | 2007-10-10 14:30:29 -0500 |
| commit | 1170417ceeb8c49a46cda522a38eaa71c9cae30c (patch) | |
| tree | dbf4c3fdcdb1af928dbd55f642ea40f00d09283a /webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example | |
| parent | 23ccdca41670085da4486841b0d4900b4c8b02f3 (diff) | |
| download | samba-1170417ceeb8c49a46cda522a38eaa71c9cae30c.tar.gz samba-1170417ceeb8c49a46cda522a38eaa71c9cae30c.tar.bz2 samba-1170417ceeb8c49a46cda522a38eaa71c9cae30c.zip | |
r20414: Start to make SWAT usable by others. This is just a start...
(This used to be commit 26a34037a7ca6fbd05c5a6f7c2d5973e34bc6918)
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example')
71 files changed, 7717 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_1.html new file mode 100644 index 0000000000..4dff79cf3d --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_1.html @@ -0,0 +1,73 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_2.html new file mode 100644 index 0000000000..db698a7232 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_2.html @@ -0,0 +1,172 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Some more complex tests for qx.ui.basic.Atom.</p> + <p>You can change all the properties before "really creating" the object or any time after this was done.</p> + </div> + + <div style="display:none" id="control"> + <p> + Width: + <a href="javascript://" onclick="void(at1.setWidth(null))">null</a> | + <a href="javascript://" onclick="void(at1.setWidth('auto'))">auto</a> | + <a href="javascript://" onclick="void(at1.setWidth(25))">25</a> | + <a href="javascript://" onclick="void(at1.setWidth(50))">50</a> | + <a href="javascript://" onclick="void(at1.setWidth(100))">100</a> | + <a href="javascript://" onclick="void(at1.setWidth(200))">200</a> + </p> + <p> + Height: + <a href="javascript://" onclick="void(at1.setHeight(null))">null</a> | + <a href="javascript://" onclick="void(at1.setHeight('auto'))">auto</a> | + <a href="javascript://" onclick="void(at1.setHeight(25))">25</a> | + <a href="javascript://" onclick="void(at1.setHeight(50))">50</a> | + <a href="javascript://" onclick="void(at1.setHeight(100))">100</a> | + <a href="javascript://" onclick="void(at1.setHeight(200))">200</a> + </p> + <hr/> + <p> + Label Size: + <a href="javascript://" onclick="void(at1.setLabel(null))">null</a> | + <a href="javascript://" onclick="void(at1.setLabel('short'))">short</a> | + <a href="javascript://" onclick="void(at1.setLabel('some cool label'))">medium</a> | + <a href="javascript://" onclick="void(at1.setLabel('ultra long label description'))">long</a> | + <a href="javascript://" onclick="void(at1.setLabel('<b>hello <i>world</i></b>'))">html</a> | + <a href="javascript://" onclick="void(at1.setLabel('<p>Hello tester.</p><ul><li>cool</li><li><b>test</b></li><li>file</li></ul>'))">complex</a> + </p> + <p> + Icon Size: + <a href="javascript://" onclick="void(at1.setIcon(null))">null</a> | + <a href="javascript://" onclick="void(at1.setIcon('icon/16/date.png'))">16px</a> | + <a href="javascript://" onclick="void(at1.setIcon('icon/32/colors.png'))">32px</a> | + <a href="javascript://" onclick="void(at1.setIcon('icon/48/memory.png'))">48px</a> + </p> + <p> + Icon Position: + <a href="javascript://" onclick="void(at1.setIconPosition('top'))">top</a> | + <a href="javascript://" onclick="void(at1.setIconPosition('right'))">right</a> | + <a href="javascript://" onclick="void(at1.setIconPosition('bottom'))">bottom</a> | + <a href="javascript://" onclick="void(at1.setIconPosition('left'))">left</a> + </p> + <p> + Spacing: + <a href="javascript://" onclick="void(at1.setSpacing(0))">0</a> | + <a href="javascript://" onclick="void(at1.setSpacing(2))">2</a> | + <a href="javascript://" onclick="void(at1.setSpacing(4))">4</a> | + <a href="javascript://" onclick="void(at1.setSpacing(6))">6</a> | + <a href="javascript://" onclick="void(at1.setSpacing(8))">8</a> | + <a href="javascript://" onclick="void(at1.setSpacing(10))">10</a> | + <a href="javascript://" onclick="void(at1.setSpacing(25))">25</a> | + <a href="javascript://" onclick="void(at1.setSpacing(50))">50</a> + </p> + <hr/> + <p> + Show: + <a href="javascript://" onclick="void(at1.setShow('none'))">None</a> | + <a href="javascript://" onclick="void(at1.setShow('label'))">Label</a> | + <a href="javascript://" onclick="void(at1.setShow('icon'))">Icon</a> | + <a href="javascript://" onclick="void(at1.setShow('both'))">Both</a> + </p> + <hr/> + <p> + Horizontal Children Align: + <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('left'))">left</a> | + <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('center'))">center</a> | + <a href="javascript://" onclick="void(at1.setHorizontalChildrenAlign('right'))">right</a> + </p> + <p> + Vertical Children Align: + <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('top'))">top</a> | + <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('middle'))">middle</a> | + <a href="javascript://" onclick="void(at1.setVerticalChildrenAlign('bottom'))">bottom</a> + </p> + <hr/> + <p> + Padding: + <a href="javascript://" onclick="void(at1.setPadding(null))">None</a> | + <a href="javascript://" onclick="void(at1.setPadding(2, 4))">2, 4</a> | + <a href="javascript://" onclick="void(at1.setPadding(4, 8))">4, 8</a> | + <a href="javascript://" onclick="void(at1.setPadding(16))">16</a> + </p> + <p> + Border: + <a href="javascript://" onclick="void(at1.setBorder(null))">null</a> | + <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(1, 'solid', 'black')))">1</a> | + <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(5, 'solid', 'black')))">5</a> | + <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(10, 'solid', 'black')))">10</a> | + <a href="javascript://" onclick="void(at1.setBorder(new qx.renderer.border.Border(25, 'solid', 'black')))">25</a> | + <a href="javascript://" onclick="void(at1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset))">outset</a> | + <a href="javascript://" onclick="void(at1.setBorder(qx.renderer.border.BorderPresets.getInstance().inset))">inset</a> + </p> + <hr/> + <p> + Opacity: + <a href="javascript://" onclick="void(at1.setOpacity(null))">null</a> | + <a href="javascript://" onclick="void(at1.setOpacity(0))">0</a> | + <a href="javascript://" onclick="void(at1.setOpacity(0.25))">0.25</a> | + <a href="javascript://" onclick="void(at1.setOpacity(0.5))">0.5</a> | + <a href="javascript://" onclick="void(at1.setOpacity(0.75))">0.75</a> | + <a href="javascript://" onclick="void(at1.setOpacity(1))">1</a> + </p> + <p> + Enabled: + <a href="javascript://" onclick="void(at1.setEnabled(false))">false</a> | + <a href="javascript://" onclick="void(at1.setEnabled(true))">true</a> + </p> + </div> + + <script type="text/javascript"> + var at1; + + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + at1 = new qx.ui.basic.Atom("My first qx.ui.basic.Atom", "icon/32/colors.png"); + + with(at1) + { + setTop(48); + setLeft(20); + + setIconPosition("right"); + + setBorder(qx.renderer.border.BorderPresets.getInstance().black); + setBackgroundColor(new qx.renderer.color.Color("white")); + setPadding(2, 4); + }; + + var ct1 = new qx.ui.basic.Label(document.getElementById("control").innerHTML); + + with(ct1) + { + setWidth(300); + setRight(335); + + setHeight(null); + setTop(48); + setBottom(48); + + setOverflow("auto"); + + setBackgroundColor(new qx.renderer.color.Color("white")); + setBorder(qx.renderer.border.BorderPresets.getInstance().groove); + setPadding(10); + }; + + d.add(at1, ct1); + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_3.html new file mode 100644 index 0000000000..4a5db8e9bf --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Atom_3.html @@ -0,0 +1,39 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ButtonView_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ButtonView_1.html new file mode 100644 index 0000000000..19c7c6f118 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ButtonView_1.html @@ -0,0 +1,89 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("Display", "icon/32/display.png"); + var bsb2 = new qx.ui.pageview.buttonview.Button("Penguin", "icon/32/penguin.png"); + var bsb3 = new qx.ui.pageview.buttonview.Button("Colors", "icon/32/colors.png"); + var bsb4 = new qx.ui.pageview.buttonview.Button("Icons", "icon/32/icons.png"); + var bsb5 = new qx.ui.pageview.buttonview.Button("Paint", "icon/32/paint.png"); + var bsb6 = new qx.ui.pageview.buttonview.Button("Applications", "icon/32/run.png"); + var bsb7 = new qx.ui.pageview.buttonview.Button("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.Page(bsb1); + var p2 = new qx.ui.pageview.buttonview.Page(bsb2); + var p3 = new qx.ui.pageview.buttonview.Page(bsb3); + var p4 = new qx.ui.pageview.buttonview.Page(bsb4); + var p5 = new qx.ui.pageview.buttonview.Page(bsb5); + var p6 = new qx.ui.pageview.buttonview.Page(bsb6); + var p7 = new qx.ui.pageview.buttonview.Page(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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ButtonView_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ButtonView_2.html new file mode 100644 index 0000000000..722827a894 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ButtonView_2.html @@ -0,0 +1,98 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("Display", "icon/16/display.png"); + var bsb2 = new qx.ui.pageview.buttonview.Button("Organizer", "icon/16/organizer.png"); + var bsb3 = new qx.ui.pageview.buttonview.Button("Colorize", "icon/16/colors.png"); + var bsb4 = new qx.ui.pageview.buttonview.Button("Icons", "icon/16/icons.png"); + var bsb5 = new qx.ui.pageview.buttonview.Button("Paint", "icon/16/paint.png"); + var bsb6 = new qx.ui.pageview.buttonview.Button("Applications", "icon/16/run.png"); + var bsb7 = new qx.ui.pageview.buttonview.Button("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.Page(bsb1); + var p2 = new qx.ui.pageview.buttonview.Page(bsb2); + var p3 = new qx.ui.pageview.buttonview.Page(bsb3); + var p4 = new qx.ui.pageview.buttonview.Page(bsb4); + var p5 = new qx.ui.pageview.buttonview.Page(bsb5); + var p6 = new qx.ui.pageview.buttonview.Page(bsb6); + var p7 = new qx.ui.pageview.buttonview.Page(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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Button_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Button_1.html new file mode 100644 index 0000000000..7f26c3325c --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Button_1.html @@ -0,0 +1,73 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/CheckBox_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/CheckBox_1.html new file mode 100644 index 0000000000..9073dc7098 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/CheckBox_1.html @@ -0,0 +1,104 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorPopup_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorPopup_1.html new file mode 100644 index 0000000000..269d863fb1 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorPopup_1.html @@ -0,0 +1,83 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Location.getPageBoxBottom(this.getElement())); + mypop.setLeft(qx.dom.Location.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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorSelector_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorSelector_1.html new file mode 100644 index 0000000000..a54005fbd9 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorSelector_1.html @@ -0,0 +1,29 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorSelector_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorSelector_2.html new file mode 100644 index 0000000000..1fbf822822 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ColorSelector_2.html @@ -0,0 +1,30 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html new file mode 100644 index 0000000000..ea628b89be --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html @@ -0,0 +1,230 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> + <script type="text/javascript"> + +function getTestData() { + var testData = [ + [ '1', 'One' ], + [ '2', 'Two' ], + [ '3', 'Three' ], + [ '4', 'Four' ], + [ '5', 'Five' ], + [ '6', 'Six' ], + [ '7', 'Seven' ], + [ '8', 'Eight' ], + [ '9', 'Nine' ], + [ '10', 'Ten' ], + [ '11', 'Eleven' ], + [ '12', 'Twelve' ], + [ '13', 'Thirteen' ], + [ '14', 'Fourteen' ], + [ '15', 'Fiveteen' ], + [ '16', 'Sixteen' ], + [ '17', 'Seventeen' ], + // Test of a long string + [ '1921', 'One thousand nine hundred twenty one' ] + ]; + for (var i = 0; i < testData.length; i++) { + testData[i].push('widget/arrows/'+(i % 2 ? 'up':'down')+'_small.gif'); + testData[i].push('Extra data '+i); + } + return testData; +} + +qx.OO.defineClass('Box', qx.ui.layout.BoxLayout, function() { + qx.ui.layout.BoxLayout.apply(this, arguments); + this.auto(); +}); + +qx.OO.defineClass('GroupBox', qx.ui.groupbox.GroupBox, function() { + qx.ui.groupbox.GroupBox.apply(this, arguments); + this.auto(); +}); + +qx.core.Init.getInstance().defineMain(function() { + // Shortcuts + var form = qx.ui.form; + Label = qx.ui.basic.Label; + var testData = getTestData(); + + //###1st row: combo + + combo = new form.ComboBoxEx; + var butSize = new form.Button('Size text field to content'); + butSize.addEventListener('execute', function() { + combo.sizeTextFieldToContent(); + }); + + var boxCombo2 = new Box; + with (boxCombo2) { + setSpacing(10); + add(combo, butSize); + } + var boxCombo = new GroupBox('This is the ComboBoxEx under test'); + boxCombo.add(boxCombo2); + + //###2nd row: Test of simple properties + var cEd = new form.CheckBox('Editable'); + cEd.setChecked(combo.getEditable()); + cEd.addEventListener('changeChecked', function() { + combo.setEditable(cEd.isChecked()); + }); + + var cEnsure = new form.CheckBox('Ensure something selected'); + cEnsure.setChecked(combo.getEnsureSomethingSelected()); + cEnsure.addEventListener('changeChecked', function() { + combo.setEnsureSomethingSelected(cEnsure.isChecked()); + }); + + var cAllowSearch = new form.CheckBox('Allow searching'); + cAllowSearch.setChecked(combo.getAllowSearch()); + cAllowSearch.addEventListener('changeChecked', function() { + combo.setAllowSearch(cAllowSearch.isChecked()); + }); + + var cIdCol = new form.CheckBox('ID column visible'); + cIdCol.setChecked(combo.isIdColumnVisible()); + cIdCol.addEventListener('changeChecked', function() { + combo.setIdColumnVisible(cIdCol.isChecked()); + }); + + var fieldItems = new form.Spinner(0, 0, testData.length); + fieldItems._manager.addEventListener('changeValue', function() { + var sel = [], count = fieldItems.getValue(); + for (var i = 0; i < count; i++) { + sel.push(testData[i]); + } + combo.setSelection(sel); + }); + fieldItems.setValue(15); + + var boxProp2 = new Box; + with (boxProp2) { + setSpacing(10); + add(cEd, cEnsure, cAllowSearch, cIdCol, new Label('Number of items in list'), fieldItems); + } + var boxProp = new GroupBox('Test of simple properties'); + boxProp.add(boxProp2); + + //###Test of headers + var allHeaders = [ 'ID', 'Description', 'Img', 'Extra info' ]; + var rb1 = new form.RadioButton('1', '1'); + var rb2 = new form.RadioButton('2', '2'); + rb2.setChecked(true); + var rb3 = new form.RadioButton('3', '3'); + var rb4 = new form.RadioButton('4', '4'); + + var fieldHeaders = new qx.manager.selection.RadioManager('headers', [ rb1, rb2, rb3, rb4 ]); + fieldHeaders.addEventListener("changeSelected", function(e) { + var headers = [], count = Number(e.getData().getValue()); + for (var i = 0; i < count; i++) { + headers.push(allHeaders[i]); + } + combo.setColumnHeaders(headers); + }); + + var butChangeHeaders = new form.Button('Add * to headers'); + // This tests changing the headers, but not the number of columns + butChangeHeaders.addEventListener('execute', function() { + var headers = combo.getColumnHeaders(); + for (var i = 0; i < headers.length; i++) { + headers[i] += '*'; + } + combo.setColumnHeaders(headers); + }); + + var boxHeaders2 = new Box; + with (boxHeaders2) { + setSpacing(10); + add(new Label('# of headers'), rb1, rb2, rb3, rb4, butChangeHeaders); + } + var boxHeaders = new GroupBox('Test headers'); + boxHeaders.add(boxHeaders2); + + var fieldMaxRows = new form.Spinner(2, combo.getMaxVisibleRows(), 20); + fieldMaxRows._manager.addEventListener('changeValue', function() { + combo.setMaxVisibleRows(fieldMaxRows.getValue()); + }); + var boxMaxRows = new GroupBox('Max. number of visible rows'); + boxMaxRows.add(fieldMaxRows); + + var boxRow3 = new Box; + boxRow3.add(boxHeaders, boxMaxRows); + + //###Test of showOnTextField + var rbDesc = new form.RadioButton('Description', 'description'); + rbDesc.setChecked(true); + var rbIdAndDesc = new form.RadioButton('ID and description', 'idAndDescription'); + var fieldShowOn = new qx.manager.selection.RadioManager("showOnTextField", [ rbDesc, rbIdAndDesc ]); + fieldShowOn.addEventListener("changeSelected", function(e) { + combo.setShowOnTextField(e.getData().getValue()); + }); + + var fieldSeparator = new form.TextField; + fieldSeparator.setValue(combo.getIdDescriptionSeparator()); + fieldSeparator.setWidth(50); + fieldSeparator.addEventListener('changeValue', function() { + combo.setIdDescriptionSeparator(fieldSeparator.getValue()); + }); + var boxShowOn2 = new Box; + with (boxShowOn2) { + setSpacing(10); + add(new Label('Show on text field:'), rbDesc, rbIdAndDesc, new Label('Separator between ID and description:'), fieldSeparator); + } + var boxShowOn = new GroupBox('Test showOnTextField property'); + boxShowOn.add(boxShowOn2); + + //###Test of get/setValue + var fieldValue = new form.TextField; + var butSetValue = new form.Button('Set'); + butSetValue.addEventListener('execute', function() { + combo.setValue(fieldValue.getValue()); + }); + var butGetValue = new form.Button('Get'); + butGetValue.addEventListener('execute', function() { + fieldValue.setValue(combo.getValue()); + }); + var boxVal2 = new Box; + with (boxVal2) { + setSpacing(10); + add(fieldValue, butSetValue, butGetValue); + } + var boxVal = new GroupBox('Test value property'); + boxVal.add(boxVal2); + + //###Main box + var vbox = new Box('vertical'); + with (vbox) { + setSpacing(10); + setTop(50); + setLeft(30); + add(boxCombo, boxProp, boxRow3, boxShowOn, boxVal); + addToDocument(); + } + combo.focus(); +}); + </script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + <script type="text/javascript"> +if (console.debug) { + with (qx.dev.log.Logger.ROOT_LOGGER) { + removeAllAppenders(); + addAppender(new qx.dev.log.FireBugAppender); + setMinLevel(qx.dev.log.Logger.LEVEL_WARN); + } +} + </script> + <div id="demoDescription"> + <p>ComboBoxEx is an enhanced version of ComboBox</p> + </div> +</body> +</html>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBox_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBox_1.html new file mode 100644 index 0000000000..682b17229e --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBox_1.html @@ -0,0 +1,101 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_1.html new file mode 100644 index 0000000000..9cf2b0ee36 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_1.html @@ -0,0 +1,141 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>An example showing global shortcut commands in action. The commands are linked with menu-items, but + could also be executed with the corresponding shortcut.</p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + /* comamnds */ + var undo_cmd = new qx.client.Command("Ctrl+Z"); + undo_cmd.addEventListener("execute", function(){ this.debug("undo Command executed"); }, this); + + var redo_cmd = new qx.client.Command("Ctrl+Y"); + redo_cmd.addEventListener("execute", function(){ this.debug("redo Command executed"); }, this); + + var cut_cmd = new qx.client.Command("Ctrl+X"); + cut_cmd.addEventListener("execute", function(){ this.debug("cut Command executed"); }, this); + + var copy_cmd = new qx.client.Command("Ctrl+C"); + copy_cmd.addEventListener("execute", function(){ this.debug("copy Command executed"); }, this); + + var paste_cmd = new qx.client.Command("Ctrl+V"); + paste_cmd.addEventListener("execute", function(){ this.debug("paste Command executed"); }, this); + + var delete_cmd = new qx.client.Command("Del"); + delete_cmd.addEventListener("execute", function(){ this.debug("delete Command executed"); }, this); + + var select_all_cmd = new qx.client.Command("Ctrl+A"); + select_all_cmd.addEventListener("execute", function(){ this.debug("select all Command executed"); }, this); + + var search_cmd = new qx.client.Command("Ctrl+F"); + search_cmd.addEventListener("execute", function(){ this.debug("search Command executed"); }, this); + + var search_again_cmd = new qx.client.Command("F3"); + search_again_cmd.addEventListener("execute", function(){ this.debug("search again Command executed"); }, this); + + /* building the menu */ + var m2 = new qx.ui.menu.Menu; + + var mb2_01 = new qx.ui.menu.Button("New Window"); + var mb2_02 = new qx.ui.menu.Button("Overlapping"); + var mb2_03 = new qx.ui.menu.Button("Split Vertical"); + var mb2_04 = new qx.ui.menu.Button("Split Horizontal"); + var mb2_05 = new qx.ui.menu.Button("Next Window"); + var mb2_06 = new qx.ui.menu.Button("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.Button("Tahoma, 11pt"); + var mb3_02 = new qx.ui.menu.Button("Tahoma, 12pt"); + var mb3_03 = new qx.ui.menu.Button("Tahoma, 13pt"); + var mb3_04 = new qx.ui.menu.Button("Tahoma, 14pt"); + var mb3_05 = new qx.ui.menu.Button("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.Button("View/Lists"); + var mb1_02 = new qx.ui.menu.Button("Syntax Highlighting"); + var ms1 = new qx.ui.menu.Separator(); + var mb1_03 = new qx.ui.menu.Button("Window Font"); + var mb1_04 = new qx.ui.menu.Button("Printer Font", null, null, m3); + var ms2 = new qx.ui.menu.Separator(); + var mb1_05 = new qx.ui.menu.Button("Undo", null, undo_cmd); + var mb1_06 = new qx.ui.menu.Button("Redo", null, redo_cmd); + var ms3 = new qx.ui.menu.Separator(); + var mb1_07 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png", cut_cmd); + var mb1_08 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png", copy_cmd); + var mb1_09 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png", paste_cmd); + var mb1_10 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png", delete_cmd); + var mb1_11 = new qx.ui.menu.Button("Select All", null, select_all_cmd); + var ms4 = new qx.ui.menu.Separator(); + var mb1_12 = new qx.ui.menu.Button("Search", null, search_cmd); + var mb1_13 = new qx.ui.menu.Button("Search Again", null, search_again_cmd); + var ms5 = new qx.ui.menu.Separator(); + var mb1_14 = new qx.ui.menu.Button("View", null, null, m2); + var mb1_15 = new qx.ui.menu.Button("Editor Settings..."); + var mb1_16 = new qx.ui.menu.Button("Editor Plugins"); + var mb1_17 = new qx.ui.menu.Button("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.Location.getPageBoxLeft(el)); + m1.setTop(qx.dom.Location.getPageBoxBottom(el)); + + m1.show(); + }; + + e.setPropagationStopped(true); + }); + + w1.addEventListener("mousedown", function(e) + { + e.setPropagationStopped(true); + }); + + + d.add(w1); + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_2.html new file mode 100644 index 0000000000..46b490e9eb --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_2.html @@ -0,0 +1,186 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>An example showing global shortcut commands in action. The commands are linked with menu-items, but + could also be executed with the corresponding shortcut.</p> + <p>An objectmanager is used to disable/enable a specific command (del-Key) to make available for text-editing + in the textfield of the window. When the window is closed the command gets re-enabled.</p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + /* comamnds */ + var undo_cmd = new qx.client.Command("Ctrl+Z"); + undo_cmd.addEventListener("execute", function(){ this.debug("undo Command executed"); }, this); + + var redo_cmd = new qx.client.Command("Ctrl+Y"); + redo_cmd.addEventListener("execute", function(){ this.debug("redo Command executed"); }, this); + + var cut_cmd = new qx.client.Command("Ctrl+X"); + cut_cmd.addEventListener("execute", function(){ this.debug("cut Command executed"); }, this); + + var copy_cmd = new qx.client.Command("Ctrl+C"); + copy_cmd.addEventListener("execute", function(){ this.debug("copy Command executed"); }, this); + + var paste_cmd = new qx.client.Command("Ctrl+V"); + paste_cmd.addEventListener("execute", function(){ this.debug("paste Command executed"); }, this); + + var delete_cmd = new qx.client.Command("Del"); + delete_cmd.addEventListener("execute", function(){ this.debug("delete Command executed"); }, this); + + var select_all_cmd = new qx.client.Command("Ctrl+A"); + select_all_cmd.addEventListener("execute", function(){ this.debug("select all Command executed"); }, this); + + var search_cmd = new qx.client.Command("Ctrl+F"); + search_cmd.addEventListener("execute", function(){ this.debug("search Command executed"); }, this); + + var search_again_cmd = new qx.client.Command("F3"); + search_again_cmd.addEventListener("execute", function(){ this.debug("search again Command executed"); }, this); + + + /* objectmanager for all commands which should be disabled when opening the window */ + var cmd_manager = new qx.manager.object.ObjectManager; + cmd_manager.add(delete_cmd); + + + /* building the menu */ + var m2 = new qx.ui.menu.Menu; + + var mb2_01 = new qx.ui.menu.Button("New Window"); + var mb2_02 = new qx.ui.menu.Button("Overlapping"); + var mb2_03 = new qx.ui.menu.Button("Split Vertical"); + var mb2_04 = new qx.ui.menu.Button("Split Horizontal"); + var mb2_05 = new qx.ui.menu.Button("Next Window"); + var mb2_06 = new qx.ui.menu.Button("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.Button("Tahoma, 11pt"); + var mb3_02 = new qx.ui.menu.Button("Tahoma, 12pt"); + var mb3_03 = new qx.ui.menu.Button("Tahoma, 13pt"); + var mb3_04 = new qx.ui.menu.Button("Tahoma, 14pt"); + var mb3_05 = new qx.ui.menu.Button("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.Button("View/Lists"); + var mb1_02 = new qx.ui.menu.Button("Syntax Highlighting"); + var ms1 = new qx.ui.menu.Separator(); + var mb1_03 = new qx.ui.menu.Button("Window Font"); + var mb1_04 = new qx.ui.menu.Button("Printer Font", null, null, m3); + var ms2 = new qx.ui.menu.Separator(); + var mb1_05 = new qx.ui.menu.Button("Undo", null, undo_cmd); + var mb1_06 = new qx.ui.menu.Button("Redo", null, redo_cmd); + var ms3 = new qx.ui.menu.Separator(); + var mb1_07 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png", cut_cmd); + var mb1_08 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png", copy_cmd); + var mb1_09 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png", paste_cmd); + var mb1_10 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png", delete_cmd); + var mb1_11 = new qx.ui.menu.Button("Select All", null, select_all_cmd); + var ms4 = new qx.ui.menu.Separator(); + var mb1_12 = new qx.ui.menu.Button("Search", null, search_cmd); + var mb1_13 = new qx.ui.menu.Button("Search Again", null, search_again_cmd); + var ms5 = new qx.ui.menu.Separator(); + var mb1_14 = new qx.ui.menu.Button("View", null, null, m2); + var mb1_15 = new qx.ui.menu.Button("Editor Settings..."); + var mb1_16 = new qx.ui.menu.Button("Editor Plugins"); + var mb1_17 = new qx.ui.menu.Button("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); + + + /* button to open menu */ + 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.Location.getPageBoxLeft(el)); + m1.setTop(qx.dom.Location.getPageBoxBottom(el)); + + m1.show(); + }; + + e.setPropagationStopped(true); + }); + + w1.addEventListener("mousedown", function(e) + { + e.setPropagationStopped(true); + }); + + + /* window */ + var window1 = new qx.ui.window.Window("Test"); + window1.set({ top: 100, left: 100, width: 300, height: 200, allowMaximize: false, allowMinimize: false }); + + window1.addEventListener("beforeAppear", function(e){ + textField.setValue(""); + }); + + window1.addEventListener("beforeDisappear", function(e){ + cmd_manager.enableAll(); + }); + + /* label */ + var label1 = new qx.ui.basic.Label("Please enter your Name"); + label1.setTop(20); + label1.setLeft(8); + + /* textfield */ + var textField = new qx.ui.form.TextField; + textField.setTop(20); + textField.setLeft(140); + + window1.add(label1, textField); + + + /* button to open window */ + var w2 = new qx.ui.form.Button("Open Window"); + w2.setTop(48); + w2.setLeft(100); + + w2.addEventListener("execute", function(e){ + cmd_manager.disableAll(); + window1.open(); + }); + + + d.add(w1, window1, w2); + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/DateChooser_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/DateChooser_1.html new file mode 100644 index 0000000000..582ca8b386 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/DateChooser_1.html @@ -0,0 +1,31 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Drag_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Drag_1.html new file mode 100644 index 0000000000..3347f13020 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Drag_1.html @@ -0,0 +1,57 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fields_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fields_1.html new file mode 100644 index 0000000000..96e86a4c19 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fields_1.html @@ -0,0 +1,107 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Some 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.getKeyIdentifier()); + }); + + d.add(t6); + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Flash_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Flash_1.html new file mode 100644 index 0000000000..3e2f0ceca8 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Flash_1.html @@ -0,0 +1,53 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1.html new file mode 100644 index 0000000000..81d745cded --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1.html @@ -0,0 +1,26 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p> + Simple test of a finite state machine. This is a sufficiently simple + application that using a finite state machine really doesn't make sense, + but it is illustrative of how to use it. This FSM has two states. + </p> + </div> + + <script type="text/javascript" src="Fsm_1/main.js"></script> + <script type="text/javascript" src="Fsm_1/fsm.js"></script> + <script type="text/javascript" src="Fsm_1/gui.js"></script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/fsm.js b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/fsm.js new file mode 100644 index 0000000000..50cdc25ccb --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/fsm.js @@ -0,0 +1,297 @@ +/* + * Initialize the finite state machine. + * + * This finite state machine has two states: Idle and AwaitRpcResult. + * + * In the Idle state, the Send button is enabled, the Abort button is + * disabled, and the three color bars are blue. In the AwaitRpcResult state, + * the Send button is disabled, the Abort button is enabled, and three color + * bars are red. All of these changes occur via automatic, table-driven + * function calls in autoActionsXXX() objects, not via explicit code. This + * demonstrates how groups of objects can all be manipulated together without + * having to write lots of code to do so. Just as these color blocks change + * color, numerous widgets could be disabled/hidden/etc., without writing code + * to futz with all of them. + */ +function initFsm() +{ + // Create a new finite state machine + var fsm = new qx.util.fsm.FiniteStateMachine("Fsm_1"); + + // For this simple example application, show all debug messages. + qx.Settings.setCustomOfClass( + "qx.util.fsm.FiniteStateMachine", + "debugFlags", + (qx.util.fsm.FiniteStateMachine.DebugFlags.EVENTS | + qx.util.fsm.FiniteStateMachine.DebugFlags.TRANSITIONS | + qx.util.fsm.FiniteStateMachine.DebugFlags.FUNCTION_DETAIL | + qx.util.fsm.FiniteStateMachine.DebugFlags.OBJECT_NOT_FOUND)); + + /* + * State: Idle + * + * Actions upon entry: + * button_send.setEnabled(true); + * button_abort.setEnabled(false); + * change background of objects in group "group_color_change" to blue + * + * Transition on: + * "execute" on button_send + */ + var state = new qx.util.fsm.State( + "State_Idle", + { + "autoActionsBeforeOnentry" : + { + // The name of a function. + "setEnabled" : + [ + { + // We want to enable the 'send' button + "parameters" : [ true ], + + // Call this.getObject("button_send").setEnabled(true) + "objects" : [ "button_send" ] + }, + + { + // We want to disable the 'abort' button + "parameters" : [ false ], + + // Call this.getObject("button_abort").setEnabled(false) + "objects" : [ "button_abort" ] + } + ], + + // The name of a function. + "setBackgroundColor" : + [ + { + // We want to change the atoms' background color to blue + "parameters" : + [ + // We want the color oject created when needed, not "now" + // Providing a function as a parameter allows the value to be + // determined later. + function (fsm) { return new qx.renderer.color.Color("blue"); } + ], + + // Call this.getObject(<object>).seBackgroundcolor("blue") on + // state entry, for each <object> in the group called + // "group_color_change". + "groups" : [ "group_color_change" ] + } + ] + }, + + "events" : + { + // If the send button is pressed, go to new state state where we + // will await the RPC result + "execute" : + { + "button_send" : + "Transition_Idle_to_AwaitRpcResult_via_button_send" + } + } + }); + fsm.addState(state); + + /* + * Transition: Idle to AwaitRpcResult + * + * Cause: "execute" on button_send + * + * Action: + * Issue RPC request with coalesced failure events + */ + var trans = new qx.util.fsm.Transition( + "Transition_Idle_to_AwaitRpcResult_via_button_send", + { + "nextState" : + "State_AwaitRpcResult", + + "ontransition" : + function(fsm, event) + { + var rpc = fsm.getObject("rpc"); + + rpc.setUrl(fsm.getObject("text_url").getValue()); + rpc.setServiceName(fsm.getObject("text_service").getValue()); + + var request = + rpc.callAsyncListeners(true, // coalesce failure events + fsm.getObject("text_method").getValue(), + fsm.getObject("text_message").getValue()); + fsm.addObject("request", request); + } + }); + state.addTransition(trans); + + + /* + * State: AwaitRpcResult + * + * Actions upon entry: + * button_send.setEnabled(false); + * button_abort.setEnabled(true); + * change background of objects in group "group_color_change" to red + * + * Transition on: + * "completed" (on RPC) + * "failed" (on RPC) + * "execute on button_abort + */ + var state = new qx.util.fsm.State( + "State_AwaitRpcResult", + { + "autoActionsBeforeOnentry" : + { + // The name of a function. + "setEnabled" : + [ + { + // We want to disable the 'send' button + "parameters" : [ false ], + + // Call this.getObject("send").setEnabled(false) + "objects" : [ "button_send" ] + }, + + { + // We want to enable the 'abort' button + "parameters" : [ true ], + + // Call this.getObject("abort").setEnabled(true) + "objects" : [ "button_abort" ] + } + ], + + // The name of a function. + "setBackgroundColor" : + [ + { + // We want to change the atoms' background color to red + "parameters" : + [ + // We want the color oject created when needed, not "now" + // Providing a function as a parameter allows the value to be + // determined later. + function (fsm) { return new qx.renderer.color.Color("red"); } + ], + + // Call this.getObject(<object>).seBackgroundcolor("red"), for + // each <object> in the group called "group_color_change". + "groups" : [ "group_color_change" ] + } + ] + }, + + "events" : + { + "execute" : + { + "button_abort" : + "Transition_AwaitRpcResult_to_AwaitRpcResult_via_button_abort" + }, + + "completed" : + "Transition_AwaitRpcResult_to_Idle_via_complete", + + "failed" : + "Transition_AwaitRpcResult_to_Idle_via_failed" + }, + + "onentry" : + function(fsm, state) + { + var message = fsm.getObject("text_result"); + message.setValue(""); + } + + }); + fsm.addState(state); + + /* + * Transition: AwaitRpcResult to AwaitRpcResult + * + * Cause: "execute" on button_abort + */ + var trans = new qx.util.fsm.Transition( + "Transition_AwaitRpcResult_to_AwaitRpcResult_via_button_abort", + { + "nextState" : + "State_AwaitRpcResult", + + "ontransition" : + function(fsm, event) + { + // Get the request object + var request = fsm.getObject("request"); + + // Issue an abort for the pending request + request.abort(); + + var message = fsm.getObject("text_result"); + message.setValue("Abort requested..."); + } + }); + state.addTransition(trans); + + /* + * Transition: AwaitRpcResult to Idle + * + * Cause: "complete" (on RPC) + */ + var trans = new qx.util.fsm.Transition( + "Transition_AwaitRpcResult_to_Idle_via_complete", + { + "nextState" : + "State_Idle", + + "ontransition" : + function(fsm, event) + { + var message = fsm.getObject("text_result"); + message.setValue("Got result: " + event.getData()); + + // The request has completed, so remove the object reference + fsm.removeObject("request"); + } + }); + state.addTransition(trans); + + /* + * Transition: AwaitRpcResult to Idle + * + * Cause: "failed" (on RPC) + */ + var trans = new qx.util.fsm.Transition( + "Transition_AwaitRpcResult_to_Idle_via_failed", + { + "nextState" : + "State_Idle", + + "ontransition" : + function(fsm, event) + { + var message = fsm.getObject("text_result"); + message.setValue("Got failure: " + event.getData()); + + // The request has completed, so remove the object reference + fsm.removeObject("request"); + } + }); + state.addTransition(trans); + + // Allocate an RPC object + o = new qx.io.remote.Rpc(); + o.setTimeout(10000); + o.addEventListener("completed", fsm.eventListener, fsm); + o.addEventListener("failed", fsm.eventListener, fsm); + o.addEventListener("timeout", fsm.eventListener, fsm); + o.addEventListener("aborted", fsm.eventListener, fsm); + fsm.addObject("rpc", o); + + return fsm; +} diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/gui.js b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/gui.js new file mode 100644 index 0000000000..0ba443a629 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/gui.js @@ -0,0 +1,95 @@ +function initGui(fsm) +{ + var o; + var d = qx.ui.core.ClientDocument.getInstance(); + + var vLayout = new qx.ui.layout.VerticalBoxLayout(); + vLayout.setTop(40); + vLayout.setLeft(20); + vLayout.setSpacing(4); + + vLayout.add(new qx.ui.basic.Label("URL:")); + var defaultURL = qx.io.remote.Rpc.makeServerURL(); + if (defaultURL == null) + { + defaultURL = "/services/"; + } + o = new qx.ui.form.TextField(defaultURL); + vLayout.add(o); + fsm.addObject("text_url", o); + + vLayout.add(new qx.ui.basic.Label("Service:")); + o = new qx.ui.form.TextField("qooxdoo.test"); + vLayout.add(o); + fsm.addObject("text_service", o); + + vLayout.add(new qx.ui.basic.Label("Method:")); + o = new qx.ui.form.TextField("sleep"); + vLayout.add(o); + fsm.addObject("text_method", o); + + var hLayout = new qx.ui.layout.HorizontalBoxLayout(); + hLayout.setHeight("auto"); + hLayout.setVerticalChildrenAlign("middle"); + hLayout.setSpacing(4); + + o = new qx.ui.form.TextField("2"); + o.setWidth(200); + hLayout.add(o); + fsm.addObject("text_message", o); + + o = new qx.ui.form.Button("Send to server"); + o.addEventListener("execute", fsm.eventListener, fsm); + hLayout.add(o); + fsm.addObject("button_send", o); + + o = new qx.ui.form.Button("Abort"); + o.setEnabled(false); + o.addEventListener("execute", fsm.eventListener, fsm); + hLayout.add(o); + fsm.addObject("button_abort", o); + + vLayout.add(hLayout); + + vLayout.add(new qx.ui.basic.Label("Result:")); + o = new qx.ui.form.TextField(""); + o.setWidth(600); + vLayout.add(o); + fsm.addObject("text_result", o); + + var hLayout = new qx.ui.layout.HorizontalBoxLayout(); + hLayout.setHeight("auto"); + hLayout.setVerticalChildrenAlign("middle"); + hLayout.setSpacing(4); + + var o = new qx.ui.basic.Atom("Idle=blue, RPC=red"); + o.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + o.setColor(new qx.renderer.color.Color("white")); + o.setWidth(200); + o.setHeight(30); + o.setPadding(4); + hLayout.add(o); + fsm.addObject("atom_1", o, "group_color_change"); + + var o = new qx.ui.basic.Atom("Idle=blue, RPC=red"); + o.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + o.setColor(new qx.renderer.color.Color("white")); + o.setWidth(200); + o.setHeight(30); + o.setPadding(4); + hLayout.add(o); + fsm.addObject("atom_2", o, "group_color_change"); + + var o = new qx.ui.basic.Atom("Idle=blue, RPC=red"); + o.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + o.setColor(new qx.renderer.color.Color("white")); + o.setWidth(200); + o.setHeight(30); + o.setPadding(4); + hLayout.add(o); + fsm.addObject("atom_3", o, "group_color_change"); + + vLayout.add(hLayout); + + d.add(vLayout); +} diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/main.js b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/main.js new file mode 100644 index 0000000000..56a53ac484 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Fsm_1/main.js @@ -0,0 +1,11 @@ +qx.core.Init.getInstance().defineMain(function() +{ + // Initialize the finite state machine + fsm = initFsm(); + + // Initialize the GUI + initGui(fsm); + + // Start the finite state machine + fsm.start(); +}); diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GalleryList_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GalleryList_1.html new file mode 100644 index 0000000000..3973623338 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GalleryList_1.html @@ -0,0 +1,129 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> + + <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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Gallery_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Gallery_1.html new file mode 100644 index 0000000000..3252d3d1de --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Gallery_1.html @@ -0,0 +1,116 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> + + <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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_1.html new file mode 100644 index 0000000000..39c2eafd00 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_1.html @@ -0,0 +1,107 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_2.html new file mode 100644 index 0000000000..117732caf4 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_2.html @@ -0,0 +1,153 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_3.html new file mode 100644 index 0000000000..e9a77c64bf --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/GroupBox_3.html @@ -0,0 +1,160 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Iframe_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Iframe_1.html new file mode 100644 index 0000000000..90d87e1d9b --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Iframe_1.html @@ -0,0 +1,71 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Inline_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Inline_1.html new file mode 100644 index 0000000000..bfec3e773f --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Inline_1.html @@ -0,0 +1,260 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("New"); + var mb1_02 = new qx.ui.menu.Button("Open"); + var mb1_03 = new qx.ui.menu.Button("Save"); + var mb1_04 = new qx.ui.menu.Button("Save as"); + var mb1_05 = new qx.ui.menu.Button("Close"); + var mb1_06 = new qx.ui.menu.Button("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.Button("Undo"); + var mb2_02 = new qx.ui.menu.Button("Redo"); + var mb2_b1 = new qx.ui.menu.Separator(); + var mb2_03 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png"); + var mb2_04 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png"); + var mb2_05 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png"); + var mb2_06 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png"); + var mb2_b2 = new qx.ui.menu.Separator(); + var mb2_07 = new qx.ui.menu.Button("Select All"); + var mb2_08 = new qx.ui.menu.Button("Find"); + var mb2_09 = new qx.ui.menu.Button("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.CheckBox("File List", null, false); + var mb3_02 = new qx.ui.menu.CheckBox("Syntax Highlighting", null, true); + var mb3_03 = new qx.ui.menu.CheckBox("Statusbar", null, true); + var mb3_b1 = new qx.ui.menu.Separator(); + var mb3_04 = new qx.ui.menu.Button("Printer Font", null, null, m3_suba); + var mb3_05 = new qx.ui.menu.Button("Editor Font", null, null, m3_subb); + var mb3_06 = new qx.ui.menu.Button("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.Button("Tahoma, 11pt"); + var mb3_suba_02 = new qx.ui.menu.Button("Tahoma, 12pt"); + var mb3_suba_03 = new qx.ui.menu.Button("Tahoma, 13pt"); + var mb3_suba_04 = new qx.ui.menu.Button("Tahoma, 14pt"); + var mb3_suba_05 = new qx.ui.menu.Button("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.Button("Verdana, 11pt"); + var mb3_subb_02 = new qx.ui.menu.Button("Verdana, 12pt"); + var mb3_subb_03 = new qx.ui.menu.Button("Verdana, 13pt"); + var mb3_subb_04 = new qx.ui.menu.Button("Verdana, 14pt"); + var mb3_subb_05 = new qx.ui.menu.Button("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.Button("Courier, 11pt"); + var mb3_subc_02 = new qx.ui.menu.Button("Courier, 12pt"); + var mb3_subc_03 = new qx.ui.menu.Button("Courier, 13pt"); + var mb3_subc_04 = new qx.ui.menu.Button("Courier, 14pt"); + var mb3_subc_05 = new qx.ui.menu.Button("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.Button("View", null, null, m4_suba); + var mb4_b1 = new qx.ui.menu.Separator(); + var mb4_02 = new qx.ui.menu.Button("Editor Preferences..."); + var mb4_03 = new qx.ui.menu.Button("Editor Extensions"); + var mb4_04 = new qx.ui.menu.Button("Framework Preferences"); + + m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04); + + var mb4_suba_01 = new qx.ui.menu.Button("New Window"); + var mb4_suba_b1 = new qx.ui.menu.Separator(); + var mb4_suba_02 = new qx.ui.menu.RadioButton("Overlapping", null, true); + var mb4_suba_03 = new qx.ui.menu.RadioButton("Split Horizontally", null); + var mb4_suba_04 = new qx.ui.menu.RadioButton("Split Vertically", null); + var mb4_suba_b2 = new qx.ui.menu.Separator(); + var mb4_suba_05 = new qx.ui.menu.Button("Next Window"); + var mb4_suba_06 = new qx.ui.menu.Button("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.Button("Help"); + var mb5_02 = new qx.ui.menu.Button("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.MenuButton("File", m1); + var mbb2 = new qx.ui.toolbar.MenuButton("Edit", m2); + var mbb3 = new qx.ui.toolbar.MenuButton("View", m3); + var mbb4 = new qx.ui.toolbar.MenuButton("Options", m4); + var mbb5 = new qx.ui.toolbar.MenuButton("Help", m5); + + mb1.add(mbb1, mbb2, mbb3, mbb4, mbb5); + + with(mb1) + { + setWidth(400); + setHeight("auto"); + }; + + inline2.add(mb1); + + d.add(inline2); + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_1.html new file mode 100644 index 0000000000..661c4a8030 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_1.html @@ -0,0 +1,67 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_2.html new file mode 100644 index 0000000000..14df77b47e --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_2.html @@ -0,0 +1,53 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_3.html new file mode 100644 index 0000000000..89bfc6b086 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_3.html @@ -0,0 +1,51 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_4.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_4.html new file mode 100644 index 0000000000..f673bacc90 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ListView_4.html @@ -0,0 +1,58 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/List_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/List_1.html new file mode 100644 index 0000000000..17981e6f0c --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/List_1.html @@ -0,0 +1,127 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Menu_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Menu_1.html new file mode 100644 index 0000000000..66fd0c8687 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Menu_1.html @@ -0,0 +1,193 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("New Window"); + var mb2_02 = new qx.ui.menu.Button("Overlapping"); + var mb2_03 = new qx.ui.menu.Button("Split Vertical"); + var mb2_04 = new qx.ui.menu.Button("Split Horizontal"); + var mb2_05 = new qx.ui.menu.Button("Next Window"); + var mb2_06 = new qx.ui.menu.Button("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.Button("Tahoma, 11pt"); + var mb3_02 = new qx.ui.menu.Button("Tahoma, 12pt"); + var mb3_03 = new qx.ui.menu.Button("Tahoma, 13pt"); + var mb3_04 = new qx.ui.menu.Button("Tahoma, 14pt"); + var mb3_05 = new qx.ui.menu.Button("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.Button("View/Lists", null, q12); + var mb1_02 = new qx.ui.menu.Button("Syntax Highlighting", null, q10); + var ms1 = new qx.ui.menu.Separator(); + var mb1_03 = new qx.ui.menu.Button("Window Font", null, q11); + var mb1_04 = new qx.ui.menu.Button("Printer Font", null, null, m3); + var ms2 = new qx.ui.menu.Separator(); + var mb1_05 = new qx.ui.menu.Button("Undo", null, q1); + var mb1_06 = new qx.ui.menu.Button("Redo", null, q2); + var ms3 = new qx.ui.menu.Separator(); + var mb1_07 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png", q3); + var mb1_08 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png", q4); + var mb1_09 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png", q5); + var mb1_10 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png", q6); + var mb1_11 = new qx.ui.menu.Button("Select All", null, q7); + var ms4 = new qx.ui.menu.Separator(); + var mb1_12 = new qx.ui.menu.Button("Search", null, q8); + var mb1_13 = new qx.ui.menu.Button("Search Again", null, q9); + var ms5 = new qx.ui.menu.Separator(); + var mb1_14 = new qx.ui.menu.Button("View", null, null, m2); + var mb1_15 = new qx.ui.menu.Button("Editor Settings..."); + var mb1_16 = new qx.ui.menu.Button("Editor Plugins"); + var mb1_17 = new qx.ui.menu.Button("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.Location.getPageBoxLeft(el)); + m1.setTop(qx.dom.Location.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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/NativeWindow_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/NativeWindow_1.html new file mode 100644 index 0000000000..4d607a4424 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/NativeWindow_1.html @@ -0,0 +1,198 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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); + + + w1.addEventListener("load", function(e) { + this.debug("Content loaded: " + this.isLoaded()); + }); + + w1.addEventListener("close", function(e) { + this.debug("Window closed: " + this.isClosed()); + }); + + + + + 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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RadioButton_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RadioButton_1.html new file mode 100644 index 0000000000..6976cb5fbf --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RadioButton_1.html @@ -0,0 +1,114 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RepeatButton_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RepeatButton_1.html new file mode 100644 index 0000000000..3858e7594a --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RepeatButton_1.html @@ -0,0 +1,73 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Resizer_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Resizer_1.html new file mode 100755 index 0000000000..05ed00b7ce --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Resizer_1.html @@ -0,0 +1,63 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Test for qx.ui.resizer.Rezizer.</p> + <p> + The Resizer widget acts as a wrapper of another widget. It allows the child widget to be resized by the end user. + </p> + </div> + + <script type="text/javascript"> + function newResizer() { + var tArea = new qx.ui.form.TextArea; + tArea.setValue("Resize me\nI'm resizable"); + tArea.set({ + minWidth: 100, + minHeight: 50, + width: 200, + height: 100 + }); + return new qx.ui.resizer.Resizer(tArea); + } + + function newHBox() { + var hBox = new qx.ui.layout.BoxLayout; + hBox.set({ + spacing: 10 + }); + hBox.auto(); + hBox.add(newResizer(), newResizer()); + return hBox; + } + + qx.core.Init.getInstance().defineMain(function() { + var vBox = new qx.ui.layout.VerticalBoxLayout; + var list = new qx.ui.form.List; + list.set({width: 100, height: 200, minWidth: 50, minHeight: 100, overflow: 'auto'}); + for (var i = 0; i < 100; i++) { + list.add(new qx.ui.form.ListItem('Option number '+i)); + } + vBox.add(new qx.ui.resizer.Resizer(list)); + vBox.set({ + spacing: 10, + top: 50, + left: 30 + }); + vBox.auto(); + vBox.add(newHBox(), newHBox()); + vBox.addToDocument(); + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RpcTreeFullControl_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RpcTreeFullControl_1.html new file mode 100644 index 0000000000..3bd0fed749 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/RpcTreeFullControl_1.html @@ -0,0 +1,194 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link + type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + + <div id="demoDescription"> + <p><strong>Only works together with a RPC backend!</strong></p> + <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. + </p> + </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 : "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( + "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> + diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Spinner_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Spinner_1.html new file mode 100644 index 0000000000..05406d5c53 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Spinner_1.html @@ -0,0 +1,106 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/SplitPane_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/SplitPane_1.html new file mode 100644 index 0000000000..2f965c16bd --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/SplitPane_1.html @@ -0,0 +1,72 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Test for normal width Splitpane, no holding knobs, live resize enabled.</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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/SplitPane_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/SplitPane_2.html new file mode 100644 index 0000000000..29f07fe558 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/SplitPane_2.html @@ -0,0 +1,75 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Test for extra slim Splitpane, with holding knobs.</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.setSplitterSize(1); + splitpane.setShowKnob(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.setSplitterSize(1); + rightWidget.setShowKnob(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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TabView_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TabView_1.html new file mode 100644 index 0000000000..0179891e00 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TabView_1.html @@ -0,0 +1,152 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("Edit"); + var t1_2 = new qx.ui.pageview.tabview.Button("Find"); + var t1_3 = new qx.ui.pageview.tabview.Button("Backup"); + + t1_1.setChecked(true); + + tf1.getBar().add(t1_1, t1_2, t1_3); + + var p1_1 = new qx.ui.pageview.tabview.Page(t1_1); + var p1_2 = new qx.ui.pageview.tabview.Page(t1_2); + var p1_3 = new qx.ui.pageview.tabview.Page(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.Button("Search for Files", "icon/16/file-open.png"); + var t2_2 = new qx.ui.pageview.tabview.Button("Search the Web", "icon/16/network.png"); + var t2_3 = new qx.ui.pageview.tabview.Button("Search for Text", "icon/16/contents.png"); + var t2_4 = new qx.ui.pageview.tabview.Button("Search for Persons", "icon/16/emoticon.png"); + var t2_5 = new qx.ui.pageview.tabview.Button("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.Page(t2_1); + var p2_2 = new qx.ui.pageview.tabview.Page(t2_2); + var p2_3 = new qx.ui.pageview.tabview.Page(t2_3); + var p2_4 = new qx.ui.pageview.tabview.Page(t2_4); + var p2_5 = new qx.ui.pageview.tabview.Page(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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TabView_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TabView_2.html new file mode 100644 index 0000000000..0599a12103 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TabView_2.html @@ -0,0 +1,127 @@ +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> + </head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("Edit"); + var t1_2 = new qx.ui.pageview.tabview.Button("Find"); + var t1_3 = new qx.ui.pageview.tabview.Button("Backup"); + var t1_4 = new qx.ui.pageview.tabview.Button("System"); + var t1_5 = new qx.ui.pageview.tabview.Button("Tools"); + var t1_6 = new qx.ui.pageview.tabview.Button("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.Page(t1_1); + var p1_2 = new qx.ui.pageview.tabview.Page(t1_2); + var p1_3 = new qx.ui.pageview.tabview.Page(t1_3); + var p1_4 = new qx.ui.pageview.tabview.Page(t1_4); + var p1_5 = new qx.ui.pageview.tabview.Page(t1_5); + var p1_6 = new qx.ui.pageview.tabview.Page(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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Table_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Table_1.html new file mode 100644 index 0000000000..1fcf4b09c2 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Table_1.html @@ -0,0 +1,107 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>A table with virtual scrolling, model-view-controller, renderers, + 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(); + + var main = new qx.ui.layout.VerticalBoxLayout(); + main.set({ left:10, top:30, right:300, bottom:30, spacing:5 }); + + var nextId = 0; + var createRandomRows = function(rowCount) { + var rowData = []; + var now = new Date().getTime(); + var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days + for (var row = 0; row < rowCount; row++) { + var date = new Date(now + Math.random() * dateRange - dateRange / 2); + rowData.push([ nextId++, Math.random() * 10000, date, (Math.random() > 0.5) ]); + } + return rowData; + }; + + // Create the initial data + var rowData = createRandomRows(50); + + // Add some encoding relevant stuff + rowData[15][1] = "<b>A html & entities escaping test</b>"; + + // table model + var tableModel = new qx.ui.table.SimpleTableModel(); + tableModel.setColumns([ "ID", "A number", "A date", "Boolean test" ]); + tableModel.setData(rowData); + tableModel.setColumnEditable(1, true); + tableModel.setColumnEditable(2, true); + + // table + var table = new qx.ui.table.Table(tableModel); + with (table) { + set({ width:"100%", height:"1*", border:qx.renderer.border.BorderPresets.getInstance().thinInset }); + getSelectionModel().setSelectionMode(qx.ui.table.SelectionModel.MULTIPLE_INTERVAL_SELECTION); + getTableColumnModel().setDataCellRenderer(3, new qx.ui.table.BooleanDataCellRenderer()); + setColumnWidth(0, 80); + setColumnWidth(1, 200); + setColumnWidth(2, 150); + }; + main.add(table); + + var buttonBar = new qx.ui.layout.HorizontalBoxLayout(); + buttonBar.set({ width:"100%", height:"auto", spacing:5 }); + main.add(buttonBar); + + var button = new qx.ui.form.Button("Change row with ID 10"); + button.addEventListener("execute", function(evt) { + var rowData = createRandomRows(1); + for (var i = 1; i < tableModel.getColumnCount(); i++) { + tableModel.setValue(i, 10, rowData[0][i]); + } + this.info("Row 10 changed"); + }); + buttonBar.add(button); + + var button = new qx.ui.form.Button("Add 10 rows"); + button.addEventListener("execute", function(evt) { + var rowData = createRandomRows(10); + tableModel.addRows(rowData); + this.info("10 rows added"); + }); + buttonBar.add(button); + + var button = new qx.ui.form.Button("Remove 5 rows"); + button.addEventListener("execute", function(evt) { + var rowCount = tableModel.getRowCount(); + tableModel.removeRows(rowCount-5, 5); + this.info("5 rows removed"); + }); + buttonBar.add(button); + + var checkBox = new qx.ui.form.CheckBox("keepFirstVisibleRowComplete", null, null, table.getKeepFirstVisibleRowComplete()); + checkBox.setToolTip(new qx.ui.popup.ToolTip("Whether the the first visible row should be rendered completely when scrolling.")); + checkBox.addEventListener("changeChecked", function(evt) { + table.setKeepFirstVisibleRowComplete(checkBox.getChecked()); + this.info("Set keepFirstVisibleRowComplete to: " + checkBox.getChecked()); + }); + buttonBar.add(checkBox); + + d.add(main); + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Table_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Table_2.html new file mode 100644 index 0000000000..d09cc85a96 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Table_2.html @@ -0,0 +1,50 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>A table with fixed columns.</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, width:350, height:300, border:qx.renderer.border.BorderPresets.getInstance().thinInset }); + 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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_1.html new file mode 100644 index 0000000000..5fdd1836f5 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_1.html @@ -0,0 +1,252 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Introduce all classes needed for creating real qx.ui.toolbar.ToolBars. This includes qx.ui.toolbar.ToolBars, + qx.ui.toolbar.ToolBarParts, qx.ui.toolbar.Separator 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.Part; + }; + + for (var i=0; i<btns.length; i++) + { + var btn = btns[i]; + + switch(btn.type) + { + case "separator": + var o = new qx.ui.toolbar.Separator; + break; + + case "button": + var o = new qx.ui.toolbar.Button(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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_2.html new file mode 100644 index 0000000000..13ccd5ba41 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_2.html @@ -0,0 +1,269 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Introducing qx.ui.toolbar.CheckBox and qx.ui.toolbar.RadioButton.</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.Part; + tb.add(tbp1); + + var tbp2 = new qx.ui.toolbar.Part; + tb.add(tbp2); + + var tbp3 = new qx.ui.toolbar.Part; + tb.add(tbp3); + + var tbp4 = new qx.ui.toolbar.Part; + tb.add(tbp4); + + + + // Default + var tbd1 = new qx.ui.toolbar.Button("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.CheckBox("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.RadioButton("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.RadioButton("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.RadioButton("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.RadioButton("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.RadioButton("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.RadioButton("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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_3.html new file mode 100644 index 0000000000..7cb8745991 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_3.html @@ -0,0 +1,184 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.Button("New", null, c1); + var mb1_02 = new qx.ui.menu.Button("Open", null, c1); + var mb1_03 = new qx.ui.menu.Button("Save", null, c1); + var mb1_04 = new qx.ui.menu.Button("Save as", null, c1); + var mb1_05 = new qx.ui.menu.Button("Close", null, c1); + var mb1_06 = new qx.ui.menu.Button("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.Button("Undo", null, c1); + var mb2_02 = new qx.ui.menu.Button("Redo", null, c1); + var mb2_b1 = new qx.ui.menu.Separator(); + var mb2_03 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png", c1); + var mb2_04 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png", c1); + var mb2_05 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png", c1); + var mb2_06 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png", c1); + var mb2_b2 = new qx.ui.menu.Separator(); + var mb2_07 = new qx.ui.menu.Button("Select All", null, c1); + var mb2_08 = new qx.ui.menu.Button("Find", null, c1); + var mb2_09 = new qx.ui.menu.Button("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.CheckBox("File List", c1, false); + var mb3_02 = new qx.ui.menu.CheckBox("Syntax Highlighting", c1, true); + var mb3_03 = new qx.ui.menu.CheckBox("Statusbar", c1, true); + var mb3_b1 = new qx.ui.menu.Separator(); + var mb3_04 = new qx.ui.menu.Button("Printer Font", null, null, m3_suba); + var mb3_05 = new qx.ui.menu.Button("Editor Font", null, null, m3_subb); + var mb3_06 = new qx.ui.menu.Button("Export Font", null, null, m3_subc); + var mb3_b2 = new qx.ui.menu.Separator(); + var mb3_07 = new qx.ui.menu.Button("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.Button("Tahoma, 11pt", null, c1); + var mb3_suba_02 = new qx.ui.menu.Button("Tahoma, 12pt", null, c1); + var mb3_suba_03 = new qx.ui.menu.Button("Tahoma, 13pt", null, c1); + var mb3_suba_04 = new qx.ui.menu.Button("Tahoma, 14pt", null, c1); + var mb3_suba_05 = new qx.ui.menu.Button("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.Button("Verdana, 11pt", null, c1); + var mb3_subb_02 = new qx.ui.menu.Button("Verdana, 12pt", null, c1); + var mb3_subb_03 = new qx.ui.menu.Button("Verdana, 13pt", null, c1); + var mb3_subb_04 = new qx.ui.menu.Button("Verdana, 14pt", null, c1); + var mb3_subb_05 = new qx.ui.menu.Button("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.Button("Courier, 11pt", null, c1); + var mb3_subc_02 = new qx.ui.menu.Button("Courier, 12pt", null, c1); + var mb3_subc_03 = new qx.ui.menu.Button("Courier, 13pt", null, c1); + var mb3_subc_04 = new qx.ui.menu.Button("Courier, 14pt", null, c1); + var mb3_subc_05 = new qx.ui.menu.Button("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.Button("First", null, c1); + var mb3_subd_02_suba_02 = new qx.ui.menu.Button("Second", null, c1); + var mb3_subd_02_suba_03 = new qx.ui.menu.Button("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.Button("First", null, c1); + var mb3_subd_02 = new qx.ui.menu.Button("Second", null, c1, mb3_subd_02_suba); + var mb3_subd_03 = new qx.ui.menu.Button("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.Button("View", null, c1, m4_suba); + var mb4_b1 = new qx.ui.menu.Separator(); + var mb4_02 = new qx.ui.menu.Button("Editor Preferences...", null, c1); + var mb4_03 = new qx.ui.menu.Button("Editor Extensions", null, c1); + var mb4_04 = new qx.ui.menu.Button("Framework Preferences", null, c1); + + m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04); + + var mb4_suba_01 = new qx.ui.menu.Button("New Window", null, c1); + var mb4_suba_b1 = new qx.ui.menu.Separator(); + var mb4_suba_02 = new qx.ui.menu.RadioButton("Overlapping", c1, true); + var mb4_suba_03 = new qx.ui.menu.RadioButton("Split Horizontally", c1); + var mb4_suba_04 = new qx.ui.menu.RadioButton("Split Vertically", c1); + var mb4_suba_b2 = new qx.ui.menu.Separator(); + var mb4_suba_05 = new qx.ui.menu.Button("Next Window", null, c1); + var mb4_suba_06 = new qx.ui.menu.Button("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.Button("Help", null, c1); + var mb5_02 = new qx.ui.menu.Button("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.MenuButton("File", m1); + var mbb2 = new qx.ui.toolbar.MenuButton("Edit", m2); + var mbb3 = new qx.ui.toolbar.MenuButton("View", m3); + var mbb4 = new qx.ui.toolbar.MenuButton("Options", m4); + var mbb5 = new qx.ui.toolbar.MenuButton("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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_4.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_4.html new file mode 100644 index 0000000000..28aff3030f --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolBar_4.html @@ -0,0 +1,196 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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.CheckBox, 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.Button("New", null, c1); + var mb1_02 = new qx.ui.menu.Button("Open", null, c1); + var mb1_03 = new qx.ui.menu.Button("Save", null, c1); + var mb1_04 = new qx.ui.menu.Button("Save as", null, c1); + var mb1_05 = new qx.ui.menu.Button("Close", null, c1); + var mb1_06 = new qx.ui.menu.Button("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.Button("Undo", null, c1); + var mb2_02 = new qx.ui.menu.Button("Redo", null, c1); + var mb2_b1 = new qx.ui.menu.Separator(); + var mb2_03 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png", c1); + var mb2_04 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png", c1); + var mb2_05 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png", c1); + var mb2_06 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png", c1); + var mb2_b2 = new qx.ui.menu.Separator(); + var mb2_07 = new qx.ui.menu.Button("Select All", null, c1); + var mb2_08 = new qx.ui.menu.Button("Find", null, c1); + var mb2_09 = new qx.ui.menu.Button("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.CheckBox("File List", c1, false); + var mb3_02 = new qx.ui.menu.CheckBox("Syntax Highlighting", c1, true); + var mb3_03 = new qx.ui.menu.CheckBox("Statusbar", c1, true); + var mb3_b1 = new qx.ui.menu.Separator(); + var mb3_04 = new qx.ui.menu.Button("Printer Font", null, null, m3_suba); + var mb3_05 = new qx.ui.menu.Button("Editor Font", null, null, m3_subb); + var mb3_06 = new qx.ui.menu.Button("Export Font", null, null, m3_subc); + var mb3_b2 = new qx.ui.menu.Separator(); + var mb3_07 = new qx.ui.menu.Button("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.Button("Tahoma, 11pt", null, c1); + var mb3_suba_02 = new qx.ui.menu.Button("Tahoma, 12pt", null, c1); + var mb3_suba_03 = new qx.ui.menu.Button("Tahoma, 13pt", null, c1); + var mb3_suba_04 = new qx.ui.menu.Button("Tahoma, 14pt", null, c1); + var mb3_suba_05 = new qx.ui.menu.Button("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.Button("Verdana, 11pt", null, c1); + var mb3_subb_02 = new qx.ui.menu.Button("Verdana, 12pt", null, c1); + var mb3_subb_03 = new qx.ui.menu.Button("Verdana, 13pt", null, c1); + var mb3_subb_04 = new qx.ui.menu.Button("Verdana, 14pt", null, c1); + var mb3_subb_05 = new qx.ui.menu.Button("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.Button("Courier, 11pt", null, c1); + var mb3_subc_02 = new qx.ui.menu.Button("Courier, 12pt", null, c1); + var mb3_subc_03 = new qx.ui.menu.Button("Courier, 13pt", null, c1); + var mb3_subc_04 = new qx.ui.menu.Button("Courier, 14pt", null, c1); + var mb3_subc_05 = new qx.ui.menu.Button("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.Button("First", null, c1); + var mb3_subd_02_suba_02 = new qx.ui.menu.Button("Second", null, c1); + var mb3_subd_02_suba_03 = new qx.ui.menu.Button("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.Button("First", null, c1); + var mb3_subd_02 = new qx.ui.menu.Button("Second", null, c1, mb3_subd_02_suba); + var mb3_subd_03 = new qx.ui.menu.Button("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.Button("View", null, c1, m4_suba); + var mb4_b1 = new qx.ui.menu.Separator(); + var mb4_02 = new qx.ui.menu.Button("Editor Preferences...", null, c1); + var mb4_03 = new qx.ui.menu.Button("Editor Extensions", null, c1); + var mb4_04 = new qx.ui.menu.Button("Framework Preferences", null, c1); + + m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04); + + var mb4_suba_01 = new qx.ui.menu.Button("New Window", null, c1); + var mb4_suba_b1 = new qx.ui.menu.Separator(); + var mb4_suba_02 = new qx.ui.menu.RadioButton("Overlapping", c1, true); + var mb4_suba_03 = new qx.ui.menu.RadioButton("Split Horizontally", c1); + var mb4_suba_04 = new qx.ui.menu.RadioButton("Split Vertically", c1); + var mb4_suba_b2 = new qx.ui.menu.Separator(); + var mb4_suba_05 = new qx.ui.menu.Button("Next Window", null, c1); + var mb4_suba_06 = new qx.ui.menu.Button("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.Button("Help", null, c1); + var mb5_02 = new qx.ui.menu.Button("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.Part; + var mp2 = new qx.ui.toolbar.Part; + var mp3 = new qx.ui.toolbar.Part; + + mb1.add(mp1, mp2, new qx.ui.basic.HorizontalSpacer, mp3); + + var mbb1 = new qx.ui.toolbar.MenuButton("File", m1, "icon/16/file-new.png"); + var mbb2 = new qx.ui.toolbar.MenuButton("Edit", m2, "icon/16/edit.png"); + var mbb3 = new qx.ui.toolbar.MenuButton("View", m3, "icon/16/appearance.png"); + var mbb4 = new qx.ui.toolbar.MenuButton("Options", m4, "icon/16/control-center.png"); + var mbb5 = new qx.ui.toolbar.MenuButton("Help", m5, "icon/16/help.png"); + + var tbb1 = new qx.ui.toolbar.CheckBox("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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolTip_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolTip_1.html new file mode 100644 index 0000000000..9beebd57a1 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ToolTip_1.html @@ -0,0 +1,111 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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>
\ No newline at end of file diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_1.html new file mode 100644 index 0000000000..e46e855dc2 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_1.html @@ -0,0 +1,235 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_2.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_2.html new file mode 100644 index 0000000000..18c7cdafa4 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_2.html @@ -0,0 +1,270 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> +<p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_3.html new file mode 100644 index 0000000000..cbbf442732 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_3.html @@ -0,0 +1,298 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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 : "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("treeOpenWithContent", function(e) { + alert('treeOpenWithContent ' + e.getData().getHierarchy(new Array()).join("/")); + }); + + t.addEventListener("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("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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_4.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_4.html new file mode 100644 index 0000000000..b3c701f01f --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_4.html @@ -0,0 +1,384 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Tree_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Tree_1.html new file mode 100644 index 0000000000..ef29240538 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Tree_1.html @@ -0,0 +1,191 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Window_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Window_1.html new file mode 100644 index 0000000000..6d877611ba --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Window_1.html @@ -0,0 +1,308 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>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> + + <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.Button("Explore"); + var t1_2 = new qx.ui.pageview.tabview.Button("Internet"); + var t1_3 = new qx.ui.pageview.tabview.Button("Future"); + + t1_1.setChecked(true); + + tf1.getBar().add(t1_1, t1_2, t1_3); + + var p1_1 = new qx.ui.pageview.tabview.Page(t1_1); + var p1_2 = new qx.ui.pageview.tabview.Page(t1_2); + var p1_3 = new qx.ui.pageview.tabview.Page(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> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file1.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file1.swf Binary files differnew file mode 100644 index 0000000000..2e6d69a3fd --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file1.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file10.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file10.swf Binary files differnew file mode 100644 index 0000000000..eeafa9a8f3 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file10.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file2.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file2.swf Binary files differnew file mode 100644 index 0000000000..51c8f0ff76 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file2.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file3.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file3.swf Binary files differnew file mode 100644 index 0000000000..0b6b56be85 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file3.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file4.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file4.swf Binary files differnew file mode 100644 index 0000000000..746baa8cd9 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file4.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file5.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file5.swf Binary files differnew file mode 100644 index 0000000000..a3333e1c31 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file5.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file6.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file6.swf Binary files differnew file mode 100644 index 0000000000..2cad550081 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file6.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file7.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file7.swf Binary files differnew file mode 100644 index 0000000000..b5f4eb4ddf --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file7.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file8.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file8.swf Binary files differnew file mode 100644 index 0000000000..54c9a11edc --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file8.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file9.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file9.swf Binary files differnew file mode 100644 index 0000000000..cc41ff1c10 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/color/file9.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/fo_tester.fla b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/fo_tester.fla Binary files differnew file mode 100644 index 0000000000..afd4bb6134 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/fo_tester.fla diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/fo_tester.swf b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/fo_tester.swf Binary files differnew file mode 100644 index 0000000000..8e0b966bca --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/image/flash/fo_tester.swf diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/index.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/index.html new file mode 100644 index 0000000000..ac437542ac --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/index.html @@ -0,0 +1,18 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Please choose an example from above.</p> + </div> +</body> +</html>
\ No newline at end of file |