qooxdoo » Playground

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]
];

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"));

/**
 * 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("value", label, "value");

/**
 * Bind together two sliders and a progress bar
 */
var slider1 = new qx.ui.form.Slider("horizontal");
slider1.setWidth(300);
this.getRoot().add(slider1, {left: 10, top: 70});
var slider2 = new qx.ui.form.Slider("horizontal");
slider2.setWidth(200);
this.getRoot().add(slider2, {left: 10, top: 100});

var progressbar = new qx.ui.indicator.ProgressBar();
this.getRoot().add(progressbar, {left: 10, top: 140});

// set up a bidirectional single value binding between sliders
slider1.bind("value", slider2, "value");
slider2.bind("value", slider1, "value");

// set up an unidirectional single value binding towards progress bar
slider1.bind("value", progressbar, "value");