Scriptacu-list Tutorial(Part 4)

Time’s tight today so I will just introduce my technique for creating alternating rows into our contact list.

Injecting a Little Class

Last time we added a CSS to improve the look of our application but our list needs a little something extra. It is very common when presenting a list to make each row appear in alternating colors. Today we will acheive this effect with our contact list.

The principal is simple and makes use of the class attributes and our CSS. All we need to do is display a row with a class attribute of “row0” then display the next with “row1”, the next with “row0”, then “row1” again and so on.

So here’s my solution using a Collection’s clever and often ignored #inject:into: method.

Select the #renderContentOn: method in MyAddressBookView and replace the following code…

self addressBook contacts do: [:contact |
html div class: ('row');
with: [
html anchor
callback: [self showContact: contact];
with: (contact firstName , ' ', contact surname ).
].
].

…with …

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 ).
].
index + 1.
].

What we have done here is injected a counter into the loop and used a bit of modulo arithmetic to calculate the remainder of our index when divided by 2. At the end of the loop we increment the index so the new value can be injected back in next time.

Hopefully the .row0 and .row1 definitions are already in the stylesheet from last time.

You can easily extend this technique to alternate over more than 2 styles.

Next time we will get into Scriptaculous to make our little app look really cool!

Advertisements
Explore posts in the same categories: Seaside, Smalltalk

2 Comments on “Scriptacu-list Tutorial(Part 4)”

  1. Ramon Leon Says:

    Try this…

    self addressBook contacts withIndexDo: [ :contact :index|
    html div class: (#row, (index \\ 2) printString );
    with: [html anchor
    callback: [self showContact: contact];
    with: (contact firstName , ‘ ‘, contact surname )]]


  2. That’s even better Ramon!

    (I think after 8 years of Java my Smalltalk is a little rusty!)

    I guess the only advantage of using #inject:into: in a situation like this would be if you wanted to play directly with the class attributes like this…

    self addressBook contacts inject: #rowa into: [ :class :contact |
    html div class: class;
    with: [html anchor
    callback: [self showContact: contact];
    with: (contact firstName , ‘ ‘, contact surname )]
    class == #rowa ifTrue: [#rowb] ifFalse: [#rowa] ]


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s


%d bloggers like this: