[SF] Configuring events in SmallFaces


	links to this page:

Last updated at 4:48 pm UTC on 31 July 2009

SASE Protocol

SmallFaces widgets can respond SASE messages like #when:send:to:. Setting up these events, the controls are updated on the server immediately (requets / response JavaScript). In the example provided in section synchronization from the client to server the event is configured as follows:

 createFirstNameTextfield
	| pane |
	pane := SFTextField new.
	pane
		name: 'firstName';
		label: 'firstname: ';
		top: 5;		
		when: #changed:
			send: #firstNameChanged:
			to: self.
	^pane

SASE Extensions

#when:send:to:refresh:
As we are in a remote applications context, when a user modify the contents of a widget, the server-side widget must be updated with the appropiate contents (e.g. modify its #value) synchronizing the state in both sides, User Agent representation and Server Side (SmallFaces) representation. To do this, the SmallFaces widget should be configured with #when:send:to:refresh: SASE extension message.
In the example provided in section synchronization from the server to the client the event is configured as follows:

createLastNameTextfield
	| pane|
	pane := SFTextField new.
	pane name: 'lastName';
		label: 'lastname: ';
		top: 5;		
		when: #losingFocus send: #lastNameLossedFocus to: self refresh: (self paneNamed: 'fullName').	
	^pane

Note: It is clear that in order to be able to refresh the widgets on the client, they must have been rendered on the page previously, with the corresponding id attribute (which you can configure sending #styleId: to the widget), and it must respond #refreshOn:. For examples see WAPersonExample or WACheckBoxGroupExample.

#when:send:to:updatePaneValue:refresh:
When you need to synchronize the state of the XHTML representation of a widget (the tag) that isn't the source of any event, you can use the message #when:send:to:updatePaneValue:refresh:. For example like in the login pane of the follows picture

If you want to synchronize the user name and password TextField in the Client with the objects that represents them on the server (SFTextField) when the enter button is pressed, you must configure the button as follows:

	panes := OrderedCollection 
			with: (self paneNamed: 'password')
			with: (self paneNamed: 'username').
	pane := SFButton new.
	pane name: 'login';
		label: 'Enter';
		when: #clicked
			send: #loginButtonPressed
			to: self
 			updatePaneValue: panes
			refresh: (self paneNamed: 'data')

For examples see WASFLoginExample and WASFBrowser.

Full support of JS and Scriptaculous

JavaScript (JS) provides a wealth of possibilities that can not be handled through SASE protocol and the extensions. Therefore, the SF controls can respond #when:evaluateJavascript: configuring this way a plane JS code or Scriptaculous objects.

The events supported are the following:

#changed, #changed:,#changedIndex:
#clicked
#checked, #unchecked
#selected, #selected:, #selectedIndex:
#turnedOff, #turnedOn
#gettingFocus y #losingFocus.