|
events
Apr 29, 2009 9:30:58 GMT -5
Post by kokenge on Apr 29, 2009 9:30:58 GMT -5
Does RB have event handling in it's future.
It would be great if it were possible.
I may be wrong, but it looks like RB could do it since it already has code to direct you to a label using buttons and links. Why not add events.
For example suppose you wanted to verify a Customer number: In RB it could look something like: html "<TABLE></TR><TR><TD> CustomerNum:" textbox #custNum,custNum$,6 #custNum onChange [checkCust] #custNum onEntry [defCust] html "</TD><TD id=custName></TD></TR></TABLE>" wait [checkCust] do sql command to look up customer. do Javascript to display customer name or error at id=custName wait
Currently to do this takes lots of Javascript code and a backend RB program.
Just asking ... I'm writing a lot of code to do this, and if I see something like this in RB's future, it'll save tons of code.
This would certainly add all kinds of new options to RB that I would like to take advantage of..
Just an idea.. Thanks...
|
|
|
events
Apr 29, 2009 10:59:45 GMT -5
Post by davos1 on Apr 29, 2009 10:59:45 GMT -5
well, I guess this is one of the most wanted features in RB, because it defines how one should program all the links and buttons: inside RB or calling all the code externally via HTML or coding using JS, and when you have coded all your program in a way you dont want to rewrite all again... maybe it could be easy to Carl to add a parameter to manage the events like mouse events.
|
|
|
events
Apr 29, 2009 13:08:16 GMT -5
Post by Carl Gundel - admin on Apr 29, 2009 13:08:16 GMT -5
well, I guess this is one of the most wanted features in RB, because it defines how one should program all the links and buttons: inside RB or calling all the code externally via HTML or coding using JS, and when you have coded all your program in a way you dont want to rewrite all again... maybe it could be easy to Carl to add a parameter to manage the events like mouse events. This sort of thing is commonly called Ajax. This is precisely the thing I am working on for the next release and it is the hardest and most ambitious single feature of v1.0.2. It will start off being a general and very easy Ajax support and should evolve over time into something that power users can do tricky things with. I'm learning about this myself as I go. -Carl
|
|
|
events
Apr 29, 2009 13:24:40 GMT -5
Post by kokenge on Apr 29, 2009 13:24:40 GMT -5
Thanks Carl.
This will make things really easy, give it lots of power, and really make RB stand out.
Basically I wrote my own mini Ajax. It allows you to fire on any event, and run anything including RB on the server. The server side simply executes PRINT statements with paired field ID and data. It allows multiple print statements so you can send back lots of stuff. But it's JS and you have to use html INPUT fields. So it gets messy.
I guess I'll shelve my stuff and wait for the next release.
Can't wait to give it a try! Is the release a long way off??
Dan
|
|
|
events
Apr 29, 2009 14:27:44 GMT -5
Post by Carl Gundel - admin on Apr 29, 2009 14:27:44 GMT -5
I'd be very interested to know in more detail what you've done. What is it use for? How does it work? I'm sure I can learn something useful from your experience.
-Carl
|
|
|
events
Apr 29, 2009 17:45:40 GMT -5
Post by davos1 on Apr 29, 2009 17:45:40 GMT -5
I found an example where a mouse event could call any js function, in a kind of basic syntax:
onEvent "mousedown" call click
then, they simply replace that words to a JS syntax:
else if (line.indexOf("onEvent ") >= 0) { var end = line.lastIndexOf("\""); lines = line.replace("onEvent ", "onEvent(").replace(" call ", ",") + ")"; }
and then run that code:
// Handle events
function onEvent(event, handler) { addEventListener(event, handleEvent, false); function handleEvent(event) { mousex = Math.floor(event.clientX / pixelWidth); mousey = Math.floor(event.clientY / pixelHeight); key = event.which; handler(); } }
so, calling any function or subroutine from any mouse button inside RB will be great. and we could have timing-events
;D
|
|
|
events
Apr 29, 2009 21:01:11 GMT -5
Post by kokenge on Apr 29, 2009 21:01:11 GMT -5
The JS I wrote can be fired on just about any event. It does not do anything fancy like sliders or track your cursor. It simply responds to events. In my case that is 99.9% of what I need, and if I need the sliders or something fancy, there are systems I can download. Example code running a RB program called abe using a onChange event: It could have been a onBlur event or anything: Anything enclosed in vertical bars (|) sends the data in the field, else it sends the data. html "<INPUT TYPE='TEXT' id='custid' SIZE=20 onChange=""server('/seaside/go/runbasicpersonal?app=abe&funct=custid&|custid|');"">"
Here I use a separation character of &. However it's up to you because you determine what to do with the data no the backend program. I send funct=custId.. I use that to determine what code to run in the backend. That way you can have one backend doing multiple things depending on what function to run. I've use timers to run the backend. In one example I run the backend every second to read gauge information. To send stuff back you simply use a raw with 2 pairs, the id to display to and the data separated with a "|" again. If you need to send a vertical bar you need to replace it with two colons :: and the javascript converts it to a verticle bar. Unfortunitely you have to write html <INPUT statements, and you need an extra project for the backent. Here is an example called a.bas that runs a backend project called abe.bas. As you can see the Ajax javascript can serve any backend and the backend can send as much data back to as many fields as you like, This is still in test so you may get some debug alert stuff. The a.bas project TITLEBAR "Event Test"
' --------------------------------------- ' Backend communications ' --------------------------------------- html "<script language='javascript'> <!--
function createRequestObject() { var ro; var browser = navigator.appName; if(browser == 'Microsoft Internet Explorer') { ro = new ActiveXObject('Microsoft.XMLHTTP'); } else { ro = new XMLHttpRequest(); } return ro; }
var http = createRequestObject();
function trim(string) { while (string.substring(0,1) == ' ') { string = string.substring(1, string.length); } while (string.substring(string.length-1, string.length) == ' ') { string = string.substring(0,string.length-1); } return string; }
function handleResponse() { if(http.readyState == 4) { var response = http.responseText; //alert ('got back from server response:' + response); var at = 0; // --- strip leading junk ---- x = response.substring(0,1); while (x < '0') { response = response.substring(1); x = response.substring(0,1); } var update = new Array(); if(response.indexOf('|' != -1)) { update = response.split('|'); x = update.length; // alert ('update length:' + x); for (i=0;i<x;i++) { update = update.replace(/;;/g ,'|'); } for (i=1;i<x;i=i+2) { at = i - 1; update[at] = trim(update[at]); // alert ('at:' + at + '|update[at]:' + update[at] + '|i:' + i + '|update:' + update); try { ss = document.getElementById(update[at]); ssv = ss.value; sse = ss.element; sst = ss.title; ssn = ss.name; ssi = ss.id; ssh = ss.innerHTML; // alert ('ss:' + ss + '|ssv:' + ssv + '|sse:' + sse + '|ssn:' + ssn + '|ssi:' + ssi + '|ssh:' + ssh + '|at:' + update[at] + '|i:' + update ); if (ssv != undefined) ss.value = update; else if (ssh != undefined) ss.innerHTML = update; } catch(err) { alert ('Invalid display field:' + update[at]); } } } } }
function trim(stringToTrim) { return stringToTrim.replace(/^\s+|\s+$/g,""""); } function ltrim(stringToTrim) { return stringToTrim.replace(/^\s+/,""""); } function rtrim(stringToTrim) { return stringToTrim.replace(/\s+$/,""""); } function server(prog) { prog = ltrim(prog); // Left trim rs = http.readyState; // see if the previous task it done - state must be 0 if (rs == 4) rs = 0; if (rs != 0) { rs = 0; // why don't this work / try { rs = http.readyState; // see if the previous task is done - state must be 0 } catch(err) { rs = 1; alert ('Server Busy. Please try again. Thank you and have a nice day ' + rs); } } if (rs == 0) { prog1 = ''; xx = ''; if(prog.indexOf('|' != -1)) { val = prog.split('|'); for ( key in val) { // alert('key:' + key + ' |val:' + val[key]); x = ''; xx = val[key]; if (key & 1) { try { x = document.getElementById(xx).value; toe = document.getElementById(xx).type; // type of element chk = document.getElementById(xx).checked; prog1 = prog1 + x; } catch(err) { // alert ('--error----xx:' + xx + '|err:' + err.description); prog1 = prog1 + err.description; } // alert ('------x:' + x + '| toe:' + toe + '| chk:' + chk); } else prog1 = prog1 + xx; } } // alert ('server side get program| prog1:' + prog1); http.open('get', prog1); http.onreadystatechange = handleResponse; http.send(null); } } //--></script> "
html "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR><TD BGCOLOR=#FF9966 id=errMsg></TD></TR> <TR><TD BGCOLOR=#FFFF66 id=wrnMsg></TD></TR> <TR><TD BGCOLOR=#99FFCC id=infoMsg></TD></TR> </TABLE>"
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0>" html "<TR><TD BGCOLOR=#CCCCE5 ALIGN=RIGHT>Customer Id</TD><TD>"
html "<INPUT TYPE='TEXT' id='custid' SIZE=20 onChange=""server('/seaside/go/runbasicpersonal?app=abe&funct=custid&|custid|');"">"
html "</TD></TR><TR><TD BGCOLOR=#CCCCE5 ALIGN=RIGHT>Customer Name</TD>" html "<TD id=cname></TD></TR>" html "<TR><TD BGCOLOR=#CCCCE5 ALIGN=RIGHT>Address</TD>" html "<TD id=caddr></TD></TR>" html "<TR><TD BGCOLOR=#CCCCE5 ALIGN=RIGHT>Product Id</TD><TD>"
html "<INPUT TYPE='TEXT' id='prodid' SIZE=20 onChange=""server('/seaside/go/runbasicpersonal?app=abe&funct=prodid&|prodid|&|custid|');"">"
html "</TD></TR><TR><TD BGCOLOR=#CCCCE5 ALIGN=RIGHT>Product Descr</TD>" html "<TD id=pdescr></TD></TR>" html "</TABLE>"
wait end
This is the a backend project called abe.bas a$ = UrlKeys$ funct$ = word$(UrlKeys$,2,"&") funct$ = word$(funct$,2,"=")
sendBack$ = "infoMsg|Data Received ";UrlKeys$;"|wrnMsg|Function:";funct$;"|"
' ---------------------------------- ' Customer ID processing ' ---------------------------------- if funct$ = "custid" then custid$ = word$(a$,3,"&") if custid$ = "" then sendBack$ = sendBack$ + "errMsg|Customer id s blank|" goto [sendIt] end if sendBack$ = sendBack$ + "cname|Customer name for id:";custid$;"|" sendBack$ = sendBack$ + "caddr|Customer addr for id:";custid$;"|" end if
' ---------------------------------- ' Date Pciker ' ---------------------------------- if funct$ = "datePick" then where$ = word$(a$,3,"&") sendBack$ = sendBack$ + where$;"| date picker|" end if
' ---------------------------------- ' product ID processing ' ---------------------------------- if funct$ = "prodid" then prodid$ = word$(a$,3,"&") custid$ = word$(a$,4,"&") if custid$ = "" then sendBack$ = sendBack$ + "errMsg |No Customer ID for product id:";prodid$;"|" goto [sendIt] end if sendBack$ = sendBack$ + "pdescr|Product id:";prodid$;" for Customer id:";custid$;"|" end if
[sendIt] raw sendBack$ wait end
|
|
|
events
Apr 29, 2009 21:16:18 GMT -5
Post by Carl Gundel - admin on Apr 29, 2009 21:16:18 GMT -5
You've done some interesting stuff. Would you consider writing a tutorial for the Scripting area? -Carl
|
|
|
events
Apr 30, 2009 3:55:00 GMT -5
Post by kokenge on Apr 30, 2009 3:55:00 GMT -5
I would, but honestly I don't know much about it. It took me all day to hack my way through this JS code.
|
|
|
events
Apr 30, 2009 22:18:01 GMT -5
Post by BillSturm on Apr 30, 2009 22:18:01 GMT -5
You are doing better than you think, I know I couldn't hack through all that JS code in one day...
|
|
|
events
May 1, 2009 15:20:37 GMT -5
Post by Carl Gundel - admin on May 1, 2009 15:20:37 GMT -5
Currently I have a simple Ajax proof of concept implemented which permits the refreshing of rendered objects on a page. This is pretty flexible, but the goal is to extend it to work also with any page element with an id. Here is a really simple example. I reworked the spirals example so that the drawing is performed by a separate object called spiralRenderer. When you run the program, clicking on the Draw link causes the object rerender the spiral, and then Run BASIC replaces only that part of the page. It's a nice start. Clearly there is more work to be done. For a real Ajax style example you should be able to simplly change the shape or color list selection and the new graphics should be drawn instantly without even needing a Draw link. We'll get there. -Carl 'ajaxSpirals.bas 'declare css cssid #boxes, "{ padding: 4px; background: #EEF }" cssid #colorBox, "{ padding: 4px; background: #FCC; width: 100px; float: left; }" cssid #shapeBox, "{ padding: 4px; background: #CFC; width: 100px; }" cssid #specialText, "{ color: "; color$;"; font-family: ""Times New Roman""; font-size: 20pt}"
dim color$(2) color$(0)="red" color$(1)="green" color$(2)="blue" color$ = "green"
dim shape$(2) shape$(0)="square" shape$(1)="triangle" shape$(2)="circle" shape$ = "triangle"
run "spiralRenderer", #spiral
[showAll] cls html "<h2>Spirals, a Listbox demo</h2>"
div boxes div colorBox listbox #color, color$(), 5 #color select(color$) end div div shapeBox listbox #shape, shape$(), 3 #shape select(shape$) end div end div
link #go, "Draw", [handleSelection] print render #spiral #go ajax("#spiral") wait
[handleSelection] color$ = #color selection$() shape$ = #shape selection$() #spiral draw(color$, shape$) wait global #area defaultColor$ = "green" defaultShape$ = "triangle" graphic #area, 300, 200 #self draw(defaultColor$, defaultShape$) wait
function draw(color$, shape$) cls #area cls() #area color(color$) #area place(150, 100) select case shape$ case "square" for x = 1 to 150 #area go(x) : #area turn(91) next x case "triangle" for x = 1 to 170 #area go(x) : #area turn(121) next x case "circle" for x = 1 to 510 #area go(x/30) : #area turn(9) next x end select render #area end function
|
|