. .

st4u

ST 4U 120: Flow in a VA Seaside App

August 15, 2011 9:49:21.910

Today's Smalltalk 4 You continues the VA Smalltalk Seaside tutorial with a closer look at the Login UI we created last time. In VA, we don't have full continuaton support, so the stock #call: usage you might normally see doesn't work - instead, we use #show:onAnswer:. That' a standard part of Seaside, but it behaves a bit differently. 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:

Seaside Flow.

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 the login UI for our posting tool (not written yet), and start making use of the custom session we set up last time. Next time, we'll get to the posting interface. One of the main things we'll look at today is how Seaside in VA differs a bit from Seaside in other Smalltalks - the lack of support for full continuations (meaning, you can't use #call:). In fact, if you try to use #call:, you'll get an exception (which can make following other tutorials a bit rough at times). As it happens, the lack of full continuation support in VA isn't much an issue with the current version of Seaside - which well see in a moment.

First, let's define the BlogLoginView class:


WAComponent subclass: #BlogLoginView
    instanceVariableNames: 'user '
    classVariableNames: ''
    poolDictionaries: ''

Note the user variable - we'll be checking that against the registered users (set up with workspace code in our example). That means we need to initialize that:


initialize
	"holds current user"

	super initialize.
	user := BlogUser new

Next, we'll render the form, and see how things differ a bit without #call::


renderContentOn: html
	html div
		class: 'login';
		with: [html paragraph: [html strong: [html text: 'Login to Post/Edit']].
				html form: [html table: [html tableRow: [self renderUsernameOn: html].
							html tableRow: [self renderPasswordOn: html]].
						self renderButtonsOn: html]]

renderUsernameOn: html
	html
		tableData: [html text: 'Username: '];
		tableData: [html textInput on: #username of: self user].

renderPasswordOn: html
	html
		tableData: [html text: 'Password: '];
		tableData: [html passwordInput on: #password of: self user].

renderButtonsOn: html
	html div with: 
		[html submitButton
			callback: [self validateLogin];
			value: 'Login'.
		html submitButton
			callback: [self show: BlogServerView new onAnswer: [:ans | ans]];
			value: 'cancel']

validateLogin
	| userOrNil |
	userOrNil := BlogStorage default users
		detect: [:each | each username = self user username and: [each password = self user password]]
		ifNone: [nil].
	self session currentUser: userOrNil.
	self show: BlogServerView new onAnswer: [:ans | ans]

There are a few things going on here worth noticing. First, see how we store data in Seaside forms? Using a symbol and a reference to the object, we map directly. That makes form handling in Seaside much, much easier than it is in many other web frameworks. Next, look at the password method above - note how easy it is to hide the password. Finally, in #renderButtonsOn: and #validateLogin, note the use of #show:onAnswer: rather than #call:

When using a continuation (#call:), control passes to the new component, and then the code returns to the point of the #call: when that component yields control. Using #show:onAnswer:, we don't get that behavior - instead, control passes to the block (the second argument) when the new component yields control. The end result is much the same, so Seaside operates as it normally does - but you do end up with less memory overhead due to fewer context stacks lurking in memory. The upshot at this point is this: use this pattern when developing Seaside apps in VA. You don't have to limit it to VA though; #show:onAnswer: is fully portable.

That about wraps it up for today - next time, we'll get into the posting tool itself.

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:
[st4u120-iPhone.m4v ( Size: 7258281 )]

posted by James Robertson

 Share Tweet This