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