Designing the app

Step 3: Design the app

Designing the app

Real Editor

In this step, we will add the elements we require in the app. Our objective here is to be able to easily modify the parameters of different components of our model, without having to open each one individually. To do this we will use a widget called the Real Editor.

In our example, we will use 3 Real Editors to control the Mass value, the Spring Rate and the Spring Damper Rate in our model.

Procedure

1. Select the Real Editor widget and drag it onto the Form window:

Figure 4: Dragging a Real Editor to the Form window

The Real Editor appears on the Form: Figure 5: Form window containing a Real Editor

Note The properties of the Real Editor are displayed to the right of the Form Window.

2. Add two more Real Editors in the same way.

3. objectName Select the first Real Editor, and double-click its objectName and edit it to read Mass:

Figure 6: Editing the objectName

4. In the same way, rename the other two Real Editors as Spring_Rate and Spring_damper_rating.

5. Now drag the Label from the Display widgets toolbox onto the form next to the editor for the mass.

6. Double-click on the placed label and edit the text into Mass.

7. Do the same for Spring_rate and Spring_damper-rating.

Note You can select a label in the Form and drag its handles to resize it as necessary, and change its position in the Form .

8. Lay Out in a Grid Use your mouse to select the three Real Editors and their labels, right-click the form and select Lay Out in a Grid to adjust the position of the widgets:

Figure 7: Automatically adjusting layout

Note You can also use the Layout toolbar to adjust the position of the widgets: