BBjWindow::addWebComponent

Description

In BBj 24.00 and higher, this method creates a BBjWebComponent in the BBjWindow.

Syntax

Return Value Method

BBjWebComponent

addWebComponent(int ID, int x, int y, int w, int h, String tagName)

addWebComponent(int ID, int x, int y, int w, int h, String tagName, byte[] flags)

addWebComponent(int ID, String tagName)

addWebComponent(int ID, String tagName, byte[] flags)

addWebComponent(String tagName)

addWebComponent(String tagName, byte[] flags)

Parameters

Parameter Description

ID

Control ID number. It must be an integer between 1 and 32767 and be unique within a given top-level window.

x

Horizontal position of the upper-left corner of the control in current units.

y

Vertical position of the upper-left corner of the control in current units.

w

Width of the control in current units.

h

Height of the control in current units.

tagName

HTML tag name of the web component.

flags

Control flags, as follows:

Flag Description
$0001$ Sets the control to be initially disabled.
$0010$ Sets the control to be initially invisible.
$0800$ Draws a recessed client edge around the control.
$1000$ Draws a raised edge around the control.

Return Value

Returns a BBjWebComponent that encapsulates a WebComponent or native HTML element in the BUI and DWC clients. A BBjWebComponent is a BBjControl, so methods of BBjControl can be invoked on it.

If the ID parameter is not specified, a control ID is assigned dynamically using getAvailableControlID().

If the x, y, width, and height parameters are not specified, they're all initialized to 0. This is typically for use with DWC windows that dynamically arrange their contents (window creation flag $00100000$).

Remarks

The developer is responsible for ensuring that the web component is available for use. The example program does this with the appropriate BBjWebManager::injectScriptUrl calls.

To have the web component control its own sizing, you might choose to clear the width and/ height values that were set in the BBjControl creation:

webcomponent!.setStyle("width","")

webcomponent!.setStyle("height","")

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: BBjWindow::addWebComponent added.

See Also

BBjAPI

BBjSysGui

BBjControl

BBjWindow

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