How can I place gui controls inside Grid? [duplicate]

Question

In all my apps, I am facing a problem about placing the Gui controls inside Grid.

For this purpose, I wrote three functions.

The first function, createGridList, returns empty list.

createGridList[noOfRows_, noOfColumns_] := ConstantArray["", {noOfRows, noOfColumns}]

The second function, layoutGrid, returns a GraphicsGrid.

layoutGrid[noOfRows_, noOfColumns_, list_, meshFactor_] :=
(
   GraphicsGrid[
     list,
     ImageSize -> {((noOfColumns*meshFactor)), ((noOfRows*meshFactor))},
     Background -> RGBColor[.745, .886, 1]
     ]
)

The third function, PlaceControl, returns an updated list with the Gui elements.

placeControl[yCoOrdinate_, xCoOrdinate_, controlID_, controlWidth_, 
  controlHeight_, list1_, meshFactor_] :=
(
  rowNumber = yCoOrdinate/meshFactor;
  columnNumber = xCoOrdinate/meshFactor;
  rowSpan = controlWidth/meshFactor;
  columnSpan = controlHeight/meshFactor;
  list = list1;
  Table[
  (
    If[(i == rowNumber),
      (*True condition, i value is equals to rowNumber*)
      (
        If[(j == columnNumber),
        (*True condition,j value is equals to column Number*)
        (
          list = ReplacePart[list, {i, j} -> controlID];
          Table[
            (
            list = ReplacePart[list, {i, m} -> SpanFromLeft]
            ),
            {m, (j + 1), (j + (rowSpan - 1))}
          ];
          j = (columnNumber + (rowSpan - 1));
        )
        ]
      ),
      (*False condition, i value is not equals to rowNumber*)
      (
        If[((i > rowNumber) && (i <= ((rowNumber + columnSpan) - 1))),
          (*True condition, i value is in between rowNumber,(rowNumber+ColumnSpan)*)
          (
            If[(j == columnNumber),
            (*True condition, j value is equals to column Number*)
            (
              list = ReplacePart[list, {i, j} -> SpanFromAbove];
              Table[
                (
                list = ReplacePart[list, {i, m} -> SpanFromBoth]
                ),
                {m, (j + 1), (j + (rowSpan - 1))}
              ];
              j = (columnNumber + (rowSpan - 1));
            )
            ]
         )
       ]
       )
    ]
    ),
    {i, 1, Length[list]}, {j, 1, Length[Part[list, 1]]}
  ];
  list
)   

I am calling the above function.that corresponding code is following below.

(*The following variable specifies the no of rows in grid*)
noOfRows =20;
(*The following variable specifies the no of columns in grid*)
noOfColumns = 20;
(*The following variable specifies the Button visualization*)
buttonElement = Button["Ok", "", ImageSize -> {150, 60}];
(*The following variable specifies the each cell size in grid*)
cellSize = 10;
(*The following code corresponds to the calling the above functions*)
list = createGridList[noOfRows, noOfColumns];
list = Quiet[placeControl[20, 40, Button["Ok", "", ImageSize -> {150, 60}], 
  150, 60, list, cellSize]];
layoutGrid[noOfRows, noOfColumns, list, cellSize]

Visualization-wise and logical-wise everything is fine, but the problem is: If you place so many Gui-elements inside a GraphicsGrid, it takes more time for evaluation.

My understanding is that GraphicsGrid slows down because GraphicsGrid converts all the Gui-elements into Graphics,

How can I reduce and improve the code?

Answer 1

Use Grid instead of GraphicsGrid