source: Dev/branches/rest-dojo-ui/client/dijit/tests/layout/LayoutContainer.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 12.2 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>dijit.layout.LayoutContainer Test</title>
5
6        <style type="text/css">
7                @import "../../themes/claro/document.css";
8                @import "../../themes/claro/claro.css";
9        </style>
10
11        <!-- required: the default dijit theme: -->
12        <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
13
14        <!-- required: dojo.js -->
15        <script type="text/javascript" src="../../../dojo/dojo.js"
16                djConfig="isDebug: true"></script>
17
18        <!-- only needed for alternate theme testing: do NOT use in your code! -->
19        <script type="text/javascript" src="../_testCommon.js"></script>
20
21        <script type="text/javascript" src="../helpers.js"></script>
22
23        <script type="text/javascript">
24                dojo.require("doh.runner");
25                dojo.require("dijit.dijit"); // optimize: load dijit layer
26                dojo.require("dijit.layout.LayoutContainer");
27                dojo.require("dijit.layout.ContentPane");
28                dojo.require("dijit.form.FilteringSelect");
29                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
30               
31                function checkInside(/*Widget*/ child, /*Widget*/ parent){
32                        // summary:
33                        //              Test that child is fully inside of parent
34                        var cp = dojo.position(child.domNode, true),
35                                pp = dojo.position(parent.domNode, true);
36
37                        doh.t(
38                                cp.y > pp.y && cp.y+cp.h < pp.y+pp.h &&
39                                cp.x > pp.x && cp.x+cp.w < pp.x+pp.w,
40                                child.layoutAlign + " inside " + parent.id + dojo.toJson(cp) + dojo.toJson(pp)
41                        );
42                }
43                function checkAbove(/*String*/ comment, /*Widget*/ above, /*Widget*/ below){
44                        // summary:
45                        //              Test that child is fully inside of parent
46
47                        var ap = dojo.position(above.domNode, true),
48                                bp = dojo.position(below.domNode, true);
49
50                        doh.t(ap.y+ap.h <= bp.y,
51                                comment + " " + above.layoutAlign + " above " + below.layoutAlign + dojo.toJson(ap) + dojo.toJson(bp)
52                        );
53                }
54                function checkLeft(/*String*/ comment, /*Widget*/ left, /*Widget*/ right){
55                        // summary:
56                        //              Test that child is fully inside of parent
57
58                        var lp = dojo.position(left.domNode, true),
59                                rp = dojo.position(right.domNode, true);
60
61                        doh.t(lp.x+lp.w <= rp.x,
62                                comment + " " + left.layoutAlign + " to left of " + right.layoutAlign + dojo.toJson(lp) + dojo.toJson(rp)
63                        );
64                }
65
66                dojo.ready(function(){
67                        doh.register("parse", function(){
68                                dojo.parser.parse();
69                        });
70
71                        doh.register("LayoutContainer", [
72                                function basic(){
73                                        var lc = dijit.byId("basic");
74                                        dojo.forEach(lc.getChildren(), function(child){
75                                                checkInside(child, lc);
76                                        });
77
78                                        var left = dijit.byId("leftcp_layout1"),
79                                                top = dijit.byId("topcp_layout1"),
80                                                right = dijit.byId("rightcp_layout1"),
81                                                center = dijit.byId("centercp_layout1"),
82                                                bottom = dijit.byId("bottomcp_layout1");
83
84                                        // Check positions
85                                        checkLeft("left vs top", left, top);
86                                        checkLeft("left vs center", left, center);
87                                        checkLeft("bottom vs right", bottom, right);
88                                        checkAbove("top vs center", top, center);
89                                        checkAbove("center vs bottom", center, bottom);
90
91                                        // Check tab order
92                                        var tabbable = tabOrder(lc.domNode);
93                                        doh.is(7, tabbable.length, "each pane plus link and select");
94                                        doh.is(left.id, tabbable[0].id, "left");
95                                        doh.is(right.id, tabbable[1].id, "right");
96                                        doh.is(top.id, tabbable[2].id, "top");
97                                        doh.is(center.id, tabbable[3].id, "center");
98                                        doh.is(bottom.id, tabbable[6].id, "bottom");
99                                },
100
101                                function advanced(){
102                                        var lc = dijit.byId("advanced");
103                                        dojo.forEach(lc.getChildren(), function(child){
104                                                checkInside(child, lc);
105                                        });
106
107                                        var left = dijit.byId("leftcp_layout2"),
108                                                top = dijit.byId("topcp_layout2"),
109                                                right = dijit.byId("rightcp_layout2"),
110                                                centerLeft = dijit.byId("centerLeftcp_layout2"),
111                                                center = dijit.byId("centercp_layout2"),
112                                                centerRight = dijit.byId("centerRightcp_layout2"),
113                                                bottom = dijit.byId("bottomcp_layout2");
114
115                                        // Check positions
116                                        checkLeft("left vs top", left, top);
117                                        checkLeft("left vs centerLeft", left, centerLeft);
118                                        checkLeft("centerLeft vs center", centerLeft, center);
119                                        checkLeft("center vs centerRight", center, centerRight);
120                                        checkAbove("top vs center", top, center);
121                                        checkAbove("top vs inner right", top, centerRight);
122                                        checkAbove("centerLeft vs bottom", centerLeft, bottom);
123
124                                        // Check tab order
125                                        var tabbable = tabOrder(lc.domNode);
126                                        doh.is(8, tabbable.length, "each pane plus link and select");
127                                        doh.is(left.id, tabbable[0].id, "left");
128                                        doh.is(top.id, tabbable[1].id, "top");
129                                        doh.is(bottom.id, tabbable[2].id, "bottom");
130                                        doh.is(centerLeft.id, tabbable[3].id, "center left");
131                                        doh.is(center.id, tabbable[4].id, "center");
132                                        doh.is(centerRight.id, tabbable[7].id, "center right");
133                                }
134                        ]);
135                       
136                        doh.run();
137                });
138        </script>
139
140</head>
141<body class="claro">
142        <h2 id="heading" >Dijit layout.LayoutContainer tests</h2>
143
144        <p>Basic layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
145        should be:  left, right, top, middle/main, bottom</p>
146
147        <div id="basic" dojoType="dijit.layout.LayoutContainer"
148                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
149        >
150                <div dojoType="dijit.layout.ContentPane" id="leftcp_layout1" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0">
151                        left
152                </div>
153                <div dojoType="dijit.layout.ContentPane" id="rightcp_layout1" layoutAlign="right" style="background-color: #acb386;"  tabindex="0">
154                        right
155                </div>
156                <div dojoType="dijit.layout.ContentPane" id="topcp_layout1" layoutAlign="top" style="background-color: #b39b86; "  tabindex="0">
157                        top bar
158                </div>
159                <div dojoType="dijit.layout.ContentPane" id="centercp_layout1" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;"  tabindex="0">
160                        main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
161                        (to check we're copying children around properly).<br />
162                        <select dojoType="dijit.form.FilteringSelect">
163                                <option value="1">foo</option>
164                                <option value="2">bar</option>
165                                <option value="3">baz</option>
166                        </select>
167                        Here's some text that comes AFTER the combo box.
168                </div>
169
170                <div dojoType="dijit.layout.ContentPane" id="bottomcp_layout1" layoutAlign="bottom" style="background-color: #b39b86;"  tabindex="0">
171                        bottom bar
172                </div>
173
174        </div>
175
176        <p>Advanced layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
177        should be:  left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested
178        layout containers to achieve a tab order which matches presentation and source code order.</p>
179        <div id="advanced" dojoType="dijit.layout.LayoutContainer"
180                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
181        >
182                <div dojoType="dijit.layout.ContentPane" id="leftcp_layout2" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
183                        left
184                </div>
185                <div dojoType="dijit.layout.ContentPane" id="topcp_layout2" layoutAlign="top" style="background-color: #b39b86;  margin: 5px;" tabindex="0">
186                        top bar
187                </div>
188                <div dojoType="dijit.layout.ContentPane" id="bottomcp_layout2" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0">
189
190                        bottom bar
191                </div>
192                <div dojoType="dijit.layout.ContentPane" id="centerLeftcp_layout2" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
193                        inner left
194                </div>
195
196                <div dojoType="dijit.layout.ContentPane" id="centercp_layout2" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
197                        main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
198
199                        (to check we're copying children around properly).<br />
200                        <select dojoType="dijit.form.FilteringSelect">
201                                <option value="1">foo</option>
202                                <option value="2">bar</option>
203                                <option value="3">baz</option>
204                        </select>
205                        Here's some text that comes AFTER the combo box.
206                </div>
207                <div dojoType="dijit.layout.ContentPane" id="centerRightcp_layout2" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
208                        inner right
209                </div>
210        </div>
211
212        <p>Advanced layout with nested containers.  Tabindex=&quot;0&quot; added to content panes to show tab order. Order should be:
213        left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p>
214        <div dojoType="dijit.layout.LayoutContainer"
215                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
216        >
217                <div dojoType="dijit.layout.ContentPane" id="leftcp_layout3" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
218                        left
219                </div>
220                <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" >
221                        <div dojoType="dijit.layout.LayoutContainer"    style="height:90%;border: 2px solid black;padding: 10px;">
222
223                                <div dojoType="dijit.layout.ContentPane" id="topcp_layout3" layoutAlign="top" style="background-color: #b39b86;  margin: 5px;" tabindex="0">
224                                        top bar
225                                </div>
226                                <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;">
227                                        <div dojoType="dijit.layout.LayoutContainer"    style="height:80%;border: 2px solid black;padding: 10px;">
228                                                <div dojoType="dijit.layout.ContentPane" id="centerLeftcp_layout3" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
229                                                        inner left
230                                                </div>
231                                                <div dojoType="dijit.layout.ContentPane" id="centercp_layout3" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
232                                                        main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
233                                                        (to check we're copying children around properly).<br />
234                                                        <select dojoType="dijit.form.FilteringSelect">
235                                                                <option value="1">foo</option>
236                                                                <option value="2">bar</option>
237                                                                <option value="3">baz</option>
238                                                        </select>
239                                                        Here's some text that comes AFTER the combo box.
240                                                </div>
241                                                <div dojoType="dijit.layout.ContentPane" id="centerRightcp_layout3" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
242                                                        inner right
243                                                </div>
244                                        </div>
245                                </div>
246                                <div dojoType="dijit.layout.ContentPane" id="bottomcp_layout3" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0"        >
247                                        bottom bar
248                                </div>
249                        </div>
250                </div>
251        </div>
252
253        <p>Goofy spiral layout.  Match of source code order to tab order can not be achieved with this type of layout.</p>
254        <div dojoType="dijit.layout.LayoutContainer"
255                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
256        >
257                <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;">
258                        outer left
259                </div>
260                <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;">
261                        outer top
262                </div>
263                <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;">
264                        outer right
265                </div>
266                <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;">
267                        outer bottom
268                </div>
269                <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;">
270                        inner left
271                </div>
272                <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;">
273                        inner top
274                </div>
275                <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;">
276                        inner right
277                </div>
278                <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;">
279                        inner bottom
280                </div>
281                <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding: 10px;">
282                        main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
283                        (to check we're copying children around properly).<br />
284                        <select dojoType="dijit.form.FilteringSelect">
285                                <option value="1">foo</option>
286                                <option value="2">bar</option>
287                                <option value="3">baz</option>
288                        </select>
289                        Here's some text that comes AFTER the combo box.
290                </div>
291        </div>
292
293</body>
294</html>
Note: See TracBrowser for help on using the repository browser.