Scriptacu-list Tutorial(Part 5)

Its time to get our little Contact List application into the Web2.0 era by adding a funky Scriptaculous dropdown on our contact list. The really cool thing is that we are going to do all this without writing a single line of Javascript (Lukas Renggli has already done that for us.  Much respect Lukas!) – it’s Smalltalk all the way for us!

Full Contact

Before we get on to dealing with our views I want to add a couple of methods to MyContact. First I want to add a #fullName method like so.

^firstName, ' ', surname

…we have already coded something like this when we rendered the list in MyAddressBookView but as we are going to use it again it makes sense to create a method for it. (You can go back and make the list view use it if you like). You may already have encountered some errors in concatenating a nil object to a string. We can prevent that with some defensive code in #fullName if we wish which is another good reason to create it as a separate method. (I’ll leave the defensive code up to you!).

Secondly iwant to add an #identifier method to act as a key to my contact. I will do this very crudely like this…

^self fullName asLowercase onlyLetters

…we’re going to use this identifier later as an id attribute on a div in our HTML.

Down to Details

We are now going to create a new class to show our Contact’s details.

  1. Create the class MyContactDetailsView as a subclass of WAComponent and give it an instance variable of contact.
  2. We need to create a convenience constructor #on: as a class method MyContactDetailsView. We’ve already done this for MyContactEditor so I’m going let you figure this step for yourself.
  3. As we mentioned in an earlier session Seaside allows you to refactor your html into smaller more useable chunks. So before we dive into our #renderContentOn: method we will create another method #renderDetailsDiv:on: that it will call.

    renderDetailsDiv: aString on: html
    html div id: aString;
    with: [ html render: 'Name: ', contact fullName.
    html break.
    html render: 'Birthday: ', contact dateOfBirth printString.
    html break.
    html render: 'Telephone: ', contact telephoneNumber.
    html break.
    html render: 'Email: '. contact emailAddress.
    html break.

    …this very simply creates a new div with an id attribute containing our contact’s identifier. This id attribute will be used by the Scriptaculous Javascript later on to hide and show the div.

  4. Now we need to create our #renderContentOn: method and make it call #renderDetailsDiv:on:

    renderContentOn: html
    self renderDetailsDiv: contact identifier on: html

    …this is not the finished article yet but its good enough to let us test that all is well, so we’ll leave it here and come back shortly.

  5. The last thing that we need to do before we can give our code a quick test is to add a line of code into the #renderContentOn: method in MyAddressBookView. Remember the #inject:into: call we coded last time? Well now we need to modify it so it looks like this…

    self addressBook contacts inject: 1 into: [:index :contact |
    html div class: ('row', (index\\2) printString );
    with: [
    html anchor
    callback: [self showContact: contact];
    with: (contact firstName , ' ', contact surname ).
    html render: (MyContactDetailView on: contact).
    index + 1.

Before we move on let’s just give our code a quick test. We should see that for each Conact in our list we are displaying their details under their name.

Getting Animated
Now we are going to animate our details div so it toggles smoothly in and out of view.

Open up that one line #renderContentOn: method in MyContactDetailsView and add the following lines at the top of the method…

html anchor
style: 'margin-left: 40px';
onClick: (html effect
id: (contact identifier);
perform: #toggleBlind);
with: 'Toggle Detail'.

What we’ve done here is added a new hyperlink “Toggle Detail” which when clicked will call a Scriptaculous #toggleBlind effect on the div who’s id attribute is the contacts identifier.

Test your app again and see what happens. Nothing eh!?

We have one last thing to do. We need to include the Scriptaculous library for our application. From the browser select “Configure” from the Seaside toolbar at the bottom of the screen (If you’ve got my CSS installed you might struggle to see it – sorry!). Add the SULibrary to your Application and save the configuration. Now test your Application again – how cool is that!

Just before we close for today we will just do one more thing. Our Contact list would look much better if the details started off hidden. So lets make it happen by modifying our #renderDetailsDiv:on: method in MyContactDetailsView like so…

renderDetailsDiv: aString on: html
html div id: aString;
style: 'display: none';
with: [ html render: 'Name: ', contact fullName.
html break.
html render: 'Birthday: ', contact dateOfBirth printString.
html break.
html render: 'Telephone: ', contact telephoneNumber.
html break.
html render: 'Email: '. contact emailAddress.
html break.

Before the next session open up a Class Browser on SUEffect and play around with the other things it can do.

Explore posts in the same categories: Scriptaculous, Seaside, Smalltalk

3 Comments on “Scriptacu-list Tutorial(Part 5)”

  1. Ramon Leon Says:

    I see you’ve taken sample code from the scriptaculous demo, you may want to remove the unnecessary reflection that was used in the demo because his code was doing something fancier.

    html effect id: contact identifier; perform: #toggleBlind

    should just be

    html effect id: contact identifier; toggleBlind

    Lukas is awesome, but his “demo” code is often a little too fancy for a demo and does things beyond what a demo should be focusing on.

    You may also want to play with element, which is like above, but much snappier

    hmtl element id: contact identifier; toggle.

    element supports toggle/show/hide, without the effects.

  2. Ramon Leon Says:

    BTW, keep up the great work, love the blog, love to see people using Seaside.

  3. Thanks Ramon

    Your right about the uneccessary reflection. I had spotted that in aome real code I’ve beeen doing but forgot to change it back in the code I’ve used for this tutorial. I suspect Lukas may have used reflection so he could support selecting the effect from a drop-down list.

    I deliberately chose the html effect way of doing this for the demo as I think it gives the app something of a WOW factor. And I’m really enjoying showing my colleagues the vast amount of WOW there is in seaside.

    In the next session I’m going to combine the Scriptaculous call with a couple of straight element toggles to get the “Show Detail” and “Hide Detail” links that are in the screen shot in Part 1.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: