Event Handling

[nad]

SpiderBasic does an excellent job compiling BASIC to client-side JavaScript/WASM, and the JS interop is powerful.
However, for developers coming from other RAD environments, one gap becomes apparent as applications grow:
Event handling remains largely manual and JavaScript-centric.
Today, UI events typically require:
Writing explicit JavaScript functions
Manually forwarding those events via sb_event()
Dispatching them again inside BASIC using EventParameter()
While this works, it adds a layer of glue code that feels unnecessary given that SpiderBasic already controls the compilation pipeline.
Feature Wish
I’d love to see SpiderBasic provide a first-class event binding abstraction,
where common client-side events can be bound directly to BASIC procedures without explicit JavaScript wrappers.
For example (illustrative syntax only):
BindEvent(#btnPrev, "click", @PrevPage())
or
Procedure PrevPage()
pageNum - 1
EndProcedure
with SpiderBasic generating the necessary JavaScript internally.
Why this would help
Reduces boilerplate JS glue code
Makes SpiderBasic feel more like a cohesive language rather than “BASIC + JS”
Lowers the barrier for database-driven applications that rely on many UI events
Encourages larger, more maintainable SpiderBasic applications
This would not remove or limit direct JavaScript access — advanced users could still use JS when needed — but it would make SpiderBasic far more productive for common application workflows.
I believe this kind of abstraction would strengthen SpiderBasic’s position as a serious client-side development tool rather than just a syntax bridge to JavaScript.
Thank you for considering this, and for the continued work on SpiderBasic.

[Fred]

Did you tried ?

BindGadgetEvent(#Button, @ButtonHandler(), #PB_EventType_LeftClick)

[nad]

I have code to display a page of data with a heading, and search fields in a html <table> . I'm new to spider, so maybe there is something to handle this. The proglem is when displaying the table with html there is no way to use things like buttonGadgets, so I use html "<button onclick=..... Then later in the code I have to write javascript to try and link the <button to a procedure in spiderbasic. Maybe there is a answer and I am missing something. But since spider is in control of the compile maybe it would be possible to do direct links to spider procedures for any triggers like onChange, onMouseover, onLeave etc. here is my code...
;

Code: Select all

 =========================================================
; RENDER PAGE
; =========================================================
Procedure ShowPage()
  Protected offset, sql$, resp$, rows, row, i

  html "<h3>Person Table</h3>"

  html "<button onclick=""sb('prev')"">Prev</button>"
  html " Page " + Str(pageNum) + " / " + Str(totalPages)
  html " <button onclick=""sb('next')"">Next</button>"
  html " &nbsp; Records: " + Str(totalRecords)

  offset = (pageNum - 1) * lpp

  sql$ = "SELECT * FROM person" + where$ +
         " ORDER BY " + sort$ +
         " LIMIT " + Str(lpp) +
         " OFFSET " + Str(offset)

  resp$ = ExecSQL(sql$)
  ParseJSON(0, resp$)
  rows = GetJSONMember(JSONValue(0),"rows")

  html "<table border=1 cellpadding=2 cellspacing=0>"
  html "<tr bgcolor=wheat>"
  html "<th>#</th><th>First</th><th>Last</th><th>Sex</th>"
  html "<th>Birth</th><th>Birth Place</th>"
  html "<th>Death</th><th>Death Place</th>"
  html "</tr>"

  For i = 0 To JSONArraySize(rows)-1
    row = GetJSONElement(rows,i)

    html "<tr>"
    html "<td align=right>" + Str(GetJSONInteger(GetJSONMember(row,"personNum"))) + "</td>"
    html "<td>" + GetJSONString(GetJSONMember(row,"name")) + "</td>"
    html "<td>" + GetJSONString(GetJSONMember(row,"surName")) + "</td>"
    html "<td align=center>" + GetJSONString(GetJSONMember(row,"gender")) + "</td>"
    html "<td>" + GetJSONString(GetJSONMember(row,"birthDate")) + "</td>"
    html "<td>" + GetJSONString(GetJSONMember(row,"birthPlace")) + "</td>"
    html "<td>" + GetJSONString(GetJSONMember(row,"deathDate")) + "</td>"
    html "<td>" + GetJSONString(GetJSONMember(row,"deathPlace")) + "</td>"
    html "</tr>"
  Next

  html "</table>"
EndProcedure

[Peter]

The proglem is when displaying the table with html ...

Is there a need to use an HTML table? Have you ever looked at ListIconGadget()?

BTW: There is an easier way to read the JSON. Feel free to take a look at ExtractJSONList().

P.S.: Your code seems to be missing the plus sign (html + ...)

[nad]

This may be my answer. As a newbe, I'm in a learning curve and have a lot to learn. Spider seems to have a lot of options.
I'll give it a try..
Thanks for the help.

[Ken]

The original wish was something like "I’d love to see SpiderBasic provide a first-class event binding abstraction,
where common client-side events can be bound directly to BASIC procedures without explicit JavaScript wrappers."

I did some tests and I think you have both options available so you can think js as a bonus option.
There is at least two UIs available Gadgets and MobileUI so here is few examples.

MobileUI - no js

Code: Select all

EnableExplicit

Enumeration
  #SearchInput
  #SearchButton
  #ResetButton
  #DataList
  #OutputText
EndEnumeration

; ============================================
; EVENT HANDLER
; ============================================

Procedure MobileEvents()
  Protected row.i
  
  Select EventMobile()
    Case #SearchButton
      Debug "Search: " + GetMobileText(#SearchInput)
      SetMobileText(#OutputText, "Search: " + GetMobileText(#SearchInput))
      
    Case #ResetButton
      SetMobileText(#SearchInput, "")
      SetMobileText(#OutputText, "Reset!")
      
    Case #DataList
      row = GetMobileState(#DataList)
      Debug "Row " + Str(row) + " clicked"
      SetMobileText(#OutputText, "Row " + Str(row + 1) + " selected!")
      
  EndSelect
EndProcedure

; ============================================
; MAIN UI
; ============================================

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  
  ; Toolbar at top
  If ToolBarMobile(#PB_Any)
    TextMobile(#PB_Any, "Data Search Demo", #PB_Mobile_Center)
    CloseMobileContainer()
  EndIf
  
  ; Search row
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding:8px")
    InputMobile(#SearchInput, "", "Enter search term...", #PB_Mobile_Center)
    ButtonMobile(#SearchButton, "Search", #PB_Mobile_Left)
    ButtonMobile(#ResetButton, "Reset", #PB_Mobile_Right)
    CloseMobileContainer()
  EndIf
  
  ; Data list (acts like a table)
  ListMobile(#DataList)
  AddListMobileItem(#DataList, "ID - Name - Dept", #PB_Mobile_Header)
  AddListMobileItem(#DataList, "001 - Alice - Engineering", #PB_Mobile_Tappable | #PB_Mobile_Chevron)
  AddListMobileItem(#DataList, "002 - Bob - Marketing", #PB_Mobile_Tappable | #PB_Mobile_Chevron)
  AddListMobileItem(#DataList, "003 - Carol - Sales", #PB_Mobile_Tappable | #PB_Mobile_Chevron)
  
  ; Output area using HtmlMobile
  HtmlMobile("<div style=" + Chr(34) + "padding:10px;margin:10px;background:#ffffcc;" + Chr(34) + ">")
  TextMobile(#OutputText, "Click a button or row!", #PB_Mobile_Left)
  HtmlMobile("</div>")
  
  CloseMobileContainer()
EndIf

; Bind the event handler
BindEvent(#PB_Event_Mobile, @MobileEvents())

MobileUI-JS Bridge

Code: Select all

EnableExplicit

; ============================================
; PROCEDURE CALLED FROM HTML
; ============================================

Procedure ButtonClicked()
  Debug "Button was clicked!"
EndProcedure

; ============================================
; JAVASCRIPT BRIDGE
; ============================================

Procedure SetupBridge()
  ! window.doClick = function() { f_buttonclicked(); };
EndProcedure

; ============================================
; MAIN
; ============================================

Define Html.s

SetupBridge()

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  
  Html = ~"<div style=\"padding:20px;\">" + 
         ~"<h2>HTML to SpiderBasic Demo</h2>" + 
         ~"<button onclick=\"doClick()\">Click Me</button>" + 
         ~"</div>"
  
  HtmlMobile(Html)
  
  CloseMobileContainer()
  
EndIf

Gadget with both BindGadgetEvent -function and JS Bridge

Code: Select all

EnableExplicit

; ============================================
; NATIVE GADGET EVENT HANDLER
; ============================================

Procedure NativeButtonHandler()
  Debug "Native ButtonGadget clicked! (via BindGadgetEvent)"
EndProcedure

; ============================================
; HTML BUTTON HANDLER (via JS Bridge)
; ============================================

Procedure HtmlButtonClicked()
  Debug "HTML Button clicked! (via JS Bridge)"
EndProcedure

; ============================================
; JAVASCRIPT BRIDGE
; ============================================

Procedure SetupBridge()
  ! window.doHtmlClick = function() { f_htmlbuttonclicked(); };
EndProcedure

; ============================================
; MAIN
; ============================================

Define Html.s

SetupBridge()

If OpenWindow(0, 100, 100, 400, 300, "BindGadgetEvent Demo", #PB_Window_SystemMenu)
  
  ; Native SpiderBasic Button
  ButtonGadget(1, 10, 10, 150, 30, "Native Button")
  BindGadgetEvent(1, @NativeButtonHandler(), #PB_EventType_LeftClick)
  
  ; HTML content using TextGadget
  Html = ~"<div style=\"padding:20px; background:#f0f0f0;\">" + 
         ~"<h3>HTML Section</h3>" + 
         ~"<button onclick=\"doHtmlClick()\">HTML Button</button>" + 
         ~"</div>"
  
  TextGadget(2, 10, 50, 380, 200, Html)
  
EndI