swat/apps/qooxdoo-examples/test/Label_3.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>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.</p>
  17     <p>Tests for qx.renderer.font.Font added</p>
  18   </div>
  19
  20   <script type="text/javascript">
  21   qx.core.Init.getInstance().defineMain(function()
  22   {
  23     var d = qx.ui.core.ClientDocument.getInstance();
  24
  25     var c1 = new qx.ui.basic.Label("Hello qooxdoo!");
  26
  27     c1.setLeft(20);
  28     c1.setTop(48);
  29     c1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  30     c1.setPadding(2, 4);
  31
  32     c1.addEventListener("mouseover", function(e) {
  33       this.setFont("20px bold");
  34     });
  35
  36     c1.addEventListener("mouseout", function(e) {
  37       this.setFont(null);
  38     });
  39
  40
  41
  42     var c2 = new qx.ui.basic.Label("<h1>Welcome to the qooxdoo universe</h1><p>Enjoy the new era of web interface development.</p>");
  43
  44     c2.setLeft(20);
  45     c2.setTop(100);
  46     c2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  47     c2.setPadding(8);
  48
  49
  50
  51
  52     var c3 = new qx.ui.basic.Label("Delete temporary data", null, null, false);
  53
  54     c3.setLeft(20);
  55     c3.setTop(200);
  56     c3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  57     c3.setPadding(4, 6);
  58     c3.setBackgroundColor(new qx.renderer.color.Color("white"));
  59
  60     c3.addEventListener("click", function()
  61     {
  62       if (this.getHtml() == "Delete temporary data")
  63       {
  64         this.setHtml("Thank you");
  65         this.setColor("red");
  66         this.setFont("bold");
  67       }
  68       else
  69       {
  70         this.setHtml("Delete temporary data");
  71         this.setColor(null);
  72         this.setFont(null);
  73       };
  74     });
  75
  76
  77
  78
  79     /*
  80     var c4f = new qx.renderer.font.Font(16, "Times New Roman");
  81     c4f.setBold(true);
  82     c4f.setItalic(true);
  83     c4f.setUnderline(true);
  84     */
  85
  86     var c4 = new qx.ui.basic.Label("Hello qooxdoo!");
  87
  88     c4.setLeft(20);
  89     c4.setTop(250);
  90     c4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  91     c4.setPadding(2, 4);
  92     // c4.setFont(c4f);
  93
  94     // implicit usage of qx.renderer.font.FontCache
  95     c4.setFont("16px Times New Roman bold italic underline");
  96
  97
  98
  99
 100
 101     var c5 = new qx.ui.basic.Label("Delete temporary data", null, null, false);
 102
 103     c5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 104     c5.setPadding(4, 6);
 105     c5.setBackgroundColor(new qx.renderer.color.Color("white"));
 106
 107     // re-use instance from above
 108     // c5.setFont("16px Times New Roman bold italic underline");
 109
 110     // this is also possible and will be automatically converted to a single space seperated string
 111     c5.setFont(["16px", "Times New Roman", "bold", "italic", "underline"]);
 112
 113     c5.addEventListener("click", function() {
 114       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");
 115     });
 116
 117
 118     var c5w = new qx.ui.layout.CanvasLayout;
 119     c5w.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 120     c5w.setPadding(8);
 121     c5w.setLeft(20);
 122     c5w.setTop(350);
 123     c5w.setWidth("auto");
 124     c5w.setHeight("auto");
 125
 126     c5w.add(c5);
 127     d.add(c5w);
 128
 129
 130
 131
 132     var c6 = new qx.ui.basic.Label("This is a long label", 50);
 133
 134     c6.setTop(450);
 135     c6.setLeft(20);
 136     c6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 137
 138
 139     var c7 = new qx.ui.basic.Label("This is a long label with long-words and more text", 100, null, false);
 140
 141     c7.setTop(490);
 142     c7.setLeft(20);
 143     c7.setPadding(4);
 144     c7.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 145     c7.setBackgroundColor("white");
 146
 147     c7.addEventListener("click", function(e)
 148     {
 149       switch(this.getWidth())
 150       {
 151         case 50:
 152           this.setWidth(100);
 153           break;
 154
 155         case 100:
 156           this.setWidth(150);
 157           break;
 158
 159         case 150:
 160           this.setWidth(200);
 161           break;
 162
 163         case 200:
 164           this.setWidth("auto");
 165           break;
 166
 167         case "auto":
 168           this.setWidth(50);
 169           break;
 170       };
 171     });
 172
 173     d.add(c1, c2, c3, c4, c5w, c6, c7);
 174   });
 175   </script>
 176 </body>
 177 </html>