Dynamic Web Development with Seaside

20.3Adding an Effect

Now we will demonstrate some applications of the principles just mentioned. It is straightforward, for example to add an effect to the heading of the ToDo application. To highlight the title when clicked, let us modify the method renderContentOn: as follows.

ToDoListView>>renderContentOn: html
html heading
onClick: html scriptaculous effect highlight; " <-- added "
with: self model title.
html form: [
html unorderedList
id: 'items';
with: [ self renderItemsOn: html ].
html submitButton
text: 'Save'.
html submitButton
callback: [ self add ];
text: 'Add' ].
html render: editor

Before we do something more sophisticated, let’s experiment a bit with this code. The first thing to try is to look at the generated source code (by using Toggle halos and pressing the source link). Obviously Seaside automatically transformed the JavaScript snippet that we specified and assigned it to the heading tag:

<h1 onclick="new Effect.Highlight(this)">
    Seaside ToDo
</h1>

Nice! Let’s experiment a bit with this effect. For example we can change the default yellow highlight color to a flashing blue:

ToDoListView>>renderContentOn: html
html heading
onClick: (html scriptaculous effect
highlight;
startColor: Color blue); " <-- added "
with: self model title.
html form: [
html unorderedList
id: 'items';
with: [ self renderItemsOn: html ].
html submitButton
text: 'Save'.
html submitButton
callback: [ self add ];
text: 'Add' ].
html render: editor

In this case Seaside generates the following JavaScript expression:

<h1 onclick="new Effect.Highlight(this, {'startcolor': '#0000FF'})">
    Seaside ToDo
</div>

You might also want to try some other effects such as SUEffect>>pulsate or SUEffect>>switchOff. These are fun to play with, but not particularly useful for our example. Let’s do something slightly more useful and display some help text or a copyright notice when the heading is clicked. You can see the result in Figure 136. Note that we extracted the rendering of the title and help text into a separate method and that we improved the style-sheet as well.

The todo application with help text faded in

ToDoListView>>renderContentOn: html
self renderHeadingOn: html. " <-- added "
html form: [
html unorderedList
id: 'items';
with: [ self renderItemsOn: html ].
html submitButton
text: 'Save'.
html submitButton
callback: [ self add ];
text: 'Add' ].
html render: editor
ToDoListView>>renderHeadingOn: html
| helpId |
helpId := html nextId.
html heading
class: 'helplink';
onClick: (html scriptaculous effect
id: helpId;
toggleAppear);
with: self model title.
html div
id: helpId;
class: 'help';
style: 'display: none';
with: 'The todo application from the Seaside book'
ToDoListView>>style
^ '
.help {
padding: 1em;
margin-bottom: 1em;
border: 1px solid #008aff;
background-color: #e6f4ff;
}
.helplink {
cursor: help;
}

body {
color: #222;
font-size: 75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
color: #111;
font-size: 2em;
font-weight: normal;
margin-bottom: 0.5em;
}
ul {
list-style: none;
padding-left: 0;
margin-bottom: 1em;
}
li.overdue {
color: #8a1f11;
}
li.done {
color: #264409;
}'

This code requires some explanation:

  • First we extract the heading code from renderContentOn: into its own method renderHeadingOn:. This makes it easier for us to change its behavior.
  • In renderHeadingOn: we first ask Seaside to generate a new unique ID. In this case it would be possible to use our own ID string, however this is considered bad practice. If you want to use the component in a different context, the ID might conflict with existing code. Also when hardcoding IDs it is, for exactly the same reason, not possible to have two instances of the same component visible on a page. We also add some class information to the heading tag, to allow our CSS to cause the cursor to change when the mouse moves over the heading.
  • Next we create an effect called SUEffect>>toggleAppear and assign it to the onclick event of the heading. Since we don’t want to toggle the appearance of the heading itself (which would be the default), we pass it the generated ID. Two other interesting toggle-effects we could have used are SUEffect>>toggleBlind and SUEffect>>toggleSlide.
  • Last but not least we add the div element we would like to toggle on and off. Obviously this is the element with our automatically generated ID, so we assign it here. Since the div element should not be visible in the beginning we hide it with an inline style. Moreover we assign the CSS class help, so that we are able to change its look from the style-sheet.

If we have a look at the running ToDo application, it works as proposed. However there is one thing we might want to improve: whenever we have a full refresh, for example when clicking on a link or button, the help text disappears again. The reason is that we only specified client side behavior: whenever the heading is clicked the JavaScript code is executed that has been generated by Seaside. And the JavaScript code doesn’t talk back to the server, it just toggles the visibility of a DOM node on the client. Luckily there is AJAX that enables us to talk back to the server, and this is exactly what we are going to do in the next section.

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.