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
|
BBjWebManager::addClass
Version History