Login Register

InlineEditBox (1.0)

dijit.InlineEditBox is a new widget in 1.0, similar to the dijit.form.InlineEditBox widget in 0.9

InlineEditBox 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "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 ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "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:

/* void */ setTextValue(/*String*/ value) { ... }
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.


ActionKey
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
Note: The Esc key is ignored.

TextBox with autoSave specified and the TextBox is open:


ActionKeyComments
Navigate to the next widget in the tab order.TabThe data is saved and the widget closes.
Navigate to the prior widget in the tab order.Shift+TabThe data is saved and the widget closes.
Close the TextBox, saving changes.EnterKeyboard focus is on the closed InlineEditBox.
Revert the last entry.EscIf the user has not entered data, the TextBox is closed.
Close the Textarea, discarding changes.EscIf 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:


ActionKeyComments
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+TabThe data is saved and the widget closes.
Enter a newline into the text.EnterThere 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.EscIf the user has not entered data, the Textarea is closed.
Close the Textarea, discarding changes.EscIf 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:


ActionKeyComments
Navigate to the Save or Cancel button.TabFocus 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+TabThe TextBox remains open.
Close the TextBox, saving changes.Tab to the Save button, then press the Enter keyKeyboard focus is on the closed InlineEditBox.
Revert the last entry.EscIf 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.
Note: The Enter key is ignored when focus is in the edit field.

Textarea without autoSave specified, the Textarea is open, keyboard focus is in the edit field:


ActionKeyComments
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+TabThe Textarea remains open.
Close the Textarea, saving changes.Tab to the Save button, then press the Enter keyKeyboard focus is on the closed InlineEditBox.
Revert the last entry.EscIf 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.
Note: Pressing the Enter key results in a newline being inserted into the edit field.

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.

setValue

From looking at the source, InlineEditBox /should/ support setValue or setDisplayedValue. However, I could not get this to work, either using an html defined box or a programmatically (js) defined box. I eventually found out there was an (internal) function to set the value of the text node, and you could use thisDijit.value=newValue to set the value of the editbox node. Thus, I created a new function so this could be accomplished with a single this.setValue(newValue)

setValue: function (/*String*/ val){
	this.displayNode.innerHTML = val || this.noValueIndicator;
	dijit.byId(this.id).value = val || this.noValueIndicator;
		
},

I'm not sure if I am simply missing something and this function already exists (I searched around and tried a lot of things and could only get this behavior by using these two commands) - if it does, if somebody could let me know that would be great. I f it doesn't, it should be added to the source.

Thanks.

only setDisplayedValue

IIRC InlineEditBox isn't supposed to support setDisplayedValue() and looking at InlineEditBox.js seems to confirm that. Just setValue() (but set value sets the displayed value, which is different than the intrinsic value... for stuff like localization, number format, etc.

ok but

fair enough but i think the function i have added should be included into the code, as it makes sense that a program might want to update the inlineeditbox - both what is displayed when it isn't in "edit mode" and what it is displayed when it is in "edit mode". I was confused as the source file claims
"An edit widget must support the following API to be used:
// String getDisplayedValue() OR String getValue()
// void setDisplayedValue(String) OR void setValue(String)
"
now I understand what they mean - that the widget used for the editor must support that kind of call, but I see no reason why the extension I submitted above should not be a part of the base code (maybe change the function name if it conflicts - but it isn't conflicting with anything for me)

confused

I'm not sure I understand you. The text displayed in edit mode vs. display mode is essentially the same. There are trivial differences like whether numbers have commas every three places, but essentially it's the same. Why would you want two separate methods? Maybe you can give an example, that would make it clearer.