Smalltalk/X Webserver

Documentation of class 'VerticalPanelView':

Class: VerticalPanelView

Inheritance
Description
Class protocol
- queries
Instance protocol
Examples

Inheritance:

   Object
   |
   +--GraphicsMedium
      |
      +--DisplaySurface
         |
         +--SimpleView
            |
            +--PanelView
               |
               +--VerticalPanelView

Package:: stx:libwidg

Category:: Views-Layout

Version:: rev: 1.67 date: 2023/06/23 17:52:36; user: cg; file: VerticalPanelView.st directory: libwidg; module: stx stc-classLibrary: libwidg

Description:

a View which arranges its child-views in a vertical column.
All real work is done in PanelView - except the layout computation is
redefined here.

The layout is controlled by the instance variables: 
    horizontalLayout and verticalLayout
in addition to 
    horizontalSpace and verticalSpace.

The vertical layout can be any of:

    #top            arrange elements at the top
    #topSpace       arrange elements at the top, start with spacing
    #bottom         arrange elements at the bottom
    #bottomSpace    arrange elements at the bottom, start with spacing
    #center         arrange elements in the center; ignore verticalSpace
    #spread         spread elements evenly; ignore verticalSpace
    #spreadSpace    spread elements evenly with spacing at ends; ignore verticalSpace
    #fit            like #spread, but resize elements for tight packing; ignore verticalSpace
    #fitSpace       like #fit, with spacing; ignore verticalSpace
    #topFit         like #top, but resize the last element to fit
    #topSpaceFit    like #topSpace, but resize the last element to fit
    #bottomFit      like #bottom, but resize the first element to fit
    #bottomSpaceFit like #bottomSpace, but resize the first element to fit

the horizontal layout can be:

    #left           place element at the left
    #leftSpace      place element at the left, offset by horizontalSpace
    #center         place elements horizontally centered; ignore horizontalSpace
    #right          place it at the right
    #rightSpace     place it at the right, offset by horizontalSpace
    #fit            resize elements horizontally to fit this panel; ignore horizontalSpace
    #fitSpace       like #fit, but add spacing; ignore horizontalSpace

    #leftMax        like #left, but resize elements to max of them
    #leftSpaceMax   like #leftSpace, but resize elements
    #centerMax      like #center, but resize elements
    #rightMax       like #right, but resize elements to max of them
    #rightSpaceMax  like #rightSpace, but resize elements

The defaults is #center for both directions.

The layout is changed by the messages #verticalLayout: and #horizontalLayout:.
For backward compatibility (to times, where only vLayout existed), the simple
#layout: does the same as #verticalLayout:. Do not use this old method.

The panel assumes, that the elements do not resize themselfes, after it
became visible. This is not true for all widgets (buttons or labels may
like to change). If you have changing elements, tell this to the panel
with 'aPanel elementsChangeSize:true'. In that case, the panel will react
to size changes, and reorganize things.

If none of these layout/space combinations is exactly what you need in
your application, create a subclass, and redefine the setChildPositions method.

CAVEAT: this class started with #top and no horizontal alignments;
as time went by, more layouts were added and the setup should be changed
to use different selectors for space, max-resize and alignment
(i.e. having more and more layout symbols makes things a bit confusing ...)

copyrightCOPYRIGHT (c) 1989 by Claus Gittinger
             All Rights Reserved

This software is furnished under a license and may be used
only in accordance with the terms of that license and with the
inclusion of the above copyright notice.   This software may not
be provided or otherwise made available to, or used by, any
other person.  No title to or ownership of the software is
hereby transferred.

Class protocol:

queries

possibleHorizontalLayouts
possibleVerticalLayouts

Instance protocol:

accessing

horizontalLayout: return the horizontal layout as symbol.
the returned value is one of
#left place element at the left
#leftSpace place element at the left, offset by horizontalSpace
#center place elements horizontally centered; ignore horizontalSpace
#right place it at the right
#rightSpace place it at the right, offset by horizontalSpace
#fit resize elements horizontally to fit this panel; ignore horizontalSpace
#fitSpace like #fit, but add spacing; ignore horizontalSpace

#leftMax like #left, but resize elements to max of them
#leftSpaceMax like #leftSpace, but resize elements
#centerMax like #center, but resize elements
#rightMax like #right, but resize elements to max of them
#rightSpaceMax like #rightSpace, but resize elements
the default is #centered
horizontalLayout: aSymbol: change the horizontal layout as symbol.
The argument, aSymbol must be one of:
#left place element at the left
#leftSpace place element at the left, offset by horizontalSpace
#center place elements horizontally centered; ignore horizontalSpace
#right place it at the right
#rightSpace place it at the right, offset by horizontalSpace
#fit resize elements horizontally to fit this panel; ignore horizontalSpace
#fitSpace like #fit, but add spacing; ignore horizontalSpace

#leftMax like #left, but resize elements to max of them
#leftSpaceMax like #leftSpace, but resize elements
#centerMax like #center, but resize elements
#rightMax like #right, but resize elements to max of them
#rightSpaceMax like #rightSpace, but resize elements
the default (if never changed) is #centered
layout: something: OBSOLETE compatibility interface. Will vanish.
leftover for historic reasons - do not use any more.
In the meantime, try to figure out what is meant ... a kludge

** This is an obsolete interface - do not use it (it may vanish in future versions) **
rowHeight: something
verticalLayout: return the vertical layout as a symbol.
the returned value is one of
#top arrange elements at the top
#topSpace arrange elements at the top, start with spacing
#bottom arrange elements at the bottom
#bottomSpace arrange elements at the bottom, start with spacing
#center arrange elements in the center; ignore verticalSpace
#spread spread elements evenly; ignore verticalSpace
#spreadSpace spread elements evenly with spacing at ends; ignore verticalSpace
#fit like #spread, but resize elements for tight packing; ignore verticalSpace
#fitSpace like #fit, with spacing; ignore verticalSpace
#topFit like #top, but resize the last element to fit
#topSpaceFit like #topSpace, but resize the last element to fit
#bottomFit like #bottom, but resize the first element to fit
#bottomSpaceFit like #bottomSpace, but extend the first element to fit
the default is #centered
verticalLayout: aSymbol: change the vertical layout as a symbol.
The argument, aSymbol must be one of:
#top arrange elements at the top
#topSpace arrange elements at the top, start with spacing
#bottom arrange elements at the bottom
#bottomSpace arrange elements at the bottom, start with spacing
#center arrange elements in the center; ignore verticalSpace
#spread spread elements evenly; ignore verticalSpace
#spreadSpace spread elements evenly with spacing at ends; ignore verticalSpace
#fit like #spread, but resize elements for tight packing; ignore verticalSpace
#fitSpace like #fit, with spacing; ignore verticalSpace
#topFit like #top, but resize the last element to fit
#topSpaceFit like #topSpace, but resize the last element to fit
#bottomFit like #bottom, but resize the first element to fit
#bottomSpaceFit like #bottomSpace, but extend the first element to fit
the default (if never changed) is #centered

layout

setChildPositions: (re)compute position and possibly the extent of every child

queries

computePreferredExtent: return a good extent, one that makes subviews fit

These examples demonstrate the effect of different layout settings. You should try more examples, combining spacing and different verticalLayout:/horizontalLayout: combinations. example: default layout (centered)

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'center (default)'.
    p := VerticalPanelView in:v.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: rows

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'center (default)'.
    p := VerticalPanelView in:v.
    p rowHeight:50.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: horizontal centerMax

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'hL=centerMax'.
    p := VerticalPanelView in:v.
    p horizontalLayout:#centerMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: horizontal leftMax

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'hL=leftMax'.
    p := VerticalPanelView in:v.
    p horizontalLayout:#leftMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: horizontal leftSpaceMax

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'hL=leftMax'.
    p := VerticalPanelView in:v.
    p horizontalLayout:#leftSpaceMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: horizontal rightMax

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'hL=rightMax'.
    p := VerticalPanelView in:v.
    p horizontalLayout:#rightMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: horizontal rightSpaceMax

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'hL=rightMaxSpace'.
    p := VerticalPanelView in:v.
    p horizontalLayout:#rightSpaceMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'b2' in:p.
    b3 := Button label:'butt3' in:p.
    v extent:100 @ 300.
    v open

example: top-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=top; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#top.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: topSpace-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=topSpace; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#topSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: top-layout; horizontal fit

    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := VerticalPanelView in:v.
    v label:'vL=top; hL=fit'.
    p verticalLayout:#top.
    p horizontalLayout:#fit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: top-layout; horizontal fit with space

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=top; hL=fitSpace'.
    p := VerticalPanelView in:v.
    p verticalLayout:#top.
    p horizontalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: topSpace-layout; horizontal fit with space

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=topSpace; hL=fitSpace'.
    p := VerticalPanelView in:v.
    p verticalLayout:#topSpace.
    p horizontalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: bottom-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=bottom; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#bottom.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: bottomSpace-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=bottomSpace; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#bottomSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: topFit-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=topFit; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#topFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: topSpaceFit-layout; combined with horizontal #fitSpace

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=topFit; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#topSpaceFit.
    p horizontalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: bottomFit-layout (arrange at bottom; resize first to fit)

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=bottomFit; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#bottomFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: bottomSpaceFit-layout (arrange at bottom; resize first to fit; with spacing

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=bottomSpaceFit; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#bottomSpaceFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: spread-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=spread; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#spread.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: spreadSpace-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=spreadSpace; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#spreadSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: fit-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=fit; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#fit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: fitSpace-layout

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=fitSpace; hL=center (default)'.
    p := VerticalPanelView in:v.
    p verticalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: fully fitSpace

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=fitSpace; hL=fitSpace'.
    p := VerticalPanelView in:v.
    p verticalLayout:#fitSpace.
    p horizontalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: combine fully fitSpace with scaling button labels

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=fitSpace; hL=fitSpace'.
    p := VerticalPanelView in:v.
    p verticalLayout:#fitSpace.
    p horizontalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b1 adjust:#fit.
    b2 := Button label:'butt2' in:p.
    b2 adjust:#fit.
    b3 := Button label:'button3' in:p.
    b3 adjust:#fit.
    v extent:100 @ 300.
    v open

example: from top, each at left:

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=top; hL=left'.
    p := VerticalPanelView in:v.
    p verticalLayout:#top.
    p horizontalLayout:#left.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: center, right:

    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=center; hL=right'.
    p := VerticalPanelView in:v.
    p verticalLayout:#center.
    p horizontalLayout:#right.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'butt2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:100 @ 300.
    v open

example: a panel in a panel

    |v hp p b1 b2 b3|

    v := StandardSystemView new.

    hp := HorizontalPanelView in:v.
    hp verticalLayout:#fit.
    hp horizontalLayout:#fitSpace.
    hp origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).

    1 to:3 do:[:i |
        p := VerticalPanelView in:hp.
        p borderWidth:0.
        p verticalLayout:#fitSpace.
        p horizontalLayout:#fit.
        b1 := Button label:('button1-' , i printString) in:p.
        b2 := Button label:('butt2-' , i printString) in:p.
        b3 := Button label:('button3-' , i printString) in:p.
    ].

    v extent:300 @ 100.
    v open

example: checkToggles in a panel

    |panel|

    panel := VerticalPanelView new.
    panel horizontalLayout:#left.

    panel add:((CheckBox on:true asValue) label:'this is toggle number 1'; resize).
    panel add:((CheckBox on:false asValue) label:'nr 2 '; resize).
    panel add:((CheckBox on:true asValue) label:'number 3 '; resize).

    panel extent:(panel preferredExtent).
    panel open

example: the topFit & bottomFit layouts are great to combine labels or enterFields with a selectionInList or textView:

    |panel|

    panel := VerticalPanelView new.
    panel horizontalLayout:#fit.
    panel verticalLayout:#topFit.

    panel add:(Label new label:'this is label number 1'; font:(Font family:'courier' size:16)).
    panel add:(EditField new).
    panel add:(Label new label:'this is label number 2').
    panel add:(ScrollableView for:SelectionInListView).

    panel extent:(panel preferredExtent).
    panel open

example: the fit layout combined with fix sized elements

    |panel l e v|

    panel := VerticalPanelView new.
    panel horizontalLayout:#fit.
    panel verticalLayout:#fit.

    panel add:(l := Label new label:'this is label number 1'; font:(Font family:'courier' size:16)).
    l sizeFixed:true.
    panel add:(e := EditField new).
    e sizeFixed:true.
    panel add:(l := Label new label:'this is label number 2').
    l sizeFixed:true.
    panel add:(v := ScrollableView for:SelectionInListView).
    v list:#(1 2 3 4 5).
    panel add:(l := Label new label:'this is label number 3').
    l sizeFixed:true.

    panel extent:(panel preferredExtent).
    panel open

    |panel l e v|

    panel := VerticalPanelView new.
    panel horizontalLayout:#fit.
    panel verticalLayout:#fit.

    panel add:(l := Label new label:'this is label number 1'; font:(Font family:'courier' size:16)).
    l sizeFixed:true.
    panel add:(e := EditField new).
    e sizeFixed:true.
    panel add:(l := Label new label:'this is label number 2').
    l sizeFixed:true.
    panel add:(v := ScrollableView for:SelectionInListView).
    v list:#(1 2 3 4 5).
    panel add:(v := ScrollableView for:SelectionInListView).
    v list:#(a b c).
    panel add:(l := Label new label:'this is label number 3').
    l sizeFixed:true.

    panel extent:(panel preferredExtent).
    panel open

    |panel l e v|

    panel := VerticalPanelView new.
    panel horizontalLayout:#fit.
    panel verticalLayout:#fit.

    panel add:(l := Label new label:'this is label number 1'; font:(Font family:'courier' size:16)).
    l sizeFixed:true.
    panel add:(e := EditField new).
    e sizeFixed:true.
    panel add:(l := Label new label:'this is label number 2').
    l sizeFixed:true.
    panel add:(v := ScrollableView for:SelectionInListView).
    v list:#(1 2 3 4 5).
    panel add:(l := Label new label:'this is label number 3').
    l sizeFixed:true.
    panel add:(l := Label new label:'this is label number 4').
    l sizeFixed:true.
    panel add:(v := ScrollableView for:SelectionInListView).
    v list:#(a b c).
    panel add:(l := Label new label:'this is label number 5').
    l sizeFixed:true.

    panel extent:(panel preferredExtent).
    panel open

ST/X 7.7.0.0; WebServer 1.702 at 20f6060372b9.unknown:8081; Tue, 03 Dec 2024 17:21:23 GMT