@qooxdoo/framework
Version:
The JS Framework for Coders
509 lines (388 loc) • 14 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>qooxdoo » Playground</title>
<style type="text/css">
.qx_samples { display:none }
.vbox {
/* Solves Firefox bug on playground.*/
height:100%;
}
</style>
<script type="text/javascript" src="boot.js"></script>
</head>
<body>
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 15px; text-align: center;">
<img src="loading.gif">
</div>
</div>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Hello World-mobile">
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();</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="List-mobile">
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();</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Pages-mobile">// 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();</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Form-mobile">
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.Single(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();</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="YQL Binding-mobile">
// 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();</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Hello World-ria">// 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!");
});</textarea>
<!-- ********************************************************************** -->
<div id="compare_div1" style="visibility: hidden;"></div>
<div id="compare_div2" style="visibility: hidden;"></div>
<textarea class="qx_samples" title="Window-ria">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();</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Dialog-ria">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);</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Calculator-ria">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);</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Table-ria">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"));</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Tree-ria">// 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);</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="Data Binding-ria">/**
* 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");</textarea>
<!-- ********************************************************************** -->
<textarea class="qx_samples" title="YQL Binding-ria">// 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");</textarea>
</body>
</html>