List Box items are used to display a group of objects contained in an internal list by the program. It is possible to select one object from the list and have other items and the program recognize that choice. You can choose which internal list you wish to display and can customize the box they are shown in.
itemDef
{
name headlist
rect 119 360 200 100
type ITEM_TYPE_LISTBOX
elementwidth 200
elementheight 20
elementtype LISTBOX_TEXT
textscale .33
feeder FEEDER_Q3HEADS
forecolor 1 1 1 1
visible MENU_TRUE
}
This is simple List Box that displays a listing of the names of all the Quake 3 models that are avalible. It uses the default scroll bar graphics. The elements of the list are text of 16 pt size (48x0.33) and are displayed in lines that are 200x20 in size. In text List Boxes the element width is ignored and the text is drawn completely, even if it overlaps something else. Remember, that the scroll bar takes up space in the box and you must allow for this when figuring out element size.
Since a List Box doesn't draw the box by default there is nothing to indicate where the box actually is. To show the box you must use a background, either color or graphic, and possibly a border.
itemDef
{
name headlist
rect 119 360 200 100
style WINDOW_STYLE_FILLED
backcolor 0 0 1 .5
border WINDOW_BORDER_FULL
bordercolor .5 .5 .5 1
type ITEM_TYPE_LISTBOX
elementwidth 200
elementheight 20
elementtype LISTBOX_TEXT
textscale .33
feeder FEEDER_Q3HEADS
forecolor 1 1 1 1
visible MENU_TRUE
}
We've changed the window style so we can fill the background with a semitransparent blue and added a grey border all the way around the box. Now the box is visible.
One other problem we have with this List Box is there is no way to see which object in the list is selected. The focus color used by other items is not used in List Boxes. Instead, you have to define the color used to tint the selected object.
itemDef
{
name headlist
rect 119 360 200 100
style WINDOW_STYLE_FILLED
backcolor 0 0 1 .5
border WINDOW_BORDER_FULL
bordercolor .5 .5 .5 1
type ITEM_TYPE_LISTBOX
elementwidth 200
elementheight 20
elementtype LISTBOX_TEXT
textscale .33
feeder FEEDER_Q3HEADS
forecolor 1 1 1 1
outlinecolor 1 .75 0 .25
visible MENU_TRUE
}
The outlinecolor command sets the highlight color used. The object is highlighted by drawing a box of this color over top of it, so a transparent alpha must be used.
Some of the lists maintained by the program are displayed as a graphic if the list element type is set to graphic. The list of models we used previously is one of those.
itemDef
{
name headlist
rect 119 360 100 100
style WINDOW_STYLE_FILLED
backcolor 0 0 1 .5
border WINDOW_BORDER_FULL
bordercolor .5 .5 .5 1
type ITEM_TYPE_LISTBOX
elementwidth 40
elementheight 40
elementtype LISTBOX_IMAGE
feeder FEEDER_Q3HEADS
visible MENU_TRUE
)
Here we changed the element type to LISTBOX_IMAGE so the list will display as a graphic rather than text. The element size is now 40x40 and the graphic will be drawn to fit this size. The same background and border are used. There is no outlinecolor defined since it is not used by graphic objects. Instead, the graphic is outlined by a flashing red line when it is selected.
Two of the lists maintained by the program, dealing with servers, return more than a single text object per line. The feeder we have been using, FEEDER_Q3HEADS, only returns the name of the model per line. The FEEDER_SERVER feeder returns 6 text objects per line in the list and the FEEDER_SERVERSTATUS feeder returns 4 per line. To make this information display correctly we must tell the item how to divide up the element width into columns to hold each object.
itemDef
{
name serverlist
rect 10 128 620 235
type ITEM_TYPE_LISTBOX
style WINDOW_STYLE_FILLED
border WINDOW_BORDER_FULL
bordercolor .5 .5 .5 1
forecolor 1 1 1 1
backcolor 0 0 .7 .25
elementheight 20
textscale .25
elementtype LISTBOX_TEXT
feeder FEEDER_SERVERS
outlinecolor 0 1 0 .25
visible MENU_TRUE
columns 6
2 0 40
275 0 20
400 0 10
460 0 10
560 0 20
600 0 3
}
This List Box displays information about the list of servers maintained by the program. It is very much like the other List Boxes we looked at in that it has a colored background with borders and uses an outlinecolor to highlight the selected line. Since this particular feeder returns six text objects per line, we use the columns command to format the line to display these objects. We tell the item to use 6 columns and then tell it where each column starts (column 1 is 2 pixels right of the left side of the box, column 2 is 275 pixels right, column 3 is 400 pixels right of the left side of the box and so on.), an unused value (0 for all columns) and the maximum number of characters to display in the column (column 1 displays 40 characters max, column 2 displays 20 characters max and so on). Using this information, the List Box item will display the server list in neat columns. If you specify less than 6 columns in this command then only that number of columns will be displayed. For example, if you specified 5 columns, then the last column of text (the Punkbuster status) would not be displayed. Also, if you set the maximum number of characters to 0 then that column will not be displayed.
Columns can be used by other List Boxes that only return one text object per line to format the display. This allows you to offset the text to the right and limit the number of charcters drawn to avoid overwriting another object.
itemDef
{
name headlist
rect 119 360 200 100
style WINDOW_STYLE_FILLED
backcolor 0 0 1 .5
border WINDOW_BORDER_FULL
bordercolor .5 .5 .5 1
type ITEM_TYPE_LISTBOX
elementwidth 200
elementheight 20
elementtype LISTBOX_TEXT
textscale .33
feeder FEEDER_Q3HEADS
forecolor 1 1 1 1
outlinecolor 1 .75 0 .25
visible MENU_TRUE
columns 1 10 0 20
}
We tell the item to use one column, since there is only one text object, and offset it 10 pixels from the left side of the box. There will be a maximum of 20 characters drawn.
While, by default all List Boxes scroll vertically, you can make those List Boxes that return a graphic scroll horizontally. Our List Box that showed the list of player models can return a graphic so it is a candidate for horizontal scrolling.
itemDef
{
name headlist
rect 119 360 160 50
style WINDOW_STYLE_FILLED
backcolor 0 0 1 .5
border WINDOW_BORDER_FULL
bordercolor .5 .5 .5 1
type ITEM_TYPE_LISTBOX
elementwidth 40
elementheight 40
elementtype LISTBOX_IMAGE
feeder FEEDER_Q3HEADS
visible MENU_TRUE
horizontalscroll
)
We added the horizontalscroll command to change the scrolling direction and modified the window size to reflect a horizontal box.
If you wish to customize the scroll bar used by the program you can either replace the default graphics with new graphics bearing the same name or, more elegantly, define new graphics in the globalAssetDef section. This also would allow you to change the width of the scroll bar, if so desired. The scroll bar graphics used by Jedi Knight 2 look like these :
 |
 |
 |
| jk2scrollbar.tga |
jk2scrollbar_arrow_dwn_a.tga |
jk2scrollbar_arrow_left.tga |
| |
|
|
 |
 |
 |
| jk2scrollbar_arrow_right.tga |
jk2scrollbar_arrow_up_a.tga |
jk2scrollbar_thumb.tga |
and are used in shaders of the same name to apply some effects to them. In your assetGlobalDef section add the following :
scrollBarHorz "ui/assets/jk2scrollbar"
scrollBarVert "ui/assets/jk2scrollbar"
scrollBarThumb "ui/assets/jk2scrollbar_thumb"
scrollBarArrowLeft "ui/assets/jk2scrollbar_arrow_left"
scrollBarArrowRight "ui/assets/jk2scrollbar_arrow_right"
scrollBarArrowUp "ui/assets/jk2scrollbar_arrow_up_a"
scrollBarArrowDown "ui/assets/jk2scrollbar_arrow_dwn_a"
scrollbarSize 16
This will redefine the scroll bar graphics, using the same background graphic for both horizontal and vertical bars, and set the bar width to 16 pixels. If your bar background doesn't look correct when it is used for both scroll directions you can create a different graphic for each direction and assign them using scrollBarHorz and scrollBarVert.
