Scribd
Upload
42 views

Design The Graphical User Interface

The document provides steps to design a graphical user interface (GUI) for a simple calculator application. It includes 30 steps to place labels, text boxes, buttons and add code to add, clear and exit the calculator. Key elements include naming objects, setting properties like text, size and borders, and writing code for the add, clear and exit buttons to perform calculations and exit the program.

Uploaded by

Cecille Idjao
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views

Design The Graphical User Interface

The document provides steps to design a graphical user interface (GUI) for a simple calculator application. It includes 30 steps to place labels, text boxes, buttons and add code to add, clear and exit the calculator. Key elements include naming objects, setting properties like text, size and borders, and writing code for the add, clear and exit buttons to perform calculations and exit the program.

Uploaded by

Cecille Idjao
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Design the Graphical User Interface (GUI)

Tips:

 On the
properties toolbox set
in alphabetical order.
Refer to the picture of
the Toolbox, green
circle.

Step 1: Click anywhere on the form

Step 2: In the properties window, under the Text property, type Simple
Calculator

Step 3: In the properties window, under the StartPosition property,


select CenterScreen

Step 4: In the properties window, under FormBorderStyle, select


Fixed3D

Step 5: Click and drag a label from the Toolbox to the form

Step 6: While the label is selected, in the properties window, under the
Text property, type Simple Calculator. Note: Since this label is the
main text describing the text, you can change the size and boldness of
the text under the Font property in the properties window but is not
required for this project

Step 7: Proceed to do this for the following labels (5) and place them
accordingly. Name them: Operators, Operation, Operand 1, Operand
2, and Result (See picture) Note: Objects can either be dragged or
double clicked to be placed onto the GUI

Step 8: Click and drag a button from the Toolbox

Step 9: Place it under the “Operators” label.

Step 10: While the button is selected, in the properties window, under
the Name property, enter btnAdd

Step 11: Then under the Text property, enter a + sign

Step 12: Click and drag a TextBox from the ToolBox beside the
“Operand 1” label (See picture)

Step 13: While the TextBox is selected, in the properties window,


under the Name property, enter txtOperand1

Step 14: Repeat Step 12 but place the second TextBox beside the
“Operand 2” label (See picture)

Step 15: Repeat Step 13 but name it txtOperand2

Step 16: Click and drag a label between the two text boxes (See
picture)
Step 17: While the label is selected, in the properties window, under
the Name property, enter lblOperator

Step 18: Delete the text property of lblOperator so that it is blank

Step 19: Under 9the AutoSize property, select False. Note: This lets
you resize the label at your desire

Step 20: Under the BorderStyle property select Fixed3D

Step 21: Click and drag another label beside the “Result” label

Step 22: Repeat Step 17, name it lblDisplay

Step 23: Repeat Step 18 and Step 19

Step 24: Click and drag a button from the Toolbox below the “Result”
label (See picture)

Step 25: While button is selected, in the properties window, under the
Name property, enter btnClear

Step 26: Change the text property for the Clear button to Clear

Step 27: Click and drag a button from the Toolbox beside the Clear
button (See picture)

Step 28: While button is selected, in the properties window, under the
Name property, enter btnExit

Step 29: Change the text property for the Clear button to Exit
Step 30: Enter the following code by double clicking on each button to
open the code window:

Step 3: Coding the Add Button

Goal: Add to numbers that the user inputs into the text boxes

Code Explanation

 Dim Variable As Double declares a variable as a specific data


type
 Whenever the Add button is pressed a + sign will appear in the
label between the two text boxes.
 The Display label is being assigned the Result variable which is
Operand1 + Operand2.
 The “.ToSting(“N”) is to convert back into string from when we
converted it to a number using parse

Step 4: Coding the Clear Button


Goal: To clear all boxes on the GUI and set the cursor to the top text
box (Operand 1)

Code Explanation:

 Clear()Function clears a text box. This function can only be used


on a text box
 Label boxes must be cleared by setting the. Text property to
nothing
 Focus() Function sets the cursor to the text box

Step 5: Coding the Exit Button

Goal: To exit the program.

You might also like