Send to Printer

st4u

ST 4U 124: Using Scriptaculous with Seaside

August 24, 2011 8:18:54.967

Today's Smalltalk 4 You continues the VA Smalltalk Seaside tutorial with Ajax. We'll change the filtering links on the main view to update using Javascript rather than a full page submit. Today we'll do that using Scriptaculous; in the next tutorial, we'll use JQuery. If you have trouble viewing it here in the browser, you can also navigate directly to YouTube. To watch now, click on the image below:

Ajax.

If you have trouble viewing that directly, you can click here to download the video directly. If you need the video in a Windows Media format, then download that here.

You can also watch it on YouTube:


In this section we'll add Ajax to our Seaside application. Today we'll use Scriptaculous - in the next tutorial, we'll use JQuery. The configuration and code for both are largely the same, and so far as the end user of your applications is concerned, things behave the same way.

First, we need to go back into the configuration screens (as we did for the custom session work). We'll need to do the same thing for both the blogView and blogLogin entry points we've defined. Scroll down in the configuration section to libraries, and select configure. In the image below, I've already added the two libraries in question; your listbox will be blank:

Configure

Select PTGoogleLibrary (Prototype) and SUGoogleLibrary (Scriptaculous) on the left - use the arrow button to move them to the right:

Libraries

Now scroll down to the Ok button to apply the change, and then repeat the process for the other entry point:

Libraries

Now we need to get into the code that will use these libraries that we just ensured will be loaded. First, we'll redefine BlogMenuView to hold a reference to the list component - so that when links are clicked, we can direct the list component to re-render without forcing a full page submit:



WAComponent subclass: #BlogMenuView
    instanceVariableNames: 'entries listComponent '
    classVariableNames: ''
    poolDictionaries: ''


We'll also need to change the #initializeMenuComponent method in BlogServerView to set that up:


initializeMenuComponent
	menuComponent := BlogMenuView new.
	self session currentUser ifNotNil: [menuComponent addEntry: 'New Post' withAction: [self addPost]].
	menuComponent addEntry: 'All Posts' withAction: [self allPosts].
	menuComponent addEntry: 'Today''s Posts' withAction: [self todaysPosts].
	menuComponent listComponent: listComponent

Now we'll change the way #renderContentOn: works, so that it renders the filtering links as ajax enabled links:


renderContentOn: html

	self entries 
		do: [:each |
			(each key = 'New Post')
				ifTrue: [self renderStandardLinkOn: html for: each]
				ifFalse: [self renderAjaxLinkOn: html for: each]]
		separatedBy: [html space]

The #renderStandardLinkOn:for: method looks a lot like the above method used to look; the changes are in #renderAjaxLinkOn:for:


renderStandardLinkOn: html for: entry
	"Render this component"

	html anchor
			callback: entry value;
			with: entry key

renderAjaxLinkOn: html for: entry
	"Render this component"

		html anchor onClick:
			(html updater
				id: 'listid';
				callback: [:renderer | self listComponent updateFilterFrom: entry key.
							renderer render: self listComponent]);
			url: '#';
			with: entry key

Note the #onClick: method - it sets up the link to use Javascript. The #updater method is how we hook in Scriptaculous. The callback here is a block, and that's where we take advantage of the link to the list component - we tell it to re-render within the named div on click. The last thing we need to do is add #updateFilterFrom: to the BlogListView class, so that the updater can reset the filter just before it re-renders:


updateFilterFrom: filterName
	filterName = 'All Posts'
		ifTrue: [self setAllPostsFilter]
		ifFalse: [self setTodaysPostsFilter]

That's all the code we need - now just open the blogView interface in your browser, and switch between the two filters (all and today) - you should see them updating without a full page submit. Next time, we'll redo this to use JQuery

Need more help? There's a screencast for other topics like this which you may want to watch. Questions? Try the "Chat with James" Google gadget over in the sidebar.

Technorati Tags: , , ,

Enclosures:
[st4u124-iPhone.m4v ( Size: 7010457 )]

posted by James Robertson

 Share Tweet This