make RB interactive and input type support

Currently RB is not interactive and does not support some important input types such ad datetime-local,color, range and a few others.
And being interactive looks like it may take a while.
This program shows how to make client fields interactive. And shows support for some inputs not currently supported.
It's a lot easier than you think.

EDIT: added interactive drop down <select code

CSSClass ".hide", "{visibility: hidden; height:0px; bprder:none}"
bf$ = "<SPAN STYLE='font-family:Arial; font-weight:700; font-size:12pt'>"

preCustNum$ = "123" ' current customer number
preItemNum$ = "456" ' current item number
preDtl$ = date$() ' Today's date
preClr$ = "#1b9d53" ' light green
preRange$ = "50" ' 50 range
html bf$;"<center><TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 bgcolor=wheat>"

' --------------------------------------
' Customer text input
' --------------------------------------
html "<TR><TD ALIGN='RIGHT'>Customer Num</TD><TD>"
x$ = htInput$("TEXT","custNum",preCustNum,ドル"6","shoCustClick") ' make html TEXT input and make it click cust button on change
button #b1,"shoCustClick",[findCust] ' RB label to go to
#b1 setid("shoCustClick") ' the id of the button
#b1 cssclass("hide") ' hide the button
html "<TD id='custName'></TD></TR>" ' where to show the customer Name

' --------------------------------------
' item number input
' --------------------------------------
html "<TR><TD ALIGN='RIGHT'>Item Num</TD><TD>"
x$ = htInput$("NUMBER","itemNum",preItemNum,ドル"5","shoItemClick") ' make html NUMBER input and make it click item button on change
button #b2,"shoItemClick",[findItem] ' RB label to go to
#b2 setid("shoItemClick") ' the id of the button
#b2 cssclass("hide") ' hide the button
html "<TD id='itemName'></TD></TR>" ' where to show the item Name

' --------------------------------------
' local date and time with popup
' --------------------------------------
html "<TD ALIGN='RIGHT'>Date Time</TD><TD>"
x$ = htInput$("datetime-local","dtl",preDtl,ドル"20","shoDtlClick") ' make html datetime-local input and make it click dtl button on change
button #b3,"shoDtlClick",[findDtl] ' RB label to go to
#b3 setid("shoDtlClick") ' the id of the button
#b3 cssclass("hide") ' hide the button
html "<TD id='dtlName'></TD></TR>" ' where to show the DateTimeLocal (dtl)

' --------------------------------------
' color picker with popup
' --------------------------------------
html "<TD ALIGN='RIGHT'>Color</TD><TD>"
x$ = htInput$("COLOR","clr",preClr,ドル"10","shoClrClick") ' make html COLOR input and make it click dtl button on change
button #b4,"shoClrClick",[findClr] ' RB label to go to
#b4 setid("shoClrClick") ' the id of the button
#b4 cssclass("hide") ' hide the button
html "<TD id='clrName'></TD></TR>" ' where to show the color

' --------------------------------------
' range picker with slider
' --------------------------------------
html "<TD ALIGN='RIGHT'>Range</TD><TD>"
x$ = htInput$("RANGE","range",preRange,ドル"20","shoRangeClick") ' make html COLOR input and make it click range button on change
button #b5,"shoRangeClick",[findRange] ' RB label to go to
#b5 setid("shoRangeClick") ' the id of the button
#b5 cssclass("hide") ' hide the button
html "<TD id='rangeName'></TD></TR>" ' where to show the range

' --------------------------------------
' Drop Down
' -------------------------------------- ' Drop needs hidden input field to store value
html "<TD ALIGN='RIGHT'>Drop Down</TD><TD>"
html "<input type='hidden' id='selectDrop' name='selectDrop'>" ' Hidden input to store selection
html "<select id='selDrop' onchange=""document.getElementById('selectDrop').value = this.value; document.getElementById('dropClick').click();"">"
html "<option value=''>Drop Down</option>"
html "<option value='None'>None</option>"

for i = 1 to 10
html "<option value='drp";i;"'>drp";i;"</option>" ' show 10 items in drop down
next i

html "</select>" ' end select

button #b6,"shoRangeClick",[findDrop] ' RB label to go to
#b6 setid("dropClick") ' the id of the button
#b6 cssclass("hide") ' hide the button

html "<TD id='dropName'></TD></TR>" ' where to show the Drop By

' ------------------------
' messages
' ------------------------
html "<TR><TD ALIGN='RIGHT'>Messages</TD><TD COLSPAN=2 id='msg' name='msg'></TD>" ' Area to display Messages
html "</TR></TABLE>"

wait

' -------------------------------------------
' customer validation
'-------------------------------------------
[findCust]
custNum$ = trim$(#request get$("custNum"))
x$ = shoVAL$(custNum,ドル"custNum") ' JS onChange clears this so put it back

if custNum$ = "" then ' check for blank
x$ = shoVAL$(preCustNum,ドル"custNum") ' JS onChange clears this so put it back
x$ = shoHTML$("Invalid Customer","custName") ' place invalid customer in the customer name area
x$ = shoERROR$("We do not take nothing from anyone","msg") ' show them the bad boy message
else
preCustNum$ = custNum$ ' hold custNum$ in previous
x$ = shoHTML$("You entered Cust ";custNum,ドル"custName") ' show description of what they entered
x$ = shoHTML$("Thank You for the customer","msg") ' show them the good boy message
end if
wait
' -------------------------------------------
' item validation
'-------------------------------------------
[findItem]
itemNum$ = trim$(#request get$("itemNum")) ' Get item num from client
x$ = shoVAL$(itemNum,ドル"itemNum") ' JS onChange clears this so put it back

if itemNum$ = "" then ' check for blank
x$ = shoVAL$(preDtl,ドル"itemNum") ' JS onChange clears this so put it back
x$ = shoHTML$("Invalid Item","itemName") ' show description as invalid
x$ = shoERROR$("Do not take nothing from noboddy","msg") ' show them the bad boy message
else
preItemNum$ = itemNum$ ' save current entered itemNum
x$ = shoHTML$("You entered Item ";itemNum,ドル"itemName") ' show description what they entered
x$ = shoHTML$("Thank You for the item","msg") ' show them the good boy message
end if
wait
' -------------------------------------------
' dateTime validated by client with popup
'-------------------------------------------
[findDtl]
dtl$ = trim$(#request get$("dtl")) ' Get date and time from client browser
x$ = shoVAL$(dtl,ドル"dtl") ' JS onChange clears this so put it back
if dtl$ = "" then ' check for blank
x$ = shoVAL$(preDtl,ドル"dtl") ' put previous Date Time back to client
x$ = shoHTML$("Invalid Date Time","dtlName") ' Show date and time message
x$ = shoERROR$("We will not take nothing from noboddy","msg") ' show them the bad boy message
else
preDtl$ = dtl$ ' hold previous Date and time
x$ = shoHTML$("You entered date time ";dtl,ドル"dtlName") ' show date and time description
x$ = shoHTML$("Thank You for the Date Time","msg") ' show them the good boy message
end if
wait
' -------------------------------------------
' Color Selection with popup
'-------------------------------------------
[findClr]
clr$ = #request get$("clr") ' Get date and time from client browser
x$ = shoVAL$(clr,ドル"clr") ' JS onChange clears this so put it back
if clr$ = "" then ' check for blank
x$ = shoVAL$(preClr,ドル"clr") ' put previous Date Time back to client
x$ = shoHTML$("Invalid Color","clrName") ' Show date and time message
x$ = shoERROR$("Give me a color.. We want diversity","msg") ' show them the bad boy message
else
preClr$ = clr$ ' hold previous Date and time
x$ = shoHTML$("You entered color ";clr,ドル"clrName") ' show date and time description
x$ = shoHTML$("Thank You for the Color","msg") ' show them the good boy message
end if
wait
' -------------------------------------------
' Range Slider
'-------------------------------------------
[findRange]
range$ = #request get$("range") ' Get range from client browser
x$ = shoVAL$(range,ドル"range") ' JS onChange clears this so put it back
if range$ = "" then ' check for blank
x$ = shoVAL$(preRange,ドル"range") ' put previous Range back to client
x$ = shoHTML$("Invalid Color","rangeName") ' Show range message
x$ = shoERROR$("Give me a range.","msg") ' show them the bad boy message
else
preRange$ = range$ ' hold previous Range
x$ = shoHTML$("You entered range ";range,ドル"rangeName") ' show range description
x$ = shoHTML$("Thank You for the Range","msg") ' show them the good boy message
end if
wait

' -------------------------------------------
' Drop Click
'-------------------------------------------
[findDrop]
drop$ = #request get$("selectDrop") ' Get drop down from client browser
x$ = shoVAL$(drop,ドル"selectDrop") ' JS onChange clears this so put it back
preDrop$ = drop$ ' hold previous Drop
x$ = shoHTML$("You entered Drop ";drop,ドル"dropName") ' show Drop Down description
x$ = shoHTML$("Thank for Dropping by","msg") ' show them the good boy message
wait

' ======================== functions and subroutines ============================

FUNCTION shoHTML$(shoWhat,ドルshoWhere$)
html "<script> document.getElementById('";shoWhere$;"').innerHTML = """;shoWhat$;""";</script>"
END FUNCTION

' --------------------------------------
' same as shoHTML only in red
'---------------------------------------
FUNCTION shoERROR$(shoWhat,ドル shoWhere$)
html "<script>
document.getElementById('";shoWhere$;"').innerHTML = '<FONT COLOR=red>" + shoWhat$ + "';
document.getElementById('itemNum').focus();
</script>"
END FUNCTION

' ----------------------------------------
' show a value into a input document
' ----------------------------------------
FUNCTION shoVAL$(shoWhat,ドルshoWhere$)
html "<script> document.getElementById('";shoWhere$;"').value = """;shoWhat$;""";</script>"
END FUNCTION

' --------------------------------------------------------------------------------
' supply
' type$ - like TEXT, NUMBER, URL and others
' id$ - the id you want to identify it with
' val$ - the value to be displayed
' siz$ - width of input field in number of characters
' clk$ - the id$ of html document you want to have it click when it changes
' --------------------------------------------------------------------------------
FUNCTION htInput$(type,ドルid,ドルval,ドルsiz,ドルclk$)
if lower$(type$) = "range" then
HTML "<INPUT TYPE='";type$;"' min='0' max='100' step='1' id='";id$;"' NAME='";id$;"' value='";val$;"' style='width: ";siz$;"ch;' onChange=document.getElementById('";clk$;"').click(); />"
else
HTML "<INPUT TYPE='";type$;"' id='";id$;"' NAME='";id$;"' value='";val$;"' style='width: ";siz$;"ch;' onChange=document.getElementById('";clk$;"').click(); />"
end if
END FUNCTION


I'm not sure what you mean by interactive. RB2 will have a certain amount of Ajax style functionality out of the gate. I can't say how much because I need to learn more about it.

Right now I am just working to make my previous work on this run properly on the latest version of the Seaside framework. I am getting help from some other Smalltalk programmers to solve certain challenging problems. Hopefully this will be behind me soon and I'll have a version that I can share with you so you can see what it can do. ;)