XUL Tutorial - Scroll Bars

Now, let's find out to add scroll bars to a window.

Adding Scroll Bars

A scroll bar is typically used so that a user can move around in a large document. You can also use it when you need to ask for a value that falls within a certain range. Scroll bars can be created in a number of ways. In XUL, one can be created using the scrollbar tag. HTML elements, such as large text boxes, will also add scroll bars as necessary.

First, we'll discuss creating a stand-alone scroll bar. This can be used when a value falls within a range. The user will set the value by adjusting the scroll bar. You probably won't use this too often. A scroll bar is made up of several parts, the slider, which is the main part of the scroll bar with the adjustable box, and the two arrow buttons on the end. A scroll bar creates all of these elements automatically.

The syntax of a scroll bar is as follows:

<scrollbar
    id="identifier"
    align="horizontal"/>
    curpos="20"
    maxpos="100"
    increment="1"
    pageincrement="10"/>

The attributes are as follows:

• id
  The unique identifer of the scroll bar
• align
  This specifies the direction of the scroll bar. The default is horizontal, which creates a scroll bar that extends from left to right. You can also specify vertical which creates a scroll bar that extends from top to bottom.
• curpos
  This indicates the current position of the scroll bar thumb (the box that you can slide back and forth.) The value ranges from 0 to the value of maxpos. This value does not need a unit. The default value is 0.
• maxpos
  This indicates the maximum position of the scroll bar thumb. The is a numeric value and does not have a unit. The default value is 100.
• increment
  The value here specifies how much the value of curpos changes by when the user clicks on one of the scroll bar arrows. The default value is 1.
• pageincrement
  The value here specify how much the value of curpos changes by when the user clicks pages through the scroll bar, which can be done by clicking on the tray between the box and the arrows. The default value is 10.

The example given in the syntax above will create a scroll bar that can range from a value of 0 to 100. The initial value is 20. The value has no special meaning to XUL. You could use it for whatever you want. Typically it would represent a position. When clicking on one of the scroll bar arrows, the value would change by 1 either up or down. By paging through the scroll bar, the value will change by 10.

When the user clicks the scroll bar arrows, the thumb will move by the amount specified by the value increment. Increasing the value of this attribute will cause the scroll bar to move farther with each click. The leftmost or topmost position of the scroll bar has the value 0 and the rightmost or bottommost position of the scroll bar has the value given by maxpos.

By adjusting the values of the scroll bar, you can have the thumb positioned just as you want it and the change when the user clicks the arrows just as you want it.

Scroll Bar Implementation

A scroll bar is actually made up of three separate elements, that is, a slider bar and two arrow buttons. It is possible to create the scroll bar out of these separate elements if you want to. Here is an example of the actual content that goes into a scroll bar:

<scrollbar id="scid" curpos="0" maxpos="100"
    increment="1" pageincrement="10">
  <scrollbarbutton type="decrement"/>
  <slider flex="1"/>
  <scrollbarbutton type="increment"/>
</scrollbar>

This is all created for you automatically if you don't put anything inside the scroll bar yourself.

• scrollbarbutton This element represents the buttons on each end of the scroll bar. The type attribute indicates the direction that the value changes. It can be set to either increment or decrement. (You must set this to one of them as there is no default.) This element has no real value outside of a scroll bar as it acts like a regular button.
• slider This element is the area for the thumb to slide across. It is essentially the same as a scroll bar without the arrow buttons. You can use this element outside of a scroll bar if you wish. The attributes of the scrollbar such as curpos can be used here as well. If a slider is placed inside a scroll bar, the attributes specified by the scroll bar override those specified by the slider.

You can use this fact to add additional buttons to a scroll bar if you wanted to. However, this type of change is best left to XBL, which is discussed in a later section.

(Next) Next, we'll look at how to create font and color pickers.