InlineEditBox (1.0)
dijit.InlineEditBox is a new widget in 1.0, similar to the dijit.form.InlineEditBox widget in 0.9InlineEditBox is best described as a behavior on some text on the page, such that clicking that text brings up an editor, and when the text is saved, the screen is reverted to it's original state (but with the new text). The editor is created on-demand, so as to not slow down page load.
Examples
Edit me - I trigger the onChange callback
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>InlineEdit Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.TextBox");
function myHandler(idOfBox, value) {
console.debug("Edited value from "+idOfBox+" is now "+value);
}
</script>
</head>
<body class="tundra">
<h3 id="editable"
dojoType="dijit.InlineEditBox" title="h3 example"
onChange="myHandler(this.id,arguments[0])">
Edit me - I trigger the onChange callback
</h3>
</body></html>
When a user loads the page, they see the text "Edit me - I trigger the onChange callback". If the user clicks the text, a TextBox widget containing the text "Edit me - I trigger the onChange callback" appears. When the user changes the value and clicks away, the TextBox disappears and the TextBox's contents appear inline.
InlineEditBox supports the textarea mode through the Textarea widget. By simply saying editor=dijit.form.Textarea, you can use that editor. Furthermore, by adding renderAsHtml=true, users can enter HTML into the Textarea and have it appear inline as rich text. :
I'm one big paragraph. Go ahead and edit me. I dare you. The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>InlineEdit Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.Textarea");
</script>
</head>
<body class="tundra">
<p id="areaEditable" dojoType="dijit.InlineEditBox" title="p example"
autoSave="false">
I'm one big paragraph. Go ahead and edit me. I dare you.
The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...
</body></html>
When a user loads the page, they see the paragraph of rich text. If the user clicks the text, a Textarea widget containing the paragraph in plain text form appears. When the user changes the value and clicks away, the Textarea disappears and the Textarea's contents appear inline.
InlineEditBox can use any arbitrary widget that has a text value, or has the methods get/setDisplayedValue as an editor. DateTextBox is an example of such a widget. This code shows a DateTextBox as the editor:
1/1/2007
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>InlineEdit Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" title="date example"
width="200px" title="purchase date as mm/dd/yy">
1/1/2007
</span>
</body></html>
Note that the originally displayed text is generated by the server, and thus must be in the correct locale for the client machine. Since the server is generating the text, that burden of localizing the text falls on the server.
The InlineEditBox can wrap around any widget that implements the following interface:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000066; font-weight: bold;} .geshifilter .kw2 {color: #003366; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .co1 {color: #009900; font-style: italic;} .geshifilter .coMULTI {color: #009900; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #3366CC;} .geshifilter .nu0 {color: #CC0000;} .geshifilter .me1 {color: #006600;} .geshifilter .re0 {color: #0066FF;}String value = getTextValue() {... }
/* void */ focus() { ... }
The contained widget's setTextValue() method is called with the previously displayed text. When the Save button is pressed, the editing widget's getTextValue() method is called to retrieve the new text. After which, the editing widget is hidden, and the returned text is displayed. The focus method allows the editing widget to intelligently set focus to an appropriate node.
|
dijit.InlineEditBox
Edit behavior applied to a node
|
|||
|
Attributes
|
|||
| autoSave | Boolean true |
Changing the value automatically saves it; don't have to push save button (and save button isn't even displayed) | |
| buttonSave | String | Save button label | |
| buttonCancel | String | Cancel button label | |
| editing | Boolean false |
Is the node currently in edit mode? | |
| editor | String dijit.form.TextBox |
name of widget to use as editor | |
| editorParams | Object | Parameters to pass to editor (in addition to the value being edited. ex: "{constraints: {places:0} }" | |
| renderAsHTML | Boolean false |
true if the editor widget and takes HTML for setValue(), and returns HTML from getValue(). Ex: dijit.Editor | |
| value | String | Read-only value of box | |
|
Methods
|
|||
| cancel(/*Boolean*/ focus) | evert to display mode, discarding any changes made in the editor | ||
| save(/*Boolean*/ focus) | Focus on the display mode text | ||
|
Extension Points
|
|||
| onChange(/* String */value) | User should set this handler to be notified of changes to value | ||
Accessibility
General Behavior
When InlineEditBoxes are "closed" they appear as text but are tab stops in the keyboard focus ring and have an accessible role of button. They can have autoSave or non-autoSave behavior. When an non-autoSave InlineEditBox is open it has associated Save and Cancel buttons. An autoSave InlineEditBox does not have these buttons and they act like miniature forms or dialogs, i.e pressing the Esc key will close the widget and pressing the Enter key will close the widget, saving and displaying the text.Note that since InlineEditBoxes may be used on the page without a traditional label element, the developer should add a title attribute in order to provide a description that is available to screen reader users. The title will also be displayed by the browser when the user places the mouse over the element.
Keyboard
If the widget is closed.
| Action | Key |
|---|---|
| Navigate to the next widget in the tab order. | Tab |
| Navigate to the prior widget in the tab order. | Shift+Tab |
| Open the widget. | Enter or spacebar |
TextBox with autoSave specified and the TextBox is open:
| Action | Key | Comments |
|---|---|---|
| Navigate to the next widget in the tab order. | Tab | The data is saved and the widget closes. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The data is saved and the widget closes. |
| Close the TextBox, saving changes. | Enter | Keyboard focus is on the closed InlineEditBox. |
| Revert the last entry. | Esc | If the user has not entered data, the TextBox is closed. |
| Close the Textarea, discarding changes. | Esc | If the user has entered data, the Esc must be pressed two times; the first time the data will be reverted; the second time the TextBox will close. |
Textarea with autoSave specified and the Textarea is open:
| Action | Key | Comments |
|---|---|---|
| Navigate to the next widget in the tab order. | Tab (press twice in Firefox - see the Known Issues below) | The data is saved and the widget closes. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The data is saved and the widget closes. |
| Enter a newline into the text. | Enter | There is no equivalent to the Enter key behavior of TextBoxes. The user would have to use something like Tab and Shift + Tab. |
| Revert the last entry. | Esc | If the user has not entered data, the Textarea is closed. |
| Close the Textarea, discarding changes. | Esc | If the user has entered data, the Esc must be pressed two times; the first time the data will be reverted; the second time the Textarea will close. |
TextBox without autoSave specified, the TextBox is open, keyboard focus is in the edit field:
| Action | Key | Comments |
|---|---|---|
| Navigate to the Save or Cancel button. | Tab | Focus changes to the Save button if the data has been changed, otherwise it moves to the Cancel button. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The TextBox remains open. |
| Close the TextBox, saving changes. | Tab to the Save button, then press the Enter key | Keyboard focus is on the closed InlineEditBox. |
| Revert the last entry. | Esc | If the user has not entered data, the Esc key is ignored. |
| Close the Text Box, discarding changes. | Tab to the Cancel button, then press the Enter key. | Keyboard focus is on the closed InlineEditBox. |
Textarea without autoSave specified, the Textarea is open, keyboard focus is in the edit field:
| Action | Key | Comments |
|---|---|---|
| Navigate to the Save or Cancel button. | Tab (press twice in Firefox - see the Known Issues below) | Focus changes to the Save button if the data has been changed, otherwise it moves to the Cancel button. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The Textarea remains open. |
| Close the Textarea, saving changes. | Tab to the Save button, then press the Enter key | Keyboard focus is on the closed InlineEditBox. |
| Revert the last entry. | Esc | If the user has not entered data, the Esc key is ignored. |
| Close the Textarea, discarding changes. | Tab to the Cancel button, then press the Enter key. | Keyboard focus is on the closed InlineEditBox. |
Known Issues
- See the Comment for the Enter key in the information for autoSaving Text Areas above.
- Ticket 3910: When Inline Text Boxes are opened, all the text should be selected.
- On Firefox 2, the user must press the Tab key twice with focus in an textarea before keyboard focus moves to the next widget. This is a permanent restriction on Firefox 2. This is because the Dojo text area is implemented using the Firefox editor component in an iframe. This editor component implements usage of the tab key within the editor to indent text and shift-tab to outdent text. There is no keyboard mechanism in Firefox to move focus out of the editor. So, the dijit editor traps the tab key in the editor and sets focus to the editor iframe. From there pressing tab again will move to the next focusable item after the editor.
Screen Reader Issues
The InlineEditBox is implemented as a button. Since these are intended to be used "in-line" within text there is often no label element associated with the underlying control. For this reason, developers are encouraged to add a title attribute to InlineEditBoxes. The Window-Eyes screen reader will speak the title as part of the button description. JAWS has an option to speak different attributes on an button. A JAWS user may need to use the insert-v command to modify the behavior to speak the button title when working with Dojo InlineEditBoxes.