Member variable XbpListBox():visualStyle

Specifies the visual style to use for displaying items.

Attribute: EXPORTED

Data type: Object (NIL)

The default representation used for displaying the items in a list box object can be overridden using the :visualStyleinstance variable. To do this, an instance of the XbpHTMLStyle() class must be assigned to :visualStyle, which is then used to draw the items.

HTML style objects use HTML markup and optional CSS style sheets to create the visual representation of each item. For this, the item's HTML markup must be specified in the <cItem>parameter when calling :addItem(). In addition, if a CSS style sheet is to be used, the CSS must be supplied when instantiating the XbpHTMLStyle object.

The following code snippet shows the basic steps required for using a custom visual style with an XbpListBox object.

(...) 
// 
// Define the representation of 
// the list box items via CSS. 
// Note that dedicated styling 
// is defined for the item's 
// "selected" state. 
// 
TEXT INTO cCSS WRAP 
 <style> 
  .item { 
     font-size: 15px; 
     color: #232323; 
     height: 100%; 
  } 
  .item:active { 
     color: white; 
     background-color: blue; 
  } 
 </style> 
ENDTEXT 

// 
// Create the HTML style object 
// and assign the styling defined 
// via CSS. 
// 
oStyle := XbpHTMLStyle():New( cCSS ) 
oStyle:MinHeight:= 52 

// 
// Create the list box object 
// and assign the HTML style 
// 
oCb:= XbpListBox():New( oParent ) 
oCb:VisualStyle := oStyle 
oCb:Create( ,, {50,80}, {300,230} ) 

// 
// Add two items to the list box. 
// The item content is defined in 
// the HTML markup, the visual 
// representation is defined in the 
// CSS 
// 
oCb:AddItem( [<div class="item">Item #1</div>] ) 
oCb:AddItem( [<div class="item">Item #2</div>] ) 
(...)

If you see anything in the documentation that is not correct, does not match your experience with the particular feature or requires further clarification, please use this form to report a documentation issue.

Member variable XbpListBox():visualStyle Foundation