How to Organize Your Simulation App Using Subforms
Bridget Cunningham September 1, 2015
An important element in the design of any simulation app is organization. Maintaining an orderly structure makes it easier for you to build the app and also enhances the usability experience for app users. Today, we will show you how to create organized apps in COMSOL Multiphysics with the help of subforms and form collections.
Staying Organized When Building Apps
When building a simulation app, you have the freedom and flexibility of customizing your app’s layout to meet specific design needs. Using resources such as forms and form objects, you can control the design of your app’s user interface (UI), including only those elements that are relevant to your particular analysis. Such customization allows you to develop a UI for your app that is both intuitive and easy-to-use.
As more and more forms and form objects are implemented within your app, the complexity of the app will increase. Staying organized throughout this process is rather important, as it helps you stay on track from start to finish. Form collections and subforms are helpful tools for building organized apps, benefiting both you and your end-users.
The list of form objects with “Subforms” highlighted. These must be added if you want to use multiple forms in one app interface.
Here, in Part 3 of our Introduction to Application Builder Videos series, we demonstrate how you can use subforms to create organized simulation apps. We will also show you how to rename forms and form objects — a best practice when designing simulation apps.
Video Tutorial: How To Use Subforms to Organize Your COMSOL App
Further Reading and Viewing
- Part 1: How to Build an App from a COMSOL Multiphysics Model
- Part 2: Simulation Apps: How to Add a File Menu with Save Options
- Learn more about form objects and customizing your simulation app in this previous blog post
In two previous videos, we created a simple app from a model and then added a menu bar with save options to it. Now, when adding more and more form objects to your app, we need to keep everything organized, both to help you while building the app and the users who are running the app. In this video, we will show how to use form collections and subforms to keep your app organized as it becomes more complex.
I will start by creating a new form and this will be my second form I create, except I’m not going to add any inputs, outputs, graphics, or buttons. I’m going to create a blank form and then I am going to create a text label.
So, I can add instructions for the user, I’ll just add a placeholder here. For text labels, I can use single-lined text or multiline text, so I’ll use this one: “Instructions for User” and then here are my multiple lines: “These are instructions. These are more instructions”. So, here we go, we have our second form with our instructions for the user.
Next, I need to create another form and, again, this will be blank. This one I am going to add a form collection to. There are a few options here for my form collection. I can change the Type to: Tabs, List, or Sections. I’m going to leave it as Tabs, though, and then I need to select the panes. I am going to add “form1″ and “form2″ as my two panes, drag it up to the top, and, similar to the original app that we created in form1, I am going to make this one responsive. So I’m going to make this a grow column, make this a grow row, and then in the form collection, I am going to make the alignment “Fill”, and then set the width and height to be automatic.
Now, I’m not done yet. When I go to the main window, in the settings window there’s a section called “Form Reference”. The form listed here is the one that will show up when I run the app, so right now only form1 will show. What I want to do is, in this reference section, change it to form3.
Now I can test the application and we can preview this form collection. Here, I have my form1 and form2 with my instructions. And if I resize the window, the graphics window resizes with it. Now, let’s go over some best practices. As you can see, I have form1, form2, form3, and they’re listed, named form1 and form2; this can get confusing if we create 10-15 forms, where you won’t know one from the other. Let’s rename some of these forms. I’ll start with form1. We have a name and a title, I’m going to add this as lowercase and in the title it will be uppercase. So, here in the Application Builder window, you can see that “main” is lowercase and then in form3, in the form collection, “main” is uppercase. The name is the internal name of the form used to reference the form from other form objects and methods. The title, external, for when using the app. Now I’m going to do the same thing for form2 and form3. This is my help form and form3 is the form collection.
One thing to note here, when renaming forms and other form objects, this can disrupt some of your functionality. For instance, in the Update Geometry button, in the “Choose Commands to Run” section, I have the argument as “form1/graphics1″. However, form1 doesn’t exist anymore, so I need to edit the argument and replace with the “main/graphics1″. Now I’m all done. The Compute button references just “graphics1″, so I don’t need to change this. However, if I were to change the name of the graphics window, then I would need to change the Compute button as well.
Now, let’s take a look at our next subform object: a form. To show this functionality, I will take a look at these input parameters here. Now, if I wanted to add another input parameter, let’s say the thickness, I could insert a row below, but here you can see that the row goes through the buttons and it looks a little weird. What I can do to prevent this, and I’ll CTRL+Z to get rid of that, I can grab all of these cells, and then right-click to extract a subform. I can also go to the ribbon and click the button Extract Subform. This will take all those form objects and create an entirely new form from it. I’m going to follow my own advice and rename this form “inputs”. Now, when I insert a row below I only have these three cells to deal with.
Let’s go about creating this input parameter now. I’ll add a text label and name it “Thickness”, and then add an input field. Here I’m going to change the name to “Thickness”, and then go to the Model, Global Definitions, Parameters, select Thickness and then use this as the source. Clicking this button tells the input field form object to grab the thickness parameter from the underlying model. Now I will go into Data Validation, and similar to my other input fields, I will select “Append unit to number”, and then the unit expression is millimeters (mm). Finally, I need to add the actual unit, and instead of grabbing it from a fixed unit, I’m going to select it from an input field, and take a look that we have our Thickness input field. That’s where the renaming comes into play again, and here I have my new input parameter.
Now just for fun, I am going to add a few more things. I’m going to insert a column to the right, merge the cells, insert a line. Lines are very simple, this one will be vertical, and then I will insert a row below, merge the cells, and insert another line. Finally, I am going to insert a row above, again merge the cells, and this time I’m going to add a text label for a header. I’ll call this “Input Parameters”. And then just for the fun of it, I will change the appearance around a little bit. Let’s choose a custom color — there’s a nice COMSOL-looking blue here — and then change the default size to 16. Let’s embolden that. Now I can go back to my main form and here you can see that the subform updates, and it doesn’t mess around with my other form objects, so it keeps a nice organized structure.
Let’s rerun the application to take a look at these changes. Again, here we have the nice title and the fourth input parameter. I can change the thickness and update the geometry.