swat/apps/qooxdoo-examples/test/Fields_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Test the setting of background color of form fields.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   function changeBackgrounds(parent, color)
  20   {
  21     var children = parent.getChildren();
  22     var child;
  23
  24     for (var i=0; i<children.length; i++)
  25     {
  26       child = children[i];
  27
  28       switch(child.classname)
  29       {
  30         case 'qx.ui.form.TextArea':
  31         case 'qx.ui.form.TextField':
  32         case 'qx.ui.form.ComboBox':
  33         case 'qx.ui.form.PasswordField':
  34           child.setBackgroundColor(color);
  35           break;
  36       };
  37     };
  38   };
  39
  40   qx.core.Init.getInstance().defineMain(function()
  41   {
  42     var d = qx.ui.core.ClientDocument.getInstance();
  43
  44     function textChange(e) {
  45       this.debug("Text changed: " + e.getData());
  46     }
  47
  48     var t1 = new qx.ui.form.TextField;
  49     t1.setValue("textfield");
  50     t1.setTop(48);
  51     t1.setLeft(20);
  52
  53     t1.addEventListener("changeText", textChange);
  54     t1.addEventListener("input", function(e) {
  55       this.debug("Input: " + e.getData());
  56     });
  57
  58     d.add(t1);
  59
  60
  61
  62
  63     var t2 = new qx.ui.form.PasswordField;
  64     t2.setValue("passwordfield");
  65     t2.setTop(80);
  66     t2.setLeft(20);
  67
  68     t2.addEventListener("changeText", textChange);
  69
  70     d.add(t2);
  71
  72
  73     var t3 = new qx.ui.form.TextArea;
  74     t3.setValue("textarea");
  75     t3.setTop(110);
  76     t3.setLeft(20);
  77     t3.setWidth(300);
  78     t3.setHeight(60);
  79
  80     t3.addEventListener("changeText", textChange);
  81
  82     d.add(t3);
  83
  84
  85     var t4 = new qx.ui.form.TextField;
  86     t4.setValue("textfield");
  87     t4.setTop(200);
  88     t4.setLeft(20);
  89     t4.setWidth(200);
  90     t4.setMaxLength(100);
  91     t4.setReadOnly(true);
  92
  93     t4.addEventListener("changeText", textChange);
  94
  95     d.add(t4);
  96
  97
  98     var t5 = new qx.ui.form.TextField;
  99     t5.setValue("You are foo!");
 100     t5.setTop(240);
 101     t5.setLeft(20);
 102
 103     t5.addEventListener("changeText", textChange);
 104
 105     d.add(t5);
 106
 107     var c1 = new qx.ui.form.ComboBox;
 108     c1.setTop(280);
 109     c1.setLeft(20);
 110
 111     c1.addEventListener("beforeInitialOpen", function(e)
 112     {
 113       var item;
 114
 115       for(var i=1; i<=30; i++)
 116       {
 117         item = new qx.ui.form.ListItem("Item No " + i);
 118         !(i % 10) && (item.setEnabled(false));
 119         c1.add(item);
 120       };
 121     });
 122
 123     // this does not work here (if there is no content)
 124     c1.setSelected(c1.getList().getFirstChild());
 125
 126     c1.addEventListener("changeValue", function(e) {
 127       this.debug("New value: " + e.getData());
 128     });
 129
 130     c1.addEventListener("changeSelected", function(e) {
 131       this.debug("New selected: " + e.getData());
 132     });
 133
 134
 135
 136
 137     var b1 = new qx.ui.form.CheckBox("Editable");
 138
 139     b1.set({ top: 282, left: 150 });
 140
 141     b1.addEventListener("changeChecked", function(e) {
 142       c1.setEditable(e.getData());
 143     });
 144
 145
 146     var b2 = new qx.ui.form.Button("red", "icon/16/colors.png");   b2.set({left:10,top:10});
 147     var b3 = new qx.ui.form.Button("green", "icon/16/colors.png"); b3.set({left:10,top:40});
 148     var b4 = new qx.ui.form.Button("white", "icon/16/colors.png"); b4.set({left:10,top:70});
 149
 150     b2.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
 151     b3.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
 152     b4.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
 153
 154     var fs = new qx.ui.groupbox.GroupBox("BackgroundColor");
 155     fs.set({left:400,top:50,width:150,height:"auto"});
 156     fs.add(b2,b3,b4);
 157
 158
 159
 160       d.add(c1, b1, fs);
 161
 162
 163
 164
 165
 166
 167
 168
 169     // Color Themes
 170     qx.manager.object.ColorManager.getInstance().createThemeList(d, 20, 320);
 171
 172
 173
 174
 175
 176   });
 177   </script>
 178 </body>
 179 </html>