// Create a button var button1 = new qx.ui.form.Button("First Button", "icon/22/apps/internet-web-browser.png"); // Document is the application root var doc = this.getRoot(); // Add button to document at fixed coordinates doc.add(button1, { left : 100, top : 50 }); // Add an event listener button1.addListener("execute", function(e) { alert("Hello World!"); });
var win = new qx.ui.window.Window("First Window"); win.setWidth(300); win.setHeight(200); win.setShowMinimize(false); this.getRoot().add(win, {left:20, top:20}); win.open();
var surfTo = function(url) { if (url.indexOf("http://") !== 0) { url = "http://" + url; txtUrl.setValue(url); } iframe.setSource(url); }; var win = new qx.ui.window.Window( "Web Browser", "icon/16/categories/internet.png" ); var layout = new qx.ui.layout.VBox(); layout.setSeparator("separator-vertical"); win.setLayout(layout); win.setShowMinimize(false); win.setAllowClose(false); win.setContentPadding(0); win.open(); var toolbar = new qx.ui.toolbar.ToolBar(); win.add(toolbar); var btnBack = new qx.ui.toolbar.Button(null, "icon/16/actions/go-previous.png"); btnBack.addListener("execute", function(e) { iframe.getWindow().history.back(); }); toolbar.add(btnBack); var btnForward = new qx.ui.toolbar.Button(null, "icon/16/actions/go-next.png"); btnForward.addListener("execute", function(e) { iframe.getWindow().history.forward(); }); toolbar.add(btnForward); // IE does not allow access to an iframes history object // Firefox applies history changes to the main window // Opera throws a script error when trying to go forward or back var ttIeNote = new qx.ui.tooltip.ToolTip("This feature is currently not supported."); btnForward.setEnabled(false); btnBack.setEnabled(false); btnForward.setToolTip(ttIeNote) btnBack.setToolTip(ttIeNote) var txtUrl = new qx.ui.form.TextField().set({ marginLeft: 1, value: "http://qooxdoo.org", padding: 2, alignY: "middle" }); txtUrl.addListener("keypress", function(e) { if (e.getKeyIdentifier() == "Enter") { surfTo(txtUrl.getValue()); } }); toolbar.add(txtUrl, {flex: 1}); btnGo = new qx.ui.toolbar.Button(null, "icon/16/actions/media-playback-start.png"); btnGo.addListener("execute", function(e) { surfTo(txtUrl.getValue()); }); toolbar.add(btnGo); var iframe = new qx.ui.embed.Iframe().set({ width: 600, height: 500, minWidth: 200, minHeight: 150, source: txtUrl.getValue(), decorator : null }); win.add(iframe, {flex: 1}); this.getRoot().add(win, {left: 40, top: 30});
var layout = new qx.ui.layout.Grid(9, 5); layout.setColumnAlign(0, "right", "top"); layout.setColumnAlign(2, "right", "top"); layout.setColumnWidth(1, 160); layout.setColumnWidth(2, 72); layout.setColumnWidth(3, 108); var container = new qx.ui.tabview.TabView; var page = new qx.ui.tabview.Page("Page"); page.setLayout(layout); page.setPadding(10); container.add(page); this.getRoot().add(container, {left:40, top:40}); labels = ["First Name", "Last Name", "City", "Country", "Notes"]; for (var i=0; i < labels.length; i++) { page.add(new qx.ui.basic.Label(labels[i]).set({ allowShrinkX: false, paddingTop: 3 }), {row: i, column : 0}); } inputs = ["John", "Smith", "New York", "USA"]; for (var i=0; i < inputs.length; i++) { page.add(new qx.ui.form.TextField(inputs[i]), {row:i, column:1}); } // text area page.add(new qx.ui.form.TextArea().set({ height: 250 }), {row:4, column:1, colSpan: 3}); // radio buttons page.add(new qx.ui.basic.Label("Sex").set({ allowShrinkX: false, paddingTop: 3 }), {row:0, column:2}); var female = new qx.ui.form.RadioButton("female"); var male = new qx.ui.form.RadioButton("male"); var mgr = new qx.ui.form.RadioGroup(); mgr.add(female, male); page.add(female, {row:0, column:3}); page.add(male, {row:1, column:3}); male.setValue(true); // check boxes page.add(new qx.ui.basic.Label("Hobbies").set({ allowShrinkX: false, paddingTop: 3 }), {row:2, column:2}); page.add(new qx.ui.form.CheckBox("Reading"), {row:2, column:3}); page.add(new qx.ui.form.CheckBox("Swimming").set({ enabled: false }), {row:3, column:3}); // buttons var paneLayout = new qx.ui.layout.HBox().set({ spacing: 4, alignX : "right" }); var buttonPane = new qx.ui.container.Composite(paneLayout).set({ paddingTop: 11 }); page.add(buttonPane, {row:5, column: 0, colSpan: 4}); okButton = new qx.ui.form.Button("OK", "icon/22/actions/dialog-apply.png"); okButton.addState("default"); buttonPane.add(okButton); cancelButton = new qx.ui.form.Button("Cancel", "icon/22/actions/dialog-cancel.png"); buttonPane.add(cancelButton);
var win = new qx.ui.window.Window("Calculator"); win.setLayout(new qx.ui.layout.VBox(3)); win.setShowMinimize(false); this.getRoot().add(win, {left:100, top:50}); win.open(); var display = new qx.ui.basic.Label("0").set({ allowGrowX: true, allowGrowY: true, textAlign : "right", font: "bold", decorator: "main" }); win.add(display, {flex:1}); var buttonContainer = new qx.ui.container.Composite(); var grid = new qx.ui.layout.Grid(3, 3); buttonContainer.setLayout(grid); win.add(buttonContainer, {flex:6}); var labels = [ ["MC", "M+", "M-", "MR"], ["C", "±", "÷", "*"], ["7", "8", "9", "-"], ["4", "5", "6", "+"], ["1", "2", "3", "="], ["0", null, ".", null] ]; var buttons = {}; for (var row=0; row<6; row++) { grid.setRowFlex(row, 1); for (var column=0; column<4; column++) { grid.setColumnFlex(column, 1); var label = labels[row][column]; if (label) { var button = new qx.ui.form.Button(label).set({ rich: true, allowShrinkX: false }); buttonContainer.add(button, {row: row, column: column}); buttons[label] = button; } } } buttons["="].setLayoutProperties({rowSpan: 2}); buttons["0"].setLayoutProperties({colSpan: 2}); for (label in buttons) { buttons[label].addListener("execute", function(e) { var button = e.getTarget(); alert("Pressed: " + button.getLabel()); }, this); } win.addListener("keypress", function(e) { alert("Key: " + e.getKeyIdentifier()); }, this);
function createRandomRows(rowCount) { var rowData = []; var now = new Date().getTime(); var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days var nextId = 0; 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; } // window var win = new qx.ui.window.Window("Table").set({ layout : new qx.ui.layout.Grow(), allowClose: false, allowMinimize: false, contentPadding: 0 }); this.getRoot().add(win); win.moveTo(30, 40); win.open(); // table model var tableModel = new qx.ui.table.model.Simple(); tableModel.setColumns([ "ID", "A number", "A date", "Boolean" ]); tableModel.setData(createRandomRows(1000)); // make second column editable tableModel.setColumnEditable(1, true); // table var table = new qx.ui.table.Table(tableModel).set({ decorator: null }) win.add(table); var tcm = table.getTableColumnModel(); // Display a checkbox in column 3 tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean()); // use a different header renderer tcm.setHeaderCellRenderer(2, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date"));
// create the tree var tree = new qx.ui.tree.Tree(); tree.set({ width: 150, height: 300 }); this.getRoot().add(tree, {left: 10, top: 10}); // create and set the tree root var root = new qx.ui.tree.TreeFolder("Desktop"); tree.setRoot(root); // create some subitems var f1 = new qx.ui.tree.TreeFolder("Logos"); var f2 = new qx.ui.tree.TreeFolder("TODO"); var f3 = new qx.ui.tree.TreeFile("jsmag_js9.pdf"); f3.setIcon("icon/22/mimetypes/text-html.png"); root.add(f1, f2, f3); // create a third layer var f11 = new qx.ui.tree.TreeFile("Logo1.png"); f11.setIcon("icon/22/mimetypes/media-image.png"); var f12 = new qx.ui.tree.TreeFile("Logo2.png"); f12.setIcon("icon/22/mimetypes/media-image.png"); var f13 = new qx.ui.tree.TreeFile("Logo3.png"); f13.setIcon("icon/22/mimetypes/media-image.png"); f1.add(f11, f12, f13); // open the folders root.setOpen(true); f1.setOpen(true);
// We want to use some of the high-level node operation convenience // methods rather than manually digging into the TreeVirtual helper // classes. Include the mixin that provides them. qx.Class.include(qx.ui.treevirtual.TreeVirtual, qx.ui.treevirtual.MNode); // Use an HBox to hold the tree and the groupbox var hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(20)); this.getRoot().add(hBox, { edge : 30 }); // tree var tree = new qx.ui.treevirtual.TreeVirtual( [ "Tree", "Permissions", "Last Accessed" ]); tree.set( { width : 400 }); tree.setAlwaysShowOpenCloseSymbol(true); // Obtain the resize behavior object to manipulate var resizeBehavior = tree.getTableColumnModel().getBehavior(); // Ensure that the tree column remains sufficiently wide resizeBehavior.set(0, { width:"1*", minWidth:100 }); hBox.add(tree); // tree data model var dataModel = tree.getDataModel(); var te1 = dataModel.addBranch(null, "Desktop", true); tree.nodeSetLabelStyle(te1, "background-color: red; " + "color: white;" + "font-weight: bold;"); var te1_1; dataModel.addBranch(te1, "Files", true); te1_1 = dataModel.addBranch(te1, "Workspace", true); var 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); tree.nodeSetCellStyle(te, "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.setLayout(new qx.ui.layout.Canvas()); hBox.add(commandFrame); var o = new qx.ui.basic.Atom("Current Selection: "); commandFrame.add(o, { left: 0, top: 6 }); o = new qx.ui.form.TextField(); o.set({ readOnly: true }); commandFrame.add(o, { left : 4, right : 0, top : 20 }); tree.addListener( "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(); if (nodes.length) { this.setValue(tree.getHierarchy(nodes[0].nodeId).join('/')); buttonRemove.setEnabled(true); } else { this.setValue(""); buttonRemove.setEnabled(false); } }, o); var buttonRemove = new qx.ui.form.Button("Remove"); buttonRemove.set({ enabled: false }); commandFrame.add(buttonRemove, { top : 50, left : 0 }); buttonRemove.addListener( "execute", function(e) { var selectedNodes = tree.getSelectedNodes(); for (var i = 0; i < selectedNodes.length; i++) { dataModel.prune(selectedNodes[i].nodeId, true); dataModel.setData(); } }); o = new qx.ui.form.CheckBox("Exclude first-level tree lines?"); o.set({ value: false }); commandFrame.add(o, { top : 100, left : 0 }); o.addListener("changeValue", function(e) { tree.setExcludeFirstLevelTreeLines(e.getData()); }); o = new qx.ui.form.CheckBox("Always show open/close symbol?"); o.set({ value: true }); commandFrame.add(o, { top : 120, left : 0 }); o.addListener("changeValue", function(e) { tree.setAlwaysShowOpenCloseSymbol(e.getData()); }); o = new qx.ui.form.CheckBox("Remove open/close if found empty?"); o.set({ value: true }); commandFrame.add(o, { top : 140, left : 0 }); tree.addListener("treeOpenWhileEmpty", function(e) { if (this.getValue()) { var node = e.getData(); tree.nodeSetHideOpenClose(node, true); } }, o); o = new qx.ui.form.CheckBox("Open/close click selects row?"); o.set({ value: false }); commandFrame.add(o, { top : 160, left : 0 }); o.addListener("changeValue", function(e) { tree.setOpenCloseClickSelectsRow(e.getData()); }); o = new qx.ui.form.CheckBox("Disable the tree?"); o.set({ value: false }); commandFrame.add(o, { top : 180, left : 0 }); o.addListener("changeValue", function(e) { tree.setEnabled(! e.getData()); });
/** * Bind a textfield to a label */ var textfield = new qx.ui.form.TextField("Change me..."); textfield.setLiveUpdate(true); this.getRoot().add(textfield, {left: 10, top: 10}); var label = new qx.ui.basic.Label("Change me..."); this.getRoot().add(label, {left: 120, top: 12}); // bind the textfield to the label textfield.bind("changeValue", label, "value"); /** * Bind two slider together */ var slider1 = new qx.ui.form.Slider("horizontal"); slider1.setWidth(300); this.getRoot().add(slider1, {left: 10, top: 50}); var slider2 = new qx.ui.form.Slider("horizontal"); slider2.setWidth(200); this.getRoot().add(slider2, {left: 10, top: 80}); // set up the bidirectional single value binding slider1.bind("value", slider2, "value"); slider2.bind("value", slider1, "value");
var query = "select * from feed where url='http://feeds.feedburner.com/qooxdoo/news/content'"; var delegate = {manipulateData : function(data) { return data.query.results.item; }}; var store = new qx.data.store.Yql(query, delegate); var list = new qx.ui.form.List(); list.setWidth(250); this.getRoot().add(list); var controller = new qx.data.controller.List(null, list, "title"); store.bind("model", controller, "model");