source: Dev/branches/rest-dojo-ui/client/dijit/tests/layout/StackContainer.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: 21.8 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>StackContainer Demo</title>
6
7        <style>
8                @import "../../themes/claro/document.css";
9                @import "../css/dijitTests.css";
10                .dijitStackController .dijitToggleButtonChecked button {
11                        background-color: white;
12                        background-image: none;
13                }
14                .dijit_a11y .dijitStackController .dijitToggleButtonChecked button {
15                        border-style: dashed !important;
16                }
17                div.dijitStackContainer {
18                        border: solid 1px black !important;     /* override .dijitStackContainer-child rule for no border */
19                        padding: 3px;
20                }
21        </style>
22
23        <!-- required: the default dijit theme: -->
24        <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
25
26        <!-- required: dojo.js -->
27        <script type="text/javascript" src="../../../dojo/dojo.js"
28                data-dojo-config="isDebug: true, parseOnLoad: false"></script>
29
30        <!-- only needed for alternate theme testing: do NOT use in your code! -->
31        <script type="text/javascript" src="../_testCommon.js"></script>
32        <script type="text/javascript" src="../helpers.js"></script>
33
34        <script type="text/javascript">
35                dojo.require("dijit.dijit"); // optimize: load dijit layer
36                dojo.require("dijit.layout.ContentPane");
37                dojo.require("dijit.layout.StackContainer");
38                dojo.require("dijit.layout.StackController");
39                dojo.require("dijit.layout.BorderContainer");
40                dojo.require("dijit.layout.TabContainer");
41                dojo.require("dijit.form.Button");
42                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
43                dojo.require('doh.runner');
44
45                // Hash listing which objects have gotten a resize event
46                resizes = {};
47
48                dojo.ready(function(){
49                        // track resize events
50                        dojo.connect(dijit.layout._LayoutWidget.prototype, "resize", function(){
51                                resizes[this.id] = arguments;
52                        });
53
54                        function click(/*String*/ id){
55                                // Click dijit widget w/specified id
56                                dijit.byId(id)._onClick({preventDefault: function(){}});
57                        }
58
59                        doh.register("setup", [
60                                function parse(){
61                                        dojo.parser.parse();
62                                },
63                                function programmaticCreation(){
64                                        var container = new dijit.layout.StackContainer({ id: "sc" },"myStackContainer2");
65                                        container.addChild(new dijit.layout.ContentPane({
66                                                        id: "page1Prog",
67                                                        title: "Page 1",
68                                                        content: "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"
69                                        }));
70                                        container.addChild(new dijit.layout.ContentPane({
71                                                        id: "page2Prog",
72                                                        title: "Page 2",
73                                                        content: "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."
74                                        }));
75                                        container.addChild(new dijit.layout.ContentPane({
76                                                        id: "page3Prog",
77                                                        title: "Page 3",
78                                                        content: "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:"
79                                        }));
80
81                                        // make the controller
82                                        var controller = new dijit.layout.StackController({containerId: "sc"}, "holder");
83
84                                        // start 'em up
85                                        controller.startup();
86                                        container.startup();
87                                }
88                        ]);
89
90                        doh.register("basic operation", [
91                                function forward(){
92                                        click("next");
93                                        doh.t(isHidden(dojo.byId("page1")), "page1 hidden");
94                                        doh.t(isVisible(dojo.byId("page2")), "page2 visible");
95                                        doh.t(isHidden(dojo.byId("page3")), "page3 hidden");
96                                },
97                                function previous(){
98                                        click("previous");
99                                        doh.t(dijit.byId("previous").disabled, "disabled");
100                                        doh.t(isVisible(dojo.byId("page1")), "page1 visible");
101                                        doh.t(isHidden(dojo.byId("page2")), "page2 hidden");
102                                        doh.t(isHidden(dojo.byId("page3")), "page3 hidden");
103                                },
104                                function clickPage2(){
105                                        click("dijit_layout_StackController_0_page2");
106                                        doh.t(isHidden(dojo.byId("page1")), "page1 hidden");
107                                        doh.t(isVisible(dojo.byId("page2")), "page2 visible");
108                                        doh.t(isHidden(dojo.byId("page3")), "page3 hidden");
109                                },
110                                function clickTwice(){
111                                        click("dijit_layout_StackController_0_page1");
112                                        click("dijit_layout_StackController_0_page1");
113                                        var button = dijit.byId("dijit_layout_StackController_0_page1");
114                                        doh.t(button.checked, "Page 1 button is still checked");
115                                }
116                        ]);
117
118                        doh.register("nested layout widgets", [
119                                function nestedLayout(){
120                                        click("nextPR");
121                                        var bcPos = dojo.position("bc"),
122                                                tcPos = dojo.position("tc");
123
124                                        doh.t("bc" in resizes, "BorderContainer got resize");
125                                        doh.is(300, bcPos.w, "BorderContainer width");
126                                        doh.is(200, bcPos.h, "BorderContainer height");
127
128                                        doh.t("tc" in resizes, "TabContainer got resize");
129                                        doh.is(300, bcPos.w, "TabContainer width");
130                                        doh.is(200, bcPos.h, "TabContainer height");
131                                }
132                        ]);
133
134                        doh.register("nested stackcontainer w/doLayout=false", [
135                                function resizeCalled(){
136                                        var resizes = dojo.global.resizes;
137                                        doh.t("stack1" in resizes, "stack1 resized");
138                                        doh.t("stack2" in resizes, "stack2 resized");
139                                        doh.t("stack3" in resizes, "stack3 resized");
140                                        doh.t("stack4" in resizes, "stack4 resized");
141                                        doh.t(isVisible(dojo.byId("stack4")), "stack4 visible");
142                                }
143                        ]);
144
145                        doh.register("removeChild", function removeChild(){
146                                var container = new dijit.layout.StackContainer({ id: "sc2" });
147                                container.addChild(new dijit.layout.ContentPane({
148                                                id: "rpage1Prog",
149                                                title: "Page 1",
150                                                content: "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"
151                                }));
152                                container.addChild(new dijit.layout.ContentPane({
153                                                id: "rpage2Prog",
154                                                title: "Page 2",
155                                                content: "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."
156                                }));
157                                var page3;
158                                container.addChild(page3 = new dijit.layout.ContentPane({
159                                                id: "rpage3Prog",
160                                                title: "Page 3",
161                                                content: "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:"
162                                }));
163
164                                container.placeAt(dojo.body());
165                                container.startup();
166                                container.selectChild(page3);
167
168                                var resizes = 0;
169                                dojo.connect(page3, "resize", function(){
170                                        resizes++;
171                                });
172                                container.removeChild(page3);
173                                doh.is(0, resizes, "removing selected child doesn't call resize on it");
174                                doh.is(2, container.getChildren().length, "2 children");
175                        });
176
177                        doh.register("childless startup", function childlessStartup(){
178                                // make and start the container without children
179                                var container = new dijit.layout.StackContainer({ id: "nssc" },"noChildrenStackContainer");
180                                container.startup();
181
182                                // monitor _showChild() calls
183                                var showChildCalls = {};
184                                dojo.connect(container, "_showChild", function(child){
185                                        showChildCalls[child.id] = (showChildCalls[child.id] || 0) + 1;
186                                });
187
188                                // Create and add child
189                                var child1 = new dijit.layout.ContentPane({
190                                        id: "ncsc1",
191                                        title: "Page 1",
192                                        content: "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"
193                                });
194                                var resizes = 0;
195                                dojo.connect(child1, "resize", function(){
196                                        resizes++;
197                                });
198                                container.addChild(child1);
199                                doh.is(1, resizes, "child1 resized when added");
200                                doh.is(1, showChildCalls["ncsc1"], "StackContainer._showChild(child1) called when child added");
201
202                                // Add another child
203                                container.addChild(new dijit.layout.ContentPane({
204                                        id: "ncsc2",
205                                        title: "Page 2",
206                                        content: "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."
207                                }));
208                                doh.f("ncsc2" in showChildCalls, "StackContainer._showChild(child2) not called when child added");
209                                doh.is(1, showChildCalls["ncsc1"], "StackContainer._showChild(child1) not called when second child added");
210
211                                // addChild() unfortunately triggers child1.resize() to be called, in anticipation that the new
212                                // child may have caused the tab labels to overflow to 2 lines, thus reducing content size
213                                // doh.is(1, resizes, "child1 not resized when child2 added");
214                                var resizesBeforeContainerResize = resizes;     // in 1.7 this is 2, in 2.0 will hopefully be 1
215
216                                // Resize the StackContainer.
217                                container.resize();
218                                doh.is(resizesBeforeContainerResize + 1, resizes, "child1 resized once more when StackContainer resized");
219                                doh.is(1, showChildCalls["ncsc1"], "StackContainer._showChild(child1) not called when StackContainer resized");
220                        });
221                        doh.run();
222                });
223
224                function selected(page){
225                        console.debug("page selected " + page.id);
226                        var widget=dijit.byId("myStackContainer");
227                        dijit.byId("previous").set("disabled", page.isFirstChild);
228                        dijit.byId("next").set("disabled", page.isLastChild);
229                        dijit.byId("previous2").set("disabled", page.isFirstChild);
230                        dijit.byId("next2").set("disabled", page.isLastChild);
231                }
232                dojo.subscribe("myStackContainer-selectChild", selected);
233
234        </script>
235</head>
236
237<body class="claro">
238        <h1 class="testTitle">A Tale Of Two Cities</h1>
239
240        <button id="previous" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainer").back() }'>&lt;</button>
241        <span data-dojo-type="dijit.layout.StackController" data-dojo-props='containerId:"myStackContainer"'></span>
242        <button id="next" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainer").forward() }'>&gt;</button>
243
244        <div id="myStackContainer" data-dojo-type="dijit.layout.StackContainer"
245                data-dojo-props='style:"width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"'>
246                <p id="page1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"page 1"'>IT WAS the best of times, it <input value="was the worst" /> of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p>
247                <p id="page2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"page 2"'>There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p>
248                <p id="page3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"page 3"'>It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p>
249        </div>
250
251        <button id="previous2" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainer").back() }'>&lt;</button>
252        <span data-dojo-type="dijit.layout.StackController" data-dojo-props='containerId:"myStackContainer"'></span>
253        <button id="next2" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainer").forward() }'>&gt;</button>
254
255
256        <h1 class="testTitle" style="margin-top: 3em;">Embedded layout widgets</h1>
257        <p>This tests having layout widgets embedded in the StackContainer, making sure they render on the hidden pane.</p>
258
259        <button id="previousPR" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainerPR").back() }'>&lt;</button>
260        <span data-dojo-type="dijit.layout.StackController" data-dojo-props='containerId:"myStackContainerPR"'></span>
261        <button id="nextPR" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainerPR").forward() }'>&gt;</button>
262
263        <div id="myStackContainerPR" data-dojo-type="dijit.layout.StackContainer"
264                data-dojo-props='style:"width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"'>
265                <div id="page1PR" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"page 1"'>
266                        <p>
267                                The next pane should have some text, plus two embedded layout widgets, which should
268                                appear correctly even though the pane is initially hidden
269                        </p>
270                </div>
271                <div id="page2PR" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"page 2", style:"padding: 1em;"'>
272                        <p>
273                                Here's a BorderContainer:
274                        </p>
275                        <div id="bc" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='style:"height:200px; width:300px"'>
276                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"left", style:"width:100px", splitter:true'>
277                                        1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
278                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
279                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
280                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
281                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
282                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
283                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
284                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
285                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
286                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
287                                        consequat quis, varius interdum, nulla. Donec neque tortor,
288                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
289                                        ut eros sit amet ante pharetra interdum.
290                                </div>
291                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"'>
292                                        2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
293                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
294                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
295                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
296                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
297                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
298                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
299                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
300                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
301                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
302                                        consequat quis, varius interdum, nulla. Donec neque tortor,
303                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
304                                        ut eros sit amet ante pharetra interdum.
305                                </div>
306                        </div>
307                        <p>
308                                And a TabContainer:
309                        </p>
310                        <div id="tc" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"height:200px; width:300px"'>
311                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 1"'>
312                                        1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
313                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
314                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
315                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
316                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
317                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
318                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
319                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
320                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
321                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
322                                        consequat quis, varius interdum, nulla. Donec neque tortor,
323                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
324                                        ut eros sit amet ante pharetra interdum.
325                                </div>
326                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 2"'>
327                                        2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
328                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
329                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
330                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
331                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
332                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
333                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
334                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
335                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
336                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
337                                        consequat quis, varius interdum, nulla. Donec neque tortor,
338                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
339                                        ut eros sit amet ante pharetra interdum.
340                                </div>
341                        </div>
342                        <p>
343                                That's it!
344                        </p>
345                </div>
346        </div>
347        <button id="previous2PR" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainerPR").back() }'>&lt;</button>
348        <span data-dojo-type="dijit.layout.StackController" data-dojo-props='containerId:"myStackContainerPR"'></span>
349        <button id="next2PR" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainerPR").forward() }'>&gt;</button>
350
351        <h1>Nested StackContainers w/doLayout=false</h1>
352        <p>"hello world" inner text should be visible</p>
353    <div id="stack1" dojoType="dijit.layout.StackContainer" doLayout="false">
354        <div id="stack2" dojoType="dijit.layout.StackContainer" doLayout="false">
355            <div id="stack3" dojoType="dijit.layout.StackContainer" doLayout="false">
356                <div id="stack4" dojoType="dijit.layout.StackContainer" doLayout="false">
357                    hello world
358                </div>
359            </div>
360        </div>
361    </div>
362
363
364        <h1>Programmatic test</h1>
365
366        Links: <span id="holder"></span>
367
368        <div id="myStackContainer2" style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;">
369        </div>
370
371        <div id="noChildrenStackContainer" style="width: 90%; border: 1px solid #9b9b9b; height: 20em;"></div>
372</body>
373</html>
Note: See TracBrowser for help on using the repository browser.