summaryrefslogtreecommitdiff
path: root/swat.obsolete/apps/qooxdoo-examples/test/FlowLayout_3.html
diff options
context:
space:
mode:
Diffstat (limited to 'swat.obsolete/apps/qooxdoo-examples/test/FlowLayout_3.html')
-rw-r--r--swat.obsolete/apps/qooxdoo-examples/test/FlowLayout_3.html277
1 files changed, 277 insertions, 0 deletions
diff --git a/swat.obsolete/apps/qooxdoo-examples/test/FlowLayout_3.html b/swat.obsolete/apps/qooxdoo-examples/test/FlowLayout_3.html
new file mode 100644
index 0000000000..99c27e13bb
--- /dev/null
+++ b/swat.obsolete/apps/qooxdoo-examples/test/FlowLayout_3.html
@@ -0,0 +1,277 @@
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>qooxdoo &raquo; Demo</title>
+ <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
+ <!--[if IE]>
+ <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
+ <![endif]-->
+ <script type="text/javascript" src="../../script/qx.js"></script>
+</head>
+<body>
+ <script type="text/javascript" src="../../script/layout.js"></script>
+
+ <div id="demoDescription">
+ Tests for the new implementation of the qx.ui.layout.FlowLayout widget.
+ </div>
+
+ <script type="text/javascript">
+ qx.core.Init.getInstance().defineMain(function()
+ {
+ var d = qx.ui.core.ClientDocument.getInstance();
+
+
+
+ var flow1 = new qx.ui.layout.FlowLayout;
+
+ flow1.setTop(48);
+ flow1.setLeft(20);
+ flow1.setRight(335);
+ // flow1.setWidth("auto");
+ flow1.setHeight("auto");
+
+ flow1.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
+ flow1.setPadding(8);
+
+ flow1.setHorizontalSpacing(4);
+ flow1.setVerticalSpacing(4);
+
+ // flow1.setReverseChildrenOrder(true);
+
+ d.add(flow1);
+
+
+
+ var w1 = new qx.ui.basic.Terminator;
+
+ w1.setBackgroundColor("orange");
+ w1.setWidth(300);
+ w1.setHeight(20);
+
+
+ var w2 = new qx.ui.basic.Terminator;
+
+ w2.setBackgroundColor("blue");
+ w2.setWidth(200);
+ w2.setHeight(50);
+
+
+ var w3 = new qx.ui.basic.Terminator;
+
+ w3.setBackgroundColor("green");
+ w3.setWidth(100);
+ w3.setHeight(150);
+ w3.setMarginLeft(20);
+
+ var w4 = new qx.ui.basic.Terminator;
+
+ w4.setBackgroundColor("purple");
+ w4.setWidth(100);
+ w4.setHeight(20);
+
+ var w5 = new qx.ui.basic.Terminator;
+
+ w5.setBackgroundColor("yellow");
+ w5.setWidth(50);
+ w5.setHeight(80);
+
+ var w6 = new qx.ui.basic.Terminator;
+
+ w6.setBackgroundColor("red");
+ w6.setWidth(400);
+ w6.setHeight(50);
+
+ var i1 = new qx.ui.basic.Image("icon/32/clock.png");
+ var i2 = new qx.ui.basic.Image("icon/32/colors.png");
+
+ i2.setResizeToInner(true);
+
+ var c1 = new qx.ui.basic.Label("Hello World");
+ var c2 = new qx.ui.basic.Label("<ol><li>Simple HTML List</li><li>with one</li><li>and another item</li></ol>");
+
+ var a1 = new qx.ui.form.Button("Press", "icon/16/bell.png");
+
+
+ flow1.add(w1, i1, w2, w3, a1, c2, w4, i2, w5, c1, w6);
+
+
+
+
+
+ w1.addEventListener("click", function(e) {
+ this.setMaxWidth(this.getMaxWidth() == 50 ? null : 50);
+ });
+
+ w2.addEventListener("click", function(e)
+ {
+ if (this.getWidth() == 200)
+ {
+ this.setWidth(100);
+ this.setHeight(200);
+ }
+ else
+ {
+ this.setWidth(200);
+ this.setHeight(50);
+ };
+ });
+
+ i1.addEventListener("click", function(e) {
+ this.setSource(this.getSource() == "icon/32/clock.png" ? "icon/128/clock.png" : "icon/32/clock.png");
+ });
+
+ i2.addEventListener("click", function(e)
+ {
+ this.setWidth(this.getWidth() == "auto" ? 128 : "auto");
+ this.setHeight(this.getHeight() == "auto" ? 128 : "auto");
+ });
+
+ c1.addEventListener("click", function(e) {
+ this.setHtml(this.getHtml() == "Hello World" ? "Yeah, qooxdoo is great" : "Hello World");
+ });
+
+
+
+
+ // *************************************************************
+
+ var controlBox = new qx.ui.layout.VerticalBoxLayout;
+
+ controlBox.setLeft(20);
+ controlBox.setBottom(48);
+ controlBox.setRight(335);
+ controlBox.setHeight("auto");
+ controlBox.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
+ controlBox.setSpacing(4);
+ controlBox.setPadding(8);
+
+ d.add(controlBox);
+
+
+
+
+ var cc0 = new qx.ui.basic.Label("Spacing: ");
+ cc0.setWidth(50);
+
+ var bc0 = new qx.ui.form.Button("0x0", "icon/16/button-ok.png");
+ var bc1 = new qx.ui.form.Button("4x4", "icon/16/button-ok.png");
+ var bc2 = new qx.ui.form.Button("8x8", "icon/16/button-ok.png");
+ var bc3 = new qx.ui.form.Button("20x20", "icon/16/button-ok.png");
+ var bc4 = new qx.ui.form.Button("0x10", "icon/16/button-ok.png");
+ var bc5 = new qx.ui.form.Button("10x0", "icon/16/button-ok.png");
+
+ bc0.addEventListener("execute", function(e) {
+ flow1.setHorizontalSpacing(0);
+ flow1.setVerticalSpacing(0);
+ });
+
+ bc1.addEventListener("execute", function(e) {
+ flow1.setHorizontalSpacing(4);
+ flow1.setVerticalSpacing(4);
+ });
+
+ bc2.addEventListener("execute", function(e) {
+ flow1.setHorizontalSpacing(8);
+ flow1.setVerticalSpacing(8);
+ });
+
+ bc3.addEventListener("execute", function(e) {
+ flow1.setHorizontalSpacing(20);
+ flow1.setVerticalSpacing(20);
+ });
+
+ bc4.addEventListener("execute", function(e) {
+ flow1.setHorizontalSpacing(0);
+ flow1.setVerticalSpacing(10);
+ });
+
+ bc5.addEventListener("execute", function(e) {
+ flow1.setHorizontalSpacing(10);
+ flow1.setVerticalSpacing(0);
+ });
+
+ var hc0 = new qx.ui.layout.HorizontalBoxLayout;
+
+ hc0.add(cc0, bc0, bc1, bc2, bc3, bc4, bc5);
+ hc0.setVerticalChildrenAlign("middle");
+ hc0.setHeight("auto");
+
+ controlBox.add(hc0);
+
+
+
+
+
+
+ var cr0 = new qx.ui.basic.Label("Order: ");
+ cr0.setWidth(50);
+
+ var br0 = new qx.ui.form.Button("Default", "icon/16/button-ok.png");
+ var br1 = new qx.ui.form.Button("Reversed", "icon/16/button-ok.png");
+
+ br0.addEventListener("execute", function(e) {
+ flow1.setReverseChildrenOrder(false);
+ });
+
+ br1.addEventListener("execute", function(e) {
+ flow1.setReverseChildrenOrder(true);
+ });
+
+
+
+ var hc1 = new qx.ui.layout.HorizontalBoxLayout;
+
+ hc1.add(cr0, br0, br1);
+ hc1.setVerticalChildrenAlign("middle");
+ hc1.setHeight("auto");
+
+ controlBox.add(hc1);
+
+
+
+
+
+
+
+ var ca0 = new qx.ui.basic.Label("Children: ");
+ ca0.setWidth(50);
+
+ var ba0 = new qx.ui.form.Button("New Atom", "icon/16/button-ok.png");
+ var ba1 = new qx.ui.form.Button("New Image", "icon/16/button-ok.png");
+ var ba2 = new qx.ui.form.Button("New Atom to #3", "icon/16/button-ok.png");
+ var ba3 = new qx.ui.form.Button("New Image to #6", "icon/16/button-ok.png");
+ var ba4 = new qx.ui.form.Button("Remove First", "icon/16/button-ok.png");
+
+ ba0.addEventListener("execute", function(e) {
+ flow1.add(new qx.ui.basic.Atom("New Atom", "icon/16/services.png"));
+ });
+
+ ba1.addEventListener("execute", function(e) {
+ flow1.add(new qx.ui.basic.Image("icon/64/pipe.png"));
+ });
+
+ ba2.addEventListener("execute", function(e) {
+ flow1.addAt(new qx.ui.basic.Atom("New Atom", "icon/16/bell.png"), 3);
+ });
+
+ ba3.addEventListener("execute", function(e) {
+ flow1.addAt(new qx.ui.basic.Image("icon/64/vectorgraphics.png"), 6);
+ });
+
+ ba4.addEventListener("click", function(e) {
+ flow1.remove(flow1.getFirstChild());
+ });
+
+ var ha1 = new qx.ui.layout.HorizontalBoxLayout;
+
+ ha1.add(ca0, ba0, ba1, ba2, ba3, ba4);
+ ha1.setVerticalChildrenAlign("middle");
+ ha1.setHeight("auto");
+
+ controlBox.add(ha1);
+
+
+ });
+ </script>
+</body>
+</html> \ No newline at end of file
generated by cgit (git 2.34.1) at 2024-11-10 12:00:52 +0000