Let's start our tutorial on how to create a Math Formula Calculator using VisualNeo Web, a powerful development environment. By following this guide, you will learn how to use essential tools such as subroutines, variables, and VisualNeo actions. Additionally, we will create a PWA application, enhancing the usability of our calculator.


To get started, launch VisualNeo Web. If you don't have a project yet, simply click on File and select New. (File > New)



When creating your project, you will have the option to select the size of your application. For this tutorial, I have chosen a custom size of 360 x 640 pixels.
Later on, we will cover how to adjust the application size to fit the screen of the device being used.



After creating a new blank application, we can begin designing the interface by adding input text fields, buttons, containers, etc. from the tool palette located on the left side of the screen.

First, we select the Input Text object, which provides users with a field to input text information. Whatever the user enters into this field will be stored as a variable in our program.
To position the Input Text object where we want it on the app, we simply click and drag our mouse in the app work space.


When we have a visual object selected in the workspace, the Properties Panel located in the lower right corner displays all of its properties and styles. We will look for the "place-holder" property and input the text "Enter a math formula." This will provide the app user with a visual clue as to the type of information they are expected to enter in that field.
Remember to press Enter key for the value to take effect.



Next, we need to assign a variable name to our Input Text object. Variable names should always be enclosed in brackets and cannot contain spaces or special characters. To assign a variable name to our Input Text object, we locate the variable property and enter [formula] in the value field, then press Enter.



Moving on, we select the button object from the tool palette and provide it with a caption that will be displayed in the center of the button.



Now it's time for the fun part - coding! To enter your first command, double-click on the button you just added. This will open up the Code tab, where we will enter the button code.



This code will be executed whenever a certain event occurs, such as when the user clicks the button. You can select the appropriate event in the lower section of the Code Tab.

It's possible to add different commands for each event. All available commands are listed in the command list under the Action Panel.



When adding commands or actions to our code, we have three options to choose from:


  1.    Manually write the command into the code editor.
  2.    Search for the command in the command list and double-click to add it.
  3.    Search for the command in the command list and drag it into the code editor area.


If we use methods 2 or 3, a wizard window will open up to help us use the selected command. If we use method 1, we can still open the same wizard window by double-clicking the command name we have just written. Whatever method you prefer, add the command "Math". It's used to perform a mathematical opration and it's located under the Mathematical section in the Actions panel command list. 



You should see a window wizard like this one:



This command has three "parameters" or information it needs to operate:


  1. Mathematical formula. Here we write [formula] as it's the variable that stores the user input. Whatever the user write within the Input Object will be placed here.
  2. Number of decimal places. We are going to put just 2.
  3. Variable to store result. We need an additional variable to store the calculation result. Later it will be shown to the user.


Press OK to include the command and it's parameters into the Code Editor.



Done! This is all the code we need right now.

The only additional thing we need is a place to show the result to the user.


Press the Design Tab to get back to the visual editor.



Now we are going to add a Header Object to show the result (write [result] into the editor that comes up)
Use the text-align property to center the text.



And that's it! Our application is now ready to be executed and tested. To do so, we just need to click on one of the browser buttons located at the top of the VisualNEO Web interface.



The app will open up within that web browser.

To test your app simply write a mathematical formula, such as (2+3)*2, into the input text field and press the "Calculate" button. If everything is working correctly, the result should appear.



Of course we can come back to VisualNEO Web and improve a little more in the user interface.
Try adding some more objects and play with this styles you will find next to the properties tab:


color, background-color, font-weight, font-size, border-color and padding-top


Try to get a visual appearance similar to this one:
Note that you can change the Page background-color and other page properties and styles too by selecting the default page "NewPage"!



How to adapt the app size to any screen device size.


Open the menu Project > Events and add this simple command:


FitAppToScreen false "top" "center"


This will make the application to resize itself to take all the device screen available space.

Created with the Personal Edition of HelpNDoc: Produce online help for Qt applications