12
$\begingroup$

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.

enter image description here

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:

Further reading

$\endgroup$
  • $\begingroup$ There has been something of this sort in Presentations package of David Park. $\endgroup$ – Alexei Boulbitch Dec 6 '17 at 11:14
2
$\begingroup$

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
 ]

asdasdasd

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.

$\endgroup$
  • $\begingroup$ Looks promissing. Are you planning to address all requirements? P.s. If I put Graphics[Circle[], ImageSize -> Full, AspectRatio -> Full] inside Main it won't strech correctly, even with Pane's ImageSize change. I should probably add this as a requirement so items put in panels should look nice with ImageSize->Full. $\endgroup$ – Kuba Dec 11 '17 at 9:49
  • $\begingroup$ @Kuba I'm planning on making it a proper answer someday. But I could not tell you what day that will be. $\endgroup$ – b3m2a1 Dec 12 '17 at 5:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.