BBjWebEventOptions::setFilter

Description

In BBj 24.00 and higher, this method defines JavaScript to be run in the context of the client-side BBjWebComponent event handler that evaluates to true if this event should be delivered to the application or false if the event should be dropped.
Syntax

Return Value	Method
BBjWebEventOptions	setFilter(String `code`)
Parameters

Parameter	Description
code	JavaScript code to be run in the context of the client-side BBjWebComponent event handler that evaluates to true if this event should be delivered to the application or false if the event should be dropped.
Return Value

Returns a reference to the BBjWebEventOptions object.
Remarks

This code can be structured to explicitly include a return statement that returns a boolean expression. If the code doesn't include an explicit return statement, it will be assumed to evaluate to a boolean value.
Example

rem ' BBjWebComponent

sysgui = unt
open (sysgui)"X0"
title$ = "BBjWebComponent"
sysgui! = bbjapi().getSysGui()
flags$ = $00190083$; rem ' DWC flow layout
flags$ = $00090083$; rem ' absolute layout
window! = sysgui!.addWindow(25,25,300,750,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","large")
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")
rem sl_button_group!.setCallback(sl_button_group!.ON_MOUSE_ENTER,"event")
rem sl_button_group!.setCallback(sl_button_group!.ON_MOUSE_EXIT,"event")
rem sl_button_group!.setCallback(sl_button_group!.ON_GAINED_FOCUS,"event")
rem sl_button_group!.setCallback(sl_button_group!.ON_LOST_FOCUS,"event")
rem sl_button_group!.setCallback("click","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","large")
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,100,275,50,35,"hex",$$)
hex!.setCallback(hex!.ON_BUTTON_PUSH,"color")

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

hsl! = window!.addButton(207,200,275,50,35,"hsl",$$)
hsl!.setCallback(hsl!.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$)
    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))
  msg$ = msg$ + " " + event!.getControl().getTagName(err=*next)
  msg$ = msg$ + " " + str(event!.getControl().getID())
  msg$ = msg$ + " " + event!.getControl().getText()
  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()
  msg$ = msg$ + " "+ event!.getControl().getText()
  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
  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()
    msg$ = msg$ + " "+ event!.getControl().getText()
    #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