BUI logoDWC logo BBjWebComponent::setDisableOnClick

Description

In BBj 26.02 and higher, this method sets a boolean value indicating whether this BBjWebComponent should be immediately disabled when the user clicks it.

Syntax

Return Value Method
Void setDisableOnClick(boolean disable)

Parameters

Variable Description
disable

Specifies whether this web component should be disabled immediately when the user clicks it.

0 = Don't disable on click (default).

1 = Disable this web component when the user clicks it.

Return Value

None.

Remarks

When clicking a web component triggers a long-running action, the application might want to ensure that only a single click is processed. This can be an issue in high-latency environments when the user clicks the web component multiple times before the application has had a chance to start processing the resulting action.

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

See Also

BBjAPI

BBjSysGui

BBjControl

BBjWindow

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