Mastering Dynamic in using OverLay

Questions
,
1

I trying to get this UI experiment to work:

sp = Spacer[{90, 0}]; DynamicModule[  {},  x = 1;  Dynamic@Overlay[{
     TabView[{"one" -> 1, "switch" -> Dynamic[x = 2]}
      , ImageSize -> {100, 100}]
     , Row[{sp, 
       ActionMenu[
        "Wrappers", {"Beep" :> Beep[], "switch" :> Dynamic[x = 1]}]
       }]}    , {1, 2}, Dynamic[x]]]

I hate that layering of controls is not easy to do. I can’t find examples to study.
ps. that exact placement and sizes of widgets are a time consuming process. A gui prototyping tools are long overdue.

2

So, independent of styling, I think this is close to what you’re asking for:

Grid[
 {{SetterBar[Dynamic[x], {1, 2}], 
   ActionMenu[
    "Actions", {"Beep" :> Beep[], "switch" :> (x = 2)}]}, {Dynamic[
    x]}},
 Spacings -> 0]

As for difficulty of designing UI widgets with Mathematica, I’m not sure what your end goal and vision are. I recommend you defer wrangling with style and layout until after you’ve got functionality working. I recommend you use the “built in” tools (particularly Manipulate) and avoid directly accessing low level controls unless absolutely necessary. As for layout, I’d avoid using Overlay for your core UI. Grid is a very versatile and feature-rich function, so try it first.

3

Thank you for your replay; useful insight from your code. You are missing my goal, to overlay an ActionMenu on a TabView’s left or right side; SetterBar would not work for my needs. Manipulate would be harder and larger to use for my needs. Yes, I am fully aware of the wonderful uses of Grid. :slight_smile:
And layout was to arrange the overlay of objects correctly. Doc center on overlay is also incomplete; needs more examples.

4

Ok, after some pondering and tinkering, I am very close to what I want, thanks to your code and rethinking about using TabView.

Clear[tabvw1, pne, pnes]; tabvw1 =   (pne[dta_] := 
     Pane[Grid@Partition[dta, UpTo[5]], {200, 100}, Scrollbars -> True];    pnes = {pne[Range[10]], pne[Range[100]], 
      pne[Characters["Hello there, dance with me."]]};    Grid[{{SetterBar[
        Dynamic[x], {pnes[[1]] -> " Set 1 ", pnes[[2]] -> " Set 2 ", 
         pnes[[3]] -> " Set 3 "}],
       ActionMenu[
        "Actions", {"Beep" :> Beep[], "switch" :> (x = 2)}]}, {Dynamic[
        x]}}, Spacings -> 0]); tabvw1