var page = new qx.ui.mobile.page.NavigationPage(); page.setTitle("Hello World"); page.addListener("initialize", function() { var button = new qx.ui.mobile.form.Button("First Button"); page.getContent().add(button); button.addListener("tap", function() { alert("Hello World"); }, this); },this); this.getManager().addDetail(page); page.show(); var page = new qx.ui.mobile.page.NavigationPage(); page.setTitle("List"); page.addListener("initialize", function() { // List creation var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setImage("qx/icon/Tango/22/apps/internet-mail.png"); item.setTitle(row<4 ? ("Selectable " + data.title) : data.title); item.setSubtitle(data.subTitle); item.setSelectable(row<4); item.setShowArrow(row<4); } }); // Create the data var data = []; for (var i=0; i < 50; i++) { data.push({title:"Item" + i, subTitle:"Subtitle for Item #" + i}); } list.setModel(new qx.data.Array(data)); list.addListener("changeSelection", function(evt) { alert("Item Selected #" + evt.getData()); }, this); page.getContent().add(list); },this); this.getManager().addDetail(page); page.show(); // Page 1 var page1 = new qx.ui.mobile.page.NavigationPage(); page1.setTitle("Page 1"); page1.addListener("initialize", function() { var button = new qx.ui.mobile.form.Button("Next Page"); page1.getContent().add(button); button.addListener("tap", function() { page2.show(); }, this); },this); // Page 2 var page2 = new qx.ui.mobile.page.NavigationPage(); page2.set({ title : "Page 2", showBackButton : true, backButtonText : "Back" }); page2.addListener("initialize", function() { var label = new qx.ui.mobile.basic.Label("Content of Page 2"); page2.getContent().add(label); },this); page2.addListener("back", function() { page1.show({reverse:true}); }, this); this.getManager().addDetail([page1,page2]); page1.show(); var page = new qx.ui.mobile.page.NavigationPage(); page.setTitle("Login"); page.addListener("initialize", function() { var form = new qx.ui.mobile.form.Form(); // User name var user = new qx.ui.mobile.form.TextField(); user.setRequired(true); form.add(user, "Username"); // Password var pwd = new qx.ui.mobile.form.PasswordField(); pwd.setRequired(true); form.add(pwd, "Password"); // Use form renderer page.getContent().add(new qx.ui.mobile.form.renderer.SinglePlaceholder(form)); // login button var button = new qx.ui.mobile.form.Button("Login"); page.getContent().add(button); button.addListener("tap", function() { if (form.validate()) { // use form validation alert("Loggin in " + user.getValue()); } }, this); },this); this.getManager().addDetail(page); page.show(); // Data model 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); // View var page = new qx.ui.mobile.page.NavigationPage(); page.setTitle("qooxdoo news"); page.addListener("initialize", function() { var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setTitle(data.getTitle()); item.setSubtitle(data.getPubDate()); } }); store.bind("model", list, "model"); page.getContent().add(list); },this); this.getManager().addDetail(page); page.show(); // 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 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); /** * 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"); // Data model 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); // View var list = new qx.ui.form.List(); this.getRoot().add(list, {left: 0, right: 0}); var controller = new qx.data.controller.List(null, list, "title"); store.bind("model", controller, "model");