1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Inline Edit Box Test</title>
7 <style type="text/css">
8 @import "../../dojo/resources/dojo.css";
9 @import "css/dijitTests.css";
11 .inlineEdit { background-color: #CCC76A; }
13 /* some style rules on nodes just to test that style gets copied to the edit widget */
14 p { font-family: cursive; }
15 .letter p { font-family: monospace; }
16 h3 { font-family: helvetica; font-style: italic; }
19 <script type="text/javascript" src="../../dojo/dojo.js"
20 djConfig="isDebug: true, parseOnLoad: true"></script>
21 <script type="text/javascript" src="_testCommon.js"></script>
23 <script type="text/javascript">
24 dojo.require("dojo.data.ItemFileReadStore");
25 dojo.require("dijit.InlineEditBox");
26 dojo.require("dijit.form.Textarea");
27 dojo.require("dijit.form.TextBox");
28 dojo.require("dijit.form.DateTextBox");
29 dojo.require("dijit.form.CurrencyTextBox");
30 dojo.require("dojo.currency");
31 dojo.require("dijit.form.ComboBox");
32 dojo.require("dijit.form.FilteringSelect");
33 dojo.require("dijit.form.NumberSpinner");
34 dojo.require("dijit.form.Slider");
36 dojo.require("dijit.Editor");
37 dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
39 dojo.require("dojo.parser"); // scan page for widgets and instantiate them
41 function myHandler(id,newValue){
42 console.debug("onChange for id = " + id + ", value: " + newValue);
45 dojo.addOnLoad(function(){
46 dojo.subscribe("widgetFocus", function(widget){
47 console.log("focused on widget " + (widget?widget:"nothing"));
49 dojo.subscribe("widgetBlur", function(widget){
50 console.log("blurred widget " + (widget?widget:"nothing"));
52 dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
58 <h1 class="testTitle">Dijit InlineEditBox Test</h1>
60 <span dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
61 url="_data/states.json"></span>
62 <span dojoType="dojo.data.ItemFileReadStore" jsId="productStore">
63 <script type="dojo/method">
68 { name: "refrigerator" },
76 <h2>Form Letter with blanks</h2>
78 <h3 id="editable" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="true" title="company name"></h3>
80 Dear <span dojoType="dijit.InlineEditBox" width="200px" title="recipient name"></span>,
83 Thank you for your recent order.
85 <span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" title="dollar amount"></span> for
87 <span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" title="quantity"></span> deluxe
88 <span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" title="item name"
89 editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}"
90 width="200px"></span> on
91 <span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" title="purchase date as mm/dd/yy"></span> in
92 <span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
93 editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: true}"
94 width="200px" title="state of purchase"></span>.
96 <p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details"></p>
100 <span style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" title="sender name" ></span>
102 <hr style="margin-bottom: 1em;">
104 <h2>Form Letter with predefined values, and no auto-save</h2>
106 <h3 id="editable2" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="false" title="company name">
107 Bob Vance Refrigeration
110 Dear <span dojoType="dijit.InlineEditBox" width="200px" autoSave="false" title="recipient name">John</span>,
113 Thank you for your recent order.
115 <span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" autoSave="false" title="dollar amount">$2,000</span>
117 <span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" autoSave="false" title="quantity">3</span>
119 <span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox"
120 editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}"
121 width="200px" autoSave="false" title="item name">refrigerators</span>
123 <span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" autoSave="false" title="purchase date as mm/dd/yy">01/01/2007</span>
125 <span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
126 editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}"
127 width="200px" autoSave="false" title="state of purchase">
131 <p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details">
132 We sincerely appreciate your business and hope we can do business again.
137 <span style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" autoSave="false" title="sender name">Bob Vance</span>
139 <hr style="margin-bottom: 1em;">
142 <h2>Inline-block Text (of 400px width)</h2>
144 The following section uses inline block text of 400px.
145 When clicking the editable text it should bring up an editor which is also 400px wide.
147 (before plain inline) <fieldset class="dijitInline"><div style="width: 400px;">hello world</div></fieldset> (after plain inline)
149 (before editable inline)
150 <fieldset class="dijitInline"><div dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" width="400px" style="width: 400px;">
153 (after editable inline)
154 <hr style="width:100%;">
157 (before plain paragraph)
159 Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
160 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
161 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
162 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
163 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
164 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
165 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
166 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
167 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
168 semper velit ante id metus. Praesent massa dolor, porttitor sed,
169 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
170 tortor pharetra congue. Suspendisse pulvinar.
172 (before editable paragraph. the editable paragraph has Save/Cancel buttons when open.)
173 <p id="areaEditable" dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea">
174 Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
175 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
176 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
177 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
178 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
179 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
180 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
181 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
182 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
183 semper velit ante id metus. Praesent massa dolor, porttitor sed,
184 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
185 tortor pharetra congue. Suspendisse pulvinar.
188 <button onClick="dijit.byId('areaEditable').setDisabled(true)">disable</button> /
189 <button onClick="dijit.byId('areaEditable').setDisabled(false)">enable</button>
190 the InlineEditBox above.
191 <hr style="width:100%;">
194 <p id="inlineRTE" dojoType="dijit.InlineEditBox" editor="dijit.Editor"
195 autoSave="false" renderAsHtml="true"
196 editorParams="{height: '', extraPlugins: ['dijit._editor.plugins.AlwaysShowToolbar']}">
197 <b>Aliquam</b> vitae enim. <i>Duis</i> scelerisque metus auctor est venenatis
198 imperdiet. <u>Fusce</u> dignissim porta augue. Nulla vestibulum. Integer lorem
199 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
200 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
201 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
202 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
203 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
204 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
205 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
206 semper velit ante id metus. Praesent massa dolor, porttitor sed,
207 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
208 tortor pharetra congue. Suspendisse pulvinar.
211 <h2>FilteringSelect (no down arrow, and save/cancel buttons):</h2>
213 <span id="filteringSelect2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
214 editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}"
215 width="200px" autoSave="false">
219 <hr style="width:100%;">
221 <h2>Programmatically created:</h2>
222 before block<div style="display:block;" id="programmatic">Click here to edit a block programmatically created inline edit region</div>after
223 <script type="text/javascript">
224 // See if we can make a widget in script
225 dojo.addOnLoad(function(){
226 var inlineWidget = new dijit.InlineEditBox({renderAsHtml: true}, 'programmatic');
229 <hr style="width:100%;">