3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
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>
20 <script type="text/javascript">
21 qx.core.Init.getInstance().defineMain(function()
23 var d = qx.ui.core.ClientDocument.getInstance();
25 var c1 = new qx.ui.basic.Label("Hello qooxdoo!");
29 c1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
32 c1.addEventListener("mouseover", function(e) {
33 this.setFont("20px bold");
36 c1.addEventListener("mouseout", function(e) {
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>");
46 c2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
52 var c3 = new qx.ui.basic.Label("Delete temporary data", null, null, false);
56 c3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
58 c3.setBackgroundColor(new qx.renderer.color.Color("white"));
60 c3.addEventListener("click", function()
62 if (this.getHtml() == "Delete temporary data")
64 this.setHtml("Thank you");
70 this.setHtml("Delete temporary data");
80 var c4f = new qx.renderer.font.Font(16, "Times New Roman");
83 c4f.setUnderline(true);
86 var c4 = new qx.ui.basic.Label("Hello qooxdoo!");
90 c4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
94 // implicit usage of qx.renderer.font.FontCache
95 c4.setFont("16px Times New Roman bold italic underline");
101 var c5 = new qx.ui.basic.Label("Delete temporary data", null, null, false);
103 c5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
105 c5.setBackgroundColor(new qx.renderer.color.Color("white"));
107 // re-use instance from above
108 // c5.setFont("16px Times New Roman bold italic underline");
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"]);
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");
118 var c5w = new qx.ui.layout.CanvasLayout;
119 c5w.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
123 c5w.setWidth("auto");
124 c5w.setHeight("auto");
132 var c6 = new qx.ui.basic.Label("This is a long label", 50);
136 c6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
139 var c7 = new qx.ui.basic.Label("This is a long label with long-words and more text", 100, null, false);
144 c7.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
145 c7.setBackgroundColor("white");
147 c7.addEventListener("click", function(e)
149 switch(this.getWidth())
164 this.setWidth("auto");
173 d.add(c1, c2, c3, c4, c5w, c6, c7);