Smalltalk with James Robertson

Today's Smalltalk 4 You continues the VA Smalltalk Seaside tutorial with the addition of rendering for individual post. You can download the initial domain model as a file out here. 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:

.

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:

Today we'll continue building our Seaside blog server by adding rendering for posts. First though, we need to modify our domain a bit: add the following class method to BlogPost, BlogStorage, and BlogUser:

new
	^super new initialize

That will ensure that our initialize method gets invoked on instance creation. Next, add the following method to BlogLIstView:

renderContentOn: html
	"standard way to render a component in Seaside"

	| posts |
	posts := BlogStorage default posts.
	posts do: [:each |
		each renderPost: each on: html].

What that does is delegate the task of rendering off to the post object. That's a good idea, as each post may have differences - attached audio/video, etc. That means we need to add this method to BlogPost:

renderPost: post on: html

	html div
		class: 'post';
		with: [html paragraph: [
			html strong: [html text: post title].
			html break.
			html html: post content.
			html break.
			html text: 'Posted on: ', post timestamp printString.
			html break]].

Note the way rendering works - it's a lot like the way we build a UI using general UI building tools. Each component renders itself on the canvas, and the placement is handled by CSS (it's easy to attach CSS, either in the image or in an external file - we'll cover that later). Now we need to run a script to create some blog posts, as we haven't created an editor yet. Open up a workspace, and execute the following:

BlogStorage default.


user := BlogUser new.
user id: 1.
user username: 'fred'.
user password: 'flintstone'.
BlogStorage default users add: user.

post := BlogPost new.
post title: 'This is a Test'.
post content: '
How will this work out?
'.
post owner: user.
BlogStorage default  posts add: post.

post2 := BlogPost new.
post2 title: 'Old Stuff'.
post2 content: '
This should be yesterday
'.
post2 owner: user.
post2 timestamp: (AbtTimestamp date: (Date today subtractDays: 1) time: Time now).
post2 id: post2 timestamp totalSeconds.
BlogStorage default  posts add: post2.

That creates two posts objects, one from yesterday. As you look at this, you'll note that we aren't sorting the posts for display using reverse chronological order - we'll leave that as an exercise for the reader :)

With that done, refresh the browser, and you should see this:

That wraps it up for now.

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.