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 usingGridmode 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 aGridlayout mode and the options available for when doing so.
Tutorial: Layout Modes — Grid Mode
Thesimplified thermal microactuatortutorial model is used as an example here, which a simulation app was developed forpreviously. 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 usingGridlayout 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:
- Gridlayout mode
- Adding and removing columns or rows in a grid
- Resizable graphics object
- Using theGrow Columnoption to enable expansion
- Using theFill Horizontallyoption so that a graphics object fills the entire space in a grid cell
- Inserting a new row and merging cells
- Using theGrow Rowoption andFill Verticallyoption
- Testing the app for responsiveness to changing the window size
Further Learning
You can use theSubwindows, Sections, and Graphicstemplate to automatically make the apps you build resizable; learn how in the article onusing layout templates. You can also find more information on theGridlayout mode in the "Sketch and Grid Layout" section of theIntroduction to the Application Builderdocumentation.
请提交与此页面相关的反馈，或点击此处联系技术支持。