source: Dev/branches/rest-dojo-ui/client/dijit/tests/_TemplatedMixin.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: 8.0 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5                <title>_Templated tests</title>
6                <script type="text/javascript" src="../../dojo/dojo.js"
7                        data-dojo-config="isDebug: true"></script>
8                <script type="text/javascript">
9                        dojo.require("doh.runner");
10
11                        dojo.require("dojo.parser");
12
13                        dojo.require("dijit._Widget");
14                        dojo.require("dijit._TemplatedMixin");
15                        dojo.require("dijit._WidgetsInTemplateMixin");
16
17                        dojo.require("dijit.layout.LayoutContainer");
18
19                        function getOuterHTML(/*DomNode*/ node){
20                                var wrapper = dojo.doc.createElement("div");
21                                wrapper.appendChild(node);
22                                return wrapper.innerHTML.toLowerCase();         // IE prints <BUTTON> rather than <button>; normalize it.
23                        }
24
25                        dojo.ready(function(){
26                                // Template with no variables (should be cached as a DOM tree)
27                                dojo.declare("SimpleTemplate", [dijit._Widget, dijit._TemplatedMixin], {
28                                        id: "test1",
29                                        _setIdAttr: null,       // override _Widget to not copy id to domNode
30
31                                        templateString: "<button type='button'><span>hello &lt; world</span></button>"
32                                });
33
34                                // Template with variables
35                                dojo.declare("VariableTemplate", [dijit._Widget, dijit._TemplatedMixin], {
36                                        id: "test2",
37                                        _setIdAttr: null,       // override _Widget to not copy id to domNode
38
39                                        num: 5,
40                                        bool: false,
41                                        text: "hello <\"' world",
42
43                                        templateString: "<button><span num=\"${num}\" value=\"${bool}\">${text}</span></button>"
44                                });
45
46                                // Template with ! variables (for literal substitution)
47                                dojo.declare("ExclamationVariableTemplate", [dijit._Widget, dijit._TemplatedMixin], {
48                                        markup: "<span>hello world</span>",
49
50                                        templateString: "<div>${!markup}</div>"
51                                });
52
53                                // Template that starts with special node (has to be constructed inside a <tbody>)
54                                dojo.declare("TableRowTemplate", [dijit._Widget, dijit._TemplatedMixin], {
55                                        id: "test3",
56                                        _setIdAttr: null,       // override _Widget to not copy id to domNode
57                                        text: "bar",
58
59                                        templateString: "<tr><td>${text}</td></tr>"
60                                });
61
62                                // Illegal substitution variable name
63                                dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._TemplatedMixin], {
64                                        templateString: "<tr><td>${fake}</td></tr>"
65                                });
66
67                                // data-dojo-attach-point
68                                dojo.declare("AttachPoint", [dijit._Widget, dijit._TemplatedMixin], {
69                                        templateString: "<div style='border: 1px solid red'>" +
70                                                                                "<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
71                                                                                '<span><input data-dojo-attach-point="inputNode" value="input"/></span>' +
72                                                                                "<span data-dojo-attach-point='containerNode'></span>" +
73                                                                        "</div>"
74                                });
75
76                                // data-dojo-attach-event
77                                dojo.declare("AttachEvent", [dijit._Widget, dijit._TemplatedMixin], {
78                                        click: function(){ this.clickCalled=true; },
79                                        onfocus: function(){ this.focusCalled=true; },
80                                        focus2: function(){ this.focus2Called=true; },
81                                        templateString: "<table style='border: 1px solid blue'><tr>" +
82                                                                                "<td><button type='button' data-dojo-attach-point='left' data-dojo-attach-event='onclick: click, onfocus'>left</button></td>" +
83                                                                                "<td><button type='button' data-dojo-attach-point='right' data-dojo-attach-event='onclick: click, onfocus: focus2'>right</button></td>" +
84                                                                        "</tr></table>"
85                                });
86
87                                var testW;
88
89                                doh.register("parse", function(){
90                                        dojo.parser.parse();
91                                });
92
93                                doh.register("_TemplatedMixin",
94                                        [
95                                                function simple(t){
96                                                        var widget=new SimpleTemplate();
97                                                        var wrapper=dojo.byId("simpleWrapper");
98                                                        wrapper.appendChild(widget.domNode);
99                                                       
100                                                        // Different browsers have different orders for type=button and widgetid=... so simplify
101                                                        // by just removing the type=button.
102                                                        t.is('<button widgetid=\"test1\"><span>hello &lt; world</span></button>', wrapper.innerHTML.toLowerCase().replace(/ type="?button"?/, ""));
103                                                },
104
105                                                function variables(t){
106                                                        var widget=new VariableTemplate();
107                                                        var span = widget.domNode.getElementsByTagName("span")[0];
108                                                        var text = span.innerHTML;
109                                                        t.is("5", span.getAttribute("num"));
110                                                        t.is("false", span.getAttribute("value"));
111                                                        t.is("hello &lt;\"' world", text);
112                                                },
113                                                function variables2(t){
114                                                        var widget = new VariableTemplate({id: "myid", num: -5, bool: true, text: ""});
115                                                        var span = widget.domNode.getElementsByTagName("span")[0];
116                                                        var text = span.innerHTML;
117                                                        t.is("-5", span.getAttribute("num"));
118                                                        t.is("true", span.getAttribute("value"));
119                                                        t.is("", text);
120                                                },
121                                                function variablesWithExclamation(t){
122                                                        var widget=new ExclamationVariableTemplate();
123
124                                                        // ExclamationVariableTemplate should create markup like
125                                                        //              <div><span>hello world</span></div>
126                                                        // The <span> comes from the ${!markup} variable.
127                                                        var span = dojo.query("> *", widget.domNode);
128                                                        t.is(1, span.length, "dom node has one child");
129                                                        t.is("SPAN", span[0].nodeName.toUpperCase(), "which is a span");
130                                                        t.is("hello world", span[0].innerHTML, "and the text is set correctly too");
131                                                },
132
133                                                function table(t){
134                                                        var widget=new TableRowTemplate({text: "hello"});
135                                                        var wrapper = dojo.byId("trWrapper");
136                                                        wrapper.appendChild(widget.domNode);
137                                                        var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, "");
138                                                        t.is('<tr widgetid="test3"><td>hello</td></tr>', actual);
139                                                },
140                                                function illegal(t){
141                                                        var hadException=false;
142                                                        try{
143                                                                var widget=new IllegalSubstitution();
144                                                        }catch(e){
145                                                                console.log(e);
146                                                                hadException=true;
147                                                        }
148                                                        t.t(hadException);
149                                                },
150                                                function attachPoint(t){
151                                                        var widget=new AttachPoint();
152                                                        var wrapper = dojo.byId("attachPointWrapper");
153                                                        wrapper.appendChild(widget.domNode);
154                                                        t.is(widget.containerNode.tagName.toLowerCase(), "span");
155                                                        t.is(widget.buttonNode.tagName.toLowerCase(), "button");
156                                                        t.is(widget.focusNode.tagName.toLowerCase(), "button");
157                                                        t.is(widget.inputNode.tagName.toLowerCase(), "input");
158                                                },
159                                                function attachEvent(t){
160                                                        var deferred = new doh.Deferred();
161                                                        var widget = new AttachEvent();
162                                                        var wrapper = dojo.byId("attachEventWrapper");
163                                                        wrapper.appendChild(widget.domNode);
164                                                        widget.left.focus();
165                                                        widget.right.focus();
166                                                        setTimeout(deferred.getTestCallback(function(){
167                                                                t.t(widget.focusCalled, "left focused");
168                                                                t.t(widget.focus2Called, "right focused");
169                                                        }), 50);
170                                                        return deferred;
171                                                },
172
173                                                function widgetsInTemplateLifecycle(t){
174
175                                                        var result = [], expected = [1,1,0,2,2,3];
176
177                                                        // widgetsInTemplateLifecycle
178                                                        dojo.declare("SubThing", dijit._Widget, {
179                                                                postCreate:function(){
180                                                                        this.inherited(arguments);
181                                                                        result.push(1);
182                                                                },
183                                                                startup:function(){
184                                                                        this.inherited(arguments);
185                                                                        result.push(2);
186                                                                }
187                                                        });
188
189                                                        dojo.declare("ParentThing", [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
190                                                                templateString: "<div>" +
191                                                                                                        "<span data-dojo-type='SubThing'>a</span>" +
192                                                                                                        "<div data-dojo-type='dijit.layout.LayoutContainer'>" +
193                                                                                                                "<span data-dojo-type='SubThing'>b</span>" +
194                                                                                                        "</div>" +
195                                                                                                "</div>",
196                                                                postCreate:function(){
197                                                                        // children postcreate (x2) called before this postCreate
198                                                                        this.inherited(arguments);
199                                                                        result.push(0);
200                                                                },
201                                                                startup: function(){
202                                                                        // then children startup (x2) then our startup
203                                                                        // (we can call inherited after push(), and change the order)
204                                                                        this.inherited(arguments);
205                                                                        result.push(3);
206                                                                }
207                                                        });
208
209                                                        new ParentThing().startup();
210
211                                                        t.is(expected.length, result.length);
212                                                        dojo.forEach(expected, function(r){
213                                                                t.is(r, result.shift());
214                                                        });
215
216                                                }
217                                        ]
218                                );
219                                doh.run();
220                        });
221                </script>
222        </head>
223        <body>
224                <h1>_Templated test</h1>
225                <div id="simpleWrapper"></div>
226                <table><tbody id="trWrapper"></tbody></table>
227                <div id="attachPointWrapper"></div>
228                <div id="attachEventWrapper"></div>
229        </body>
230</html>
Note: See TracBrowser for help on using the repository browser.