360 Part II: Developing an Ajax Library^
Click-to-Edit
To support the goal of immediacy, many Ajax applications employ an idea dubbed “click-to-
edit.” As its name implies, the technique suggests that a simple click of an object makes it
editable.
Users should be highly familiar with this interface idiom from desktop operating
systems that allow file renaming in such a manner. In this click-to-edit scenario, the user
selects the object of interest and typically clicks or double-clicks the object to invoke editing.
The presentation changes to show that the user is in edit mode, often by modifying the
cursor to an insert indicator like an I-beam. Presentation changes may also include stroking
or highlighting the range of the content to be edited. After the editing occurs, the changes
are committed simply by blurring the edit region, usually by clicking some other place in
the interface.In simple applications the changes are immediately saved, though it is possible not to
commit the changes immediately but instead “dirty” the content. In such a situation,
changed content will be typically indicated with a different style such as italics, and a save
button will be activated elsewhere to perform the actual change commit.
This pattern of interaction certainly meets our criteria of immediacy and it is easily
adopted in a Web application. The basic idea to implement such a facility would require
first indicating what would be editable both visually and programmatically.
Programmatically, this might include defining a class name:<div class="editable">Click me once to edit.</div>or using some proprietary attribute, either user- or browser-defined to indicate that a tag’s
contents could be edited.<div contenteditable="true">IE supports such a facility for editing content</div>NNOTEOTE Mark-up mavens will approve of the class name concept for indicating editablity as proprietary
attributes in XHTML without appropriate namespace indications will not please a validator.Visually, changing the cursor is likely, and defining some hover effect to outline or color
to encourage selection is also possible..editable {cursor: pointer;}
.editable:hover {background-color: #FFFFAA;}Once the user identifies which section to edit, they usually start the process with a
single- or double-click. Now, given the single-click nature of the Web, some developers