Previous: Modifying the application to display pre-stored data
Up: Widgets
Next: Menus
Previous Page: Modifying the application to display pre-stored data
Next Page: Menus

Scrolling and scrollbar widgets

Several standard widgets are able to contain more information than can be displayed. These include

• label widgets - though it is unusual to have a label which contains too much text to display
• entry widgets
• listboxes
• text widgets
• canvases

These widgets can be controlled in such a way that relevant text or images can be moved into view, either horizontally or vertically. This process is called scrolling. Scrolling can be achieved by sending a command to the widget to be controlled.

A simple way to see this is to run wish and to source the earlier listbox example - with the rainbow colours.

Now issue the commands

.listbox1 yview 3
   .listbox1 yview 10
   .listbox1 yview 20
   .listbox1 yview 1
   .listbox1 yview end

and watch what happens. You should see the contents of the box move up and down in response to the commands.

The following example shows how to control a listbox with two buttons, one to scroll the data in the listbox up, and one to scroll the data down.

#Shows how to control listbox scrolling
   #Set up a listbox to show European cities
   listbox .listbox2

   #The following is an example of a widget specific command -this is
   #the insert operation for listboxes, which inserts a list of
   #items starting at line 0
   .listbox2 insert 0 Aberdeen Alicante Athens Basel Berne  
        Bilbao Cannes Edinburgh Glasgow Geneva  
        Lisbon London Madrid  
        Munich Paris Rome  
        Rouen Venice Zurich

   #The only way this can be scrolled at present is by
   #using Button 2 to grab the text. Now we'll try to attach
   #some buttons to control it.

   #Set up a new frame with two buttons
   frame .fr -relief raised
   button .fr.button1 -text "UP" -command {.listbox2 yview 1}
   button .fr.button2 -text "DOWN" -command  {.listbox2 yview 10}

   #The buttons are associated with listbox commands to move the
   #data which is in view.

   #Now pack everything together

   pack .listbox2 .fr -side left -padx 1m -fill x
   pack .fr.button1 .fr.button2 -padx 1m -pady 2m -fill x -fill y

Finally, and at last, the next example shows how to use a scrollbar to move the data within the listbox.

#Shows how to control listbox scrolling using
   #a scrollbar

   #First set up scrollbar
   scrollbar .vscroll -relief sunken -command ".listbox3 yview"

   #Set up a listbox to show European cities
   listbox .listbox3 -yscroll ".vscroll set"

   #The following is an example of a widget specific command -this is
   #the insert operation for listboxes, which inserts a list of
   #items starting at line 0
   .listbox3 insert 0 Aberdeen Alicante Athens Basel Berne  
        Bilbao Cannes Edinburgh Glasgow Geneva  
        Lisbon London Madrid  
        Munich Paris Rome  
        Rouen Venice Zurich

   #Now pack everything together

   pack .vscroll  -side right -fill y
   pack .listbox3 -expand yes -fill y

Note how in this example, the scrollbar communicates with the listbox by supplying a widget command of the form

.listbox3 yview n

When the listbox scrolls, it issues a command

.vscroll set tu wu fu lu

where tu wu fu and lu are integers supplied by the listbox widget in order to collaborate with the scrollbar.

This behaviour is initialized by the use of the -yscroll option in the definition of .listbox3.