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.
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 methodrenderHeadingOn:
. 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 theonclick
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 areSUEffect>>toggleBlind
andSUEffect>>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.