LABORATORY 3: GRAPHICAL USER INTERFACE (GUI): INTRODUCTION

PROGRAM: Bachelor in Engineering Technology

ELECTRICAL ENGINEERING
SUBJECT: SOFTWARE ENGINEERING 2A
DATE: 2023
DURATION: 60 minutes
TOTAL POINTS: 40 (Activity 1 + Activity 2)

Objective
This laboratory is designed to introduce you to the concept of building User Interfaces (UI)
using Visual C++ through the application of Window Forms (WinForms). You are to perform
this practical/task using pair programming technique (in groups of two’s). Any group
exceeding more than two participants per workstation will neither be attended to nor
graded.

Procedure
Follow the instructions as follows:
1. Open up 2019 Microsoft Visual Studio on your laboratory desktop.
2. Read out the instructions in your laboratory manuals properly.
3. Write out the codes in the Visual Studio C++ editor as indicated in the manual. Make
sure you save your codes at intervals.
4. Build and debug your code, if possible for every line. Make sure you print out your
output screen/interface and codes in your report.
5. Submit a report for the two activities on blackboard. However, the first activity will be
graded by the end of the lab.

Grading Rubric (Copy this Rubric onto the first page of your report)
BENCHMARK COMMENTS POINTS Ex 1 Ex 2 Ex 3
IDE proficiency Includes the proficiency of the IDE employed in the 2
course of code/interface development
Specification Analytics Applies to the software specification. Pre-analysis, UML 2
and flow charts for design and implementation
Programming Skills Applies to the reasoning and analytics of software design 4
in code writing and interface design.
Programming Logic and Applies to the logic and flow of the of the written code and
Flow interface designs. A good programme must have the 5
appropriate flow and logic.
Output This is the overall performance of the code/interface
Specification/validation design. Satisfactory realisation of the specifications have 2
been met and validated.

Software Documentation Applies to written reports and software documentations

with respect to laboratory activities 5
TOTAL The sum total of the proposed benchmarks 20

1
EXERCISE 1: QUICK MATHS CALCULATOR GUI (To be submitted within the
Laboratory period)
Procedure: You need to create a windows form for this laboratory. To create a windows
form, you need to do strictly follow the instructions given to you during the tutorial
sessions to prepare a new Windows Form.

A. Building the GUI Platform

Click and drag the following GUI elements into Form 1 layout (see Figure 1):
1. Three textboxes (Textbox 1, Textbox 2 and Textbox 3)
2. Four Buttons (Button 1, Button 2, Button 3 and Button 4)
3. One Label

The following settings/properties are applicable to each element of the GUI as described
above. You must use these settings as proposed to get the right specification given in Figure
1. For every GUI element you add, make sure you Build Solution to eliminate likely
debugging error.

Form 1 Textbox 3 Button (x)

Size – 309, 327 Location – 60,178 Back Colour – (Web: Tan)
Back Colour - (Web: Dark Size - 178, 40 Location – 152, 121
Grey) Back Colour - (Web: Pale Font – Calibri, 14 pt
Golden Rod) Size - 40,40
Textbox 1 Name – tbThirdInput Text - x
Location – 12, 47 Font – Calibri, 20 pt Name – btnTimes
Size - 135, 40 Text Align - Center
Back Colour - (Web: Pale Button (÷)
Golden Rod) Button (+) Back Colour – (Web: Tan)
Name – tbFirstInput Back Colour – (Web: Tan) Location – 198, 121
Font – Calibri, 20 pt Location – 60, 121 Font – Calibri, 14 pt
Text Align – Center Font – Calibri, 14 pt Size - 40,40
Size - 40,40 Text - ÷
Textbox 2 Text - + Name – btnDivide
Location – 147, 47 Name – btnPlus
Size - 135, 40 Label
Back Colour - (Web: Pale Button (-) Location – 85,9
Golden Rod) Back Colour – (Web: Tan) Back Colour – (Web: White)
Name – tbSecondInput Location – 106, 121 Font – Calibri, 15 pt
Font – Calibri, 20 pt Font – Calibri, 14 pt Text – Quick Maths
Text Align – Center Size - 40,40 Size – 120,26
Text - —
Name – btnMinus

2
 Form 1

Label 1

Textbox 1 Textbox 1

Button 1 Button 4

Button 3
Button 2

Textbox 3
Figure 1: Quick Maths Calculator

By now, your User Interface (UI) should look exactly like what we have in Figure 1.
Congratulations to you if you followed properly the given properties/settings, if not, carefully
go through your properties/settings again. If you succeeded in building your GUI, you are
advised to Build Solution once again to be sure there are no errors within your build.

B. Programming Each GUI Elements

To activate the GUI, each GUI elements need to be activated with background code to
trigger event. In the Quick Maths Calculator, the trigger will be achieved with buttons.
These are Button 1 (+), Button 2 (-), Button 3 (x) and Button 4 (÷). Already, the handles
btnPlus, btnMinus, btnTimes and btnDivide are designated for this purpose. The following
procedure will be invoked to program the event for each button as below:

For Button + :
Left click ‘button +’ twice, the source code file will open. In the source file, take note of the
line with Void btnPlus_Click and the curly bracket that follows:

private: System::Void btnPlus_Click(System::Object^ sender, System::EventArgs^ e) {

}

Copy the code below and paste it between the curly brackets:

double FirstNum,SecondNum, ThirdNum;

//convert string items in Textbox 1 and 2 into double
FirstNum = Convert::ToDouble(tbFirstInput->Text);
SecondNum = Convert::ToDouble(tbSecondInput->Text);
ThirdNum = FirstNum + SecondNum;
tbThirdInput->Text = Convert::ToString(ThirdNum);

For Button - :
Left click ‘button -’ twice again and as previously done, copy the code below and paste it
between the curly brackets for Void btnMinus_Click:

double FirstNum,SecondNum, ThirdNum;

//convert string items in Textbox 1 and 2 into double
FirstNum = Convert::ToDouble(tbFirstInput->Text);

3
 SecondNum = Convert::ToDouble(tbSecondInput->Text);
ThirdNum = FirstNum - SecondNum;
tbThirdInput->Text = Convert::ToString(ThirdNum);

For Button x :
Left click ‘button x’ twice again and as previously done, copy the code below and paste it
between the curly brackets for Void btnTimes_Click:

double FirstNum,SecondNum, ThirdNum;

//convert string items in Textbox 1 and 2 into double
FirstNum = Convert::ToDouble(tbFirstInput->Text);
SecondNum = Convert::ToDouble(tbSecondInput->Text);
ThirdNum = FirstNum * SecondNum;
tbThirdInput->Text = Convert::ToString(ThirdNum);
For Button ÷ :
Left click ‘button -’ twice again and as previously done, copy the code below and paste it
between the curly brackets for Void btnDivide_Click:

double FirstNum,SecondNum, ThirdNum;

//convert string items in Textbox 1 and 2 into double
FirstNum = Convert::ToDouble(tbFirstInput->Text);
SecondNum = Convert::ToDouble(tbSecondInput->Text);
ThirdNum = FirstNum/SecondNum;
tbThirdInput->Text = Convert::ToString(ThirdNum);

On programming your GUI, build solution and if it works properly, debug and run your GUI.
Approach any available tutor for your assessment and grading when you are ready.

EXERCISE 2: Simple GUI Derivative Calculator for Quadratic functions (To be

submitted as a report by Thursday Class period)
Design a simple derivative calculator using WinForm GUI from C++ language that can
perform the following tasks:
1. Accept a quadratic function with constants 𝑎, 𝑏 and 𝑐 as below:

𝑦 = 𝑎𝑥 2 + 𝑏𝑥 + 𝑐

2. Produce the first derivative of the quadratic function with the aid of a trigger
button such that:
𝑑𝑦
= 2𝑎𝑥 + 𝑏
𝑑𝑥

3. Produce the second derivative of the quadratic function with the aid of the trigger
button such that:

𝑑 𝑑𝑦
. = 2𝑎
𝑑𝑥 𝑑𝑥

At the end of this design, you must submit your report and visual studio solution file on
blackboard for assessment on or before the given deadline.