2
$\begingroup$

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?

$\endgroup$
2
$\begingroup$

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

td

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}
  ]

nine-patch

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]}
   }
  ]

buttons

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}}
 ]

asdasdasd

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.

$\endgroup$

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.