
CHAPTER 4: User-Interface Tools Types of controls 73
If a script does not explicitly set the preferredSize or size property of an element that displays a icon
image, the value of
preferredSize is determined by the dimensions of the iconic image. If the size values
are explicitly set to dimensions smaller than those of the actual image graphic, the displayed image is
clipped. If they are set to dimensions larger than those of the image graphic, the displayed image is
centered in the larger space. An image is never scaled to fit the available space.
Creating multi-column lists
In list controls (ListBox, DropDownList, TreeView), a set of ListItem objects represents the individual
choices in the list. Each choice can be labeled with a localizable string, an image, or both, as specified by
the text
and image properties of the ListItem (see “Displaying images” on page 72).
You can define a ListBox
to have multiple columns, by specifying the numberOfColumns creation
parameter. By default, the number of columns is 1. If you specify multiple columns, you can also use the
creation parameters to specify whether headers are shown, and the header text for each column.
If you specify more than one column, each ListItem
object that you add to the box specifies one selectable
row. The
text and image of the ListItem object specifies the label in the first column, and the subitems
property specifies labels that appear in that row for the remaining columns.
The subitems
value is an array, whose length is one less than the number of columns. That is, the first
member,
ListItem.subitems[0], specifies the label in the second column. Each member specifies one
label, as a JavaScript object with two properties:
{ text : displayString , image : imageFileReference }
For example, the following fragment defines a list box with two columns, and specifies the labels in each
column for the two choices:
...
// create list box with two titled columns
var list = dlg.add ('ListBox', [0, 0, 150, 75], 'asd',
{numberOfColumns: 2, showHeaders: true,
columnTitles: ['First Name', 'Last Name']});
// add an item for the first row, with the label value for the first column
var item1 = list.add ('item', 'John');
// add the label value for the second column in that row.
item1.subItems[0].text = 'Doe';
// add an item for the second row, with the text for the first column label
var item2 = list.add ('item', 'Jane');
// add the label text and image for the second column in the second row
item2.subItems[0].text = 'Doe';
item2.subItems[0].image = File ("~/Desktop/Step1.png");
...
This creates a control that looks like this:
Comentários a estes Manuais