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 Some advanced tests for qx.ui.basic.Image. Click on the fourth and fifth image to test the reflow possibilities.
16 The debug log gives you information of the preferred dimensions.
19 <script type=
"text/javascript">
20 qx
.core
.Init
.getInstance().defineMain(function()
22 var d
= qx
.ui
.core
.ClientDocument
.getInstance();
24 var frame
= new qx
.ui
.layout
.CanvasLayout
;
26 frame
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().ridge
);
27 frame
.setWidth("auto");
28 frame
.setHeight("auto");
37 var out
= new qx
.ui
.layout
.CanvasLayout
;
39 out
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().inset
);
41 out
.setHeight("auto");
48 var bar
= new qx
.ui
.layout
.CanvasLayout
;
50 bar
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().outset
);
52 bar
.setHeight("auto");
54 bar
.setBackgroundColor(new qx
.renderer
.color
.Color("white"));
63 var icons
= [ "reload", "bookmark", "run" ];
66 for (var j
=0; j
<5; j
++)
68 part
= new qx
.ui
.layout
.CanvasLayout
;
70 part
.setWidth("auto");
71 part
.setHeight("auto");
72 part
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().outset
);
75 part
.setBackgroundColor(new qx
.renderer
.color
.ColorObject("Threedface"));
78 for (var i
=0; i
<icons
.length
; i
++)
80 icon
= new qx
.ui
.basic
.Image("icon/22/" + icons
[i
] + ".png");
98 bar
.addEventListener("click", function(e
)
100 var parts
= bar
.getChildren();
103 var s
= (new Date
).valueOf();
105 for (var j
=0; j
<parts
.length
; j
++)
107 icons
= parts
[j
].getChildren();
109 for (var i
=0; i
<icons
.length
; i
++)
111 m
= icons
[i
].getSource().indexOf("/22/") != -1;
112 icons
[i
].setSource(m
? icons
[i
].getSource().replace("/22/", "/32/") : icons
[i
].getSource().replace("/32/", "/22/"));
113 icons
[i
].setLeft(m
? 36 * i
: 26 * i
);
116 parts
[j
].setLeft(m
? j
* 120 : j
* 90);
119 // this.debug("Change Duration: " + ((new Date).valueOf() - s));