BUI CSS Component Styles

The visual appearance of BUI controls is defined using CSS rules. These rules can be customized to change the default colors, borders, and other settings, all without changing any application code. See CSS API for a high level overview of BUI CSS. This document describes the structure of BUI windows, controls, and other components, and the CSS rules for each component.

BBjWindowManager-busyIndicator

BBjTopLevelWindow, BBjTopLevelWindow-titleBar

BBjWindow

BBjDrawPanel

BBjMDI

Window Structure Sample

BBjFileOpen: fileopen()

BBjFileSave: filesave()

BBjUserAuthentication

BBjControl

All BUI windows and controls inherit the BBjControl style. The basic implementation of this style sets the following CSS properties:

.BBjControl

{

box-sizing: border-box;

font: inherit;

}

The box-sizing: border-box setting says that a control defined for a given size will take up precisely that size on the screen, with any padding and borders going inside that defined size. The font: inherit setting initializes the font of each control to the font of its parent. If a custom CSS file defines additional styles for the .BBjControl selector, they'll be applied to every control and every window -- so use this sparingly.

BBjWindowManager, BBjDialog

Top level BUI windows are added to a BASIS window manager structure with the BBjWindowManager style name. It defines the following CSS style names:

.BBjWindowManager (the top level control)

.BBjWindowManager.bbj-undecorated (the tab bar is hidden)

.BBjWindowManager-glassPanel (a translucent glass panel that covers the browser area when a msgbox, fileopen, filesave, or BBjBusyIndicator is active).

.BBjWindowManager-tabs (the tab bar running across the top)

.BBjWindowManager-tab (an individual tab)

.BBjWindowManager-tab-selected (the selected tab)

.BBjWindowManager-contentContainer (the body of the tab that contains the currently selected window)

.BBjWindowManager-content (the window added to the tab)

Windows defined as 'dialog style' are free floating; they can be dragged around (and optionally resized) by the user. The top level container for each dialog style window has the BBjDialog style name. Non-dialog windows are added to the BBjWindowManager tab structure.

BBjWindowManager-busyIndicator

The BBjBusyIndicator is an animated spinner that can be used to indicate that the application is busy. It defines the following style names:

.BBjWindowManager-busyIndicator (the container that holds the spinner and title)

.BBjWindowManager-busySpinner (the spinner itself, containing 12 bars arranged in a circle)

.BBjWindowManager-busyTitle (an optional message that appears below the spinner)

BBjTopLevelWindow, BBjTopLevelWindow-titleBar

The next level contains a BBjTopLevelWindow-titleBar structure and a BBjTopLevelWindow container. In BBj 13.00 and above, the title bar can be hidden (see: setTitleBarVisible). By hiding the title bar, eliminating all window borders (see below) and maximizing the window, a BUI window can be made to completely blend into the browser. This makes the BUI application look less like a desktop application running in a browser and more like a typical web page. The top level window and associated title bar have the following style names (note the space in the middle):

.BBjTopLevelWindow

.BBjTopLevelWindow.bbj-undecorated (the title bar is hidden)

.BBjTopLevelWindow.bbj-maximized (the window is maximized)

.BBjTopLevelWindow-titleBar

.BBjTopLevelWindow-titleBar .bbj-minimize

.BBjTopLevelWindow-titleBar .bbj-maximize

.BBjTopLevelWindow-titleBar .bbj-close

.BBjTopLevelWindow-titleBar-hidden

.BBjTopLevelWindow-titleBar-content-hidden

When form validation is active (from the instant the user clicks a button with a callback registered for the ON_FORM_VALIDATION event until the application clears the form validation state by calling BBjFormValidationEvent::accept), the BBjTopLevelWindow is overlaid with a translucent panel that blocks user input. This panel has the style name .BBjTopLevelWindow-validation.

BBjWindow

The next level contains a BBjWindow structure, the container for individual BBjControls. The BBjWindow defines a special style name (capture) to enable mouse capture mode. When this mode is selected, a mousedown on the window causes it to capture all mouse move events, including ones that fall outside the window bounds, until the next mouseup.

BBjDrawPanel

Each window may contain a BBjDrawPanel (HTML5 Canvas Element), used for drawn items, including plotting text. The HTML5 Canvas is relatively expensive in terms of memory usage on mobile devices, so it's lazily instantiated only if the application uses it.

BBjMDI

The top level BBjMDI window is a BBjTopLevelWindow. In addition to the .BBjTopLevelWindow style name, it also has the .BBjMDI style name.

Window Structure Sample

This sample program can be used to see how the two different window styles look in the browser. The title bar can be dynamically added and removed, and the window can be maximized to fill up the entire browser client area. When the window is maximized, it automatically resizes to track with browser size changes (and orientation changes on mobile devices).

dialog = msgbox("Create dialog window?",4+32,"Dialog")=6

titlebar = msgbox("Create window with title bar?",4+32,"Title Bar")=6

title$ = "Title Bar"

flags$ = iff(titlebar,$00010003$,$01010003$)

if dialog then flags$ = ior(flags$,$00080000$)

flags$ = ior(flags$,$00000080$)

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(50,50,150,175,title$,flags$,$82000008$)

window!.setCallback(window!.ON_CLOSE,"eoj")

window!.setBackColor(sysgui!.makeColor(255,255,0))

flags$ = iff(titlebar,$0004$,$0000$)

checkbox! = window!.addCheckBox(101,25,25,100,25,"Title Bar",flags$)

checkbox!.setOpaque(0)

checkbox!.setCallback(checkbox!.ON_CHECK_ON,"showTitleBar")

checkbox!.setCallback(checkbox!.ON_CHECK_OFF,"hideTitleBar")

maximize! = window!.addButton(1,25,75,100,25,"Maximize",$$)

maximize!.setCallback(maximize!.ON_BUTTON_PUSH,"maximize")

close! = window!.addButton(2,25,125,100,25,"Close",$$)

close!.setCallback(close!.ON_BUTTON_PUSH,"eoj")

process_events

eoj:

release

maximize:

window!.maximize()

return

showTitleBar:

window!.setTitleBarVisible(1)

return

hideTitleBar:

window!.setTitleBarVisible(0)

return

With the default styles, the dialog window from that sample looks like this:

The following CSS settings can be used to eliminate all borders and shadows from both dialog and non-dialog BUI windows. This makes the window look more like a standard web page and less like a desktop application.

/* This CSS eliminates the border and shadow from BBjDialog windows. */

.BBjDialog:not(.bbj-maximized) .BBjTopLevelWindow-titleBar,

.BBjDialog .BBjTopLevelWindow

{

border-width: 0px;

box-shadow: none;

}

/* This CSS eliminates the border from non-dialog windows. */

.BBjWindowManager-contentContainer

{

border-width: 0px;

}

With that custom CSS, the window looks like this:

Browser Inspectors

While you should only depend on features that are explicitly documented, you can gain valuable insight into the structure of a BUI web page using the web inspector built into your browser. For example, refer to the BUI Showcase Edit Controls sample. In Google Chrome, right-click on any element and select "Inspect Element":

The inspector provides a wealth of information about how the browser has rendered the element on the page, and how it has interpreted the associated CSS rules, including any custom CSS defined by the developer. This can be particularly valuable when you are defining new CSS rules and they aren't working as expected.

BBjBarChart

The BBjBarChart is implemented in the browser as an <img> element; all graphing is done on the server. It defines the following style names:

.BBjBarChart

.BBjBarChart.bbj-disabled

Use CSS styles that would work with images, for example:

.BBjBarChart

{

opacity: 0.4;

border-radius: 15px;

border-width: 2px;

box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);

}

.BBjBarChart:hover

{

opacity: 1.0;

}

That adds a rounded border and drop shadow to the chart image, and dims it unless the mouse is hovering over it.

Or to show a disabled BBjBarChart grayed out:

.BBjBarChart.bbj-disabled

{

opacity: 0.4;

}

BBjButton

The BBjButton is implemented as a <div> element. It has one variant, .BBjButton.bbj-default, applied to any button with a control ID of 1. The BBjButton defines the following style names:

.BBjButton

.BBjButton.bbj-default

.BBjButton.bbj-disabled

.BBjButton.bbj-focused

.BBjButton.bbj-transparent

There are many different options for styling the BBjButton. One simple choice would be to add rounded borders:

.BBjButton

{

border-radius: 10px;

}

BBjCEdit

The BBjCEdit is implemented as a <textarea> element. It defines the following styles:

.BBjCEdit

.BBjCEdit.bbj-bordered

.BBjCEdit.bbj-disabled

.BBjCEdit.bbj-focused

.BBjCEdit.bbj-readonly

To modify the optional border:

.BBjCEdit.bbj-bordered

{

border: 1px solid #7f9db9;

}

By default, the BUI BBjCEdit is not user-resizable, because resizing it can conflict with other controls on the page. That option can be added like this:

.BBjCEdit

{

resize: both;

}

BBjCheckableMenuItem

The BBjCheckableMenuItem defines the following style names:

.BBjCheckableMenuItem

.BBjCheckableMenuItem.bbj-checked

.BBjCheckableMenuItem.bbj-disabled

.BBjCheckableMenuItem.bbj-selected

.BBjCheckableMenuItem-check

.BBjCheckableMenuItem-check.bbj-selected

.BBjCheckableMenuItem-image

.BBjCheckableMenuItem-image.bbj-selected

.BBjCheckableMenuItem-content

.BBjCheckableMenuItem-content.bbj-selected

.BBjCheckableMenuItem-accel

.BBjCheckableMenuItem-accel.bbj-selected

BBjCheckBox

The BBjCheckBox is implemented as an <input type="checkbox"> element with an associated label. It defines the following style names:

.BBjCheckBox

.BBjCheckBox.bbj-checked

.BBjCheckBox.bbj-disabled

.BBjCheckBox.bbj-focused

.BBjCheckBox.bbj-readonly

HTML checkbox and radiobutton elements are notoriously difficult to style.

BBjChildWindow

The BBjChildWindow defines the following style names:

.BBjChildWindow

.BBjChildWindow-border

BBjChildWindows have a default 1px black border, which can be omitted when the control is created. That border color can be changed with the following CSS:

.BBjChildWindow-border

{

background-color: gray;

}

BBjColorChooser

For a BBjColorChooser sample program, refer to (demo, code). The BBjColorChooser defines the following style names:

.BBjChooser

.BBjColorChooser

.BBjColorChooser.bbj-disabled

.BBjColorChooser.bbj-focused

.BBjColorChooser-preview

.BBjColorChooser-hueRadioButton

.BBjColorChooser-hueValue

.BBjColorChooser-hueDegreeLabel

.BBjColorChooser-saturationRadioButton

.BBjColorChooser-saturationValue

.BBjColorChooser-saturationPercentLabel

.BBjColorChooser-brightnessRadioButton

.BBjColorChooser-brightnessValue

.BBjColorChooser-brightnessPercentLabel

.BBjColorChooser-redRadioButton

.BBjColorChooser-redValue

.BBjColorChooser-greenRadioButton

.BBjColorChooser-greenValue

.BBjColorChooser-blueRadioButton

.BBjColorChooser-blueValue

.BBjColorChooser-colorLabel

.BBjColorChooser-colorValue

.BBjChooser-button-panel

.BBjChooser-button

.BBjChooser-approveButton

.BBjChooser-cancelButton

BBjEditBox

The BBjEditBox is implemented as either an <input type="text"> element or an <input type="password"> element, depending on whether the password style is specified on creation. It defines the following style names:

.BBjEditBox (primary style name)

.BBjEditBox.bbj-disabled (edit box is disabled)

.BBjEditBox.bbj-focused (edit box is focused)

.BBjEditBox.bbj-readonly (edit box is readonly)

.BBjEditBox.bbj-password (password-style edit box)

BBjEditBoxSpinner

For BBjSpinner samples, refer to the BUI Showcase (demo, code). The BBjEditBoxSpinner control contains a BBjEditBox, followed by spinner arrows in a structure with the style name .BBjSpinner-arrows and either .BBjSpinner-horizontal-arrows or .BBjSpinner-vertical-arrows. It defines the following style names:

.BBjSpinner

.BBjEditBoxSpinner

.BBjEditBoxSpinner.bbj-disabled

.BBjEditBoxSpinner.bbj-focused

.BBjEditBoxSpinner.bbj-readonly

.BBjSpinner-arrows

.BBjSpinner-horizontal-arrows (on touch-oriented devices)

.BBjSpinner-vertical-arrows (on mouse-oriented systems)

.BBjSpinner-upArrow

.BBjSpinner-downArrow

BBjFileChooser

The BUI BBjFileChooser is really several different kinds of control, depending on the selected version: Open or save a client file, open or save a server file, or select a server directory. See BUI: Interacting with client files for a detailed discussion of the BUI client-side file choosers. The BBjFileChooser defines the following CSS style names:

.BBjChooser

.BBjFileChooser

.BBjFileChooser.bbj-client

.BBjFileChooser.bbj-directories

.BBjFileChooser.bbj-disabled

.BBjFileChooser.bbj-focused

.BBjFileChooser .bbj-selected (note the space between .BBjFileChooser and .bbj-selected)

.BBjFileChooser.bbj-server

.BBjChooser-button-panel

.BBjChooser-button

.BBjChooser-approveButton

.BBjChooser-cancelButton

Individual components of the .BBjFileChooser.bbj-client dialog:

.BBjFileChooser-chooseClientFileLabel

.BBjFileChooser-chooseClientFile

.BBjFileChooser-fileTypeLabel

.BBjFileChooser-fileTypeList

.BBjFileChooser-uploadProgressBar

.BBjFileChooser-uploadStatusMessage

Individual components of the .BBjFileChooser.bbj-server dialog:

.BBjFileChooser-directoryList

.BBjFileChooser-directoryUpButton

.BBjFileChooser-directoryDownButton

.BBjFileChooser-summaryViewButton

.BBjFileChooser-detailViewButton

.BBjFileChooser-fileGridPanel

.BBjFileChooser-detailFileGrid

.BBjFileChooser-summaryFileGrid

.BBjFileChooser-fileNameLabel

.BBjFileChooser-fileName

.BBjFileChooser-fileTypeLabel

.BBjFileChooser-fileTypeList

Individual components of the .BBjFileChooser.bbj-directories dialog:

.BBjFileChooser-directoryTree

.BBjFileChooser-directoryTreeItem

The sample program can produce any of the different BBjFileChooser styles:

rem ' filechooser.txt

flags$ = $0000$

width = 400

height = 300

if msgbox("Client filesystem?",4+32+256)=6 then

flags$ = ior(flags$,$0004$)

title$ = "Client"

if info(6,0)="GWT" then height=150

else

title$ = "Server"

endif

if msgbox("Save-style dialog?",4+32+256)=6 then

flags$ = ior(flags$,$0100$)

title$ = title$ + " Save"

else

title$ = title$ + " Open"

endif

if info(6,0)="GWT" and pos("Client"=title$) then

directory=0

else

directory=msgbox("Directory chooser?",4+32+256)=6

endif

if directory then

flags$ = ior(flags$,$0008$)

title$ = title$ + " Directory"

else

title$ = title$ + " File"

endif

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(100,100,width+50,height+50,title$,$00090003$)

window!.setCallback(window!.ON_CLOSE,"eoj")

directory$ = dsk("") + dir("")

chooser! = window!.addFileChooser(101,25,25,width,height,directory$,flags$)

vector! = bbjapi().makeVector()

vector!.add("*.gif")

vector!.add("*.jpg")

vector!.add("*.png")

vector!.add("*.bmp")

vector!.add("*.ico")

chooser!.addFileFilter("Image Files", vector!)

chooser!.addFileFilter("Text Files", "*.txt")

chooser!.setActiveFileFilter("Text Files")

process_events

eoj:

release

BBjFileOpen: fileopen()

The fileopen() function defines the following style names:

.BBjFileOpen (the top level of the dialog window)

.BBjFileOpen-title (the title bar)

.BBjFileOpen-panel (the body area)

The body contains a .BBjFileChooser structure as defined for the BBjFileChooser control.

BBjFileSave: filesave()

The filesave() function defines the following style names:

.BBjFileSave (the top level of the dialog window)

.BBjFileSave-title (the title bar)

.BBjFileSave-panel (the body area)

The body contains a .BBjFileChooser structure as defined for the BBjFileChooser control.

BBjFontChooser

For a BBjFontChooser sample program, refer to (demo, code). The BBjFontChooser defines the following style names:

.BBjChooser

.BBjFontChooser

.BBjFontChooser.bbj-disabled

.BBjFontChooser-familyPanel

.BBjFontChooser-familyLabel

.BBjFontChooser-familyText

.BBjFontChooser-familyList

.BBjFontChooser-stylePanel

.BBjFontChooser-styleLabel

.BBjFontChooser-styleText

.BBjFontChooser-styleList

.BBjFontChooser-sizePanel

.BBjFontChooser-sizeLabel

.BBjFontChooser-sizeText

.BBjFontChooser-sizeList

.BBjFontChooser-preview

.BBjChooser-button-panel

.BBjChooser-button

.BBjChooser-approveButton

.BBjChooser-cancelButton

BBjGrid

The BBjGrid is a complex structured control with several nested layers. It defines the following style names:

.BBjGrid

.BBjGrid.bbj-disabled

.BBjGrid-columnHeader

.BBjGrid-rowHeader

.BBjGrid-table

.BBjGrid-corner

.BBjGrid-fieldScrollPanel

.BBjGrid-clippingPanel

.BBjGrid-fieldPanel

.BBjGrid-masterPanel

.BBjGrid-noborder

.BBjGrid .bbj-selected (note the space between .BBjGrid and .bbj-selected)

.BBjGrid .bbj-highlighted (note the space between .BBjGrid and .bbj-highlighted)

.BBjGrid-editingCell

.BBjGrid-mainGridCell

.BBjGrid-columnHeaderCell

.BBjGrid-rowHeaderCell

.BBjGrid-cell-wrapper

.BBjGrid-buttonOffCell

.BBjGrid-buttonDownCell

.BBjGrid-checkOffCell

.BBjGrid-checkDownCell

.BBjGrid-textCell

.BBjGrid-inputECell

.BBjGrid-inputNCell

.BBjGrid-inputDCell

.BBjGrid-labelCell

.BBjGrid-listButtonCell

.BBjGrid-listEditCell

.BBjGrid-passwordCell

.BBjGrid-row#

.BBjGrid-column#

.BBjGrid-evenRow

.BBjGrid-oddRow

.BBjGrid-unsorted

.BBjGrid-ascending

.BBjGrid-descending

As with all BBjControls, the top level style name, .BBjGrid, corresponds to the control name. The next level in is .BBjGrid-masterPanel. For implementation reasons, this is the level that defines the default outer border. The master panel contains four separate areas: The main body of the grid, with a style name of .BBjGrid-fieldPanel; column and row headers, with style names of .BBjGrid-columnHeader and .BBjGrid-rowHeader; and the small leftover piece in the upper left corner, .BBjGrid-corner. Within the main grid and column headers, individual cells have the style names .BBjGrid-mainGridCell, .BBjGrid-columnHeaderCell, or .BBjGrid-rowHeaderCell. Each cell is also assigned several additional style names based on the type of cell (the default type is .BBjGrid-inputECell), the cell row and column (.BBjGid-row0, .BBjGrid-column0, etc.), .BBjGrid-evenRow or .BBjGrid-oddRow, and a style based on whether the column is currently sorted (.BBjGrid-unsorted, .BBjGrid-ascending, .BBjGrid-descending). When a given cell is in edit mode, it also has the style name .BBjGrid-editingCell. Within the body of the grid, .BBjGrid .bbj-selected is applied to the selected cell(s). Row and column headers corresponding to selected cells can be highlighted using the style name .BBjGrid .bbj-highlighted.

The easiest way to understand this complex structure is with a simple grid sample. This is a very basic 3x3 grid, with row and column headers:

rem ' grid.txt

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(25,25,300,150,"Grid",$00090003$,$$)

window!.setCallback(window!.ON_CLOSE,"eoj")

grid = 101, colhdr = 102, rowhdr = 103, rows = 3, cols = 3

grid! = window!.addGrid(grid,rowhdr,colhdr,10,10,280,135,$81ce$,rows,cols)

grid!.setAllColumnsUserSortable(1)

grid!.setEditable(1)

grid!.setRowHeaderWidth(30)

grid!.setRowHeight(30)

grid!.setFitToGrid(cols)

for col = 0 to cols - 1

for row = 0 to rows - 1

grid!.setCellText(row,col,str(row)+","+str(col))

next row

next col

process_events

eoj:

release

By default, this is how BUI renders that grid:

Now we define a few simple CSS rules: Eliminate all interior borders; set the highlight color to a CSS gradient; and add drop shadows to the selected and edited grid cell.

.BBjGrid

{

background: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);

}

.BBjGrid-mainGridCell

{

border: none;

}

.BBjGrid .bbj-selected

{

background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);

box-shadow: 7px 7px 5px rgba(69, 117, 210, 0.5);

}

.BBjGrid-editingCell

{

box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);

}

.BBjGrid-evenRow, .BBjGrid-oddRow

{

background: transparent;

}

.BBjGrid:not(.bbj-disabled) tr:hover .BBjGrid-mainGridCell.BBjGrid-evenRow,

.BBjGrid:not(.bbj-disabled) tr:hover .BBjGrid-mainGridCell.BBjGrid-oddRow

{

background: transparent;

}

With those CSS rules, the grid looks like this:

BBjGroupBox

The BBjGroupBox is implemented as a <fieldset> element; the text is a <legend> element. Here's a very simple groupbox:

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(25,25,300,100,"GroupBox",$00090003$)

window!.setCallback(window!.ON_CLOSE,"eoj")

groupbox! = window!.addGroupBox(101,25,25,250,50,"GroupBox",$$)

process_events

eoj:

release

By default, it looks like this:

The BBjGroupBox defines the following style names:

.BBjGroupBox (the primary style name)

.BBjGroupBox.bbj-disabled (the element is disabled)

.BBjGroupBox legend (the title)

The following sample CSS makes the BBjGroupBox border and text green and moves the text to the middle, with a box around it.

.BBjGroupBox

{

border: 1px solid green;

border-radius: 10px;

}

.BBjGroupBox legend

{

border: 1px solid green;

color: green;

text-align: center;

font-weight: bold;

}

BBjHtmlEdit

The BBjHtmlEdit control is a <div> containing an editor component consisting of a toolbar and an editing area. The BBjHtmlEdit defines the following CSS style names:

.BBjHtmlEdit (the top level control)

.BBjHtmlEdit.bbj-disabled (the control is disabled)

Most of the styling happens internally within the editor component. These CSS selectors can only apply minimal additional styling, and some rules may require the use of !important to override internal editor rules.

BBjHtmlView

The BBjHtmlView control is a <div> containing a content field with a class name of .BBjHtmlView-content. If the content is set using setUrl(), it's an <iframe>. If the content is set using setText(), it's a <div> containing the specified HTML. The BBjHtmlView defines the following CSS style names:

.BBjHtmlView (the top level control)

.BBjHtmlView-content (the content, either an iframe or a div)

.BBjHtmlView.bbj-disabled (the control is disabled)

BBjImageCtrl

The BBjImageCtrl is a simple <img> element. It defines the following CSS style names:

.BBjImageCtrl (the control)

.BBjImageCtrl.bbj-disabled (the control is disabled)

BBjInputD

The BBjInputD control is two separate elements. The edit box itself is an <input type="text"> element, styled with the .BBjInputD class name.

.BBjInputD

.BBjInputD.bbj-disabled

.BBjInputD.bbj-focused

.BBjInputD.bbj-readonly

BBjInputD-calendar

The calendar popup is a structured <div> with a primary style name of .BBjInputD-calendar. Internal calendar elements inherit their names from the GWT DatePicker:

.BBjInputD-calendar

.datePickerMonthSelector (the month selector widget)

.datePickerMonth (the month in the month selector widget)

.datePickerPreviousButton (the previous month button)

.datePickerNextButton (the next month button)

.datePickerDays (the portion of the picker that shows the days)

.datePickerWeekdayLabel (the label over weekdays)

.datePickerWeekendLabel (the label over weekends)

.datePickerDay (a single day)

.datePickerDayIsToday (today's date)

.datePickerDayIsWeekend (a weekend day)

.datePickerDayIsFiller (a day in another month)

.datePickerDayIsValue (the selected day)

.datePickerDayIsDisabled (a disabled day)

.datePickerDayIsHighlighted (the currently highlighted day)

.datePickerDayIsValueAndHighlighted (the highlighted day if it is also selected)

BBjInputDSpinner

For BBjSpinner samples, refer to the BUI Showcase (demo, code). The BBjInputDSpinner control contains a BBjInputD, followed by spinner arrows in a structure with the style name .BBjSpinner-arrows and either .BBjSpinner-horizontal-arrows or .BBjSpinner-vertical-arrows. It defines the following style names:

.BBjSpinner

.BBjInputDSpinner

.BBjInputD

.BBjInputD-calendar

.BBjInputDSpinner.bbj-disabled

.BBjInputDSpinner.bbj-focused

.BBjInputDSpinner.bbj-readonly

.BBjSpinner-arrows

.BBjSpinner-horizontal-arrows (on touch-oriented devices)

.BBjSpinner-vertical-arrows (on mouse-oriented systems)

.BBjSpinner-upArrow

.BBjSpinner-downArrow

BBjInputE

The BBjInputE is an <input type="text"> element, with extensive JavaScript logic to manage the complex masking rules. It defines the following style names:

.BBjInputE

.BBjInputE.bbj-disabled

.BBjInputE.bbj-focused

.BBjInputE.bbj-readonly

BBjInputESpinner

For BBjSpinner samples, refer to the BUI Showcase (demo, code). The BBjInputESpinner control contains a BBjInputE, followed by spinner arrows in a structure with the style name .BBjSpinner-arrows and either .BBjSpinner-horizontal-arrows or .BBjSpinner-vertical-arrows. It defines the following style names:

.BBjSpinner

.BBjInputESpinner

.BBjInputESpinner.bbj-disabled

.BBjInputESpinner.bbj-focused

.BBjInputESpinner.bbj-readonly

.BBjSpinner-arrows

.BBjSpinner-horizontal-arrows (on touch-oriented devices)

.BBjSpinner-vertical-arrows (on mouse-oriented systems)

.BBjSpinner-upArrow

.BBjSpinner-downArrow

BBjInputN

The BBjInputN is an <input type="text"> element, with extensive JavaScript logic to manage the complex masking rules. It defines the following style names:

.BBjInputN

.BBjInputN.bbj-disabled

.BBjInputN.bbj-focused

.BBjInputN.bbj-readonly

BBjInputNSpinner

For BBjSpinner samples, refer to the BUI Showcase (demo, code). The BBjInputNSpinner control contains a BBjInputN, followed by spinner arrows in a structure with the style name .BBjSpinner-arrows and either .BBjSpinner-horizontal-arrows or .BBjSpinner-vertical-arrows. It defines the following style names:

.BBjSpinner

.BBjInputNSpinner

.BBjInputNSpinner.bbj-disabled

.BBjInputNSpinner.bbj-focused

.BBjInputNSpinner.bbj-readonly

.BBjSpinner-arrows

.BBjSpinner-horizontal-arrows (on touch-oriented devices)

.BBjSpinner-vertical-arrows (on mouse-oriented systems)

.BBjSpinner-upArrow

.BBjSpinner-downArrow

BBjLineChart

The BUI BBjLineChart is implemented as an <img> element. It defines the following style names:

.BBjLineChart

.BBjLineChart.bbj-disabled

Use CSS styles that would work with images, for example:

.BBjLineChart

{

opacity: 0.4;

border-radius: 15px;

border-width: 2px;

box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);

}

.BBjLineChart:hover

{

opacity:1.0;

}

That adds a rounded border and drop shadow to the chart image, and dims it unless the mouse is hovering over it.

Or to show a disabled BBjLineChart grayed out:

.BBjLineChart.bbj-disabled

{

opacity: 0.4;

}

BBjListBox

The BBjListBox defines the following style names:

.BBjListBox (the top level control)

.BBjListBox-item (an individual item within the list)

.BBjListBox-item.bbj-selected (a selected item)

.BBjListBox.bbj-disabled (the control is disabled)

.BBjListBox.bbj-disabled (the control is focused)

.BBjListBox.bbj-readonly (the control is readonly)

This section uses the list sample from the BBj BUI Showcase (code, demo).

With the default styles, the BBjListBox looks like this:

With the styles shown below, it looks like this:

.BBjListBox

{

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

overflow-x: hidden !important;

background: #f2f5f6 !important; /* Old browsers */

background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%) !important; /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)) !important; /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%) !important; /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%) !important; /* Opera 11.10+ */

background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%) !important; /* IE10+ */

background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%) !important; /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ) !important; /* IE6-9 */

}

.BBjListBox-item

{

}

.BBjListBox-item:hover

{

font-size: 24px;

color: white !important;

background: #1e5799 !important; /* Old browsers */

background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%) !important; /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)) !important; /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%) !important; /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%) !important; /* Opera 11.10+ */

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%) !important; /* IE10+ */

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%) !important; /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ) !important; /* IE6-9 */

}

BBjListButton

See: STBL("!OPTIONS","NATIVE_BROWSER_LIST")

In BBj 13.0 and higher, the default BUI BBjListButton is implemented as a custom control, to allow for CSS styling that isn't possible with native browser select elements. The native browser select elements provide a better user experience on mobile phone and tablet browsers; this option can be set to TRUE to specify that style.

The native version of the BUI BBjListButton is implemented as a <select> element with the .BBjListButton.bbj-native style name.

The custom listbutton defines the following style names:

.BBjListButton (the top level control)

.BBjListButton-button (the button face)

.BBjListButton-buttonText (the left side of the button, which contains the text label)

.BBjListButton-imageWrapper (the right side of the button, which contains the dropdown arrow)

.BBjListButton-image (the dropdown arrow image)

.BBjListButton-listPanel (the dropdown container for the list)

.BBjListButton-listBox (the dropdown list)

.BBjListButton-item (an individual item in the dropdown list)

.BBjListButton-item.bbj-selected (the selected item)

.BBjListButton.bbj-disabled (the control is disabled)

.BBjListButton.bbj-focused (the control is focused)

.BBjListButton.bbj-readonly (the control is readonly)

This section uses the list sample from the BBj BUI Showcase (code, demo).

With the default styles, the custom BBjListButton looks like this:

With the styles shown below, it looks like this:

.BBjListButton, .BBjListButton-button, .BBjListEdit-button

{

color: white !important;

box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);

text-shadow: 0px 0px 1px hsla(0,0%,0%,.8);

border-radius: 5px;

background: navy !important;

background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%) !important;

background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%) !important;

overflow: hidden;

}

.BBjListEdit

{

border-radius: 5px;

}

.BBjListEdit-button

{

border-width: 0px;

}

.BBjListButton-image, .BBjListEdit-image

{

border-top-color: white;

}

.BBjListButton-listBox, .BBjListEdit-listBox

{

overflow-x: hidden !important;

box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);

}

BBjListEdit

See: STBL("!OPTIONS","NATIVE_BROWSER_LIST")

In BBj 13.0 and higher, the default BUI BBjListEdit is implemented as a custom control, to allow for CSS styling that isn't possible with native browser select elements. The native browser select elements provide a better user experience on mobile phone and tablet browsers; this option can be set to TRUE to specify that style.

The native listedit is really a hybrid -- it combines a text box with a native browser select element. It defines the following style names:

.BBjListEdit.bbj-native (the top level control)

.BBjListEdit-text (the text input area, taking up most of the width of the control)

.BBjListEdit-list (the list portion, taking up just enough space to the right of the control to show a dropdown arrow)

The custom listedit allows for more styling options. It defines the following style names:

.BBjListEdit (the top level control)

.BBjListEdit-text (the text input area, taking up most of the width of the control)

.BBjListEdit-button (the button on the right edge of the control, showing a dropdown arrow)

.BBjListEdit-imageWrapper (the right side of the button, which contains the dropdown arrow)

.BBjListEdit-image (the dropdown arrow image)

.BBjListEdit-listPanel (the dropdown container for the list)

.BBjListEdit-listBox (the dropdown list)

.BBjListEdit-item (an individual item in the dropdown list)

.BBjListEdit-item.bbj-selected (the selected item)

.BBjListEdit.bbj-disabled (the control is disabled)

.BBjListEdit.bbj-focused (the control is focused)

.BBjListEdit.bbj-readonly (the control is readonly)

This section uses the list sample from the BBj BUI Showcase (code, demo).

With the default styles, the custom BBjListEdit looks like this:

With the styles shown below, it looks like this:

.BBjListButton, .BBjListButton-button, .BBjListEdit-button

{

color: white !important;

box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);

text-shadow: 0px 0px 1px hsla(0,0%,0%,.8);

border-radius: 5px;

background: navy !important;

background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%) !important;

background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%) !important;

overflow: hidden;

}

.BBjListEdit

{

border-radius: 5px;

}

.BBjListEdit-button

{

border-width: 0px;

}

.BBjListButton-image, .BBjListEdit-image

{

border-top-color: white;

}

.BBjListButton-listBox, .BBjListEdit-listBox

{

overflow-x: hidden !important;

box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);

}

BBjMenu

The BBjMenu defines the following style names:

.BBjMenu

.BBjMenu.bbj-disabled

.BBjMenu.bbj-selected

.BBjMenu-check

.BBjMenu-check.bbj-selected

.BBjMenu-image

.BBjMenu-image.bbj-selected

.BBjMenu-content

.BBjMenu-content.bbj-selected

.BBjMenu-accel

.BBjMenu-accel.bbj-selected

BBjMenuBar

The BBjMenuBar defines the following style names:

.BBjMenuBar

.BBjMenuBar.bbj-disabled

BBjMenuItem

The BBjMenuItem defines the following style names:

.BBjMenuItem

.BBjMenuItem.bbj-disabled

.BBjMenuItem.bbj-selected

.BBjMenuItem-check

.BBjMenuItem-check.bbj-selected

.BBjMenuItem-image

.BBjMenuItem-image.bbj-selected

.BBjMenuItem-content

.BBjMenuItem-content.bbj-selected

.BBjMenuItem-accel

.BBjMenuItem-accel.bbj-selected

BBjMenuItemSeparator

The BBjMenuItemSeparator defines the following style names:

.BBjMenuItemSeparator

.BBjMenuItemSeparator-inner

BBjMenuButton

The BBjMenuButton can be used in several different ways. With a dropdown menu, it combines a button and menu in a single control. If no menu is defined, it acts as a rollover button that has a more noticeable appearance as the user hovers over it. Here's a very basic sample program, showing just a few of these variations:

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

image$ = "com/basis/bbj/images/basis-b.gif"

image! = sysgui!.getImageManager().loadImageFromServerJar(image$)

window! = sysgui!.addWindow(50,50,200,200,"BBjMenuButton",$00090003$)

window!.setCallback(window!.ON_CLOSE,"eoj")

menubutton1! = window!.addMenuButton(101,25,25,150,50,"MenuButton",$$)

menubutton1!.setImage(image!)

menubutton2! = window!.addMenuButton(102,25,100,150,50,"MenuButton",$4000$)

menubutton2!.setImage(image!)

dropdownMenu! = sysgui!.addPopupMenu()

dropdownItem1! = dropdownMenu!.addMenuItem(-201,"Dropdown Item 1")

dropdownItem2! = dropdownMenu!.addMenuItem(-202,"Dropdown Item 2")

menuButton2!.setDropdownMenu(dropdownMenu!)

process_events

eoj:

release

With the default CSS styles, it looks like this:

The BBjMenuButton defines the following style names:

.BBjMenuButton (the top level control)

.BBjMenuButton-button (the main button area)

.BBjMenuButton-button-down-hovering (the main button area when pressed by the user)

.BBjMenuButton-button-up-hovering (the main button area when the user is hovering over it)

.BBjMenuButton-dropdown (the dropdown button on the right edge -- if the button has a dropdown)

.BBjMenuButton-dropdown-down-hovering (the dropdown button area when pressed by the user)

.BBjMenuButton-dropdown-up-hovering (the dropdown button area when the user is hovering over it)

.BBjMenuButton-dropdown-image (the dropdown button image)

.BBjMenuButton-menu (the dropdown menu)

.BBjMenuButton.bbj-bordered (the BBjMenuButton was created with a permanent border)

.BBjMenuButton.bbj-disabled (the BBjMenuButton is disabled)

.BBjMenuButton.bbj-focused (the BBjMenuButton is focused)

.BBjMenuButton.bbj-dropdown (the BBjMenuButton has a dropdown menu)

BBjMsgBox: msgbox()

We'll use the following sample msgbox:

i = msgbox("This is the message",64+1,"BBjMsgBox")

The msgbox() function defines the following style names:

.BBjMsgBox (the top level of the dialog window)

.BBjMsgBox-title (the title bar)

.BBjMsgBox-panel (the body area)

.BBjMsgBox-message-panel (a horizontal panel that contains the icon and message)

.BBjMsgBox-icon (the icon)

.BBjMsgBox-icon-error (stop sign / error icon (16))

.BBjMsgBox-icon-question (question icon (32))

.BBjMsgBox-icon-warning (warning / exclamation icon (48))

.BBjMsgBox-icon-info (info icon (64))

.BBjMsgBox-message (the message)

.BBjMsgBox-button-panel (a horizontal panel that contains the buttons)

.BBjMsgBox-button (an individual button)

With the default CSS styles, the msgbox looks like this:

And with the CSS file below, the same msgbox looks like this:

.BBjMsgBox

{

border-width: 0px !important;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

border: 1px solid black;

-webkit-box-shadow: #C6C6C6 2px 2px 2px;

-moz-box-shadow: #C6C6C6 2px 2px 2px;

box-shadow: #C6C6C6 2px 2px 2px;

}

.BBjMsgBox-title

{

}

.BBjMsgBox-icon

{

}

.BBjMsgBox-message

{

}

.BBjMsgBox-button

{

background: rgb(255,255,255);

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));

background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

}

.BBjMsgBox-button-panel

{

}

.BBjMsgBox .dialogContent

{

background: rgb(206,220,231);

background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1)));

background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);

background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);

background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);

background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );

}

In BBj 13.0 and higher, setting this option tells BUI to generate native browser alert() and confirm() dialogs for OK and OK/Cancel MSGBOX styles. This can provide a more native-looking appearance on mobile phone and tablet browsers.

Refer to the BUI Showcase for a more complete MSGBOX sample (demo, code).

BBjNavigator

We'll use this very simple BBjNavigator program for reference:

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(100,100,450,150,"Navigator",$00090003$)

window!.setCallback(window!.ON_CLOSE,"eoj")

navigator! = window!.addNavigator(101,50,50,350,50,"Navigator",$0000$)

navigator!.setButtonWidth(50)

process_events

eoj:

release

With the default CSS styles, the BBjNavigator looks like this:

The BBjNavigator defines the following style names:

.BBjNavigator (The top level style)

.BBjNavigator-first (The "first" button)

.BBjNavigator-previous (The "previous" button)

.BBjNavigator-label (The label in the middle)

.BBjNavigator-next (The "next" button)

.BBjNavigator-last (The "last" button)

.BBjNavigator.bbj-disabled (Navigator is disabled)

.BBjNavigator.bbj-focused (Navigator is focused)

.BBjNavigator.bbj-readonly (Navigator is readonly)

The following CSS applies a green gradient to the navigator:

.BBjNavigator, .BBjNavigator-first, .BBjNavigator-previous, .BBjNavigator-label, .BBjNavigator-next, .BBjNavigator-last

{

font-size: 16px !important;

background: rgb(180,227,145);

background: -moz-linear-gradient(top, rgba(180,227,145,1) 0%, rgba(97,196,25,1) 50%, rgba(180,227,145,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,227,145,1)), color-stop(50%,rgba(97,196,25,1)), color-stop(100%,rgba(180,227,145,1)));

background: -webkit-linear-gradient(top, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);

background: -o-linear-gradient(top, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);

background: -ms-linear-gradient(top, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);

background: linear-gradient(to bottom, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 );

}

.BBjNavigator-label

{

padding: 10px;

}

With those custom CSS styles, the navigator looks like this:

BBjPieChart

The BUI BBjPieChart is implemented as an <img> element. It defines the following style names:

.BBjPieChart

.BBjPieChart.bbj-disabled

Use CSS styles that would work with images, for example:

.BBjPieChart

{

opacity: 0.4;

border-radius: 15px;

border-width: 2px;

box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);

}

.BBjPieChart:hover

{

opacity:1.0;

}

That adds a rounded border and drop shadow to the chart image, and dims it unless the mouse is hovering over it.

Or to show a disabled BBjPieChart grayed out:

.BBjPieChart.bbj-disabled

{

opacity: 0.4;

}

BBjPopupMenu

The BBjPopupMenu defines the following style names:

.BBjPopupMenu (the top level control)

.BBjPopupMenu-menu (the vertical menu contained within the popup menu)

The BBjPopupMenu contains BBjMenu, BBjMenuItem, and BBjCheckableMenuItem elements. To style the BBjPopupMenu versions of these elements, specify the CSS selectors like this:

.BBjPopupMenu .BBjMenuItem

{

}

BBjProgressBar

The BBjProgressBar defines the following CSS style names:

.BBjProgressBar

.BBjProgressBar.bbj-disabled

.BBjProgressBar-bar

.BBjProgressBar-text

.BBjProgressBar-text-firstHalf

.BBjProgressBar-text-secondHalf

BBjRadioButton

The BBjRadioButton is implemented as an <input type="radio"> element with an associated label. It defines the following style names:

.BBjRadioButton

.BBjRadioButton.bbj-checked

.BBjRadioButton.bbj-disabled

.BBjRadioButton.bbj-focused

.BBjRadioButton.bbj-readonly

HTML checkbox and radiobutton elements are notoriously difficult to style.

BBjScrollBar

BBjSlider

For a sample BBjSlider, refer to the BUI Showcase (demo, code). The BBjSlider defines the following style names:

.BBjSlider

.BBjSlider.bbj-disabled

.BBjSlider.bbj-focused

.BBjSlider.bbj-horizontal

.BBjSlider.bbj-vertical

.BBjSlider.bbj-labels

.BBjSlider.bbj-ticks

.BBjSlider-line

.BBjSlider-line-sliding

.BBjSlider-knob

.BBjSlider-knob-sliding

.BBjSlider-label

.BBjSlider-minor-tick

.BBjSlider-major-tick

BBjSpinner

For BBjSpinner samples, refer to the BUI Showcase (demo, code). For styling details, refer to the individual controls: BBjEditBoxSpinner, BBjInputDSpinner, BBjInputESpinner, BBjInputNSpinner.

BBjStaticText

The BBjStaticText control is a simple HTML <div> element. It defines the following style names:

.BBjStaticText

.BBjStaticText.bbj-disabled

BBjStatusBar

The BBjStatusBar defines the following style names:

.BBjStatusBar (the primary style name)

.BBjStatusBar.bbj-disabled (the status bar is disabled)

.BBjStatusBar-segment (individual segments)

.BBjStatusBar-segment-first (first segment)

.BBjStatusBar-segment-last (last segment)

(Remember that it's possible for .BBjStatusBar-segment-first and .BBjStatusBar-segment-last to refer to the same segment.)

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(100,100,150,50,"StatusBar",$00090003$)

window!.setCallback(window!.ON_CLOSE,"eoj")

statusbar! = window!.addStatusBar(99,flags$)

vector! = bbjapi().makeVector()

vector!.add(25)

vector!.add(60)

vector!.add(65535)

statusbar!.setSegments(vector!)

statusbar!.setTextAt(0,"25")

statusbar!.setAlignmentAt(0,statusbar!.RIGHT)

statusbar!.setTextAt(1,"60")

statusbar!.setAlignmentAt(1,statusbar!.RIGHT)

statusbar!.setTextAt(2,"end")

statusbar!.setAlignmentAt(2,statusbar!.RIGHT)

process_events

eoj:

release

With the default styles, it looks like this:

With the styles below, it looks like this:

.BBjStatusBar

{

border-color: #c7c7c7;

background: rgb(255,255,255);

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));

background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );

}

.BBjStatusBar-segment

{

color: darkBlue;

border-color: #c7c7c7;

padding: 3px;

}

BBjTabCtrl

To see the effect of some simple CSS rules, we'll use the following BBjTabCtrl sample:

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(100,100,200,200,"TabCtrl",$00090083$,$$)

tabctrl! = window!.addTabCtrl(101,10,10,180,180,$0010$)

window!.setCallback(bbjapi().ON_CLOSE,"eoj")

for tab = 0 to 3

child = 1000 + tab

child! = window!.addChildWindow(child,0,0,150,130,"",$00000810$,child,$$)

child!.addEditBox(101,10*tab+10,10*tab+10,60,25,str(tab))

tabctrl!.addTab("Tab "+str(tab),child!)

next tab

window!.setTitle("TabCtrl ("+str(tab)+" tabs)")

tabctrl!.setVisible(1)

process_events

eoj:

release

With the default CSS, that BBjTabCtrl looks like this:

The BBjTabCtrl defines the following CSS style names:

.BBjTabCtrl (the top level control)

.BBjTabCtrl.bbj-disabled (the tab control is disabled)

.BBjTabCtrl.bbj-focused (the tab control is focused)

.BBjTabCtrl-tabs (the tab bar running across the top)

.BBjTabCtrl-tab (an individual tab)

.BBjTabCtrl-tab-selected (the selected tab)

.BBjTabCtrl-tab.bbj-disabled (a disabled tab)

.BBjTabCtrl-contentContainer (the body area of the tab that contains the currently selected tab child window)

.BBjTabCtrl-content (the window added to the tab)

We'll use the following test CSS to give the tabs a shiny purple-blue appearance:

.BBjTabCtrl-tab

{

color: white !important;

background-color: #00009f !important;

background-image: radial-gradient(160% 100% at 50% 0%,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%, hsla(0,30%,400%,0)) !important;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

.BBjTabCtrl-tab-selected

{

background-color: #00005f !important;

}

.BBjTabCtrl-contentContainer

{

border-color: #f0f0f0 !important;

}

With that CSS, the BBjTabCtrl looks like this:

BBjToolButton

The BBjToolButton can act as either a normal button or a click-on/click-off toggle button. It defines the following style names:

.BBjToolButton (the primary class name)

.BBjToolButton.bbj-checked (the toggle button is checked (on))

.BBjToolButton.bbj-disabled (the button is disabled)

.BBjToolButton.bbj-focused (the button is focused)

.BBjToolButton.bbj-toggle (this is a toggle-style tool button)

.BBjToolButton.bbj-transparent (button is set to transparent with setOpaque(0))

BBjTree

We'll use the following tree sample:

sysgui = unt

open (sysgui)"X0"

sysgui! = bbjapi().getSysGui()

window! = sysgui!.addWindow(50,50,300,300,"BBjTree",$00090003$)

window!.setCallback(window!.ON_CLOSE,"eoj")

tree! = window!.addTree(101,25,25,250,250)

tree!.setTreeEditable(1)

node = 0

tree!.setRoot(node,"Root")

for branch = 1 to 4

node = node + 1

tree!.addExpandableNode(node,parent,"Node "+str(node))

branch_node = node

for leaf = 1 to 4

node = node + 1

tree!.addNode(node,branch_node,"Node "+str(node))

next leaf

next branch

process_events

eoj:

release

With the default CSS styles, the tree looks like this:

The BBjTree defines the following CSS style names:

.BBjTree (the top level tree control)

.BBjTree-node (an individual node)

.BBjTree-node-image (an image icon within a node row)

.BBjTree-node-content (display text within a node row)

.BBjTree-node-edit (the edit control that the user types into to edit node text)

.BBjTree.bbj-disabled (the tree is disabled)

.BBjTree.bbj-focused (the tree is focused)

.BBjTree.bbj-readonly (the tree is readonly)

.BBjTree .bbj-selected (the selected node; note the space between the two parts)

The following CSS styles the edit control that the user types into to edit node text:

.BBjTree

{

}

.BBjTree .bbj-selected

{

}

.BBjTree-node-edit

{

font-size: 16px;

max-width: 150px;

outline: none;

background: rgb(255,255,255);

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));

background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);

background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);

background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );

}

With that CSS, the node editor looks like this:

BBjUserAuthentication

If User Authentication is selected in Enterprise Manager (see: Server Information, Environment), the user is prompted for a user name and password before being handed off to the application. By default, the login dialog looks like this:

Those five text values ("Login Required", "User:", "Password:", "Login", and "Cancel") can be customized through defined STBL values, either at runtime or in the config.bbx file. The styles can be customized with the following CSS style names:

.BBjUserAuthentication

.BBjUserAuthentication-title

.BBjUserAuthentication-panel

.BBjUserAuthentication-topPanel

.BBjUserAuthentication-userLabel

.BBjUserAuthentication-user

.BBjUserAuthentication-passwordLabel

.BBjUserAuthentication-password

.BBjUserAuthentication-buttonPanel

.BBjUserAuthentication-button

.BBjUserAuthentication-loginButton

.BBjUserAuthentication-cancelButton

And here's how it looks with a few very minor CSS tweaks:

.BBjUserAuthentication

{

}

.BBjUserAuthentication-title

{

background: blue !important;

border-color: blue !important;

}

.BBjUserAuthentication .dialogMiddleCenter

{

border-color: blue !important;

}

.BBjUserAuthentication-panel

{

background: #f0f0f0 !important;

}

.BBjUserAuthentication-topPanel

{

}

.BBjUserAuthentication-userLabel

{

}

.BBjUserAuthentication-user

{

}

.BBjUserAuthentication-passwordLabel

{

}

.BBjUserAuthentication-password

{

}

.BBjUserAuthentication-buttonPanel

{

}

.BBjUserAuthentication-loginButton

{

}

.BBjUserAuthentication-cancelButton

{

}