javascript popups

Avi Bryant avi at beta4.com
Thu Feb 19 19:54:49 UTC 2004


I did some work last night experimenting with ways of doing popup 
windows.  I committed some preliminary support to the 2.5 development 
branch (I'll be doing a 2.5 alpha release very soon), but I thought I'd 
describe it here in case anyone wants to use it in the current version.

The first, simplest thing I did was to add 
#anchorWithPopupUrl:extent:text: to WAHtmlBuilder.  This creates a link 
which will pop up a new window at the given URL with the given size, 
ie,

html anchorWithPopupUrl: 'http://beta4.com/seaside2' extent: 400 at 400 
text: 'Powered by Seaside'.

The code looks like this:

anchorWithPopupUrl: urlString extent: aPoint text: aString
	self anchorWithUrl:
	'javascript:window.open(''',
	urlString,
	''','''',''width=',
	aPoint x asString,
	',height=',
	aPoint y asString,
	',scrollbars=yes,resizable=yes,menubar=yes'')' do: aString.

The next thing I did was to add a simple method to WAHtmlRenderer that 
allows this to take an action block instead of a URL:

anchorWithPopupAction: aBlock extent: aPoint text: aString
	self
		anchorWithPopupUrl: (self urlForAction: aBlock)
		extent: aPoint
		text: aString

Now you can do something like

html anchorWithPopupAction: [self inform: 'Hello world!'] extent: 
400 at 400 text: 'Say hello'.

This will popup a "Hello world!" window, but when you click OK you'll 
see the original page inside the popup.  We don't want that, so we need 
a way to close the popup and continue in the main window.  I did this 
by adding a special response method to WASession named #closePopup:

closePopup
	^ self respond:
		[:url |
		WAGenericResponse new
			nextPutAll: '<html><script>';
			nextPutAll: 'self.close();';
			nextPutAll: 'self.opener.location=',url printString;
			nextPutAll:'</script></html>';
			yourself]

Now if you do:

html
    anchorWithPopupAction: [self inform: 'Hello... '.  self session 
closePopup.  self inform: '... world!']
    extent: 400 at 400
    text: 'Say hello'.

When you click on the link, you'll get "Hello.." in a popup; when you 
click ok, the popup will close and the main window will show 
"...world".

This should allow, for example, the popup progress bar Nevin was 
talking about pretty easily.  It's also good for popup editors (say, to 
add a new event to a calendar) where you want the main page to refresh 
once you've finished editing.

Hope this is useful.

Avi




More information about the Squeak-dev mailing list