eXept Software AG Logo

Smalltalk/X Webserver

Documentation of class 'VariablePanel':

Home

Documentation
www.exept.de
Everywhere
for:
[back]

Class: VariablePanel


Inheritance:

   Object
   |
   +--GraphicsMedium
      |
      +--DisplaySurface
         |
         +--SimpleView
            |
            +--VariablePanel
               |
               +--FileBrowserV2PanelView
               |
               +--VariableHorizontalPanel
               |
               +--VariableVerticalPanel

Package:
stx:libwidg
Category:
Views-Layout
Version:
rev: 1.130 date: 2019/07/15 18:00:30
user: cg
file: VariablePanel.st directory: libwidg
module: stx stc-classLibrary: libwidg
Author:
Claus Gittinger

Description:


a View to separate its subviews vertically by a movable bar;
the size-ratios of the subviews can be changed by moving this bar.

In order to correctly setup this kind of view, the subviews must
be created with a relative origin & relative corner.
The panel does not verify the relative subview bounds; 
therefore, it is your responsibility to set those relative sizes to fit
according the orientation (see bad example below).

The bar-handle is either an exposed knob (style == #motif)
or the form defined in Scroller (style ~~ #motif)
or nothing.

Typically creation is done as:

    p := VariablePanel in:superView.
    p orientation:#vertical.

    v1 := <someViewClass> origin:0.0 @ 0.0
                          corner:1.0 @ 0.5
                              in:p.
    v2 := <someViewClass> origin:0.0 @ 0.5 
                          corner:1.0 @ 0.8 
                              in:p.
    v3 := <someViewClass> origin:0.0 @ 0.8 
                          corner:1.0 @ 1.0
                              in:p.

The two subclasses VariableHorizontalPanel and VariableVerticalPanel
preset the orientation. They are a kept for backward compatibility
(in previous versions, there used to be no common VariablePanel (super-) class).

Notice: if it is required to insert a fixed-size view in the panel,
use an extra view & insets, and place the subview into that extra view.
See examples.

[instance Variables:]

    barHeight               <Integer>       the height of the bar (for verticalPanels)
    barWidth                <Integer>       the width of the bar  (for horizontalPanels)

    separatingLine          <Boolean>       show a separating line (as in motif style)

    shadowForm              <Image/Form>    form (shadow part) drawn as handle - if nonNil

    lightForm               <Image/Form>    form (light part) drawn as handle - if nonNil

    showHandle              <Boolean>       if false, no handle is drawn

    handlePosition          <Symbol>        where is the handle - one of #left, #center, #right

    handleColor             <Color>         inside color of handle - defaults to viewBackground

    handleStyle             <Symbol>        type of handle; one of #next, #motif or nil

    handleLevel             <Integer>       3D level of handle (only valid if no form is given)

    trackLine               <Boolean>       if true, an inverted line is drawn for tracking;
                                            otherwise, the whole bar is inverted.

    redrawLocked                            internal - locks redraws while tracking

    orientation             <Symbol>        one of #horizontal / #vertical


[styleSheet values:]
    variablePanel.showHandle        true/false - should a handle be shown (default:true)

    variablePanel.handleStyle       #next / #motif / #iris / #full / nil (special handles)

    variablePanel.handlePosition    #left / #center / #right (default:#right)

    variablePanel.handleLevel       3D level of heandle (default:2)

    variablePanel.trackingLine      when moved, track an inverted line (as in motif)
                                    as opposed to tracking the whole bar (default:false)
                                    (obsoleted by trackingStyle)

    variablePanel.trackingStyle     #solidRectangle / #solidLine / #dashedLine
                                    detailed control over how to draw tracking
                                    (obsoletes trackingLine above)

    variablePanel.separatingLine    draw a separating line in the bar as in motif (default:false)

    variablePanel.handleColor       color of the handle. (default:Black)

    variablePanel.handleEnteredColor 
                                    color of the handle when the pointer is in the bar (default:nil)

    


Related information:

    PanelView

Class protocol:

defaults
o  cursorForOrientation: orientation
return an appropriate cursor

o  cursorForOrientation: orientation onDevice: device
return an appropriate cursor

o  lightFormOn: aDisplay
use same handle as Scroller

o  shadowFormOn: aDisplay
use same handle as Scroller

o  snapIcons
return a dictionary of snapIcons

usage example(s):

        DefaultSnapIcons := nil.
        self snapIcons

o  updateStyleCache
extract values from the styleSheet and cache them in class variables

usage example(s):

     VariablePanel updateStyleCache

image specs
o  horizontalResizeCursor
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self horizontalResizeCursor inspect
     ImageEditor openOnClass:self andSelector:#horizontalResizeCursor
     Icon flushCachedIcons

o  snapIconDown
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconDown inspect
     ImageEditor openOnClass:self andSelector:#snapIconDown

o  snapIconDown_dark
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconDown_dark inspect
     ImageEditor openOnClass:self andSelector:#snapIconDown_dark
     Icon flushCachedIcons

o  snapIconLeft
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconLeft inspect
     ImageEditor openOnClass:self andSelector:#snapIconLeft

o  snapIconLeftRight
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconLeftRight inspect
     ImageEditor openOnClass:self andSelector:#snapIconLeftRight
     Icon flushCachedIcons

o  snapIconLeftRight_dark
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconLeftRight_dark inspect
     ImageEditor openOnClass:self andSelector:#snapIconLeftRight_dark
     Icon flushCachedIcons

o  snapIconLeft_dark
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconLeft_dark inspect
     ImageEditor openOnClass:self andSelector:#snapIconLeft_dark
     Icon flushCachedIcons

o  snapIconRight
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconRight inspect
     ImageEditor openOnClass:self andSelector:#snapIconRight

o  snapIconRight_dark
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconRight_dark inspect
     ImageEditor openOnClass:self andSelector:#snapIconRight_dark
     Icon flushCachedIcons

o  snapIconUp
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconUp inspect
     ImageEditor openOnClass:self andSelector:#snapIconUp

o  snapIconUpDown
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconUpDown inspect
     ImageEditor openOnClass:self andSelector:#snapIconUpDown
     Icon flushCachedIcons

o  snapIconUpDown_dark
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconUpDown_dark inspect
     ImageEditor openOnClass:self andSelector:#snapIconUpDown_dark
     Icon flushCachedIcons

o  snapIconUp_dark
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self snapIconUp_dark inspect
     ImageEditor openOnClass:self andSelector:#snapIconUp_dark
     Icon flushCachedIcons

o  verticalResizeCursor
This resource specification was automatically generated
by the ImageEditor of ST/X.

usage example(s):

     self verticalResizeCursor inspect
     ImageEditor openOnClass:self andSelector:#verticalResizeCursor
     Icon flushCachedIcons


Instance protocol:

accessing-look
o  barHeight
return the height of the separating bar

o  barHeight: nPixel
set the height of the separating bar

o  barLevel: level
set the 3D level of the separating bar

o  handleImage: aBitmapOrImage
define the handles image

o  handleLabels: aCollectionOfLabels
define special handle labels - typically a collection of
bitmap images. Notice, that the first handle is not
drawn, that is, the first element if the argument is useless.

o  handleLevel: aNumber
define the 3D level of the handle (only with some styles).
Normally, this is defined via styleSheet files, but this entry allows
individual views to be manipulated.

o  handlePosition
return the position of the handle

o  handlePosition: aSymbol
define the position of the handle; the argument aSymbol
may be one of #left, #right or #center.
If never set by the program, the position is controlled by the styleSheet.

o  handleShadowImage: shadowImage lightImage: lightImage
define the handles image; both shadow and light parts

o  handleStyle: styleSymbol
define the style of the handle;
styleSymbol may be #motif to draw a little knob or
anything else to draw scrollBars handleForm.
Normally, this is defined via styleSheet files, but this entry allows
individual views to be manipulated.

o  orientation
return my orientation; either #horizontal or #vertical

o  orientation: aSymbol
change my orientation; aSymbol must be one of #horizontal or #vertical.
Changing implies a resize of my subViews.

o  relativeCorners
the returned collection gives the corner-fractional value for each component;
i.e. for a 20-40-40 look, it would be #(0.2 0.6 1.0)

o  relativeCorners: aCollectionOfRelativeCornerPositions
the argument gives the corner-fractional value for each component;
i.e. for a 20-40-40 look, it would be #(0.2 0.6 1.0)

o  setBarHeight: nPixel
check whether snap matches to extent of bar otherwise disable snap

o  showHandle
handle-drawing enabled/disable; a Boolean

o  showHandle: aBoolean
enabled/disable the handle-drawing

o  showHandleWhenEntered
return aBoolean

o  showHandleWhenEntered: aBoolean
enabled/disable the handle-drawing

o  snapHandlePosition
return the position of the snap-handle

usage example(s):

^ snapHandlePosition

o  snapHandlePosition: aSymbol
define the position of the snap-handle; the argument aSymbol
may be one of #left, #right or #center.
If never set by the program, the position is controlled by the styleSheet.

o  snapMode
allowed modes are:
nil no snap

#max on press the view is increased to bottom(vertical) or right(horizontal)
#min on press the view is decreased to top (vertical) or left (horizontal)
#maxMin on press the view is increased or decreased dependent on its current extent
#minMax on press the view is increased or decreased dependent on its current extent

o  snapMode: aMode
allowed modes are:
nil no snap

#max on press the view is increased to bottom(vertical) or right(horizontal)
#min on press the view is decreased to top (vertical) or left (horizontal)
#maxMin on press the view is increased or decreased dependent on its current extent
#minMax on press the view is increased or decreased dependent on its current extent

o  style: styleSymbol
define the style of the handle;
styleSymbol may be #motif to draw a little knob or
anything else to draw scrollBars handleForm.
Normally, this is defined via styleSheet files, but this entry allows
individual views to be manipulated.

adding & removing components
o  addSubView: aView
a view is added; adjust other subviews sizes

o  removeSubView: aView
a view is removed; adjust other subviews sizes

drawing
o  clearAndInvalidate

o  drawHandle: hIndex atX: hx y: hy
draw a single handle at hx/hy

o  drawHandleFormAtX: hx y: hy
draw a handle's bitmap at hx/hy

o  drawSnapAt: anIndex
draw the snap for a handle at an index

o  invertHandleBarAtX: hx y: hy

o  lockRedraw

o  redraw
redraw all of the handles

o  redrawHandlesFrom: start to: stop
redraw some handles and snaps

o  unlockRedraw

enumerating subviews
o  changeSequenceOrderFor: aSubView to: anIndex
change a subview's position in the subviews collection.

event handling
o  pointerEnter: buttonState x: x y: y
not called - see controller

o  pointerLeave: buttonState
not called - see controller

o  sizeChanged: how
my size has changed; resize my subviews

focus handling
o  wantsFocusWithButtonPress
no, do not catch the keyboard focus on button click

initialization & release
o  computeBarHeight
compute the height if the separating bar from either the
form or an explicit height given in the styleSheet

o  defaultControllerClass

o  initCursor
set the cursor - a double arrow

o  initStyle
setup viewStyle specifics

o  initialize
(comment from inherited method)
initialize all state of the view - usually redefined in subclasses,
but always doing a 'super initialize'. Each class should setup its
locals - and not forget the others.
View setup is separated into two parts, the general setup done here
and the style specific setup in initStyle. Each view should be prepared
for a stylechange by being sent another initStyle with a new style value.
(in this case, it should set all of its style-dependent things, but
leave the state and contents as-is)

private
o  anyNonRelativeSubviews
return true, if any of my subviews has no relative origin/extent

o  expandSubView: expandedView
expand one of my subviews to full size

o  handleLabelAt: hIndex

o  handleOriginsWithIndexDo: aBlock
evaluate the argument block for every handle-origin

o  handleOriginsWithIndexFrom: start to: stop do: aBlock
evaluate the argument block for some handle-origins

o  redrawIfShown

o  resizeSubViewsTo: relativeSizeList
change subviews sizes as defined in the argument list
(a collection of relative sizes)

o  resizeSubviews
readjust size of all subviews

o  resizeSubviews: subViews from: start to: stop
readjust size of some subviews

o  resizeSubviewsFrom: start to: stop
readjust size of some subviews

o  resizeVisibleSubviews
readjust size of all visible subviews

o  restoreSubViewRatios
restore my subviews sizes to the state before the full-expand

o  setupSubviewOrigins
setup subviews origins
if we only have relative extents
(Variable Panels need relative origins and corners!) (SV 16.1.95)

o  setupSubviews
setup subviews sizes (in case of non-relative sizes)

private-snap queries
o  canChangeExtentOfViewAt: anIndex
returns true if extent at an index is changable

o  initSnapAdornment
IdentityDictionary

o  snapAtIndexWillGrow: anIndex
returns true if the view assigned to the snap at an index will grow
if pressing the snap

o  snapLayoutAt: anIndex
returns the layout of the snap at an index
or nil if snaps are disabled

queries
o  hasSnapHandle

o  isHorizontal

o  isLayoutWrapper
answer true, if this view defines the layout of it's subviews

realization
o  fixSize
(comment from inherited method)
This is called right before the view is made visible.
Adjust the size of the view according to either relative/abs or
block extent; also set origin. Also, subclasses may redefine this
method to adjust the size based on some extent (for example, PopUpMenus
do so to take care of changed number of menu entries).

o  realize
force recomputation of subviews


Private classes:

    SnapAdornment

Examples:


example (notice that the subviews MUST have relative bounds):
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.

     v1 := View origin:0.0@0.0 corner:1.0@(1/2) in:p.
     v2 := View origin:0.0@(1/2) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
change the handles level:
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.
     p handleLevel:-1.

     v1 := View origin:0.0@0.0 corner:1.0@(1/3) in:p.
     v2 := View origin:0.0@(1/3) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
change the handles style to nil makes it invisible:
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.
     p handleStyle:nil.

     v1 := View origin:0.0@0.0 corner:1.0@(1/3) in:p.
     v2 := View origin:0.0@(1/3) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
define your own handle (-bitmap):
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.
     p handleImage:(Image fromFile:'bitmaps/ScrollLt.8.xbm').

     v1 := View origin:0.0@0.0 corner:1.0@(1/3) in:p.
     v2 := View origin:0.0@(1/3) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
another handle-bitmap:
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.
     p handleImage:(Form width:9
                         height:11
                         fromArray:#(
                                     2r00000000 2r00000000
                                     2r00001000 2r00000000
                                     2r00011100 2r00000000
                                     2r00111110 2r00000000
                                     2r01111111 2r00000000
                                     2r00000000 2r00000000
                                     2r01111111 2r00000000
                                     2r00111110 2r00000000
                                     2r00011100 2r00000000
                                     2r00001000 2r00000000
                                     2r00000000 2r00000000
                                    )
                   ).

     v1 := View origin:0.0@0.0 corner:1.0@(1/3) in:p.
     v2 := View origin:0.0@(1/3) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
placing scrolled and unscrolled views into a variablePanel:
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.

     v1 := ScrollableView for:SelectionInListView in:p.
     v1 origin:0.0 @ 0.0 corner:1.0 @ 0.5.
     v1 list:(FileDirectory directoryNamed:'/etc') contents.
     v1 action:[:selNr |
             |fullName stream text|
             fullName := '/etc/' , v1 selectionValue.
             stream := fullName asFilename readStream.
             stream notNil ifTrue:[
                 text := stream contents.
                 v2 contents:text.
                 v3 contents:text
             ]
     ].

     v2 := TextView origin:0.0 @ 0.5 corner:1.0 @ 0.8 in:p.

     v3 := ScrollableView for:TextView in:p.
     v3 origin:0.0 @ 0.8 corner:1.0 @ 1.0.
     top open
dynamically adding/removing views:
     |top p v1 v2 b|

     top := StandardSystemView new.
     top extent:300@300.

     b := Toggle label:'show' in:top.
     b showLamp:false.
     b origin:0.0 @ 0.0 corner:(1.0 @ 40).
     b action:[:state |
             state ifTrue:[
                 b label:'hide'.
                 v1 origin:0.0 @ 0.0 corner:1.0 @ 0.5.
                 v2 := ScrollableView for:EditTextView.
                 v2 origin:0.0 @ 0.5 corner:1.0 @ 1.0.
                 v2 contents:'another text'.
                 p addSubView:v2.
                 v2 realize.
             ] ifFalse:[
                 b label:'show'.
                 v2 destroy.
                 v1 origin:0.0 @ 0.0 corner:1.0 @ 1.0
             ]
         ].

     p := VariablePanel
             origin:0.0 @ 0.0
             corner:1.0 @ 1.0
             in:top.
     p orientation:#vertical.
     p topInset:50.

     v1 := ScrollableView for:EditTextView in:p.
     v1 origin:0.0 @ 0.0 corner:1.0 @ 1.0.
     v1 contents:'some text'.

     top open
dynamically flipping orientation: Notice: you have to change the relative bounds of the subviews first.
     |top p v1 v2 b|

     top := StandardSystemView new.
     top extent:300@300.

     b := Toggle label:'flip' in:top.
     b showLamp:false.
     b origin:0.0 @ 0.0 corner:(1.0 @ 40).
     b action:[:state |
             state ifTrue:[
                 v1 origin:0.0 @ 0.0 corner:0.5 @ 1.0.
                 v2 origin:0.5 @ 0.0 corner:1.0 @ 1.0.
                 p orientation:#horizontal.
             ] ifFalse:[
                 v1 origin:0.0 @ 0.0 corner:1.0 @ 0.5.
                 v2 origin:0.0 @ 0.5 corner:1.0 @ 1.0.
                 p orientation:#vertical.
             ].
         ].

     p := VariablePanel
             origin:0.0 @ 0.0
             corner:1.0 @ 1.0
             in:top.
     p orientation:#vertical.
     p topInset:50.

     v1 := ScrollableView for:EditTextView in:p.
     v1 origin:0.0 @ 0.0 corner:1.0 @ 0.5.
     v1 contents:'some text'.

     v2 := ScrollableView for:EditTextView in:p.
     v2 origin:0.0 @ 0.5 corner:1.0 @ 1.0.
     v2 contents:'another text'.

     top open
combining fix-size with variable size: (need 3 extra frame-views to place the extra labels into)
     |top p v1 l1 v2 l2 v3 l3 f1 f2 f3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.

     p orientation:#vertical.

     f1 := View origin:0.0@0.0 corner:1.0@0.3 in:p.
     f2 := View origin:0.0@0.3 corner:1.0@0.6 in:p.
     f3 := View origin:0.0@0.6 corner:1.0@1.0 in:p.

     v1 := View origin:0.0 @ 0.0 corner:1.0 @ 1.0 in:f1.
     v2 := View origin:0.0 @ 0.0 corner:1.0 @ 1.0 in:f2.
     v3 := View origin:0.0 @ 0.0 corner:1.0 @ 1.0 in:f3.

     l1 := Label label:'sub1' in:f1.
     l2 := Label label:'sub2' in:f2.
     l3 := Label label:'sub3' in:f3.

     l1 origin:0.0 @ 0.0 corner:1.0 @ 0.0 ; 
        bottomInset:(l1 preferredExtent y negated).
     l2 origin:0.0 @ 0.0 corner:1.0 @ 0.0 ; 
        bottomInset:(l2 preferredExtent y negated).
     l3 origin:0.0 @ 0.0 corner:1.0 @ 0.0 ; 
        bottomInset:(l3 preferredExtent y negated).

     v1 topInset:(l1 preferredExtent y); level:-1.
     v2 topInset:(l2 preferredExtent y); level:-1.
     v3 topInset:(l3 preferredExtent y); level:-1.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
VerticalPansels allow a label to be associated with the handles; this looks much like the above, but is slightly more compact. Notice, no label can be placed above the first view - it has no handle.
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.

     p orientation:#vertical.
     p handleLabels:#('ignored' 'sub2' 'sub3').

     v1 := View origin:0.0@0.0 corner:1.0@0.3 in:p.
     v2 := View origin:0.0@0.3 corner:1.0@0.6 in:p.
     v3 := View origin:0.0@0.6 corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
handle labels can be more than strings .... (however, they should have about the same height, since the largest defines heights of all bars; retry the example below with a larger bitmap image ...)
     |top e p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.

     p orientation:#vertical.
     e := Array with:#bold
                with:#color->Color red.

     p handleLabels:(Array with:nil
                           with:('bold and red' asText emphasizeAllWith:e)
                           with:(Image fromFile:'ScrollRt.xbm')).

     v1 := View origin:0.0@0.0 corner:1.0@0.3 in:p.
     v2 := View origin:0.0@0.3 corner:1.0@0.6 in:p.
     v3 := View origin:0.0@0.6 corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
BAD EXAMPLE (wrong relative sizes - repaired on handle move):
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.

     v1 := View origin:0.0 @ 0.0   corner:1.0 @ (1/4) in:p.
     v2 := View origin:0.0 @ (1/2) corner:1.0 @ (3/4) in:p.
     v3 := View origin:0.0 @ (3/4) corner:1.0 @ 1.0   in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
example with snapMode:
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.
     p snapMode:#min.

     v1 := View origin:0.0@0.0 corner:1.0@(1/2) in:p.
     v2 := View origin:0.0@(1/2) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open
example with redefined handle-image:
     |top p v1 v2 v3|

     top := StandardSystemView new.
     top extent:300@300.

     p := VariablePanel 
              origin:0.0 @ 0.0
              corner:1.0 @ 1.0
              in:top.
     p orientation:#vertical.
     p handleImage:(ToolbarIconLibrary barResizeVerticalIcon).
     p showHandle:true.

     v1 := View origin:0.0@0.0 corner:1.0@(1/2) in:p.
     v2 := View origin:0.0@(1/2) corner:1.0@(2/3) in:p.
     v3 := View origin:0.0@(2/3) corner:1.0@1.0 in:p.

     v1 viewBackground:(Color red).
     v2 viewBackground:(Color green).
     v3 viewBackground:(Color yellow).

     top open


ST/X 7.2.0.0; WebServer 1.670 at bd0aa1f87cdd.unknown:8081; Fri, 13 Dec 2019 15:37:49 GMT