<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>Test the setting of background color of form fields.</p>
</div>
<script type="text/javascript">
function changeBackgrounds(parent, color)
{
var children = parent.getChildren();
var child;
for (var i=0; i<children.length; i++)
{
child = children[i];
switch(child.classname)
{
case 'qx.ui.form.TextArea':
case 'qx.ui.form.TextField':
case 'qx.ui.form.ComboBox':
case 'qx.ui.form.PasswordField':
child.setBackgroundColor(color);
break;
};
};
};
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
function textChange(e) {
this.debug("Text changed: " + e.getData());
}
var t1 = new qx.ui.form.TextField;
t1.setValue("textfield");
t1.setTop(48);
t1.setLeft(20);
t1.addEventListener("changeText", textChange);
t1.addEventListener("input", function(e) {
this.debug("Input: " + e.getData());
});
d.add(t1);
var t2 = new qx.ui.form.PasswordField;
t2.setValue("passwordfield");
t2.setTop(80);
t2.setLeft(20);
t2.addEventListener("changeText", textChange);
d.add(t2);
var t3 = new qx.ui.form.TextArea;
t3.setValue("textarea");
t3.setTop(110);
t3.setLeft(20);
t3.setWidth(300);
t3.setHeight(60);
t3.addEventListener("changeText", textChange);
d.add(t3);
var t4 = new qx.ui.form.TextField;
t4.setValue("textfield");
t4.setTop(200);
t4.setLeft(20);
t4.setWidth(200);
t4.setMaxLength(100);
t4.setReadOnly(true);
t4.addEventListener("changeText", textChange);
d.add(t4);
var t5 = new qx.ui.form.TextField;
t5.setValue("You are foo!");
t5.setTop(240);
t5.setLeft(20);
t5.addEventListener("changeText", textChange);
d.add(t5);
var c1 = new qx.ui.form.ComboBox;
c1.setTop(280);
c1.setLeft(20);
c1.addEventListener("beforeInitialOpen", function(e)
{
var item;
for(var i=1; i<=30; i++)
{
item = new qx.ui.form.ListItem("Item No " + i);
!(i % 10) && (item.setEnabled(false));
c1.add(item);
};
});
// this does not work here (if there is no content)
c1.setSelected(c1.getList().getFirstChild());
c1.addEventListener("changeValue", function(e) {
this.debug("New value: " + e.getData());
});
c1.addEventListener("changeSelected", function(e) {
this.debug("New selected: " + e.getData());
});
var b1 = new qx.ui.form.CheckBox("Editable");
b1.set({ top: 282, left: 150 });
b1.addEventListener("changeChecked", function(e) {
c1.setEditable(e.getData());
});
var b2 = new qx.ui.form.Button("red", "icon/16/colors.png"); b2.set({left:10,top:10});
var b3 = new qx.ui.form.Button("green", "icon/16/colors.png"); b3.set({left:10,top:40});
var b4 = new qx.ui.form.Button("white", "icon/16/colors.png"); b4.set({left:10,top:70});
b2.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
b3.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
b4.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
var fs = new qx.ui.groupbox.GroupBox("BackgroundColor");
fs.set({left:400,top:50,width:150,height:"auto"});
fs.add(b2,b3,b4);
d.add(c1, b1, fs);
// Color Themes
qx.manager.object.ColorManager.getInstance().createThemeList(d, 20, 320);
});
</script>
</body>
</html>