webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Label_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     Some tests for qx.ui.basic.Label. Click on the third and fifth button like widget to test the reflow possibilities.
  16     The debug log gives you information of the preferred dimensions.
  17   </div>
  18
  19   <script type="text/javascript">
  20   qx.core.Init.getInstance().defineMain(function()
  21   {
  22     var d = qx.ui.core.ClientDocument.getInstance();
  23
  24     var c1 = new qx.ui.basic.Label("Hello qooxdoo!");
  25
  26     c1.setLeft(20);
  27     c1.setTop(48);
  28     c1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  29     c1.setPadding(2, 4);
  30
  31
  32
  33
  34     var c2 = new qx.ui.basic.Label("<h1>Welcome to the qooxdoo universe</h1><p>Enjoy the new era of web interface development.</p>");
  35
  36     c2.setLeft(20);
  37     c2.setTop(100);
  38     c2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  39     c2.setPadding(8);
  40
  41
  42
  43
  44     var c3 = new qx.ui.basic.Label("Delete temporary data", null, null, false);
  45
  46     c3.setLeft(20);
  47     c3.setTop(200);
  48     c3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  49     c3.setPadding(4, 6);
  50     c3.setBackgroundColor(new qx.renderer.color.Color("white"));
  51
  52     c3.addEventListener("click", function() {
  53       this.getHtml() == "Delete temporary data" ? this.setHtml("Thank you") : this.setHtml("Delete temporary data");
  54     });
  55
  56
  57
  58
  59     var c4 = new qx.ui.basic.Label("Hello qooxdoo!");
  60
  61     c4.setLeft(20);
  62     c4.setTop(250);
  63     c4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  64     c4.setPadding(2, 4);
  65     c4.setStyleProperty("fontSize", "16px");
  66     c4.setStyleProperty("fontWeight", "bold");
  67     c4.setStyleProperty("fontStyle", "italic");
  68     c4.setStyleProperty("textDecoration", "underline");
  69     c4.setStyleProperty("textTransform", "uppercase");
  70     c4.setFontPropertiesProfile("extended");
  71
  72
  73
  74
  75
  76     var c5 = new qx.ui.basic.Label("Delete temporary data", null, null, false);
  77
  78     c5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  79     c5.setPadding(4, 6);
  80     c5.setBackgroundColor(new qx.renderer.color.Color("white"));
  81
  82     c5.addEventListener("click", function() {
  83       this.getHtml() == "Delete temporary data" ? this.setHtml("Thank you<br/>All your personal data was just deleted.<br/>Have Fun!") : this.setHtml("Delete temporary data");
  84     });
  85
  86
  87     var c5w = new qx.ui.layout.CanvasLayout;
  88     c5w.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  89     c5w.setPadding(8);
  90     c5w.setLeft(20);
  91     c5w.setTop(350);
  92     c5w.setWidth("auto");
  93     c5w.setHeight("auto");
  94
  95     c5w.add(c5);
  96     d.add(c5w);
  97
  98
  99
 100
 101     var c6 = new qx.ui.basic.Label("This is a long label", 50);
 102
 103     c6.setTop(450);
 104     c6.setLeft(20);
 105     c6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 106
 107
 108     var c7 = new qx.ui.basic.Label("This is a long label with long-words and more text", 100, null, false);
 109
 110     c7.setTop(490);
 111     c7.setLeft(20);
 112     c7.setPadding(4);
 113     c7.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 114     c7.setBackgroundColor("white");
 115
 116     c7.addEventListener("click", function(e)
 117     {
 118       switch(this.getWidth())
 119       {
 120         case 50:
 121           this.setWidth(100);
 122           break;
 123
 124         case 100:
 125           this.setWidth(150);
 126           break;
 127
 128         case 150:
 129           this.setWidth(200);
 130           break;
 131
 132         case 200:
 133           this.setWidth("auto");
 134           break;
 135
 136         case "auto":
 137           this.setWidth(50);
 138           break;
 139       };
 140     });
 141
 142
 143     var parent8 = new qx.ui.layout.VerticalBoxLayout();
 144     parent8.set({ top:48, left:500, width:150, height:150, spacing:5,
 145         border:qx.renderer.border.BorderPresets.getInstance().thinInset });
 146     parent8.setPadding(5);
 147     parent8.addEventListener("click", function() {
 148       this.setWidth((this.getWidth() == 150) ? 200 : 150);
 149     });
 150
 151     var clickHint = new qx.ui.basic.Label("Click me");
 152     clickHint.set({ width:"100%", height:"auto", wrap:true,
 153         border:qx.renderer.border.BorderPresets.getInstance().thinOutset });
 154     parent8.add(clickHint);
 155
 156     var wrapLabel1 = new qx.ui.basic.Label("This is a label having a auto-height that needs wrapping");
 157     wrapLabel1.set({ width:"100%", height:"auto", wrap:true,
 158         border:qx.renderer.border.BorderPresets.getInstance().thinOutset });
 159     parent8.add(wrapLabel1);
 160
 161     var wrapLabel2 = new qx.ui.basic.Label("This is a label having a auto-height that needs wrapping");
 162     wrapLabel2.set({ width:"100%", height:"auto", wrap:true,
 163         border:qx.renderer.border.BorderPresets.getInstance().thinOutset });
 164     parent8.add(wrapLabel2);
 165
 166
 167     d.add(c1, c2, c3, c4, c5w, c6, c7, parent8);
 168
 169   });
 170   </script>
 171 </body>
 172 </html>