BBjTopLevelWindow::getOuterStyles

Description

In BBj 22 and higher, gets a list of all CSS class names that have been added to the outer component of a BBjTopLevelWindow.

Syntax

Return Value

Method

BBjVector

getOuterStyles()

Parameters

None.

Return Value

Returns a BBjVector containing a list of all CSS class names that have been added to the outer component of a BBjTopLevelWindow.

Remarks

For more details, see CSS API.

Example

rem ' BBjTopLevelWindow::getOuterStyles Example

rem ' CSS sampler
sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
window! = sysgui!.addWindow(25,25,400,700,"CSS Sampler",$00090083$)
window!.setName("mywindow")
legacy_fonts$ =STBL("!COMPAT","LEGACY_FONTS=TRUE")
window!.setCallback(window!.ON_CLOSE,"eoj")
window!.setCallback(window!.ON_RESIZE,"resize")
text$ = "The quick brown fox jumps over the lazy dog."
edit! = window!.addEditBox(100,25,25,360,50,text$,$$)
border! = window!.addCheckBox(101,25,100,350,25,"borderStyle",$$)
border!.setCallback(border!.ON_CHECK_ON,"addStyle")
border!.setCallback(border!.ON_CHECK_OFF,"removeStyle")
shadow! = window!.addCheckBox(102,25,125,350,25,"shadowStyle",$$)
shadow!.setCallback(shadow!.ON_CHECK_ON,"addStyle")
shadow!.setCallback(shadow!.ON_CHECK_OFF,"removeStyle")
background! = window!.addCheckBox(103,25,150,350,25,"backgroundStyle",$$)
background!.setCallback(background!.ON_CHECK_ON,"addStyle")
background!.setCallback(background!.ON_CHECK_OFF,"removeStyle")
another! = window!.addCheckBox(104,25,175,350,25,"anotherStyle",$$)
another!.setCallback(another!.ON_CHECK_ON,"addStyle")
another!.setCallback(another!.ON_CHECK_OFF,"removeStyle")
important! = window!.addCheckBox(105,25,200,350,25,"importantStyle",$$)
important!.setCallback(important!.ON_CHECK_ON,"addStyle")
important!.setCallback(important!.ON_CHECK_OFF,"removeStyle")
windowStyle! = window!.addCheckBox(106,25,225,350,25,"windowStyle",$$)
windowStyle!.setCallback(windowStyle!.ON_CHECK_ON,"addWindowStyle")
windowStyle!.setCallback(windowStyle!.ON_CHECK_OFF,"removeWindowStyle")
titlebarStyle! = window!.addCheckBox(107,25,250,350,25,"titleStyle",$$)
titlebarStyle!.setCallback(titlebarStyle!.ON_CHECK_ON,"addTitleBarStyle")
titlebarStyle!.setCallback(titlebarStyle!.ON_CHECK_OFF,"removeTitleBarStyle")
outerStyle! = window!.addCheckBox(108,25,275,350,25,"outerStyle",$$)
outerStyle!.setCallback(outerStyle!.ON_CHECK_ON,"addOuterStyle")
outerStyle!.setCallback(outerStyle!.ON_CHECK_OFF,"removeOuterStyle")
getStyles! = window!.addButton(1,25,300,150,25,"getStyles",$$)
getStyles!.setCallback(getStyles!.ON_BUTTON_PUSH,"getStyles")
clearStyles! = window!.addButton(2,200,300,150,25,"clearStyles",$$)
clearStyles!.setCallback(clearStyles!.ON_BUTTON_PUSH,"clearStyles")
window!.addStaticText(109,5,355,50,25,"Style:",$8000$)
style! = window!.addEditBox(110,60,350,320,25,"",$$)
window!.addStaticText(111,5,405,50,25,"Value:",$8000$)
value! = window!.addEditBox(112,60,400,320,25,"",$$)
font! = sysgui!.makeFont("SansSerif",10,BBjFont.PLAIN)
getStyle! = window!.addButton(3,5,450,105,25,"Get Edit Style",$$)
getStyle!.setCallback(getStyle!.ON_BUTTON_PUSH,"getStyle")
getComputedStyle! = window!.addButton(4,115,450,170,25,"Get Computed Edit Style",$$)
getComputedStyle!.setCallback(getComputedStyle!.ON_BUTTON_PUSH,"getComputedStyle")
setStyle! = window!.addButton(5,290,450,105,25,"Set Edit Style",$$)
setStyle!.setCallback(setStyle!.ON_BUTTON_PUSH,"setStyle")
getWindowStyle! = window!.addButton(6,5,475,105,50,"Get Window Style",$$)
getWindowStyle!.setCallback(getWindowStyle!.ON_BUTTON_PUSH,"getWindowStyle")
getComputedWindowStyle! = window!.addButton(7,115,475,170,50,"Get Computed Window Style",$$)
getComputedWindowStyle!.setCallback(getComputedWindowStyle!.ON_BUTTON_PUSH,"getComputedWindowStyle")
setWindowStyle! = window!.addButton(8,290,475,105,50,"Set Window Style",$$)
setWindowStyle!.setCallback(setWindowStyle!.ON_BUTTON_PUSH,"setWindowStyle")

rem ' BBjWindow Panel Style
getPanelStyle! = window!.addButton(9,5,525,105,50,"Get Panel Style",$$)
getPanelStyle!.setCallback(getPanelStyle!.ON_BUTTON_PUSH,"getPanelStyle")
getComputedPanelStyle! = window!.addButton(10,115,525,170,50,"Get Computed Panel Style",$$)
getComputedPanelStyle!.setCallback(getComputedPanelStyle!.ON_BUTTON_PUSH,"getComputedPanelStyle")
setPanelStyle! = window!.addButton(11,290,525,105,50,"Set Panel Style",$$)
setPanelStyle!.setCallback(setPanelStyle!.ON_BUTTON_PUSH,"setPanelStyle")

rem ' BBjWindow Dock Style
getDockStyle! = window!.addButton(12,5,575,105,50,"Get Dock Style",$$)
getDockStyle!.setCallback(getDockStyle!.ON_BUTTON_PUSH,"getDockStyle")
getComputedDockStyle! = window!.addButton(13,115,575,170,50,"Get Computed Dock Style",$$)
getComputedDockStyle!.setCallback(getComputedDockStyle!.ON_BUTTON_PUSH,"getComputedDockStyle")
setDockStyle! = window!.addButton(14,290,575,105,50,"Set Dock Style",$$)
setDockStyle!.setCallback(setDockStyle!.ON_BUTTON_PUSH,"setDockStyle")

rem ' BBjTopLevelWindow Outer Style
getOuterStyle! = window!.addButton(15,5,625,105,50,"Get Outer Style",$$)
getOuterStyle!.setCallback(getOuterStyle!.ON_BUTTON_PUSH,"getOuterStyle")
getComputedOuterStyle! = window!.addButton(16,115,625,170,50,"Get Computed Outer Style",$$)
getComputedOuterStyle!.setCallback(getComputedOuterStyle!.ON_BUTTON_PUSH,"getComputedOuterStyle")
setOuterStyle! = window!.addButton(17,290,625,105,50,"Set Outer Style",$$)
setOuterStyle!.setCallback(setOuterStyle!.ON_BUTTON_PUSH,"setOuterStyle")
if (info(3,6)="6") then
    css = unt
    open (css,err=*endif)"sampler.css"
    readrecord(css,siz=999999)css$
    close (css)
    bbjapi().getWebManager().injectStyle(css$)
endif
process_events

eoj:
release

resize:
    event! = sysgui!.getLastEvent()
    width = event!.getWidth()
    edit!.setSize(width-40,edit!.getHeight())
    style!.setSize(width-80,style!.getHeight())
    value!.setSize(width-80,value!.getHeight())
return

getStyles:
    i = msgbox(edit!.getStyles().toString(),0,"getStyles")
return

clearStyles:
    border!.setSelected(0)
    shadow!.setSelected(0)
    background!.setSelected(0)
    another!.setSelected(0)
    important!.setSelected(0)
    windowStyle!.setSelected(0)
    titlebarStyle!.setSelected(0)
    edit!.clearStyles()
    window!.clearStyles()
    window!.clearTitleBarStyles()
return

addStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    edit!.addStyle(style$)
    print edit!.getStyles()
return

removeStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    edit!.removeStyle(style$)
    print edit!.getStyles()
return

addWindowStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    window!.addPanelStyle(style$)
    print window!.getStyles()
return

removeWindowStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    window!.removePanelStyle(style$)
    print window!.getStyles()
return

addTitleBarStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    window!.addTitleBarStyle(style$)
    print window!.getTitleBarStyles()
return

removeTitleBarStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    window!.removeTitleBarStyle(style$)
    print window!.getTitleBarStyles()
return

addOuterStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    window!.addOuterStyle(style$)
    print window!.getOuterStyles()
return

removeOuterStyle:
    event! = sysgui!.getLastEvent()
    control! = event!.getControl()
    style$ = control!.getText()
    window!.removeOuterStyle(style$)
    print window!.getOuterStyles()
return

getStyle:
    value!.setText(edit!.getStyle(style!.getText()))
return

getComputedStyle:
    value!.setText(edit!.getComputedStyle(style!.getText()))
return

setStyle:
    edit!.setStyle(style!.getText(),value!.getText())
return

getWindowStyle:
    value!.setText(window!.getPanelStyle(style!.getText()))
return

getComputedWindowStyle:
    value!.setText(window!.getComputedPanelStyle(style!.getText()))
return

setWindowStyle:
    window!.setPanelStyle(style!.getText(),value!.getText())
return

getPanelStyle:
    value!.setText(window!.getPanelStyle(style!.getText()))
return

getComputedPanelStyle:
    value!.setText(window!.getComputedPanelStyle(style!.getText()))
return

setPanelStyle:
    window!.setPanelStyle(style!.getText(),value!.getText())
return

getDockStyle:
    value!.setText(window!.getDockStyle(style!.getText()))
return

getComputedDockStyle:
    value!.setText(window!.getComputedDockStyle(style!.getText()))
return

setDockStyle:
    window!.setDockStyle(style!.getText(),value!.getText())
return

getOuterStyle:
    value!.setText(window!.getOuterStyle(style!.getText()))
return

getComputedOuterStyle:
    value!.setText(window!.getComputedOuterStyle(style!.getText()))
return

setOuterStyle:
    window!.setOuterStyle(style!.getText(),value!.getText())
return

Sample CSS

.BBjTopLevelWindow
{
  border: 1px solid LightGray;
}

.backgroundStyle,.windowStyle
{
  background: rgb(242,245,246);
  background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1)));
  background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
  background: -o-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
  background: -ms-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
  background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
}
.borderStyle
{
  border-radius: 15px;
  border-width: 4px;
  border-color: blue;
  border-style: dashed;
}
.shadowStyle
{
  box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);
}
.anotherStyle 
{
    font-size:25px;
    color: green;
    background: yellow;
    text-align:center;
    opacity:0.8;
}
.importantStyle 
{
    font-size:25px !important;
    color: blue;
    background: yellow;
    text-align:center;
    opacity:0.6;
}
.BBjTopLevelWindow-titleBar.titleStyle,
.Caption.BBjTopLevelWindow-titleBar.titleStyle
{
    background: #8195a9;
    background: -moz-linear-gradient(top, #889db3, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #889db3), color-stop(49%, #8195a9), color-stop(50%, #7a8da0), color-stop(98%, #738596), color-stop(100%, #8195a9));
    background: -webkit-linear-gradient(top, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
    background: -o-linear-gradient(top, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
    background: -ms-linear-gradient(top, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
    background: linear-gradient(to bottom, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colorNew1', endColorstr='@colorNew5', GradientType=0);
    color: #f8fafc;
    text-shadow: 0 1px 4px #404040;
    font-style: italic;
}
.BBjButton.bbj-cancel
{
    background: pink;
}
.BBjButton.bbj-default
{
    background: green;
}
.BBjTopLevelWindow.outerStyle
{
  border-radius: 15px;
  border-width: 4px;
  border-color: red;
  border-style: dotted;
}

See Also

BBjAPI

BBjSysGui

BBjWindow

CSS API

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