Control objects Sizing and placement in Graphicsgrid Vs Grid:

Question

I have created a grid, and also made a list of control objects(e.g., input fields, buttons, etc.). Then, I lay the list in my grid. There is no problem. However, the final layout takes a lot of time. I timed each operation and realized that the final grid layout is the one that takes up a huge chunk of time. Is there a better way of controlling the execution time of the graphics grid.

mygrid = ConstantArray["", {100, 100}];
mybutton1 = Button["Example", ImageSize -> {40, 50}]; 
myinput2 = InputField[x]; 
updatedlist = {}; 
updatedlist = ReplacePart[mygrid, {1, 2} -> mybutton1]; 
updatedlist = ReplacePart[updatedlist, {2, 3} -> myinput2]; 
Panel[GraphicsGrid[updatedlist, ImageSize -> {30, 40}, ContentSelectable -> True]]

The above code takes a lot of time to execute. I used the Timing function of Mathematica to figure out which part took the long time to execute and it was the

Panel[GraphicsGrid[updatedlist, ImageSize -> {30, 40}, ContentSelectable -> True]]

part that was the longest. Because of this, my entire application has slowed down.

Based on the comments in Mathematica, I tried to use a Grid for the updatedlist above, but the problem is, how can I set the ImageSize of the Grid which is an option for the GraphicsGrid and not Grid?

One could use scaled ItemSize and wrap the Grid in a Pane that has a fixed imagesize eg. Pane[Grid[{{1, 2}, {3, 4}}, ItemSize -> Scaled[0.5]], ImageSize -> 200]. But the problem with Grid is that Scaled option for ItemSize does not work for all times. And another problem is the size of the Grid is not a constant value because of the individual ItemSize. However my application demands that the Grid be a constant. Also, I tried to do something like this:

li=ConstantArray["",{5,20}];
b1=Button["Click",Null,ImageSize->{250,60}];
b2=Button["Click",Null,ImageSize->{400,80}];
b3=Button["Click",Null,ImageSize->{250,90}];
b4=Button["Click",Null,ImageSize->{100,90}];
li=ReplacePart[li,{1,2}->b1];
li=ReplacePart[li,{4,2}->b2];
li=ReplacePart[li,{5,2}->b3];
li=ReplacePart[li,{5,3}->b4];
li[[1,3;;6]]=SpanFromLeft;
li=ReplacePart[li,{4,3}->SpanFromLeft];
li=ReplacePart[li,{4,4}->SpanFromLeft];
li=ReplacePart[li,{4,5}->SpanFromLeft];
li=ReplacePart[li,{4,6}->SpanFromLeft];
Grid[li,Frame->All, ItemSize->Full]

The output was something like this:

I want to be able to accurately place the control objects without messing the sizes and have perfect predictable appearance on the front end. Anyone knows how to make my code better and the interactive application look better?

Answer 1

It is not clear to me from your question what you need. You say:

I want to be able to accurately place the control objects without messing the sizes and have perfect predictable appearance on the front end.

Perhaps what you want can be done with Inset in Graphics, along with Deploy:

mygrid = ConstantArray["\[FilledSmallCircle]", {10, 10}];
mybutton1 = Button["Example", ImageSize -> {70, 30}];
myinput2 = InputField[x];
updatedlist = ReplacePart[mygrid, {{7, 2} -> mybutton1, {3, 5} -> myinput2}];

Graphics[
  MapIndexed[Inset, updatedlist, {2}],
  ImageSize -> {400, 300}
] // Deploy

You will have to manually size and locate your objects because as you can see above Mathematica will happily place one on top of another, but it sounds to me like you might even want to manually size and place your control objects so perhaps this is a solution?

To clarify, the background "grid" of dots is merely a reference; you would not include these (or empty strings) in actual use as that would slow things down again.