BBjTopLevelWindow::getOuterStyle

Description

In BBj 21 and higher, this method returns the value of a CSS property explicitly set on the outer component of a BBjTopLevelWindow.

Syntax

Return Value

Method

string

getOuterStyle(string cssPropertyName)

Parameters

Variable

Description

cssPropertyName

Specifies the CSS property to be queried on the outer component of a BBjTopLevelWindow.

Return Value

Returns the value of the specified CSS property that's explicitly set on the outer component of this BBjTopLevelWindow. To return the resolved value in effect on the outer component, use BBjTopLevelWindow::getComputedOuterStyle.

Remarks

For more details, see CSS.

Example

Copy
BBjTopLevelWindow::getOuterStyle 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

Copy
BBjTopLevelWindow::getOuterStyle 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.