diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_3.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/TreeFullControl_3.html | 298 |
1 files changed, 298 insertions, 0 deletions
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> |