diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example')
4 files changed, 626 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_1.html b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_1.html new file mode 100644 index 0000000000..b92df15d4f --- /dev/null +++ b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_1.html @@ -0,0 +1,84 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo » Sample</title> + <link type="text/css" rel="stylesheet" href="../../css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/sample.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Test large trees. This one adds a Spam branch with 3000 leaf nodes.</p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + // tree + var tree = new qx.ui.treevirtual.TreeVirtual("Tree"); + with (tree) + { + set({ + left : 10, + top : 30, + width : 400, + bottom : 30, + border : qx.renderer.border.BorderPresets.getInstance().thinInset + }); + setColumnWidth(0, 400); + setAlwaysShowOpenCloseSymbol(true); + }; + + d.add(tree); + + // tree data model + var dataModel = tree.getDataModel(); + + var te1 = dataModel.addBranch(null, "Desktop", true); + dataModel.setState(te1, + { + labelStyle : "background-color: red; color: white;" + }); + + var te; + + dataModel.addBranch(te1, "Files", true); + + te = dataModel.addBranch(te1, "Workspace", true); + dataModel.addLeaf(te, "Windows (C:)"); + dataModel.addLeaf(te, "Documents (D:)"); + + dataModel.addBranch(te1, "Network", true); + + te = dataModel.addBranch(te1, "Trash", true); + dataModel.setState(te, + { + cellStyle : "background-color: cyan;" + }); + + + var te2 = dataModel.addBranch(null, "Inbox", true); + + te = dataModel.addBranch(te2, "Spam", false); + + for (var i = 1; i < 3000; i++) + { + dataModel.addLeaf(te, "Spam Message #" + i); + } + + dataModel.addBranch(te2, "Sent", true); + dataModel.addBranch(te2, "Trash", true); + dataModel.addBranch(te2, "Data", true); + dataModel.addBranch(te2, "Edit", true); + + dataModel.setData(); + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_2.html b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_2.html new file mode 100644 index 0000000000..843de57477 --- /dev/null +++ b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_2.html @@ -0,0 +1,185 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo » Sample</title> + <link type="text/css" rel="stylesheet" href="../../css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/sample.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Show use of events upon tree opening and closing, including adding + nodes dynamically upon tree open and removing the open/close button upon + tree open if the branch contains no children. + </p><p> + Allows controlling selection mode. Labels of selected items are + displayed. + </p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + // tree + var tree = new qx.ui.treevirtual.TreeVirtual("Tree"); + with (tree) + { + set({ + left : 10, + top : 30, + width : 400, + bottom : 30, + border : qx.renderer.border.BorderPresets.getInstance().thinInset + }); + setColumnWidth(0, 400); + setAlwaysShowOpenCloseSymbol(true); + }; + + // Add the tree to the document + tree.addToDocument(); + + // tree data model + var dataModel = tree.getDataModel(); + + var te1 = dataModel.addBranch(null, "Desktop", true); + + var te; + dataModel.addBranch(te1, "Files", true); + + te = dataModel.addBranch(te1, "Workspace", true); + dataModel.addLeaf(te, "Windows (C:)"); + dataModel.addLeaf(te, "Documents (D:)"); + + dataModel.addBranch(te1, "Network", true); + dataModel.addBranch(te1, "Trash", true); + + var te2 = dataModel.addBranch(null, "Inbox", true); + + te = dataModel.addBranch(te2, "Spam", false); + for (var i = 1; i < 3000; i++) + { + dataModel.addLeaf(te, "Spam Message #" + i); + } + + dataModel.addBranch(te2, "Sent", false); + dataModel.addBranch(te2, "Trash", false); + dataModel.addBranch(te2, "Data", false); + dataModel.addBranch(te2, "Edit", false); + + dataModel.setData(); + + var newItem = 1; + + /* + * Each time we get a treeOpenWithContent event, add yet another leaf node + * to the node being opened. + */ + tree.addEventListener("treeOpenWithContent", + function(e) + { + alert('treeOpenWithContent '); + var node = e.getData(); + dataModel.addLeaf(node.nodeId, newItem.toString()); + newItem++; + }); + + tree.addEventListener("treeClose", + function(e) + { + alert('treeClose '); + }); + + /* + * We handle opening an empty folder specially. We demonstrate how to + * disable the open/close symbol 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 + * open/close symbol. + */ + tree.addEventListener("treeOpenWhileEmpty", + function(e) + { + alert('treeOpenWhileEmpty'); + var node = e.getData(); + tree.setState(node.nodeId, + { bHideOpenClose : true }); + }); + + + tree.addEventListener("changeSelection", + function(e) + { + var text = "Selected labels:"; + var selectedNodes = e.getData(); + for (i = 0; i < selectedNodes.length; i++) + { + text += "\n " + selectedNodes[i].label; + } + alert('changeSelection: ' + text); + }); + + + + var commandFrame = new qx.ui.groupbox.GroupBox("Control"); + commandFrame.set({ top: 48, left: 520, right: 290, height: "auto" }); + commandFrame.addToDocument(); + + // Create a combo box for the selection type + var o = new qx.ui.basic.Atom("Selection Mode: "); + o.set({ top: 6, left: 0 }); + commandFrame.add(o); + + o = new qx.ui.form.ComboBox(); + o.set({ top: 20, left: 4, width: "100%" }); + o.setEditable(false); + + // Add the various selection types + var item = new qx.ui.form.ListItem("No Selection"); + o.add(item); + var item = new qx.ui.form.ListItem("Single Selection"); + o.add(item); + o.setSelected(item); + var item = new qx.ui.form.ListItem("Single Interval Selection"); + o.add(item); + var item = new qx.ui.form.ListItem("Multiple Interval Selection"); + o.add(item); + + // We want to be notified if the selection changes + o.addEventListener( + "changeSelected", + function() + { + switch(this.getValue()) + { + case "No Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.NONE); + break; + + case "Single Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.SINGLE); + break; + + case "Single Interval Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.SINGLE_INTERVAL); + break; + + case "Multiple Interval Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.MULTIPLE_INTERVAL); + break; + } + }); + + commandFrame.add(o); + + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_3.html b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_3.html new file mode 100644 index 0000000000..70391adf89 --- /dev/null +++ b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_3.html @@ -0,0 +1,222 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo » Sample</title> + <link type="text/css" rel="stylesheet" href="../../css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/sample.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p> + Demonstrate use of multiple columns in a tree, and the use of the + getHierarchy() method to retrieve the entire tree path of a node. + Allows various options to be manipulated. + </p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + // tree + var tree = new qx.ui.treevirtual.TreeVirtual( + [ + "Tree", + "Permissions", + "Last Accessed" + ]); + with (tree) + { + set({ + left : 10, + top : 30, + width : 506, + bottom : 30, + border : qx.renderer.border.BorderPresets.getInstance().thinInset + }); + setAlwaysShowOpenCloseSymbol(true); + setColumnWidth(0, 200); + setColumnWidth(1, 80); + setColumnWidth(2, 200); + }; + + tree.addToDocument(); + + // tree data model + var dataModel = tree.getDataModel(); + + var te1 = dataModel.addBranch(null, "Desktop", true); + dataModel.setState(te1, + { + labelStyle : + "background-color: red; " + + "color: white;" + + "font-weight: bold;" + }); + + var te1_1; + + dataModel.addBranch(te1, "Files", true); + + te1_1 = dataModel.addBranch(te1, "Workspace", true); + te = dataModel.addLeaf(te1_1, "Windows (C:)"); + dataModel.setColumnData(te, 1, "-rwxr-xr-x"); + dataModel.setColumnData(te, 2, "2007-01-30 22:54:03"); + te = dataModel.addLeaf(te1_1, "Documents (D:)"); + dataModel.setColumnData(te, 1, "-rwxr-xr-x"); + dataModel.setColumnData(te, 2, "2007-01-30 22:54:03"); + + dataModel.addBranch(te1, "Network", true); + + te = dataModel.addBranch(te1, "Trash", true); + dataModel.setState(te, + { + cellStyle : "background-color: cyan;" + }); + + + var te2 = dataModel.addBranch(null, "Inbox", true); + + te = dataModel.addBranch(te2, "Spam", false); + + for (var i = 1; i < 3000; i++) + { + dataModel.addLeaf(te, "Spam Message #" + i); + } + + dataModel.addBranch(te2, "Sent", false); + dataModel.addBranch(te2, "Trash", false); + dataModel.addBranch(te2, "Data", false); + dataModel.addBranch(te2, "Edit", false); + + dataModel.setData(); + + var commandFrame = new qx.ui.groupbox.GroupBox("Control"); + commandFrame.set({ top: 48, left: 520, width: "auto", height: "auto" }); + commandFrame.addToDocument(); + + var o = new qx.ui.basic.Atom("Current Selection: "); + o.set({ left: 0, top: 6 }); + commandFrame.add(o); + + o = new qx.ui.form.TextField(); + o.set({ left: 4, right: 0, top: 20, readOnly: true }); + commandFrame.add(o); + tree.addEventListener( + "changeSelection", + function(e) + { + // Get the list of selected nodes. We're in single-selection mode, so + // there will be only one of them. + var nodes = e.getData(); + this.setValue(tree.getHierarchy(nodes[0].nodeId).join('/')); + buttonRemove.setEnabled(true); + }, + o); + + var buttonRemove = new qx.ui.form.Button("Remove"); + buttonRemove.set({ top: 42, left: 0, enabled: false }); + commandFrame.add(buttonRemove); + buttonRemove.addEventListener( + "execute", + function(e) + { + selectedNodes = tree.getSelectedNodes(); + for (var i = 0; i < selectedNodes.length; i++) + { + dataModel.prune(selectedNodes[i].nodeId); + dataModel.setData(); + } + }); + + o = new qx.ui.form.CheckBox("Use tree lines?"); + o.set({ top: 80, left: 0, checked: true }); + commandFrame.add(o); + o.addEventListener("changeChecked", + function(e) + { + tree.setUseTreeLines(e.getData()); + }); + + o = new qx.ui.form.CheckBox("Exclude first-level tree lines?"); + o.set({ top: 100, left: 0, checked: false }); + commandFrame.add(o); + o.addEventListener("changeChecked", + function(e) + { + tree.setExcludeFirstLevelTreeLines(e.getData()); + }); + + o = new qx.ui.form.CheckBox("Always show open/close symbol?"); + o.set({ top: 120, left: 0, checked: true }); + commandFrame.add(o); + o.addEventListener("changeChecked", + function(e) + { + tree.setAlwaysShowOpenCloseSymbol(e.getData()); + }); + + o = new qx.ui.form.CheckBox("Remove open/close if found empty?"); + o.set({ top: 140, left: 0, checked: true }); + commandFrame.add(o); + tree.addEventListener("treeOpenWhileEmpty", + function(e) + { + if (this.getChecked()) + { + var node = e.getData(); + tree.setState(node.nodeId, + { bHideOpenClose : true }); + } + }, + o); + + o = new qx.ui.form.CheckBox("Open/close click selects row?"); + o.set({ top: 160, left: 0, checked: false }); + commandFrame.add(o); + o.addEventListener("changeChecked", + function(e) + { + tree.setOpenCloseClickSelectsRow(e.getData()); + }); + + o = new qx.ui.form.CheckBox("Disable the tree?"); + o.set({ top: 180, left: 0, checked: false }); + commandFrame.add(o); + o.addEventListener("changeChecked", + function(e) + { + tree.setEnabled(! e.getData()); + }); + + o = new qx.ui.form.CheckBox("Display a cell focus indicator?"); + o.set({ top: 200, left: 0, checked: true }); + commandFrame.add(o); + o.addEventListener("changeChecked", + function(e) + { + if (e.getData()) + { + tree.setCellFocusAttributes( + { + backgroundColor : "lightblue" + }); + } + else + { + tree.setCellFocusAttributes( + { + backgroundColor : "transparent" + }); + } + }); + + + }); + </script> +</body> +</html> diff --git a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_4.html b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_4.html new file mode 100644 index 0000000000..65b5b9d397 --- /dev/null +++ b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TreeVirtual_4.html @@ -0,0 +1,135 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo » Sample</title> + <link type="text/css" rel="stylesheet" href="../../css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/sample.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Demonstrate providing initially-selected tree nodes.</p> + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + // tree + var tree = new qx.ui.treevirtual.TreeVirtual("Tree"); + with (tree) + { + set({ + left : 10, + top : 30, + width : 400, + bottom : 30, + border : qx.renderer.border.BorderPresets.getInstance().thinInset + }); + setColumnWidth(0, 400); + setAlwaysShowOpenCloseSymbol(true); + }; + + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.MULTIPLE_INTERVAL); + + // Add the tree to the document + tree.addToDocument(); + + // tree data model + var dataModel = tree.getDataModel(); + + var te1 = dataModel.addBranch(null, "Desktop", true); + + var x; + var te; + dataModel.addBranch(te1, "Files", true); + + te = dataModel.addBranch(te1, "Workspace", true); + x = dataModel.addLeaf(te, "Windows (C:)"); + tree.setState(x, { bSelected : true }); + x = dataModel.addLeaf(te, "Documents (D:)"); + tree.setState(x, { bSelected : true }); + + dataModel.addBranch(te1, "Network", true); + dataModel.addBranch(te1, "Trash", true); + + var te2 = dataModel.addBranch(null, "Inbox", true); + + te = dataModel.addBranch(te2, "Spam", false); + for (var i = 1; i < 3000; i++) + { + dataModel.addLeaf(te, "Spam Message #" + i); + } + + dataModel.addBranch(te2, "Sent", false); + dataModel.addBranch(te2, "Trash", false); + dataModel.addBranch(te2, "Data", false); + dataModel.addBranch(te2, "Edit", false); + + dataModel.setData(); + + var newItem = 1; + + var commandFrame = new qx.ui.groupbox.GroupBox("Control"); + commandFrame.set({ top: 48, left: 520, right: 290, height: "auto" }); + commandFrame.addToDocument(); + + // Create a combo box for the selection type + var o = new qx.ui.basic.Atom("Selection Mode: "); + o.set({ top: 6, left: 0 }); + commandFrame.add(o); + + o = new qx.ui.form.ComboBox(); + o.set({ top: 20, left: 4, width: "100%" }); + o.setEditable(false); + + // Add the various selection types + var item = new qx.ui.form.ListItem("No Selection"); + o.add(item); + var item = new qx.ui.form.ListItem("Single Selection"); + o.add(item); + var item = new qx.ui.form.ListItem("Single Interval Selection"); + o.add(item); + var item = new qx.ui.form.ListItem("Multiple Interval Selection"); + o.add(item); + o.setSelected(item); + + // We want to be notified if the selection changes + o.addEventListener( + "changeSelected", + function() + { + switch(this.getValue()) + { + case "No Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.NONE); + break; + + case "Single Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.SINGLE); + break; + + case "Single Interval Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.SINGLE_INTERVAL); + break; + + case "Multiple Interval Selection": + tree.setSelectionMode( + qx.ui.treevirtual.TreeVirtual.SelectionMode.MULTIPLE_INTERVAL); + break; + } + }); + + commandFrame.add(o); + + }); + </script> +</body> +</html> |