Making a header-body-footer interface without Grid and Column

Question

I want to make a nice little interface with a header-bar, a main-body, and a footer.

Grid and Column based constructs can get messy quickly. Is there a better way?

Answer 1

So I did this in emulation of the training dialog in the new machine learning stuff:

I looked at that and decided to apply nine-patch images to the task

In my collection of formatting tools I defined a NinePatchNameTag function that defines this type of appearance in a nine-patch image:

nt =
 NinePatchNameTag[
  {RoundingRadius -> {15, 1}, ImageSize -> 50},
  {ImageSize -> 5},
  {ImageSize -> 30}
  ]

Then I made some nine-patch button appearances:

ba =
 Map[
  #[[1]] ->
    NinePatchCreate[
     PillGradientImage[#[[2]], ImageSize -> {10, 25}, 
      RoundingRadius -> 2],
     {1, 1},
     {1, 15}
     ] &,
  {
   "Default" ->
    {GrayLevel[.9], GrayLevel[.6]},
   "Hover" ->
    {GrayLevel[.9], GrayLevel[.7]},
   "Pressed" ->
    {GrayLevel[.7], GrayLevel[.8]}
   }
  ]

And finally I wrapped this all together by using AttachCell to make floating header and footer cells that will overlay on this base nine-patch appearance:

DynamicModule[
 {panelBox,
  buttonCell,
  headerCell,
  myText, nt = nt, ba = ba},
 Panel[
  Pane[
   ExampleData[{"Text", "LoremIpsum"}],
   ImageSize -> {500, 300}, 
   Scrollbars -> Automatic
   ],
  Appearance -> nt
  ],
 Initialization :>
  {
   panelBox =
    First@FrontEndExecute@
      FrontEnd`ObjectChildren[EvaluationBox[]],
   buttonCell =
    FrontEndExecute@
     FrontEnd`AttachCell[
      panelBox,
      Cell[
       BoxData@ToBoxes@
         Button[
          Style["Open Text", GrayLevel[.3]],
          openText[],
          Appearance -> ba
          ]
       ],
      {Offset[{-2, -1}, -2], {Right, Bottom}},
      {Right, Bottom},
      "ClosingActions" -> {"EvaluatorQuit"}
      ],
   headerCell =
    FrontEndExecute@
     FrontEnd`AttachCell[
      panelBox,
      Cell["Text Viewer", "Chapter"],
      {Offset[{0, 0}, -3], {Center, Top}},
      {Center, Top},
      "ClosingActions" -> {"EvaluatorQuit"}
      ]
   },
 Deinitialization :>
  {NotebookDelete /@ {headerCell, buttonCell}}
 ]

This gives good response time, restricts the content only to that center area, and provides a generally attractive interface. Obviously it could be tweaked further by providing different name-tag colors or using a gradient image in the nine-patch headers and footers.

The main issue with this is those AttachedCells. These can sometimes cause slight glitches in the FE, like when editing a cell via the RawData wrapper. (they disappear I haven't configured the DynamicModule to resurrect them).

This could serve as a decent template for making more interesting interfaces, though.