Previous
Contents
Next

Advanced Programming Techniques for MVC

Scrolling


Ready-to-use vertical scrolling is implemented for list views and text views. Sometimes it is desirable to:

When the inset display box of a view it too small to fully display the view contents, one can display only a part of the contents. Whenever this happens, one has to provide a facility that allows the user to select the part of the view contents that he wants to see. The commonly accepted viewport selection facility is a scrollbar, a small rectangular area that appears to the left of a view that contains the cursor. A scrollbar contains a gray box that indicates which part of the view contents is currently visible.

Squeak provides ready-to-use vertical scrolling for text views and for list views. Scrolling is an activity that involves both a controller and its associated view. Vertical scrolling is implemented in ScrollController, which is the superclass of all more specialized controllers that offer support for vertical scrolling. For the views, class View implements a general (and very simple) scrolling protocol.

The out-of-the-box Squeak does not provide support for horizontal scrolling, but it is not very difficult to add that feature when it is needed.

This section explains how to program scrollable windows. The source file for the following first example is ScrollDemo1.cs.

Model subclass: #ScrollDemo1
	instanceVariableNames: ''
	classVariableNames: ''
	poolDictionaries: ''
	category: 'MVC-Tutorial'

Instance protocol:

open4Views

   "ScrollDemo1 open4Views"

   | topView containerView model drawing1 drawing2 drawing3 drawing4 |

 model := self new.
 topView := ColorSystemView new
              label: 'Drawing'.
 topView model: model.
 topView borderWidth: 1.
 containerView := View new.
 containerView model: model.
 containerView borderWidth: 1.
 containerView controller: ScrollController new.
 containerView window: (0 @ 0 extent: 100 @ 100).
 topView addSubView: containerView.

 drawing1 := DrawingDisplayView new.
 drawing1 borderWidthLeft: 0 right: 0 top: 0 bottom: 1.
 drawing1 window: (0 @ 0 extent: 100 @ 50).
 containerView addSubView: drawing1.

 drawing2 := DrawingDisplayView new.
 drawing2 borderWidthLeft: 0 right: 0 top: 1 bottom: 1.
 drawing2 window: (0 @ 0 extent: 100 @ 50).
 containerView addSubView: drawing2 below: drawing1.

 drawing3 := DrawingDisplayView new.
 drawing3 borderWidthLeft: 0 right: 0 top: 1 bottom: 1.
 drawing3 window: (0 @ 0 extent: 100 @ 50).
 containerView addSubView: drawing3 below: drawing2.

 drawing4 := DrawingDisplayView new.
 drawing4 borderWidthLeft: 0 right: 0 top: 1 bottom: 0.
 drawing4 window: (0 @ 0 extent: 100 @ 50).
 containerView addSubView: drawing4 below: drawing3.

 topView controller open.

The instance protocol is very simple, it provides only the method initialExtent.

initialExtent

^200 @ 200

Now we have a scrollable container view that scrolls over four subviews:

At first glance, this looks very nice, but a closer look at this example reveals a surprising imperfection:

The source file for the second example is ScrollDemo2.cs.

The source file for the third example is ScrollDemo3.cs.


Previous
Contents
Next