Dynamic Web Development with Seaside

20.6JavaScript Controls

script.aculo.us comes with a collection of JavaScript widgets bundled that can be used from Seaside. In this section we are going to add an in-place editor to the ToDo application that allows us to edit the title of the todo item right in the list with the checkboxes by simply clicking on the item, as seen below.

In-place item editor

To get the in-place editor up and running we only have to change the method renderItem:on: by replacing

    html text: anItem title.

with

    html span  "<-- added"
script: (html scriptaculous inPlaceEditor
cancelControl: #button;
triggerInPlaceEditor: [ :value | anItem title: value ];
callback: [ :htmlAjax | htmlAjax render: anItem title ]);
with: anItem title.

Here we add a XHTML span element to specify exactly what part we want to turn editable. Then we need to specify two callback blocks: the first one for SUInPlaceEditor>>triggerInPlaceEditor: to store the edited value back into the todo item, and the second one for SUInPlaceEditor>>callback: to update the changed item. Furthermore we specify in this example a SUInPlaceEditor>>cancelControl: button to be used to cancel editing. We could also write #link or false here, to put a link or to disallow cancelling altogether.

Your complete method should now look like this:

renderItem: anItem on: html
html listItem
passenger: anItem;
class: 'done' if: anItem isDone;
class: 'overdue' if: anItem isOverdue;
with: [
html checkbox
onChange: (html scriptaculous updater
id: listId;
triggerForm: (html scriptaculous element up: 'form');
callback: [ :ajaxHtml | self renderItemsOn: ajaxHtml ]);
value: anItem done;
callback: [ :value | anItem done: value ].
html span "<-- added"
script: (html scriptaculous inPlaceEditor
cancelControl: #button;
triggerInPlaceEditor: [ :value | anItem title: value ];
callback: [ :htmlAjax | htmlAjax render: anItem title ]);
with: anItem title.
html space.
html anchor
callback: [ self edit: anItem ];
with: 'edit'.
html space.
html anchor
callback: [ self remove: anItem ];
with: 'remove' ]

In its current state, the in-place editor is fully functional. There is a small glitch in the visual presentation, because script.aculo.us temporarily introduces a form element into the DOM tree that causes two ugly line-breaks. We can fix that by adding the following style to our style-sheet:

li form {
    margin: 0;
    display: inline;
}

The in-place editor supports a wide variety of options and events. We are going to point out the most important ones. To see all possibilities, check out the class SUInPlaceEditor.

  • SUInPlaceEditor>>cancelText: — The text of the button or link that cancels editing.
  • SUInPlaceEditor>>highlightColor: — The color to be used to highlight the editable area when the user hovers the mouse over it.
  • SUInPlaceEditor>>okControl:#button or #link, if the ok command should be displayed as a button or a link. false if there should be neither and the editor can only be closed by pressing the enter key.
  • SUInPlaceEditor>>okText: — The text of the submit button that submits the changed value to the server.
  • SUInPlaceEditor>>rows: — The number of rows the input field should use, anything greater than 1 uses a multiline text area for input instead of a text-input.
  • SUInPlaceEditor>>submitOnBlur: — Set this to true to automatically submit the editor when it loses focus.

There are several other JavaScript controls available. Similar to the SUInPlaceEditor we’ve seen above, there is an SUInPlaceCollectionEditor. The in-place collection editor displays a drop down list, instead of a text input field, when the editing is triggered. You can see a combined example when browsing SUInPlaceEditorTest. The SUAutocompleter and its example SUAutocompleterTest shows how to add autocompletion functionality to a text-input or text-area field. This allows users to start typing something while the JavaScript library will asynchronously ask the server for possible tokens that are then offered to the user within a drop-down list as possible completion matches. Another interesting control is SUSlider that is demoed in SUSliderTest. The slider offers a sophisticated scroll-bar implementation that is otherwise missing in XHTML.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.