Learning Center

Using a Grid Layout to Design the User Interface for an App

You can build a simulation app with a structured design for the user interface by using Grid mode through the Application Builder in COMSOL Multiphysics^®. This enables you to ensure that the apps you build look consistent when run on a web browser or across multiple platforms. You can also use this layout to build an app that is resizable. Here, we will show how to design a simulation app using a Grid layout mode and the options available for when doing so.

Tutorial: Layout Modes — Grid Mode

The simplified thermal microactuator tutorial model is used as an example here, which a simulation app was developed for previously. Here, the app is changed so that all form objects are contained within a grid and so that the graphics in the user interface are resizable and responsive to when you resize the window for the app. To accomplish this, we switch to using Grid layout mode and highlight various settings and tools you can use to control the parts of your app that you want to be resizable. This includes working with cells, rows, and columns to structure your app design as well as with settings to control the spacing of each row and column in the grid. Topics covered include the following:

• Grid layout mode
  • Adding and removing columns or rows in a grid
• Resizable graphics object
  • Using the Grow Column option to enable expansion
  • Using the Fill Horizontally option so that a graphics object fills the entire space in a grid cell
  • Inserting a new row and merging cells
  • Using the Grow Row option and Fill Vertically option
• Testing the app for responsiveness to changing the window size

Further Learning

You can use the Subwindows, Sections, and Graphics template to automatically make the apps you build resizable; learn how in the article on using layout templates. You can also find more information on the Grid layout mode in the "Sketch and Grid Layout" section of the Introduction to the Application Builder documentation.