Tutorial - Creating to GUI Calculator - (Dialog Creation)

In this tutorial we will try to guide him to create a basic calculator, just as that of MS-Windows. Using the GUI's AutoIt features.
It is assumed that you are already familiar with creating and running AutoIt scripts as shown in the example.

Creation of the GUI dialog - (Design)

In this part we will begin with the creation of GUI dialog. It's good to have the idea of the design based on the utility of our program.
That is to say, how many and that type of controls will need. In this case we will use the same design that Windows Calc.
In the Fig. 1, we can see how our calculator will be finished in this part.

Fig. 1

To begin the creation of our dialog, we will begin including some libraries which declare constants we use in our dialog box. These constants contain numeric values of styles and parameters that define the appearance of each control, as well as you value for events and states. (Usually, "GUIConstantsEx.au3" already comes included and it resides in the AutoIt's folder installer). Later on we will see how to apply them, for the time being we will make the inclusion of this library writing in our script the following lines:

#include <EditConstants.au3>
#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <WindowsConstants.au3>

How it could it turns in the basic tutorial, to begin the creation of our dialog we begin defining the window, as the title, size and position with GUICreate(). The values of the window will be the following ones:
Title = "Calculator"
Width = 260
Height = 230
Therefore, the following lines of our code would be:

GUICreate("Calculator", 260, 230)

To store the identifier (ID) of each control
In the definition part, we will be ahead to the assignment of variables for each button that we make. When making this assignment, the variable stores the control ID that it allows us to use it to be able to to manipulate "their action" in run-time. See

example.

Variable naming
The naming of each variable is a personal matter, but it's important to be clear to the one to assign name for the easy understanding of what represents in the certain code control. As it looks in the next example, this syntax used: $idBtn1 that means "TO GUI Control - It's a button, Digit #1", the parameters for this button's example are the following ones:
Text ="1", Left = 54, Top = 138, Width = 36, Height = 29

$idBtn1 = GUICtrlCreateButton("1", 54, 138, 36, 29)

As I mentioned before, this makes that the code to be clearer.

Creation of each control
As we can it looks in the Fig.1, we needs to create several buttons, which we will define with GUICtrlCreateButton(). The buttons that we will define will be: the digits of 0 up to 9, the operators, memory's buttons as such Memory Clear ("MC"), Memory Restore ("MR"), etc.
You can copy the code shown below and to add to your script:

; Digit's buttons
Local $idBtn0 = GUICtrlCreateButton("0", 54, 171, 36, 29)
Local $idBtn1 = GUICtrlCreateButton("1", 54, 138, 36, 29)
Local $idBtn2 = GUICtrlCreateButton("2", 93, 138, 36, 29)
Local $idBtn3 = GUICtrlCreateButton("3", 132, 138, 36, 29)
Local $idBtn4 = GUICtrlCreateButton("4", 54, 106, 36, 29)
Local $idBtn5 = GUICtrlCreateButton("5", 93, 106, 36, 29)
Local $idBtn6 = GUICtrlCreateButton("6", 132, 106, 36, 29)
Local $idBtn7 = GUICtrlCreateButton("7", 54, 73, 36, 29)
Local $idBtn8 = GUICtrlCreateButton("8", 93, 73, 36, 29)
Local $idBtn9 = GUICtrlCreateButton("9", 132, 73, 36, 29)
Local $idBtnPeriod = GUICtrlCreateButton(".", 132, 171, 36, 29)

; Memory's buttons
Local $idBtnMClear = GUICtrlCreateButton("MC", 8, 73, 36, 29)
Local $idBtnMRestore = GUICtrlCreateButton("MR", 8, 106, 36, 29)
Local $idBtnMStore = GUICtrlCreateButton("MS", 8, 138, 36, 29)
Local $idBtnMAdd = GUICtrlCreateButton("M+", 8, 171, 36, 29)

; Operators
Local $idBtnChangeSign = GUICtrlCreateButton("+/-", 93, 171, 36, 29)
Local $idBtnDivision = GUICtrlCreateButton("/", 171, 73, 36, 29)
Local $idBtnMultiplication = GUICtrlCreateButton("*", 171, 106, 36, 29)
Local $idBtnSubtract = GUICtrlCreateButton("-", 171, 138, 36, 29)
Local $idBtnAdd = GUICtrlCreateButton("+", 171, 171, 36, 29)
Local $idBtnAnswer = GUICtrlCreateButton("=", 210, 171, 36, 29)
Local $idBtnInverse = GUICtrlCreateButton("1/x", 210, 138, 36, 29)
Local $idBtnSqrt = GUICtrlCreateButton("Sqrt", 210, 73, 36, 29)
Local $idBtnPercentage = GUICtrlCreateButton("%", 210, 106, 36, 29)
Local $idBtnBackspace = GUICtrlCreateButton("Backspace", 54, 37, 63, 29)
Local $idBtnClearE = GUICtrlCreateButton("CE", 120, 37, 62, 29)
Local $idBtnClear = GUICtrlCreateButton("C", 185, 37, 62, 29)

Local $idEdtScreen = GUICtrlCreateEdit("0.", 8, 2, 239, 23)
Local $idLblMemory = GUICtrlCreateLabel("", 12, 39, 27, 26)

Already defined the creation of each control, is important to add the line following to show our dialog box, using GUISetState().

GUISetState()

Messages loop
As he/she could it turns in the one

, the function GUIGetMsg() gives as output a value of an event in the dialog box, and this it is received by the variable in this case, $msg that is evaluated every time that Do.. Until loop, repeats. For this part we will only add the one simpler event, which repeats in an infinite cycle until the event similar to the constant $GUI_EVENT_CLOSE (equal to -3) it's presented, and it will make that close the window and finish the script. So the following lines for our script will be:

Local $msg
Do
$msg = GUIGetMsg()

Until $msg = $GUI_EVENT_CLOSE

Application of styles
Until this point, we have already been able to conclude the design of our dialog box. You can already execute the script and it will see almost ended the calculator, now observe that the calculator shows something not foreseen in the design. The EDIT control that represents the screen of digits not displayed correctly, which needs that we apply certain styles of appearance (to see the Fig. 2). For to correct this appearance, we will make use of EDIT styles:

Fig. 2

For this part, we only need to modify two lines of our code.

First modification: in the first addition, we will add in the line of the variable $idEdtScreen, a definition for the control (Edit) that is of reading ($ES_READONLY) and that it is justified to the right ($ES_RIGHT), for we join these two variables with the function BitOR() like it is presented in the line of code below. We will also add $WS_EX_STATICEDGE to the parameter of extended style (exStyle) to give the sunken appearance to the border. For more reference of the styles table for EDIT control, click here. (for a detailed explanation of each style).

Local $idEdtScreen = GUICtrlCreateEdit("0.", 8, 2, 239, 23, BitOR($ES_READONLY, $ES_RIGHT), $WS_EX_STATICEDGE)

Second modification: the second addition we will add to the line of the variable $idLblMemory, that it contains a LABEL control in which will show us the state of storage in memory that we will see in the second part. We will define that this control (Label) will have a sunken ($SS_SUNKEN) like it is presented in the line of the code. For reference of styles table for LABEL control, click here.

Local $idLblMemory = GUICtrlCreateLabel("", 12, 39, 27, 26, $SS_SUNKEN)

After making these changes try to execute the script. The changes affects the appearance shown in the Fig. 3, now our calculator it looks as the Fig. 1, shown at the beginning. You can also look at the for reference.

Fig. 3

As an exercise for the reader, try adding $BS_FLAT to style parameter in some button, you will look a flat style in the appearance.