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
|
Version History