eXept Software AG Logo

Smalltalk/X Webserver

Documentation of class 'HorizontalPanelView':

Home

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

Class: HorizontalPanelView


Inheritance:

   Object
   |
   +--GraphicsMedium
      |
      +--DisplaySurface
         |
         +--SimpleView
            |
            +--PanelView
               |
               +--HorizontalPanelView
                  |
                  +--CheckBox

Package:
stx:libwidg
Category:
Views-Layout
Version:
rev: 1.75 date: 2018/11/09 23:17:13
user: cg
file: HorizontalPanelView.st directory: libwidg
module: stx stc-classLibrary: libwidg
Author:
Claus Gittinger

Description:


a View which arranges its child-views in a horizontal row.
All real work is done in PanelView - only the layout computation is
redefined here.

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

HorizontalSpace and verticalSpace control the spacing between elements;
they default to some 1mm.

The horizontal layout can be any of:

    #left           arrange elements at left
    #leftSpace      arrange elements at the left, start with spacing
    #fixLeft        same as #left, but do not reduce spacing in case of no fit
    #fixLeftSpace   same as #leftSpace, but do not reduce spacing in case of no fit
    #right          arrange elements at the right
    #rightSpace     arrange elements at the right, start with spacing
    #center         arrange elements in the center
    #spread         spread elements evenly
    #spreadSpace    spread elements evenly with spacing at the ends
    #fit            like #spread, but resize elements for tight packing
    #fitSpace       like #fit, with additional spacing at the far ends
    #leftFit        like #left, but extend the last (rightMost) element to the right
    #leftSpaceFit   like #leftSpace, but extend the last (rightMost) element to the right
    #rightFit       like #right, but extend the first (leftMost) element to the left
    #rightSpaceFit  like #rightSpace, but extend the first (leftMost) element to the left

    #leftMax        like corresponding non-Max layouts,
    #leftSpaceMax   but resize all components to width of widest components
    #rightMax
    #rightSpaceMax
    #centerMax
    #spreadMax
    #spreadSpaceMax

the vertical layout can be:

    #top            place element at the top
    #topSpace       place element at the top, offset by verticalSpace
    #center         place it horizontally centered
    #bottom         place it at the bottom
    #bottomSpace    place it at the bottom, offset by verticalSpace
    #fit            resize elements vertically to fit this panel
    #fitSpace       like #fit, but with spacing

    #topMax         like #top, but resize all views vertically to max height
    #topSpaceMax    like #topSpace, but resize all views vertically to max height
    #bottomMax      like #bottom, but resize all views vertically to max height
    #bottomSpaceMax like #bottomSpace, but resize all views vertically to max height
    #centerMax      like #center, but resize all views vertically to max height

The defaults is #center for both directions.
The layout is changed by the messages #verticalLayout: and #horizontalLayout:.
For backward compatibility (to times, where only hLayout existed), the simple
#layout: does the same as #horizontalLayout:. 
Do not use this old method; it will vanish and currently outputs a warning.

The panel assumes, that the elements do not resize themselfes, after it
became visible. This is not true for all widgets (buttons, labels or
inputFields 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 of its elements, and reorganize things.

By combining Horizontal- and VerticalPanels (i.e. place a hPanel into a
vPanel), most layouts should be implementable.
However, iff none of these layout/space combinations is exactly what you need 
in your application, create a subclass, and redefine the setChildPositions 
method there.

TODO: for completeness, support #fixRight, #fixRightSpace,
      #rightFit, #rightSpaceFit layouts

CAVEAT: this class started with #left and no vertical alignments;
as time went by, more layouts were added (by users requests)
and now, many layout combinations are possible.
Reflecting this, the setup should be changed to use different selectors 
for space-on/off, max-resize and alignment
(i.e. having more and more layout symbols makes things a bit confusing ...)



[author:]
    Claus Gittinger


Related information:

    VerticalPanelView
    VariableVerticalPanel
    VariableHorizontalPanel
    Label

Class protocol:

queries
o  possibleHorizontalLayouts

o  possibleVerticalLayouts


Instance protocol:

accessing
o  horizontalLayout
return the horizontal layout as symbol.
the returned value is one of
#left arrange elements at the left
#leftSpace arrange elements at the left, start with spacing
#fixLeft same as #left, but do not reduce spacing in case of no fit
#fixLeftSpace same as #leftSpace, but do not reduce spacing in case of no fit
#right arrange elements at the right
#rightSpace arrange elements at the right, start with spacing
#center arrange elements in the center
#spread spread elements evenly
#spreadSpace spread elements evenly with spacing at the ends
#fit like #spread, but resize elements for tight packing
#fitSpace like #fit, with additional spacing at the far ends
#leftFit like #left, but resize the last element to fit
#leftSpaceFit like #leftSpace, but resize the last element to fit
#rightFit like #right, but resize the first element to fit
#rightSpaceFit like #rightSpace, but resize the first element to fit
the default is #center
See the class documentation for the meanings.

o  horizontalLayout: layoutSymbolArg
change the horizontal layout as symbol.
The argument, aSymbol must be one of:
#okCancelBox window system specific. Will dynamically be one of:
#maxRightSpace or #fitSpace, depending on style sheet value.

#left arrange elements at the left
#leftSpace arrange elements at the left, start with spacing
#fixLeft same as #left, but do not reduce spacing in case of no fit
#fixLeftSpace same as #leftSpace, but do not reduce spacing in case of no fit
#right arrange elements at the right
#rightSpace arrange elements at the right, start with spacing
#center arrange elements in the center
#spread spread elements evenly
#spreadSpace spread elements evenly with spacing at the ends
#fit like #spread, but resize elements for tight packing
#fitSpace like #fit, with additional spacing at the far ends
#leftFit like #left, but resize the last element to fit
#leftSpaceFit like #leftSpace, but resize the last element to fit
#rightFit like #right, but resize the first element to fit
#rightSpaceFit like #rightSpace, but resize the first element to fit

#leftMax like non-Max layouts, resizing components to
#leftSpaceMax the width of the widest component
#rightMax
#rightSpaceMax
#centerMax
#spreadMax
#spreadSpaceMax
the default (if never changed) is #center.
See the class documentation for the meanings.

o  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) **

o  reverseOrderIfOKAtLeft
return the reverseOrderIfOKAtLeft flag.
This can be set for OK-Cancel like panels, where the OK Button should
be positioned on the left for some viewStyles.

o  reverseOrderIfOKAtLeft: aBoolean
set/clear the reverseOrderIfOKAtLeft flag.
This can be set for OK-Cancel like panels, where the OK Button should
be positioned on the left for some viewStyles.

o  verticalLayout
return the vertical layout as a symbol.
the returned value is one of
#top place element at the top
#topSpace place element at the top, offset by verticalSpace
#center place it horizontally centered
#bottom place it at the bottom
#bottomSpace place it at the bottom, offset by verticalSpace
#fit resize elements vertically to fit this panel
#fitSpace like #fit, but with spacing

#topMax like #top, but resize all views vertically to max height
#topSpaceMax like #topSpace, but resize all views vertically to max height
#bottomMax like #bottom, but resize all views vertically to max height
#bottomSpaceMax like #bottomSpace, but resize all views vertically to max height
#centerMax like #center, but resize all views vertically to max height
the default is #center
See the class documentation for the meanings.

o  verticalLayout: aSymbol
change the vertical layout as a symbol.
The argument, aSymbol must be one of:
#top place element at the top
#topSpace place element at the top, offset by verticalSpace
#center place it horizontally centered
#bottom place it at the bottom
#bottomSpace place it at the bottom, offset by verticalSpace
#fit resize elements vertically to fit this panel
#fitSpace like #fit, but with spacing

#topMax like #top, but resize all views vertically to max height
#topSpaceMax like #topSpace, but resize all views vertically to max height
#bottomMax like #bottom, but resize all views vertically to max height
#bottomSpaceMax like #bottomSpace, but resize all views vertically to max height
#centerMax like #center, but resize all views vertically to max height
the default (if never changed) is #center
See the class documentation for the meanings.

focus handling
o  subviewsInFocusOrder

layout
o  setChildPositions
(re)compute the position of every child;
called whenever children are added or my size has changed

queries
o  computePreferredExtent
return a good extent, one that makes subviews fit


Examples:


These examples show the effect of various horizontalLayout and verticalLayout settings. Try them all. Especially, notice the differences between the xxx and xxxSpace layouts and the effect of setting different values for the spacing. Try resizing the view and see how the elements get rearranged. Most of the examples below place 3 buttons onto a panel; Of course, you can put any other view into a panel ... the last examples show this. (The fit layouts are especially useful to be used with SelectionInListViews; you can combine multiple labels & editFields with a selectionInListView, which is expanded to fill the remaining area of the view) example: default layout (center) centers components
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'default: center'.

    p := HorizontalPanelView in:v.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: same (default center layout) with different sized elements
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'default: center'.

    p := HorizontalPanelView in:v.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: horizontal default (center); vertical centerMax
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=centerMax'.
    p := HorizontalPanelView in:v.
    p verticalLayout:#centerMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: horizontal default (center); vertical topMax
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=topMax'.
    p := HorizontalPanelView in:v.
    p verticalLayout:#topMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: horizontal default (center); vertical topSpaceMax
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=topSpaceMax'.
    p := HorizontalPanelView in:v.
    p verticalLayout:#topSpaceMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: horizontal default (center); vertical bottomMax
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=bottomMax'.
    p := HorizontalPanelView in:v.
    p verticalLayout:#bottomMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: horizontal default (center); vertical bottomSpaceMax
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'vL=bottomSpaceMax'.
    p := HorizontalPanelView in:v.
    p verticalLayout:#bottomSpaceMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: left-layout (vertical is default -> center) fills left-to-right; no spacing before leftMost component
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=left; vL=default (center)'.

    p horizontalLayout:#left.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: left starting with spacing (vertical is default -> center) fills left-to-right; spacing before leftMost component
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=leftSpace; vL=center'.

    p horizontalLayout:#leftSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: leftFit-layout (vertical is default -> center) fills left-to-right; resizes the rightMost component to fit
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=leftFit; vL=center'.

    p horizontalLayout:#leftFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: leftSpaceFit-layout (vertical is default -> center) fills left-to-right; starts with spacing & resizes the rightMost component to fit with spacing
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=leftSpaceFit; vL=center'.

    p horizontalLayout:#leftSpaceFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: right-layout (vertical is default -> center) right-to-left
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v viewBackground:Color yellow.
    p := HorizontalPanelView in:v.
    p viewBackground:Color red.
    v label:'hL=right; vL=center'.

    p horizontalLayout:#rightSpaceFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := View in:p. b1 viewBackground:(Color green).
    b2 := View in:p. b2 viewBackground:(Color gray). 
    b3 := View in:p. b3 viewBackground:(Color white). 
    v extent:300 @ 100.
    v open
example: right with initial spacing (vertical is default -> center) right-to-left with spacing after last component
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=rightSpace; vL=center'.

    p horizontalLayout:#rightSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: rightFit-layout (vertical is default -> center) right-to-left; resize the leftMost component to fit
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=rightFit; vL=center'.

    p horizontalLayout:#rightFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: rightSpaceFit with initial spacing (vertical is default -> center) right-to-left; start with spacing & resize the leftMost to fit
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=rightSpaceFit; vL=center'.

    p horizontalLayout:#rightSpaceFit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit-layout (vertical is default -> center)
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    p horizontalLayout:#fit.
    v label:'hL=fit; vL=center'.

    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: full fit i.e. no spacing (vertical is default -> center)
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    p horizontalLayout:#fit.
    p horizontalSpace:0.
    v label:'hL=fit hS=0; vL=center'.

    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit with spacing (vertical is default -> center)
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fitSpace; vL=center'.

    p horizontalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: spread-layout (vertical is default -> center)
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    p horizontalLayout:#spread.
    v label:'hL=spread; vL=center'.

    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: spread with spacing (vertical is default -> center)
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=spreadSpace; vL=center'.

    p horizontalLayout:#spreadSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: spread with spacing; vertical fit
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=spreadSpace; vL=fit'.

    p horizontalLayout:#spreadSpace.
    p verticalLayout:#fit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: spread with spacing; vertical fit with spacing
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=spreadSpace; vL=fitSpace'.

    p horizontalLayout:#spreadSpace.
    p verticalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit - top
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fit; vL=top'.

    p horizontalLayout:#fit.
    p verticalLayout:#top.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit with initial spacing
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fitSpace; vL=top'.

    p horizontalLayout:#fitSpace.
    p verticalLayout:#top.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit with initial spacing in both directions
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fitSpace; vL=fitSpace'.

    p horizontalLayout:#fitSpace.
    p verticalLayout:#fitSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit without spacing in both directions
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fit hS=0; vL=fit'.

    p horizontalLayout:#fit.
    p verticalLayout:#fit.
    p horizontalSpace:0.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit with initial spacing; top with spacing
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fitSpace; vL=topSpace'.

    p horizontalLayout:#fitSpace.
    p verticalLayout:#topSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit - top without spacing
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fit; vL=top'.

    p horizontalLayout:#fit.
    p verticalLayout:#top.
    p horizontalSpace:0.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit - bottom with spacing and bottomSpace
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fitSpace; vL=bottomSpace'.

    p horizontalLayout:#fitSpace.
    p verticalLayout:#bottomSpace.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: fit no horizontal space - bottom with spacing and bottomSpace
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=fit; vL=bottomSpace'.

    p horizontalLayout:#fit.
    p verticalLayout:#bottomSpace.
    p horizontalSpace:0.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'button1' in:p.
    b2 := Button label:'button2' in:p.
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: leftMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=leftMax; vL=default'.

    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: leftSpaceMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=leftSpaceMax; vL=default'.

    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: rightMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=rightMax; vL=default'.

    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: rightSpaceMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=rightSpaceMax; vL=default'.

    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: centerMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=centerMax; vL=default'.

    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: spreadMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=spreadMax; vL=default'.

    p horizontalLayout:#spreadMax.
    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: spreadSpaceMax - vertical default
    |v p b1 b2 b3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=spreadSpaceMax; vL=default'.

    p horizontalLayout:#spreadSpaceMax.
    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:'but3' in:p.
    v extent:300 @ 100.
    v open
example: maximize elements in both directions and center
    |v p b1 b2 b3|

    v := StandardSystemView new.
    v label:'hL=centerMax; vL=centerMax'.

    p := HorizontalPanelView in:v.
    p horizontalLayout:#centerMax.
    p verticalLayout:#centerMax.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    b1 := Button label:'but1' in:p. b1 font:(b1 font size:8).
    b2 := Button label:'b2' in:p.      b2 font:(b1 font size:24).
    b3 := Button label:'button3' in:p.
    v extent:300 @ 100.
    v open
example: placing hPanels into a vPanel
    |v vP hP1 hP2 hP3 b1 b2 b3 b4 b5 b6 b7 b8 b9|

    v := StandardSystemView new.
    vP := VerticalPanelView in:v.
    vP origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).
    vP verticalLayout:#fit;
       verticalSpace:0;
       horizontalLayout:#fit.

    hP1 := HorizontalPanelView in:vP.
    hP1 horizontalLayout:#fitSpace;
        verticalLayout:#center.
    b1 := Button label:'button1' in:hP1.
    b2 := Button label:'button2' in:hP1.
    b3 := Button label:'button3' in:hP1.

    hP2 := HorizontalPanelView in:vP.
    hP2 horizontalLayout:#fitSpace;
        verticalLayout:#center.
    b4 := Button label:'button4' in:hP2.
    b5 := Button label:'button5' in:hP2.
    b6 := Button label:'button6' in:hP2.

    hP3 := HorizontalPanelView in:vP.
    hP3 horizontalLayout:#fitSpace;
        verticalLayout:#center.
    b7 := Button label:'button7' in:hP3.
    b8 := Button label:'button8' in:hP3.
    b9 := Button label:'button9' in:hP3.

    v extent:300 @ 300.
    v open
example: a browser like table, the two left tables have a fix width, while the rightmost list extends to the far right.
    |v p l1 l2 l3|

    v := StandardSystemView new.
    p := HorizontalPanelView in:v.
    v label:'hL=leftFit hS=0; vL=fit'.

    p horizontalLayout:#leftFit.
    p horizontalSpace:0.
    p verticalLayout:#fit.
    p origin:(0.0 @ 0.0) corner:(1.0 @ 1.0).

    l1 := ScrollableView for:FileSelectionList in:p.
    l1 stayInDirectory:true.
    l1 ignoreParentDirectory:true.
    l1 directory:'/'.
    l1 action:[:selection | l2 directory:(l1 selectedPathname)].

    l2 := ScrollableView for:FileSelectionList in:p.
    l2 stayInDirectory:true.
    l2 directory:nil.
    l2 ignoreParentDirectory:true.
    l2 action:[:selection | l3 directory:(l2 selectedPathname)].

    l3 := ScrollableView for:FileSelectionList in:p.
    l3 directory:nil.
    l3 ignoreParentDirectory:false.
    v extent:400 @ 300.
    v open
trouble example: self-resizing elements may cause trouble
    |v p l1 l2 l3|

    v := StandardSystemView new.
    p := HorizontalPanelView origin:(0.0 @ 0.0) corner:(1.0 @ 1.0) in:v.

    l1 := (Label label:'one' in:p) level:-1.
    l2 := (Label label:'two' in:p) level:-1.
    l3 := (Label label:'three' in:p) level:-1.

    v extent:400 @ 300.
    v open.

    (Delay forSeconds:5) wait.

    l1 label:'oneone'.
    l2 label:'twotwo'.
    l3 label:'threethree'.
fixed trouble example: tell the panel that this situation may happen
    |v p l1 l2 l3|

    v := StandardSystemView new.
    p := HorizontalPanelView origin:(0.0 @ 0.0) corner:(1.0 @ 1.0) in:v.
    p elementsChangeSize:true.

    l1 := (Label label:'one' in:p) level:-1.
    l2 := (Label label:'two' in:p) level:-1.
    l3 := (Label label:'three' in:p) level:-1.

    v extent:400 @ 300.
    v open.

    (Delay forSeconds:5) wait.

    l1 label:'oneone'.
    l2 label:'twotwo'.
    l3 label:'threethree'.


ST/X 7.2.0.0; WebServer 1.670 at bd0aa1f87cdd.unknown:8081; Fri, 30 Sep 2022 10:35:41 GMT