How to create (Header + Main area + Settings pane) notebook layout

Question

cross-posted in community.wolfram.com

The goal is something like in the picture below.

Basic? I dare you to try to implement it in a manageable, scalable and flexible way.

Requirements:

The goal is a natural experience as this is a standard layout in many places. Keep that in mind if anything is not clear.

Points 1. and 2. are required. 3. is optional.

1. Behavior:

   • 'head' has fixed heigth and notebook's width (minus margins). Would be nice to not have to know the height before.

   • notebook is resizeable and when it happens:

     • 'main' and 'sett' adapt heights to fill the notebook

     • 'sett' width remains the same, only 'main's' width is affected

   • 'sett's' width can be changed by inner 'resizeArea' element. (not present above, usually one can dragg the vertical area between 'main' and 'sett' but how it will be done here does not matter.

   • needs to work well at least on Mac and Win

   • needs to work in a .cdf launched inside FreePlayer

   • needs to work smoothly as this is only a template for further app, perfect solution would be completely FrontEnd side but it is enough if panels' contents are not bothered too much

2. Style: (equally important)

   • panel's frames need to be aligned (like above)

   • margins/spacings/cellmargins should be consistent. e.g. outer margins should be the same as spaces between panels inside, or whatever user desires.

3. Bonus points for:

   • easily adaptable for different window frames e.g.: palette/default.

   • max/min notebook size restrictions

   • should handle magnification changes gracefully, e.g. panel layout should be left intact or scale notebook size together with it, while contents of panels should scale normally

Wishes

The ideal answer should provide a general approach for multipanel layout that supports resizing/locking specific values and the final result is aligned nicely with adjustable margins etc.

A good test case would be to handle something like:

Grid[{
  {"header", SpanFromLeft, SpanFromLeft},
  {"left panel", Pane["main panel", ImageSize -> {300, 300}, Alignment -> {Center, Center}], "rightPanel"},
  {"footer", SpanFromLeft}
  }, Frame -> All]

I will certailny award a fat bounty for this.

What have you tried?

A lot... and I always ended up with a really project specific solution that needed to sacrifice few features. I lost hope for Full/Scaled ImageSize spec, in terms of expected response, respecting margins or scalability for multiple panels.

Managing image size via Dynamic ImageSize for Panes quickly escalates to not worth the effort stage. And is not stable, I can cook up and example which works well till you move the window to a secondary screen... despite the fact it only uses WindowSize.

Here is something to start with:

CreateDocument[
  DynamicModule[{headerH = 50, settW = 150}
  , Grid[
      { { Panel@ Pane["head", Dynamic@{AbsoluteCurrentValue[{WindowSize, 1}] - 28, headerH}]
        , SpanFromLeft
        }
      , { Panel @ Pane["main", Dynamic[AbsoluteCurrentValue[
            WindowSize] - {settW + 15 + 18 + 12, headerH + 15 + 18 + 12}]]
        , Panel @ Pane["sett", Dynamic[{settW, AbsoluteCurrentValue[{WindowSize, 2}] - headerH - 15 - 18 -  12}]]
        }        
      }
    , Spacings -> {0, 0}
    , Alignment -> {Left, Top}
    ]
  , BaseStyle -> {
      PanelBoxOptions -> {
        FrameMargins -> 0, ImageMargins -> 5, BaseStyle -> FontSize -> 25
      }
    , PaneBoxOptions -> {FrameMargins -> 0, ImageMargins -> 0
      , Alignment -> {Center, Center}
      }
    }
  ]
, WindowSize -> 500
, StyleDefinitions -> "Dialog.nb"
, CellMargins -> {{5, 5}, {5, 5}}
, CellFrameMargins -> {{0, 0}, {0, 0}}
, WindowFrameElements -> All
]

Related:

• How can I make a custom resizable Pane?

• How can I get a FileNameSetter-like dialog inside my own custom dialog?

• How to get this grid normal height?

• The very bottom of CellMargins is missing

Further reading

• Guidelines for planning custom GUI in Mathematica

Answer 1

Are you fine with undocumented functionality?

If so, I've been planning on making some dialogs like this using AttachedCell for a while now.

Here's a quick interface based on that:

headerSidebarNb[
  main_,
  header_,
  sideBar_,
  ops : OptionsPattern[CreateDocument]
  ] :=
 With[
  {
   nb =
    CreateDocument[
     Cell[BoxData@ToBoxes@main,
      CellMargins ->
       {
        {0, Rasterize[sideBar, "RasterSize"][[1]]},
        {0, 0}
        }
      ],
     DockedCells ->
      Cell[
       BoxData@ToBoxes@header,
       CellFrameMargins -> {{0, 0}, {0, 0}}
       ],
     ops,
     Saveable -> False
     ]
   },
  FrontEndExecute@
   {
    FrontEnd`AttachCell[nb,
     Cell[
      BoxData@ToBoxes@sideBar, "DockedCell",
      CellFrame -> {{1, 0}, {0, 0}},
      Background -> GrayLevel[.95],
      CellSize -> {Automatic, Scaled[1]},
      CellFrameMargins -> None,
      TextAlignment -> Left
      ],
     {Offset[{0, 0}, 0], {Right, Top}
      },
     {Right, Top},
     "ClosingActions" -> {}
     ]
    };
  nb
  ]

And here's a sample usage:

headerSidebarNb[
 Pane["Main", {250, 250}, Alignment -> Center],
 Pane["Header", {Full, 50}, Alignment -> Center],
 Pane["Sidebar", {100, Full}, Alignment -> Center],
 Background -> None,
 WindowSize -> All,
 WindowFrameElements -> All,
 WindowElements -> None,
 WindowFrame -> "ModalDialog",
 NotebookEventActions ->
  {"EscapeKeyDown" :> NotebookClose[EvaluationNotebook[]]},
 WindowTitle -> None
 ]

As AttachedCells are still Cells, the FE manages the sizes without any real input from us.

Obviously there are edge cases to watch out for when using undocumented functionality like this, though.