ENSC 26 PreLab Handout 1 - AY2324 - 2s
ENSC 26 PreLab Handout 1 - AY2324 - 2s
ENSC 26 PreLab Handout 1 - AY2324 - 2s
Computer programming is the development of instructions that a computer can follow. A computer
program is an organized list of step-by-step instructions, called algorithms, which dictate the manner of
operation of a computer. Computer programs are written using a programming language with its own
specific set of grammatical rules or commands for writing algorithms.
VISUAL BASIC
Computers, at its most basic level, can only understand two distinct electrical states, namely, the on and
off states; or 1 and 0 codes, respectively, in the binary number system. This computer programming
language, which is a combination of binary codes or hexadecimal instructions a computer responds to
directly, is called machine language. However, due to the difficulty of writing in machine language, most
modern programs are instead written in high-level languages that uses English and mathematical symbols
in its instructions. High-level languages are then translated back into machine language using assemblers,
interpreters and/or compilers.
Visual BASIC is a high-level, object-oriented programming language which evolved from the earlier DOS
version called BASIC (Beginners' All-purpose Symbolic Instruction Code). The language uses common
words, as well as grammatical structures, from the English language. Where a book has chapters with
paragraphs that contain sentences consisting of words, programs written in Visual BASIC follows a similar
structure: modules are like chapters, procedures are like paragraphs, and programming statements are
like sentences.
Throughout the course, Visual Basic available in Visual Studio 2019 will be used. You can download the
free community version here: https://visualstudio.microsoft.com/downloads. Use your UP-issued Office
365 credentials to sign-in. As the course discussion develops, the tools available and code syntax rules to
be used for each programming structure shall be explained.
THE VISUAL BASIC USER INTERFACE
Visual BASIC, as part of the Visual Studio Suite of Microsoft, utilizes a system called Integrated
Development Environment (IDE) which employs similar user interfaces across all components of the suite.
The Visual Studio IDE is a creative launching pad that you can use for many aspects of software
Page 1 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
development - editing, debugging, building code, and then publishing an app. Over and above the
standard editor and debugger that most IDEs provide, Visual Studio includes compilers, code completion
tools, graphical designers, and many more features to ease the software development process. It has a
toolbox on the left, solution explorer on the right, and a code/design view at the center.
Page 2 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
algorithms. The desktop template uses the standard Windows-based application that employs forms,
textboxes, scroll bars, and other objects in the Windows interface. The console application, meanwhile,
uses a command-line interface similar to MS DOS or a Unix Terminal.
Page 3 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
project and navigating all items in your solution. Detailed discussions for each component of the IDE
follows below. You can also find more details on Visual Studio IDE productivity features such as Live Share,
CodeLens, Quick Actions and Peek Definition in https://docs.microsoft.com/en-us/visualstudio/get-
started/visual-studio-ide?view=vs-2019.
Solution
Explorer
Form
Toolbox
Window
Properties
Window
▪ The Form – the primary element of your program’s interface. It serves as a container that allows
other objects (or controls) to be inserted. There are three ways to insert controls on the form:
Double-click the control in the Toolbox. The control immediately appears on the top-left
corner of the Form. Multiple addition of controls in this manner results to a cascaded display
of the added objects.
Click and hold the control on the Toolbox and drag-drop it onto the Form.
Click the control on the Toolbox once and draw the size (i.e., width and height) of the control
in the Form.
▪ The Toolbox Window – displays icons for controls and other items that can be
added to the Visual Studio project. It only displays items appropriate to the
type of file you are working on, i.e., it is deactivated when you are in the code
editor view.
▪ The Properties Window – allows the user to view and change the design-time
properties and events of selected objects located in editors and designers. You can also use it to
edit and view file, project, and solution properties. When you select an object in a Form Designer
or in the Solution Explorer, the Properties Window content updates to display different types of
editing fields such as edit boxes, dropdown lists, and links to custom editor dialog boxes. To
change a property’s value, simply click the property from the list in the left column and enter the
new value in the right column. If you accidentally close this window, simply press F4 to restore it.
▪ The Solution Explorer - located on the upper-right side of the user-interface by default, it manages
the files in the project. When you right-click on Form1.vb, for example, the list of commands
available for Form1 is displayed, such as the shortcut keys to shift between the Design (the view
with the form in the middle) and Code Editor (the view with the codes and navigation bar): F7 and
Shift+F7, respectively. You can also switch between a Solution view to a Folder view of your project.
If you accidentally close this window, simply press Ctrl+R to restore it.
Page 4 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
▪ The Error List Window – displays information about a specific error message, and lets you perform
the following tasks:
Display the errors, warnings, and messages produced while you write code.
Find syntax errors noted by IntelliSense - a set of features that displays information about
your code directly in the editor (e.g., syntax tips) and, in some cases, write small bits of code
through automatic completion.
Find deployment errors, certain Static Analysis errors, and errors detected while applying
Enterprise Template policies.
Double-click any error message entry to open the file where the problem occurs and move
to the error location.
Filter which entries are displayed, and which columns of information appear for each entry.
Search for specific terms and scope the search to just the current project or document.
▪ The Code Editor Window - where you can edit code or design a user interface such as a window
with buttons and text boxes. You can use the navigation bar (the dropdown boxes at the top of the
code window) to go directly to code in a codebase: the left to navigate to another project that the
current file belongs to, the middle to navigate to the controls and forms in your current project
(e.g. Form1 events or button controls), or the right to navigate directly to an event, a procedure or
other member of a class which the selected object may respond to or perform.
Navigation Bar
Code Editor
Page 5 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
On the menu bar, choose File > Save All. Alternatively, you can choose the Save All button on the
toolbar or use the shortcut key Ctrl+Shift+S. You only need to do this once. Succeeding saves can be done
by clicking the Save icon in the toolbar or pressing the shortcut key Ctrl+S.
X
Form
X
Toolbox
Window
Shown on below is a list of arithmetic operators available in Visual BASIC. Note that the priority of
operation execution is exponentiation, multiplication, division, integer division, modulo, addition and
subtraction. For example, the expression 13 \ 10 / 5 Mod 5 would result to 1 → 10 / 5 = 2; 13 \ 2 = 6; 6
mod 5 = 1. Expressions, though, may also be grouped using parentheses “()” to override the precedence
order above, as shown in this example: (13 \ 10) / 5 mod 5 would now result to 0.2 → 13 \ 10 = 1; 1 / 5 =
0.2; 0.2 mod 5 = 0.2.
Floating points (i.e. non-integer values) are also
considered in Mod operations. Remainder values
can be floating points. Therefore, 17.5 mod 5 = 2.5;
12 mod 4.3 = 3.4; and 47.9 Mod 9.35 = 1.15.
Furthermore, the number of decimal places of the
result of modulo will follow either the operand or
operator, depending on which of the two has the
higher number of decimal places. However, in some languages (e.g. PHP), floating points are disregarded
altogether in modulo operation.
Page 6 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
Note that " " was used to enclose a single space character. Such symbols are used to assign literals of a
data type. In the case above, a space was concatenated with the other strings in the second MsgBox code.
However, to prevent Visual BASIC from treating the space character as a simple literal when the code was
written, the character was enclosed with "". The other types of literal inclusion or appended symbols shall
be discussed in the lecture class.
Page 7 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
Let us now create sample programs using the windows forms application template. When the design
interface is loaded, you would need to add objects to your form, specify applicable object properties, and
add code to your objects in the editor window. The steps are detailed below.
Sample Code 1
2. Select each object, one at a time, and change the specific object properties indicated in the table
presented below.
To add Access Keys (the underlined letter in a button, e.g. O and R, that can be used to execute the
command using Alt + Access Key), add an ampersand character (&) before the letter which will be
assigned as the access key. Notice that there are also prefixes inserted before each assigned name of a
button. For example, “btn” for button, “frm” for form and “txt” for textboxes. These are naming conventions
used by programmers to easily identify the type of object they are working with especially during coding
Page 8 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
1 1 3 1
2 1
2
4 1
btnOK Eventhandler
Type the program statements for each control below inside its corresponding event. The codes for
btnReset would (a) clear all text the user entered in the textbox and (b) bring the focus (i.e. cursor) back
onto the same textbox. Note, though, that the line of code is order specific in Visual Basic. If txtName.Focus
() was written before txtName.Clear(), focusing on the textbox would first be performed instead of the
clearing of text content. Although the code order is not really critical in this instance, in calculations and
string operations, however, ordering is very crucial and would highly affect the output displayed by the
program.
Page 9 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
Unlike C and all of its derivative languages, Visual BASIC is not case sensitive. Also, there is an auto-
complete and auto-suggest feature when you write codes. This feature, called intellisense, speeds up
code development by reducing keyboard input. Use the arrow keys to choose from the options VB
provides and then press the tab, enter, or space key to accept the auto-complete suggestion into your
code.
4. Save your work initially with Ctrl+Shift+S. Your final code should look like this:
Sample Output
Page 10 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
Sample Code 2
2. Select each object, one at a time, and change the specific object properties indicated in the table
presented below.
1 1 3 1
2 4
1 1
Page 11 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
btnCompute Eventhandler
4. To compute for the sum of the two numbers, the input value from the textboxes “txtNumA” and
“txtNumB” should be stored in a variable. The syntax for declaring variables is:
Once the input values are stored, you can now proceed with the operation to be used for the
computation of the sum of two numbers. The value of the sum will be stored in the variable dblSum.
To display the sum in the text box “txtSum”, follow the syntax below:
txtSum.Text = dblSum
Page 12 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
5. Save your work initially with Ctrl+Shift+S. Your final code should look like this:
Page 13 of 14
ENSC 26 COMPUTER APPLICATIONS IN ENGINEERING LABORATORY MODULES
TIP: Intellisense also reveals the properties and methods available for use to an object when "." is
pressed. For example, you can change the backcolor of a textbox by using the code
Textbox.BackColor = Color.Red (for default colors, use Color.Empty). Notice that after typing
“textbox.” or “color.”, Visual Basic offers code suggestions.
TIP: The current form is not called into code using its name (e.g., frmMain) but by using the keyword
"Me". Hence to change the backcolor of the current form to the default value, write Me.BackColor
= Color.Empty.
TIP: DO NOT double-click a textbox or label, no meaningful code will ever be associated with them.
TIP: One button (e.g. the main compute button) should be assigned as the AcceptButton for your
form. Whenever a user presses the ENTER key, the button’s click event is activated even if another
control on the form has the focus. In the same manner, a CancelButton can also be assigned; its
click event is activated whenever the ESC key is pressed.
TIP: You can also investigate other useful features included in object properties such as Enabled
(True or False), FormBorderStyle (Sizable, FixedSingle, etc.), ReadOnly (True or False) and
StartPosition (WindowsDefaultPosition, CenterScreen, etc.)
References:
Page 14 of 14