<html><body><div style="color:#000; background-color:#fff; font-family:arial, helvetica, sans-serif;font-size:10pt"><div style="font-family: arial, helvetica, sans-serif; font-size: 10pt;"><span>Paul,</span></div><div style="font-family: arial, helvetica, sans-serif; font-size: 13px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">In the grand tradition of Smalltalk, I've decided to roll my own drop-down selection list component. </div><div style="font-family: arial, helvetica, sans-serif; font-size: 13px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">'html select' is just too much of a hassle. My component renders a textInput followed by a drop-down button,</div><div style="font-family: arial, helvetica, sans-serif; font-size: 13px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">and then under the button and aligned to it's right border I render an empty
div... </div><div style="font-family: arial, helvetica, sans-serif; font-size: 13px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"><br></div><div style="background-color: transparent;"><div style="background-color: transparent;"><font size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>html label id: self dropDownListId; class: 'flyover'; style: 'top: 16px; '; </font></div><div style="background-color: transparent;"><font size="2"><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>onMouseOver: (html jQuery id: self dropDownListId) show; </font></div><div style="background-color: transparent;"><font size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>onMouseOut: (html jQuery id: self dropDownListId) hide;</font></div><div style="background-color: transparent;"><font size="2"><span class="Apple-tab-span"
style="white-space:pre"> </span>with: [html space].</font></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><br></div></div><div style="background-color: transparent;"><div style="background-color: transparent;"><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><font size="2">...the drop-down button has an 'onClick: ' script...</font></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><br></div><div style="background-color: transparent;"><font size="2"><div style="background-color: transparent;"><span class="Apple-tab-span" style="white-space:pre"> </span>(html jQuery id: self dropDownListId) load html: [:renderer | </div><div style="background-color:
transparent;"><span class="Apple-tab-span" style="white-space: pre;"> </span>self renderSelectionListOn: renderer]</div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><br></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;">...which replaces the drop down list with a rendered list. That's where I can put the lazy get...</div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;">(size and position values are set by parameter)</div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><br></div></font></div><div style="background-color: transparent;"><font size="2"><div
style="background-color: transparent;">renderSelectionListOn: html</div><div style="background-color: transparent;"><br></div><div style="background-color: transparent;"><span class="Apple-tab-span" style="white-space:pre"> </span>html div style: 'height: 200px; width: 80px; border: 1px solid grey; overflow: auto; position: relative; left: 90px; '; with: [</div><div style="background-color: transparent;"><span class="Apple-tab-span" style="white-space:pre"> </span>self getSelectionList </div><div style="background-color: transparent;"><span class="Apple-tab-span" style="white-space:pre"> </span>do: [:each | self renderSelection: each on: html]</div><div style="background-color: transparent;"><span class="Apple-tab-span" style="white-space:pre"> </span>separatedBy: [html break]].</div><div style="background-color: transparent;"> </div><div style="background-color: transparent;"><span class="Apple-tab-span" style="white-space: pre;">
</span>html script: (html jQuery id: self dropDownListId) show.</div></font></div></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><font size="2"><br></font></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><font size="2">...#</font><span style="font-size: 13px; background-color: transparent;">getSelectionList does the lazy value get. </span></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><span style="font-size: 13px; background-color: transparent;">There is a usage difference with the onMouseOut: causing the list to go away, but overall I'm happy with it.</span></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size:
13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><font size="2"><br></font></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 13px; font-family: arial, helvetica, sans-serif; font-style: normal;"><font size="2">Bob</font></div></div><div style="font-family: arial, helvetica, sans-serif; font-size: 10pt;"><br></div><div style="font-family: arial, helvetica, sans-serif; font-size: 13px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"><br></div> <div style="font-family: arial, helvetica, sans-serif; font-size: 10pt;"> <div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;"> <div dir="ltr"> <font size="2" face="Arial"> <hr size="1"> <b><span style="font-weight:bold;">From:</span></b> Paul DeBruicker <pdebruic@gmail.com><br> <b><span style="font-weight: bold;">To:</span></b> bobn@rogers.com; Seaside - general discussion
<seaside@lists.squeakfoundation.org> <br> <b><span style="font-weight: bold;">Sent:</span></b> Thursday, February 28, 2013 12:24:29 AM<br> <b><span style="font-weight: bold;">Subject:</span></b> Re: [Seaside] build drop-down select list when clicked<br> </font> </div> <br>I haven't figured out how to get the browser to recognize the changed<br>value for the select, so the callback get the updated value if the user<br>changes their choice. Probably need to clone the select after adding<br>the options then replace the original with the new version. I'm not<br>sure yet. But it would be handy to know. So it needs some work but<br>what I outline below loads a bunch of <option> tags into the <select><br>and serializes the select onChange: to the callback. Just not the value<br>the user chooses yet.<br><...> </div> </div> </div></body></html>