The Grid Mode

COMSOL uses a grid when creating the user interface for the running the application. In the grid mode you can edit the grid and place form objects in the positions you want within the grid to obtain the desired layout.

Figure 3-1: An example of a grid with form objects. The cells in the grid can span over multiple rows and columns. For example, the cell in the last row with the list box spans over all three columns.

Adding a Form Object

To add a new form object, first select an empty cell in the grid. Then select the object from the palette that opens when you click the Insert Object button on the Form ribbon toolbar (see The Form Objects for details about the available form objects). The new object is inserted in the cell, or, if no cell is selected, in the first empty cell. If there is no empty cell, the software adds a new row and places the form object in the first cell in that row.

Copying, Duplicating, and Deleting Form Objects

For all form objects that you have added, you can right-click any form object’s cell, a group of cells, or an entire column or row to open a context menu with the following actions:

•	Copy (), to make a copy of the form objects. You can also use Ctrl+C.

•	Duplicate (), to make a duplicate of the form objects, which appears directly in the form.

•	Delete, to delete the form objects. You can also press Delete to remove form objects.

•	Settings (), to open the Settings window for the form object, or a Settings window for common properties if you have selected multiple objects.

•	Help (), to open the Help window and display information about the form or form object, when applicable.

For form objects that support methods that run on a data change, for example, the context menu also contains Create Local Method to create a local method, or Edit Local Method or Edit Method to open an already existing local method or other method in an editor window.

If you right-click on the Form window’s canvas, the context menu contains these additional actions:

•	Preview Form (), to launch an application window to preview the contents of the form.

•	Paste Button (), for example, to paste a form object (a Button in this case) that you have copied. You can also use Ctrl+V.

Using the arrow keys, you can traverse the cells in the grid, selecting one object at a time. You can also select multiple cells by pressing the Shift key while traversing with the arrow keys.

Moving A Form Object

You can move form objects to another cell by dragging and dropping them. Click a cell to select the form object in the cell. Then drag the object and drop it on the cell where you want to place it. If the cell where you drop the form object is occupied by another object, that object will be moved to the cell vacated by the object you dragged. This makes it easy to change places between two form objects.

Row and Column Settings

You can control the size of the rows and columns in three ways. To choose which way to control it for a row or column, first select the row or column by clicking the header to the left of, or above, the grid. The image below shows a selected column.

Figure 3-2: Selecting a column using the grid layout mode.

To change how to control the width of the column, use the Column Settings menu () in the Form ribbon toolbar. The same menu is also available when you select a column in the form window and as a Column submenu when you select one or several cells and then right-click. The following options are available:

•	Fit Column (): The width is equal to the widest object in the column.

•	Grow Column (): The column changes its width as the width of the grid’s container changes. The container can be the window where the form is used or a column in a parent form. Letting one or more columns grow is a good way of making a user interface that adjusts its size to fit the available space.

•

Fixed Column (): The column width is set to an exact number. The width can be adjusted by dragging the column separator in the column header. When using this option, make sure that everything in the column fits the available space. Also consider that all objects will not have the same size on all clients that on which the application might run.

Similarly, to change how to control the height of a row, use the Row Settings menu () in the Form ribbon toolbar. The same menu is also available when you select a row in the form window and as a Row submenu when you select one or several cells and then right-click. The following options are available:

•	Fit Row (): The height is equal to the highest object in the column.

•	Grow Row (): The row changes its height as the height of the grid’s container changes. The container can be the window where the form is used or a row in a parent form.

•

Fixed Row (): The row height is set to an exact number. The height can be adjusted by dragging the row separator in the row header. When using this option, make sure that everything in the row fits the available space. Also consider that all objects will not have the same size on all clients on which the application might run.

The headers indicate the row and column setting:

•	When Grow is used, the header has an arrow symbol like the middle column in Figure 3-2.

•	When Fixed is used, the size is shown in the header like for the right column in Figure 3-2.

Inserting and Removing Rows and Columns

When you have selected a row or column, you can use the Insert menu (), in the Grid section of the Form ribbon toolbar or on the context menu when right-clicking a selected row or column, to insert rows or columns:

•	Choose Insert Above () to insert a new row above the selected row.

•	Choose Insert Below () to insert a new row below the selected row.

•	Choose Insert Left () to insert a new column to the left of the selected column.

•	Choose Insert Right () to insert a new column to the right of the selected column.

You can also use the Remove menu () to remove rows or columns:

•	Choose Remove Row () to remove the selected row.

•	Choose Remove Column () to remove the selected column.

The applicable remove command is also available on the context menu when right-clicking a selected row or column.

Aligning Form Objects

You can adjust the alignment of form objects within the cells using the tools on the Align menu () in the Grid section of the Form ribbon toolbar. The same menu is also available as an Align submenu when you select one or several cells and then right-click. To change the alignment, first select the cells with the form objects that you want to align, then select one of the following alignment options:

•	Select Fill Horizontally () to make the form object occupy all of the available space in the column. The assigned width of the form object is not considered when filling; instead, it is the column that gives the size.

•	Select Align Left () to left align selected form objects to the left ends of their cells.

•	Select Align Center () to horizontally center selected form objects in their cells.

•	Select Align Right () to right align selected form objects to the right ends of their cells

•	Select Fill Vertically () to make the form object occupy all of the available space in the row. The assigned height of the form object is not considered when filling; instead, it is the row that gives the size.

•	Select Align Top () to top align selected form objects to the top ends of their cells.

•	Select Align Middle () to vertically center selected form objects in their cells.

•	Select Align Bottom () to bottom align selected form objects to the bottom ends of their cells.

Adjusting the Size of a Form Object

Some form objects can be resized by dragging. Not all objects can be resized. One example is labels, where the size is given by the label text.

To resize a form object, first select it by clicking the cell with the object. The image below shows a selected list box.

Figure 3-3: A selected list box can be dragged to change its width and height.

Once selected, you can adjust the size by dragging the handles in the right and bottom sides of the list box. If the object had the horizontal alignment set to fill when dragging horizontally, the alignment is changed to left. Similarly, when dragging vertically, the alignment is changed to top. A blue guideline appears to make it easier to align an object with other objects in the same form.

Merging and Splitting Cells

To make a form object span multiple rows or columns, you can merge cells. To merge cells, first select them. Then click the Merge Cells button () in the Grid section of the Form ribbon toolbar. When merging, there must be at most one form object in the cells to be merged because the new cell can only contain one form object.

The inverse of merging cells is to split a cell that spans more than one row or column. To split a cell first select it. Then click Split Cell () in the Grid section of the Form ribbon toolbar. If there were any form object in the original cell, it is placed in the top left of the new cells.

Extracting a Subform

If you want to extract a rectangular area (a subgrid) from a form to a new form, select the part of the grid that you want to extract, right-click, and choose Extract Subform (), or click the Extract Subform button in the Grid section of the Form ribbon toolbar. The extracted subgrid, with the form objects in that part of the original form, then appears in a new form, and the corresponding form window opens. The cells in the original form change into a Form reference object referring to the new form.

Resizing the Grid and the Form

If there is at least one row or column that is expandable, the whole grid in a form can be resized. As the growing row or column adjusts its size to the available space given by its container, you can use the resizing to see how the form looks when the available space changes.

Clicking in the top-left corner of the grid selects the whole grid and shows handles that indicate that you can resize the grid. The image below shows a selected grid with a drag handle in the right border. You can grab and resize the border anywhere along the borderline.

Figure 3-4: A grid handle to the right shows that you can resize the grid.

You can resize a form without first selecting it for resizable forms that use the grid mode and have rows or columns that can grow. Resize the form by dragging its right or bottom border (a resize cursor appears when resizing is available). The size to which you resize the form in the Form Editor is used as its initial size if the form’s Size setting is set to Automatic.

Changing the Grid Size

To change the number of rows and columns in the grid, click the Rows & Columns button () in the Grid section of the Form ribbon toolbar. In the Rows & Columns dialog box that opens, specify the number of rows and columns in the Rows and Columns fields; then click OK. If the new size is smaller than the current grid size, rows and columns are removed starting from the bottom-right corner of grid. Also, the resizing of the grid removes any form objects that do not fit in the new grid.