[Seaside] build drop-down select list when clicked

bobn at rogers.com bobn at rogers.com
Thu Mar 7 14:52:23 UTC 2013

In the grand tradition of Smalltalk, I've decided to roll my own drop-down selection list component. 
'html select' is just too much of a hassle. My component renders a textInput followed by a drop-down button,
and then under the button and aligned to it's right border I render an empty div... 

html label id: self dropDownListId; class: 'flyover'; style: 'top: 16px; '; 
 onMouseOver: (html jQuery id: self dropDownListId) show;  
onMouseOut: (html jQuery id: self dropDownListId) hide;
with: [html space].

...the drop-down button has an 'onClick: ' script...

(html jQuery id: self dropDownListId) load html: [:renderer | 
self renderSelectionListOn: renderer]

...which replaces the drop down list with a rendered list. That's where I can put the lazy get...
(size and position values are set by parameter)

renderSelectionListOn: html

html div style: 'height: 200px; width: 80px; border: 1px solid grey; overflow: auto; position: relative; left: 90px; '; with: [
self getSelectionList 
do: [:each | self renderSelection: each on: html]
separatedBy: [html break]].
html script: (html jQuery id: self dropDownListId) show.

...#getSelectionList  does the lazy value get. 
There is a usage difference with the onMouseOut: causing the list to go away, but overall I'm happy with it.


 From: Paul DeBruicker <pdebruic at gmail.com>
To: bobn at rogers.com; Seaside - general discussion <seaside at lists.squeakfoundation.org> 
Sent: Thursday, February 28, 2013 12:24:29 AM
Subject: Re: [Seaside] build drop-down select list when clicked
I haven't figured out how to get the browser to recognize the changed
value for the select, so the callback get the updated value if the user
changes their choice.  Probably need to clone the select after adding
the options then replace the original with the new version.  I'm not
sure yet.  But it would be handy to know.  So it needs some work but
what I outline below loads a bunch of <option> tags into the <select>
and serializes the select onChange: to the callback.  Just not the value
the user chooses yet.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20130307/aac46fb7/attachment.htm

More information about the seaside mailing list