Difference between revisions of "WxHaskell/Layout"
BrettGiles (talk | contribs) (Initial copy from old wiki) |
(Added category wxHaskell) |
||
(37 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | = Layout = |
+ | == Layout == |
+ | |||
− | All details are based on the result from the Microsoft Windows XP. |
||
+ | Most useful resource: the wxHaskell [http://hackage.haskell.org/packages/archive/wxcore/latest/doc/html/Graphics-UI-WXCore-Layout.html layout documentation] |
||
⚫ | |||
+ | |||
⚫ | |||
In general, we can create layout by setting the layout argument in a frame or a panel, for example, |
In general, we can create layout by setting the layout argument in a frame or a panel, for example, |
||
Line 13: | Line 15: | ||
− | I will call this '''Layout setting by |
+ | I will call this '''Layout setting by gridding'''. |
'''Gridding''' means using the layout function, such as grid, row, column etc, to set the layout. |
'''Gridding''' means using the layout function, such as grid, row, column etc, to set the layout. |
||
− | == Layout setting by |
+ | === Layout setting by positioning === |
− | Also, we could set the layout by another way, '''Layout setting by |
+ | Also, we could set the layout by another way, '''Layout setting by positioning''' |
gui = do f <- frame [ text := "Layout" |
gui = do f <- frame [ text := "Layout" |
||
Line 30: | Line 32: | ||
The result of both examples are about the same, only the button position has a bit different. (Please measure the exact position by yourself). By this way, we can have more flexible layout rather than limited the layout by grids. |
The result of both examples are about the same, only the button position has a bit different. (Please measure the exact position by yourself). By this way, we can have more flexible layout rather than limited the layout by grids. |
||
+ | ''EYK: it seems like layout by positioning allows for more precise control, but it does not seem like it would respond nicely to window resizing, no?'' |
||
− | = Layout Reconfiguration = |
||
+ | |||
+ | === Layout reconfiguration === |
||
We can also re-configure the layout by just simply re-assign a new layout value to the layout. But remember, do not assign the same tab to the layout twice, it will append the same tab to the notebook. To prevent this, assign an empty list to the notebook |
We can also re-configure the layout by just simply re-assign a new layout value to the layout. But remember, do not assign the same tab to the layout twice, it will append the same tab to the notebook. To prevent this, assign an empty list to the notebook |
||
Line 36: | Line 40: | ||
nb <- notebook f [] |
nb <- notebook f [] |
||
set f [ layout := tabs nb [] ] |
set f [ layout := tabs nb [] ] |
||
+ | |||
+ | == Transformers == |
||
+ | |||
+ | === fill = stretch . expand === |
||
+ | |||
+ | ''NB: these are '''tentative''' explanations, could be wrong'' |
||
+ | |||
+ | Two dimensions are important here |
||
+ | |||
+ | ; shape (expansion) |
||
+ | : the widget's shape: how does a widget use the space around it? Your options are |
||
+ | :* <code>rigid</code> (default): fixed shape |
||
+ | :* <code>shaped</code> expands but retains proportions |
||
+ | :* <code>expand</code> just expands without caring about proportions |
||
+ | |||
+ | ; stretch |
||
+ | : the widget's dynamic behaviour: OK so your widget is laid out and has expanded however much it wants to. Now what happens when you give it even more space by resizing the parent window? Your options are |
||
+ | :* <code>static</code> (default): no stretching! |
||
+ | :* <code>stretch</code>, <code>hstretch</code>, <code>vstretch</code>: stretches perhaps along one dimension only |
||
+ | :* <code>minsize</code> (not sure how this behaves) |
||
+ | |||
+ | TODO: screenshots |
||
+ | |||
+ | === dynamic === |
||
+ | |||
+ | '''???''' how does this relate to expand/stretch? |
||
+ | |||
+ | === margin, boxed === |
||
+ | |||
+ | == Questions == |
||
+ | |||
+ | # Where can you define layouts? The API says frames, panels, and dialogues, but is it seems like defining sub-layouts in panels is a bit problematic |
||
+ | # Wait, you mean I have to put all my layout in the frame? That's not very modular! |
||
+ | # Why do I need to <code>expand</code> in addition to <code>stretch</code>ing to fill resized space? |
||
+ | |||
+ | == Troubleshooting == |
||
+ | |||
+ | === Not in right place === |
||
+ | |||
+ | * '''Checklist''' |
||
+ | ** Did you use layout? Declaring the widget is not enough. You have to tell wxHaskell where it fits in wrt other widgets in the window |
||
+ | ** Did you put the layout in the right parent? (elaborate) |
||
+ | ** Do you need to use one of <code>hfloatRight</code> and <code>hfloatLeft</code>? |
||
+ | ** Are you using <code>glue</code> to push things to the side as needed? |
||
+ | |||
+ | === Too small === |
||
+ | |||
+ | * Really tiny frame when my app launches<br/>'''Solution''': set <code>clientSize</code> |
||
+ | |||
+ | * Widgets too small, lots of space around them though!<br/>'''Solution''': have you tried <code>expand</code>ing them to use that space? |
||
+ | |||
+ | * Widgets do not resize when window is resized<br/>'''Checklist''' |
||
+ | ** Make sure you are using the <code>stretch</code> combinators. |
||
+ | ** Remember that columns (h)stretch '''only''' if all their members (h)stretch, and similarly for rows and vstretch. |
||
+ | |||
+ | * Still too small!<br/>'''Suggestion''': are your transformers cancelling each other out? <code>hstretch</code> will make the vertical dimension rigid and vice-versa, so <code>hstretch . vstretch</code> will probably not do what you want! |
||
+ | |||
+ | * Sash too small on splits<br/>'''Workaround''': put margins on both sides of the split |
||
+ | |||
+ | === Too big === |
||
+ | |||
+ | * Absurdly huge widget<br/>'''Possible solution''' make sure the widget is placed in the correct parent. |
||
+ | |||
+ | === Disappearing widgets === |
||
+ | |||
+ | * Widgets that vanish when you resize the window<br/>'''Workaround''' Set a minsize on the layout for the affected widgets |
||
+ | |||
⚫ | |||
⚫ | |||
+ | [[Category:wxHaskell]] |
||
⚫ | |||
⚫ |
Latest revision as of 20:47, 15 January 2012
Layout
Most useful resource: the wxHaskell layout documentation
Layout setting by gridding
In general, we can create layout by setting the layout argument in a frame or a panel, for example,
gui = do f <- frame [ text := "Layout" ] p <- panel f [] b <- button p [ text := "button" ] set f [ layout := margin 2 $ container p $ floatCenter $ widget b , clientSize := sz 100 100 ]
I will call this Layout setting by gridding.
Gridding means using the layout function, such as grid, row, column etc, to set the layout.
Layout setting by positioning
Also, we could set the layout by another way, Layout setting by positioning
gui = do f <- frame [ text := "Layout" , clientSize := sz 100 100 ] p <- panel f [ clientSize := sz 98 98, , position := pt 2 2 ] b <- button p [ text := "button" , position := pt 45 45 ]
The result of both examples are about the same, only the button position has a bit different. (Please measure the exact position by yourself). By this way, we can have more flexible layout rather than limited the layout by grids.
EYK: it seems like layout by positioning allows for more precise control, but it does not seem like it would respond nicely to window resizing, no?
Layout reconfiguration
We can also re-configure the layout by just simply re-assign a new layout value to the layout. But remember, do not assign the same tab to the layout twice, it will append the same tab to the notebook. To prevent this, assign an empty list to the notebook
f <- frame [ text := "Layout" ] nb <- notebook f [] set f [ layout := tabs nb [] ]
Transformers
fill = stretch . expand
NB: these are tentative explanations, could be wrong
Two dimensions are important here
- shape (expansion)
- the widget's shape: how does a widget use the space around it? Your options are
rigid
(default): fixed shapeshaped
expands but retains proportionsexpand
just expands without caring about proportions
- stretch
- the widget's dynamic behaviour: OK so your widget is laid out and has expanded however much it wants to. Now what happens when you give it even more space by resizing the parent window? Your options are
static
(default): no stretching!stretch
,hstretch
,vstretch
: stretches perhaps along one dimension onlyminsize
(not sure how this behaves)
TODO: screenshots
dynamic
??? how does this relate to expand/stretch?
margin, boxed
Questions
- Where can you define layouts? The API says frames, panels, and dialogues, but is it seems like defining sub-layouts in panels is a bit problematic
- Wait, you mean I have to put all my layout in the frame? That's not very modular!
- Why do I need to
expand
in addition tostretch
ing to fill resized space?
Troubleshooting
Not in right place
- Checklist
- Did you use layout? Declaring the widget is not enough. You have to tell wxHaskell where it fits in wrt other widgets in the window
- Did you put the layout in the right parent? (elaborate)
- Do you need to use one of
hfloatRight
andhfloatLeft
? - Are you using
glue
to push things to the side as needed?
Too small
- Really tiny frame when my app launches
Solution: setclientSize
- Widgets too small, lots of space around them though!
Solution: have you triedexpand
ing them to use that space?
- Widgets do not resize when window is resized
Checklist- Make sure you are using the
stretch
combinators. - Remember that columns (h)stretch only if all their members (h)stretch, and similarly for rows and vstretch.
- Make sure you are using the
- Still too small!
Suggestion: are your transformers cancelling each other out?hstretch
will make the vertical dimension rigid and vice-versa, sohstretch . vstretch
will probably not do what you want!
- Sash too small on splits
Workaround: put margins on both sides of the split
Too big
- Absurdly huge widget
Possible solution make sure the widget is placed in the correct parent.
Disappearing widgets
- Widgets that vanish when you resize the window
Workaround Set a minsize on the layout for the affected widgets
See also
- Button sizing - It has problems to set the size of button