BBjWebComponent::setSlot

Description

In BBj 24.00 and higher, this method moves a BBjControl into this BBjWebComponent. If a non-blank slot name is specified, the BBjControl is placed in the specified slot within the web component.

Syntax

Return Value Method
void setSlot(BBjControl control)
void setSlot(String slot, BBjControl control)

Parameters

Parameter Description
control BBjControl to be added to this BBjWebComponent.
slot Name of the slot within this BBjWebComponent to place the BBjControl.

Return Value

None.

Remarks

If no slot string is specified, or is specified as "", the specified control is added to the default slot.

When an absolutely positioned BBjControl is moved into a BBjWebComponent, the following CSS properties are cleared:

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

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

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

If an absolutely positioned BBjControl is created with the initially invisible flag ($0010$), the resulting CSS property of display:none is cleared when the BBjControl is moved into a BBjWebComponent.

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

ClosedVersion History

  • BBj 24.00: BBjWebComponent::setSlot added.

See Also

BBjAPI

Object Variables

PROCESS EVENTS Verb

BBjWebComponent::setCallback

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