BBjWebEventOptions::setCode

Description

In BBj 24.00 and higher, this method defines additional JavaScript code to be run in the context of the client-side BBjWebComponent event handler.

Syntax

Return Value Method

BBjWebEventOptions

setCode(String code)

Parameters

Parameter Description

code

JavaScript code to be run in the context of the client-side BBjWebComponent event handler.

Return Value

Returns a reference to the BBjWebEventOptions object.

Remarks

This would typically be used to specify additional event processing like preventDefault or stopPropagation, but it can include arbitrary JavaScript code. The event and component are available as the JavaScript variables event and component.

Example 1 (Shoelace)

rem ' BBjWebComponent (Shoelace)

sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
title$ = "BBjWebComponent"
flags$ = $00090083$
window! = sysgui!.addWindow(5,5,300,800,title$,flags$)
window!.setCallback(window!.ON_CLOSE,"eoj")
browser! = bbjapi().getWebManager(err=oops)
browser!.setCallback(browser!.ON_SCRIPT_LOADED,"loaded",err=oops)
browser!.setCallback(browser!.ON_SCRIPT_FAILED,"failed",err=oops)
browser!.setCallback(browser!.ON_STYLE_LOADED,"loaded",err=oops)
browser!.setCallback(browser!.ON_STYLE_FAILED,"failed",err=oops)

url$ = "https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"
top = 1
attributes$ = "type=module"
browser!.injectScriptUrl(url$, top, attributes$)

url$ = "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@latest/cdn/themes/light.css"
top = 1
attributes$ = ""
browser!.injectStyleUrl(url$, top, attributes$)

url$ = "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@latest/cdn/themes/dark.css"
top = 1
attributes$ = ""
browser!.injectStyleUrl(url$, top, attributes$)

rem ' https://shoelace.style/getting-started/installation
url$ = "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@latest/cdn/shoelace.js"
url$ = "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@latest/cdn/shoelace-autoloader.js"
top = 1
attributes$ = "type=module"
browser!.injectScriptUrl(url$, top, attributes$)

tagName$ = "fast-button"
fast_button! = window!.addWebComponent(101,25,25,100,25,tagName$)
fast_button!.setText(tagName$)
fast_button!.setStyle("width","")
fast_button!.setStyle("height","")
tooltip$ = "https://www.fast.design/docs/components/button"
fast_button!.setAttribute("title",tooltip$)
fast_button!.setAttribute("appearance","accent")
fast_button!.setCallback(fast_button!.ON_DEFINED,"event")
fast_button!.setCallback(fast_button!.ON_MOUSE_ENTER,"event")
fast_button!.setCallback(fast_button!.ON_MOUSE_EXIT,"event")
fast_button!.setCallback(fast_button!.ON_GAINED_FOCUS,"event")
fast_button!.setCallback(fast_button!.ON_LOST_FOCUS,"event")
fast_button!.setCallback("click","event")

light! = window!.addRadioButton(102,125,25,75,25,"Light",$0020$)
light!.setCallback(light!.ON_CHECK_ON,"light")

dark! = window!.addRadioButton(103,200,25,75,25,"Dark",$0020$)
dark!.setCallback(dark!.ON_CHECK_ON,"dark")

theme! = window!.addRadioGroup()
theme!.add(light!)
theme!.add(dark!)

tagName$ = "sl-button"

sl_button! = window!.addWebComponent(104,25,75,250,25,tagName$)
sl_button!.setProperty("size","small")
sl_button!.setText(tagName$)
tooltip$ = "https://shoelace.style/components/button"
sl_button!.setAttribute("title",tooltip$)
sl_button!.setCallback(sl_button!.ON_DEFINED,"event")
sl_button!.setCallback(sl_button!.ON_MOUSE_ENTER,"event")
sl_button!.setCallback(sl_button!.ON_MOUSE_EXIT,"event")
sl_button!.setCallback(sl_button!.ON_GAINED_FOCUS,"event")
sl_button!.setCallback(sl_button!.ON_LOST_FOCUS,"event")
sl_button!.setCallback("click","event")

sl_button! = window!.addWebComponent(105,25,125,250,25,tagName$)
sl_button!.setAttribute("pill","")
sl_button!.setText(tagName$+" pill")
tooltip$ = "https://shoelace.style/components/button"
sl_button!.setAttribute("title",tooltip$)
sl_button!.setCallback(sl_button!.ON_DEFINED,"event")
sl_button!.setCallback(sl_button!.ON_MOUSE_ENTER,"event")
sl_button!.setCallback(sl_button!.ON_MOUSE_EXIT,"event")
sl_button!.setCallback(sl_button!.ON_GAINED_FOCUS,"event")
sl_button!.setCallback(sl_button!.ON_LOST_FOCUS,"event")

tagName$ = "sl-switch"

sl_switch! = window!.addWebComponent(106,25,175,150,25,tagName$)
sl_switch!.setProperty("size","medium")
sl_switch!.setText(tagName$)
tooltip$ = "https://shoelace.style/components/switch"
sl_switch!.setAttribute("title",tooltip$)
sl_switch!.setCallback(sl_switch!.ON_DEFINED,"event")
sl_switch!.setCallback(sl_switch!.ON_EXECUTE_SCRIPT,"event")
sl_switch!.setCallback(sl_switch!.ON_MOUSE_ENTER,"event")
sl_switch!.setCallback(sl_switch!.ON_MOUSE_EXIT,"event")
sl_switch!.setCallback(sl_switch!.ON_GAINED_FOCUS,"event")
sl_switch!.setCallback(sl_switch!.ON_LOST_FOCUS,"event")
sl_switch!.setCallback("sl-change","webevent")
sl_switch!.clearCallback("sl-change")
options! = sl_switch!.newEventOptions()
options!.setCode("console.log('testing custom event code.')")
options!.setFilter("event.target.checked")
options!.addItem("checked","event.target.checked")
sl_switch!.setCallback("sl-change","webevent",options!)

button! = window!.addButton(107,200,175,75,25,"Click",$$)
button!.setCallback(button!.ON_BUTTON_PUSH,"click")

tagName$ = "sl-button-group"

sl_button_group! = window!.addWebComponent(108,25,225,200,25,tagName$,$$)
tooltip$ = "https://shoelace.style/components/button-group"
sl_button_group!.setAttribute("title",tooltip$)
sl_button_group!.setCallback(sl_button_group!.ON_DEFINED,"event")

left! = window!.addWebComponent(201,0,0,0,0,"sl-button",$0010$)
left!.setAttribute("title","left")
left!.setCallback(left!.ON_DEFINED,"event")
left!.setCallback(left!.ON_MOUSE_ENTER,"event")
left!.setCallback(left!.ON_MOUSE_EXIT,"event")
left!.setCallback(left!.ON_GAINED_FOCUS,"event")
left!.setCallback(left!.ON_LOST_FOCUS,"event")
left!.setCallback("click","event")
left!.setText("Left")

center! = window!.addWebComponent(202,0,0,0,0,"sl-button",$0010$)
center!.setAttribute("title","center")
center!.setCallback(center!.ON_DEFINED,"event")
center!.setCallback(center!.ON_MOUSE_ENTER,"event")
center!.setCallback(center!.ON_MOUSE_EXIT,"event")
center!.setCallback(center!.ON_GAINED_FOCUS,"event")
center!.setCallback(center!.ON_LOST_FOCUS,"event")
center!.setCallback("click","event")
center!.setText("Center")

right! = window!.addWebComponent(203,0,0,0,0,"sl-button",$0010$)
right!.setAttribute("title","right")
right!.setCallback(right!.ON_DEFINED,"event")
right!.setCallback(right!.ON_MOUSE_ENTER,"event")
right!.setCallback(right!.ON_MOUSE_EXIT,"event")
right!.setCallback(right!.ON_GAINED_FOCUS,"event")
right!.setCallback(right!.ON_LOST_FOCUS,"event")
right!.setCallback("click","event")
right!.setText("Right")

sl_button_group!.setSlot(left!)
sl_button_group!.setSlot(center!)
sl_button_group!.setSlot(right!)

tagName$ = "input"
input! = window!.addWebComponent(109,235,225,40,30,tagName$,$$)
input!.setProperty("autocomplete","off")
input!.setAttribute("title","keydown")
options! = input!.newEventOptions()
options!.setCode("event.preventDefault()")
options!.addItem("key","event.key")
options!.addItem("code","event.code")
options!.addItem("location","event.location")
options!.addItem("ctrlKey","event.ctrlKey")
options!.addItem("shiftKey","event.shiftKey")
options!.addItem("altKey","event.altKey")
options!.addItem("metaKey","event.metaKey")
input!.setCallback("keydown","keydown",options!)

rem https://shoelace.style/components/color-picker

tagName$ = "sl-color-picker"

sl_color_picker! = window!.addWebComponent(204,25,275,40,25,tagName$)
sl_color_picker!.setProperty("size","medium")
sl_color_picker!.setAttribute("title","https://shoelace.style/components/color-picker")
r = rnd(255), g = rnd(255), b = rnd(255)
value$ = "#" + hta(chr(r)) + hta(chr(g)) + hta(chr(b))
sl_color_picker!.setProperty("value",value$)

hex! = window!.addButton(205,75,275,50,35,"hex",$$)
hex!.setCallback(hex!.ON_BUTTON_PUSH,"color")

rgb! = window!.addButton(206,125,275,50,35,"rgb",$$)
rgb!.setCallback(rgb!.ON_BUTTON_PUSH,"color")

hsl! = window!.addButton(207,175,275,50,35,"hsl",$$)
hsl!.setCallback(hsl!.ON_BUTTON_PUSH,"color")

hsv! = window!.addButton(208,225,275,50,35,"hsv",$$)
hsv!.setCallback(hsv!.ON_BUTTON_PUSH,"color")

tagName$ = "sl-card"
sl_card! = window!.addWebComponent(300,25,310,250,25,tagName$,$$)
sl_card!.setText("This is a kitten, but not just any kitten. This kitten likes walking along pallets.")
tooltip$ = "https://shoelace.style/components/card"
sl_card!.setAttribute("title",tooltip$)
sl_card!.setCallback(sl_card!.ON_DEFINED,"event")
sl_card!.setCallback(sl_card!.ON_MOUSE_ENTER,"event")
sl_card!.setCallback(sl_card!.ON_MOUSE_EXIT,"event")
sl_card!.setCallback(sl_card!.ON_GAINED_FOCUS,"event")
sl_card!.setCallback(sl_card!.ON_LOST_FOCUS,"event")
sl_card!.setCallback("click","event")
sl_card!.setStyle("font","16px sans-serif")
sl_card!.setStyle("color","var(--sl-color-neutral-900)")
sl_card!.setStyle("padding","1rem")

sl_card_image! = window!.addWebComponent(301,0,0,0,0,"img")
sl_card_image!.setCallback(sl_card_image!.ON_DEFINED,"event")
sl_card_image!.setAttribute("src","https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80")
sl_card_image!.setAttribute("alt","A kitten walks towards camera on top of pallet.")
sl_card_image!.setAttribute("slot","image")

sl_card_header! = window!.addWebComponent(302,0,0,0,0,"span")
sl_card_header!.setCallback(sl_card_header!.ON_DEFINED,"event")
sl_card_header!.setHtml("<h1>A cat</h1>")
sl_card_header!.setAttribute("slot","header")

sl_card_footer! = window!.addWebComponent(304,0,0,0,0,"span")
sl_card_footer!.setCallback(sl_card_footer!.ON_DEFINED,"event")
sl_card_footer!.setHtml("<small>Note: some people are more into dogs.</small>")
sl_card_footer!.setAttribute("slot","footer")

sl_card!.setSlot("image",sl_card_image!)
sl_card!.setSlot("header",sl_card_header!)
sl_card!.setSlot("footer",sl_card_footer!)

status! = window!.addStatusBar(99)

EventHandler! = new EventHandler()
EventHandler!.setStatusBar(status!)
sl_button!.setCallback("click",EventHandler!,"onWebEvent")

process_events

oops:
  i = msgbox("Not supported in this client.")
eoj:
  release

loaded:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()+" url="+str(event!.getUrl())
  System.out.println(msg$)
return

failed:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()+" url="+str(event!.getUrl())
  System.err.println(msg$)
  i = msgbox(msg$,16)
return

keydown:
rem event key = 3
rem event code = Digit3
rem event location = 0
rem event ctrlKey = false
rem event shiftKey = false
rem event altKey = false
rem event metaKey = false
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()
  msg$ = msg$ + " " + event!.getEventType()
  eventMap$ = ""
  map! = event!.getEventMap()
  iterator! = map!.keySet().iterator()
  while iterator!.hasNext()
    key$ = iterator!.next()
    value! = map!.get(key$)
    value$ = String.valueOf(value!)
    eventMap$ = eventMap$ + " " + key$ + " = " + value$
  wend
  msg$ = msg$ + " " + eventMap$
  status!.setText(msg$)
  System.out.println(msg$)
return

event:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()
  msg$ = msg$ + " " + event!.getEventType(err=*next)
  msg$ = msg$ + " custom=" + Boolean.toString(event!.isCustom(err=*next))
  if event!.getControl() <> null() then
     msg$ = msg$ + " " + event!.getControl().getTagName(err=*next)
     msg$ = msg$ + " " + str(event!.getControl().getID())
     msg$ = msg$ + " " + event!.getControl().getText()
  endif
  status!.setText(msg$)
  System.out.println(msg$)
return

webevent:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()
  msg$ = msg$ + " " + event!.getEventType()
  msg$ = msg$ + " "+ event!.getWebComponent().getTagName()
  if event!.getControl() <> null() then
     msg$ = msg$ + " "+ event!.getControl().getText()
  endif
  status!.setText(msg$)
  System.out.println(msg$)
  eventMap$ = "getJsonString(): " + event!.getJsonString() + $0a0a$
  eventMap$ = ""
  map! = event!.getEventMap()
  iterator! = map!.keySet().iterator()
  while iterator!.hasNext()
    key$ = iterator!.next()
    value! = map!.get(key$)
    value$ = String.valueOf(value!)
    eventMap$ = eventMap$ + key$ + " = " + value$ + $0a$
  wend
  i = msgbox(eventMap$,32768,event!.getEventName()+" "+event!.getEventType()+" getEventMap")
return

class public EventHandler
  field public BBjStatusBar StatusBar!
  method public void onWebEvent(BBjWebEvent event!)
    msg$ = date(0:"%Hz:%mz:%sz.%tz onWebEvent ")+event!.getEventName()
    msg$ = msg$ + " " + event!.getEventType()
    msg$ = msg$ + " "+ event!.getWebComponent().getTagName()
    if event!.getControl() <> null() then
       msg$ = msg$ + " "+ event!.getControl().getText()
    endif
    #StatusBar!.setText(msg$)
    System.out.println(msg$)
  methodend
classend

click:
  sl_switch!.executeAsyncScript("component.click()")
return

rem ' https://shoelace.style/components/color-picker#methods

color:
  format$ = sysgui!.getLastEvent().getControl().getText()
  method$ = "getFormattedValue('"+format$+"')"
  color$ = sl_color_picker!.executeScript(method$)
  i = msgbox(color$,0,method$)
return

rem ' https://shoelace.style/getting-started/themes

light:
  browser!.removeClass("sl-theme-dark")
  browser!.addClass("sl-theme-light")
  browser!.setTheme("light")
  gosub classList
return

dark:
  browser!.removeClass("sl-theme-light")
  browser!.addClass("sl-theme-dark")
  browser!.setTheme("dark")
  gosub classList
return

classList:
  classList! = browser!.getClassList()
  classList$ = "getClassList: " + str(classList!)
  status!.setText(classList$)
return

Example 2 (Web Awesome)

rem ' BBjWebComponent (Web Awesome)

sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
title$ = "BBjWebComponent"
flags$ = $00090083$
window! = sysgui!.addWindow(5,5,300,800,title$,flags$)
window!.setCallback(window!.ON_CLOSE,"eoj")
browser! = bbjapi().getWebManager(err=oops)
browser!.setCallback(browser!.ON_SCRIPT_LOADED,"loaded",err=oops)
browser!.setCallback(browser!.ON_SCRIPT_FAILED,"failed",err=oops)
browser!.setCallback(browser!.ON_STYLE_LOADED,"loaded",err=oops)
browser!.setCallback(browser!.ON_STYLE_FAILED,"failed",err=oops)

url$ = "https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"
top = 1
attributes$ = "type=module"
browser!.injectScriptUrl(url$, top, attributes$)

rem ' https://webawesome.com/docs#referencing-necessary-styles
url$ = "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@latest/dist-cdn/styles/themes/default.css"
top = 1
attributes$ = ""
browser!.injectStyleUrl(url$, top, attributes$)

rem ' https://webawesome.com/docs/
rem ' https://webawesome.com/docs/resources/migrating-from-shoelace
url$ = "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@latest/dist-cdn/webawesome.js"
url$ = "https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@latest/dist-cdn/webawesome.loader.js"
top = 1
attributes$ = "type=module"
browser!.injectScriptUrl(url$, top, attributes$)

tagName$ = "fast-button"
fast_button! = window!.addWebComponent(101,25,25,100,25,tagName$)
fast_button!.setText(tagName$)
fast_button!.setStyle("width","")
fast_button!.setStyle("height","")
tooltip$ = "https://www.fast.design/docs/components/button"
fast_button!.setAttribute("title",tooltip$)
fast_button!.setAttribute("appearance","accent")
fast_button!.setCallback(fast_button!.ON_DEFINED,"event")
fast_button!.setCallback(fast_button!.ON_MOUSE_ENTER,"event")
fast_button!.setCallback(fast_button!.ON_MOUSE_EXIT,"event")
fast_button!.setCallback(fast_button!.ON_GAINED_FOCUS,"event")
fast_button!.setCallback(fast_button!.ON_LOST_FOCUS,"event")
fast_button!.setCallback("click","event")

light! = window!.addRadioButton(102,125,25,75,25,"Light",$0020$)
light!.setCallback(light!.ON_CHECK_ON,"light")

dark! = window!.addRadioButton(103,200,25,75,25,"Dark",$0020$)
dark!.setCallback(dark!.ON_CHECK_ON,"dark")

theme! = window!.addRadioGroup()
theme!.add(light!)
theme!.add(dark!)

size$ = iff(info(3,6)="5","m","s")

tagName$ = "wa-button"

wa_button! = window!.addWebComponent(104,25,75,250,25,tagName$)
wa_button!.setProperty("size",size$)
wa_button!.setProperty("appearance","filled-outlined")
wa_button!.setText(tagName$)
tooltip$ = "https://webawesome.com/docs/components/button/"
wa_button!.setAttribute("title",tooltip$)
wa_button!.setCallback(wa_button!.ON_DEFINED,"event")
wa_button!.setCallback(wa_button!.ON_MOUSE_ENTER,"event")
wa_button!.setCallback(wa_button!.ON_MOUSE_EXIT,"event")
wa_button!.setCallback(wa_button!.ON_GAINED_FOCUS,"event")
wa_button!.setCallback(wa_button!.ON_LOST_FOCUS,"event")
wa_button!.setCallback("click","event")

wa_button! = window!.addWebComponent(105,25,125,250,25,tagName$)
wa_button!.setAttribute("pill","")
wa_button!.setProperty("appearance","filled-outlined")
wa_button!.setProperty("size",size$)
wa_button!.setText(tagName$+" pill")
tooltip$ = "https://webawesome.com/docs/components/button/"
wa_button!.setAttribute("title",tooltip$)
wa_button!.setCallback(wa_button!.ON_DEFINED,"event")
wa_button!.setCallback(wa_button!.ON_MOUSE_ENTER,"event")
wa_button!.setCallback(wa_button!.ON_MOUSE_EXIT,"event")
wa_button!.setCallback(wa_button!.ON_GAINED_FOCUS,"event")
wa_button!.setCallback(wa_button!.ON_LOST_FOCUS,"event")

tagName$ = "wa-switch"

wa_switch! = window!.addWebComponent(106,25,175,150,25,tagName$)
wa_switch!.setProperty("size",size$)
wa_switch!.setText(tagName$)
tooltip$ = "https://webawesome.com/docs/components/switch/"
wa_switch!.setAttribute("title",tooltip$)
wa_switch!.setCallback(wa_switch!.ON_DEFINED,"event")
wa_switch!.setCallback(wa_switch!.ON_EXECUTE_SCRIPT,"event")
wa_switch!.setCallback(wa_switch!.ON_MOUSE_ENTER,"event")
wa_switch!.setCallback(wa_switch!.ON_MOUSE_EXIT,"event")
wa_switch!.setCallback(wa_switch!.ON_GAINED_FOCUS,"event")
wa_switch!.setCallback(wa_switch!.ON_LOST_FOCUS,"event")
wa_switch!.setCallback("change","webevent")
wa_switch!.clearCallback("change")
options! = wa_switch!.newEventOptions()
options!.setCode("console.log('testing custom event code.')")
options!.setFilter("event.target.checked")
options!.addItem("checked","event.target.checked")
wa_switch!.setCallback("change","webevent",options!)

button! = window!.addButton(107,200,175,75,25,"Click",$$)
button!.setCallback(button!.ON_BUTTON_PUSH,"click")

tagName$ = "wa-button-group"

wa_button_group! = window!.addWebComponent(108,25,225,200,25,tagName$,$$)
wa_button_group!.setProperty("appearance","filled-outlined")
tooltip$ = "https://webawesome.com/docs/components/button-group/"
wa_button_group!.setAttribute("title",tooltip$)
wa_button_group!.setCallback(wa_button_group!.ON_DEFINED,"event")

left! = window!.addWebComponent(201,0,0,0,0,"wa-button",$0010$)
left!.setProperty("appearance","filled-outlined")
left!.setProperty("size",size$)
left!.setAttribute("title","left")
left!.setCallback(left!.ON_DEFINED,"event")
left!.setCallback(left!.ON_MOUSE_ENTER,"event")
left!.setCallback(left!.ON_MOUSE_EXIT,"event")
left!.setCallback(left!.ON_GAINED_FOCUS,"event")
left!.setCallback(left!.ON_LOST_FOCUS,"event")
left!.setCallback("click","event")
left!.setText("Left")

center! = window!.addWebComponent(202,0,0,0,0,"wa-button",$0010$)
center!.setProperty("appearance","filled-outlined")
center!.setProperty("size",size$)
center!.setAttribute("title","center")
center!.setCallback(center!.ON_DEFINED,"event")
center!.setCallback(center!.ON_MOUSE_ENTER,"event")
center!.setCallback(center!.ON_MOUSE_EXIT,"event")
center!.setCallback(center!.ON_GAINED_FOCUS,"event")
center!.setCallback(center!.ON_LOST_FOCUS,"event")
center!.setCallback("click","event")
center!.setText("Center")

right! = window!.addWebComponent(203,0,0,0,0,"wa-button",$0010$)
right!.setProperty("appearance","filled-outlined")
right!.setProperty("size",size$)
right!.setAttribute("title","right")
right!.setCallback(right!.ON_DEFINED,"event")
right!.setCallback(right!.ON_MOUSE_ENTER,"event")
right!.setCallback(right!.ON_MOUSE_EXIT,"event")
right!.setCallback(right!.ON_GAINED_FOCUS,"event")
right!.setCallback(right!.ON_LOST_FOCUS,"event")
right!.setCallback("click","event")
right!.setText("Right")

wa_button_group!.setSlot(left!)
wa_button_group!.setSlot(center!)
wa_button_group!.setSlot(right!)

tagName$ = "input"
input! = window!.addWebComponent(109,235,225,40,30,tagName$,$$)
input!.setProperty("autocomplete","off")
input!.setAttribute("title","keydown")
options! = input!.newEventOptions()
options!.setCode("event.preventDefault()")
options!.addItem("key","event.key")
options!.addItem("code","event.code")
options!.addItem("location","event.location")
options!.addItem("ctrlKey","event.ctrlKey")
options!.addItem("shiftKey","event.shiftKey")
options!.addItem("altKey","event.altKey")
options!.addItem("metaKey","event.metaKey")
input!.setCallback("keydown","keydown",options!)

rem ' https://webawesome.com/docs/components/color-picker/

tagName$ = "wa-color-picker"

wa_color_picker! = window!.addWebComponent(204,25,275,40,25,tagName$)
wa_color_picker!.setProperty("size",size$)
wa_color_picker!.setAttribute("title","https://webawesome.com/docs/components/color-picker/")
r = rnd(255), g = rnd(255), b = rnd(255)
value$ = "#" + hta(chr(r)) + hta(chr(g)) + hta(chr(b))
wa_color_picker!.setProperty("value",value$)

hex! = window!.addButton(205,75,275,50,35,"hex",$$)
hex!.setCallback(hex!.ON_BUTTON_PUSH,"color")

rgb! = window!.addButton(206,125,275,50,35,"rgb",$$)
rgb!.setCallback(rgb!.ON_BUTTON_PUSH,"color")

hsl! = window!.addButton(207,175,275,50,35,"hsl",$$)
hsl!.setCallback(hsl!.ON_BUTTON_PUSH,"color")

hsv! = window!.addButton(208,225,275,50,35,"hsv",$$)
hsv!.setCallback(hsv!.ON_BUTTON_PUSH,"color")

tagName$ = "wa-card"
wa_card! = window!.addWebComponent(300,25,310,250,25,tagName$,$$)
wa_card!.setText("This is a kitten, but not just any kitten. This kitten likes walking along pallets.")
tooltip$ = "https://webawesome.com/docs/components/card/"
wa_card!.setAttribute("title",tooltip$)
wa_card!.setCallback(wa_card!.ON_DEFINED,"event")
wa_card!.setCallback(wa_card!.ON_MOUSE_ENTER,"event")
wa_card!.setCallback(wa_card!.ON_MOUSE_EXIT,"event")
wa_card!.setCallback(wa_card!.ON_GAINED_FOCUS,"event")
wa_card!.setCallback(wa_card!.ON_LOST_FOCUS,"event")
wa_card!.setCallback("click","event")
wa_card!.setStyle("font","16px sans-serif")
wa_card!.setStyle("height","")
wa_card!.setStyle("padding","5px")

wa_card_image! = window!.addWebComponent(301,0,0,0,0,"img")
wa_card_image!.setCallback(wa_card_image!.ON_DEFINED,"event")
wa_card_image!.setAttribute("src","https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80")
wa_card_image!.setAttribute("alt","A kitten walks towards camera on top of pallet.")
wa_card_image!.setAttribute("slot","media")

wa_card_header! = window!.addWebComponent(303,0,0,0,0,"span")
wa_card_header!.setCallback(wa_card_header!.ON_DEFINED,"event")
wa_card_header!.setHtml("<h1>A cat</h1>")
wa_card_header!.setAttribute("slot","header")

wa_card_footer! = window!.addWebComponent(304,0,0,0,0,"span")
wa_card_footer!.setCallback(wa_card_footer!.ON_DEFINED,"event")
wa_card_footer!.setHtml("<small>Note: some people are more into dogs.</small>")
wa_card_footer!.setAttribute("slot","footer")

wa_card!.setSlot("media",wa_card_image!)
wa_card!.setSlot("header",wa_card_header!)
wa_card!.setSlot("footer",wa_card_footer!)

wa_card!.setText("This is a kitten, but not just any kitten. This kitten likes walking on pallets.")

status! = window!.addStatusBar(99)

EventHandler! = new EventHandler()
EventHandler!.setStatusBar(status!)
wa_button!.setCallback("click",EventHandler!,"onWebEvent")

options! = browser!.newEventOptions()
options!.addItem("innerWidth","event.target.innerWidth")
options!.addItem("innerHeight","event.target.innerHeight")
options!.addItem("outerWidth","event.target.outerWidth")
options!.addItem("outerHeight","event.target.outerHeight")
options!.setCode("console.log('window.resize')")
browser!.setCallback("resize","webevent",options!)

browser!.setCallback("focus","webevent")
browser!.setCallback("blur","webevent")

process_events

oops:
  i = msgbox("Not supported in this client.")
eoj:
  release

loaded:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()+" url="+str(event!.getUrl())
  System.out.println(msg$)
return

failed:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()+" url="+str(event!.getUrl())
  System.err.println(msg$)
  i = msgbox(msg$,16)
return

keydown:
rem event key = 3
rem event code = Digit3
rem event location = 0
rem event ctrlKey = false
rem event shiftKey = false
rem event altKey = false
rem event metaKey = false
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()
  msg$ = msg$ + " " + event!.getEventType()
  eventMap$ = ""
  map! = event!.getEventMap()
  iterator! = map!.keySet().iterator()
  while iterator!.hasNext()
    key$ = iterator!.next()
    value! = map!.get(key$)
    if value! = null() then value$ = "null" else value$ = String.valueOf(value!)
    eventMap$ = eventMap$ + " " + key$ + " = " + value$
  wend
  msg$ = msg$ + " " + eventMap$
  status!.setText(msg$)
  System.out.println(msg$)
return

event:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()
  msg$ = msg$ + " " + event!.getEventType(err=*next)
  msg$ = msg$ + " custom=" + Boolean.toString(event!.isCustom(err=*next))
  if event!.getControl() <> null() then
     msg$ = msg$ + " " + event!.getControl().getTagName(err=*next)
     msg$ = msg$ + " " + str(event!.getControl().getID())
     msg$ = msg$ + " " + event!.getControl().getText()
  endif
  status!.setText(msg$)
  System.out.println(msg$)
return

webevent:
  event! = sysgui!.getLastEvent()
  msg$ = date(0:"%Hz:%mz:%sz.%tz ")+event!.getEventName()
  msg$ = msg$ + " " + event!.getEventType()
  if event!.getControl() <> null() then
     msg$ = msg$ + " "+ event!.getWebComponent().getTagName()
     msg$ = msg$ + " "+ event!.getControl().getText()
  endif
  msg$ = msg$ + event!.getJsonString()
  status!.setText(msg$)
  System.out.println(msg$)
  eventMap$ = "getJsonString(): " + event!.getJsonString() + $0a0a$
  eventMap$ = ""
  map! = event!.getEventMap()
  iterator! = map!.keySet().iterator()
  while iterator!.hasNext()
    key$ = iterator!.next()
    value! = map!.get(key$)
    if value! = null() then value$ = "null" else value$ = String.valueOf(value!)
    eventMap$ = eventMap$ + key$ + " = " + value$ + $0a$
  wend
  if event!.getControl() <> null() then
     i = msgbox(eventMap$,32768,event!.getEventName()+" "+event!.getEventType()+" getEventMap")
  endif
return

class public EventHandler
  field public BBjStatusBar StatusBar!
  method public void onWebEvent(BBjWebEvent event!)
    msg$ = date(0:"%Hz:%mz:%sz.%tz onWebEvent ")+event!.getEventName()
    msg$ = msg$ + " " + event!.getEventType()
    msg$ = msg$ + " "+ event!.getWebComponent().getTagName()
    if event!.getControl() <> null() then
      msg$ = msg$ + " "+ event!.getControl().getText()
    endif
    #StatusBar!.setText(msg$)
    System.out.println(msg$)
  methodend
classend

click:
  wa_switch!.executeAsyncScript("component.click()")
return

rem ' https://webawesome.com/docs/components/color-picker/#methods

color:
  format$ = sysgui!.getLastEvent().getControl().getText()
  method$ = "getFormattedValue('"+format$+"')"
  color$ = wa_color_picker!.executeScript(method$)
  i = msgbox(color$,0,method$)
return

rem ' https://webawesome.com/docs/resources/migrating-from-shoelace

rem ' BUI CSS wasn't designed for dark/light themes;
rem ' In the BUI client, explicitly set window background.

light:
  browser!.removeClass("wa-dark")
  browser!.addClass("wa-light")
  browser!.setTheme("light")
  if info(3,6)="5" then
      color! = bbjapi().makeColor(246,247,247)
rem   window!.setBackColor(color!)
  endif
  gosub classList
return

dark:
  browser!.removeClass("wa-light")
  browser!.addClass("wa-dark")
  browser!.setTheme("dark")
  if info(3,6)="5" then
      color! = bbjapi().makeColor(20,21,22)
rem   window!.setBackColor(color!)
  endif
  gosub classList
return

classList:
  classList! = browser!.getClassList()
  classList$ = "getClassList: " + str(classList!)
  status!.setText(classList$)
return

ClosedVersion History

  • BBj 24.00: BBjWebEventOptions::setCode added.

See Also

BBjAPI

Object Variables

PROCESS_EVENTS Verb

BBjWebComponent::setCallback

See the BBj Object Diagram for an illustration of the relationship between BBj Objects.