Dynamic Web Development with Seaside

Buy PDF Buy Print

21.6.1Adding an Effect

We’ll go ahead and factor the renderContentOn: method to add a method to handle rendering the heading and just make modifications to the new method.

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

The renderHeadingOn: method leverages the jQuery UI library to add the highlight effect to the header of our component.

ToDoListView>>renderHeadingOn: html
html heading
onClick: html jQuery this effect highlight;
with: self model title.

We create a query using html jQuery this that selects the heading DOM element. Next we send effect to get a JQEffect instance. Then finally we send JQEffect>>highlight which highlites the background color.

Altering the highlight color is left as an exercise for the reader.

Now for something a little more fun - let’s add some help test that appears when you click on the heading; and it won’t just "appear", it will slide open at a rate that we determine.

We do this by rendering a new <div> element that contains the help text, and changing the onClick of the header to apply our new cool effect to the new element. We also need some new CSS to help us out with this.

ToDoListView>>renderHeadingOn: html
| helpId |
helpId := html nextId.
(html heading)
class: 'helplink';
onClick: ((html jQuery id: helpId)
slideToggle: 1 seconds);
with: self model title.
(html div)
id: helpId;
class: 'help';
style: 'display: none';
with: 'The ToDo app enhanced with jQuery.'

We need to add the CSS (the same as in the SU example).

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;
}'

Copyright © 22 July 2017 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.