CS0004: Introduction to Programming Visual Studio 2010 and Controls

CS0004: Introduction to
Programming
Visual Studio 2010 and Controls
Review

Four Stages in a program





An Algorithm is…


Read Input
Validate Input
Process Input
Output Result
A step-by-step procedure devised for the purpose of taking in
data and producing the correct output.
What’s the difference between an algorithm and a
program?

A program is the actual implementation of an algorithm in a
programming language.
Review
When Developing a program in both the real world AND
in this class, there are 6 steps
1) Analyze the problem
2) Plan a solution
3) Design an interface
4) Write the code
5) Test and debug
6) Document the program
7) (Not done in this class) Maintain the program

Review

An End User is…


A User-Interface is…


An error, flaw, mistake, failure, or fault in a computer program.
Documentation is…


How the user interacts with your program.
A Bug is…


The person whom the program was designed for.
Organizing all the material that describes the program.
Three models used to help develop an algorithm:



Flow Charts
Hierarchy Charts
Pseudocode
Visual Studio 2010

Visual Studio is an Integrated Development Environment (IDE)




An IDE is a software application that provides comprehensive
facilities to computer programmers for software development.
Visual Studio = IDE for developing Visual Basic Programs
Visual Basic = Programming Language
Visual Basic is designed to easily make user-friendly Graphical
User Interfaces (GUIs).


A GUI allows the user to interact with programs in more ways than
typing. They use graphical representations of objects instead of
simply text.
GUIs include:




Icons
Buttons
Drop-down boxes
Etc.
Developing a User-Interface

After you have successfully developed an algorithm for your
program you can develop a user-interface.


Visual Studio allows you to literally draw the interface, and it
writes the code for you.




This is often NOT the first step in development in the real world,
but for this class it often will be.
These interface objects will automatically have basic functionality, and
can accept events.
This is not how it works with most other programming languages
and IDEs.
You have to write the code for what happens on these events.
Important Note: Event-Driven Programming is fundamentally
different than traditional Procedural Programming
Developing a Visual Basic Program

So, how to we add functionality to our interface?

Answer: We write Event Procedures.

An Event Procedure is a set of instructions to be executed when a
certain event happens.



For example, we can write an Event Procedure for when we push an “OK”
button.
Almost everything in Visual Basic is either an Event Procedure
or used by an Event Procedure.
Here’s the basic steps when developing a Visual Basic
Program:
1.
2.
3.
Design the appearance that the user sees.
Determine the events that the controls on the window
should respond to.
Write the event procedures for those events.
Programming Layer Model

Many event-driven programs can be divided into three
important sections or layers:




Presentation Layer – Anything the user sees and how the user
interacts with a program.
Logic Layer – How the program acts when it receives events.
Data Access Layer – Allows simple access to persistent storage
(like a database). We probably won’t be doing this in this
course.
It is important to separate the layers from each other as
much as possible.

Why?
Programming Layer Model
Presentation Layer
Logic Layer
Data Access Layer
DB
How a Visual Basic Program is Run

When you run your Visual Basic program the following
things happen:
1.
2.
3.
4.
Your program monitors the controls in the window to detect
any event that a control can recognize (mouse movements,
clicks, keystrokes, etc.)
When your program detects an event, it examines the code
to see if you’ve written an even procedure for it.
If you have written an event procedure, the instructions in
the procedure are executed and it goes back to step 1.
If you have not written an event procedure, it ignores the
event and goes back to step 1.
Visual Studio Tutorial

New Project





Open an Existing Project



On the opening screen click on “New Project”
Enter a name, a location for your project, and a solution name.
Click on “Windows Forms Application”.
Click the “OK” button.
Click on “Open Project”
Navigate to you “.sln” file and double click on it.
Parts of the IDE:







Menu Bar – Has menus such as: File, Edit, View, Window, Project, Data, and
Debug.
Toolbar – Holds buttons that perform common controls.
Document Window – Currently holding the Form Window.
Form Window – What your VB program will look like when you open it.
Properties Window – Used to change how objects look and react.
Solution Explorer – Shows files associated with the program.
Toolbox – Contains controls to put on your form.
Visual Studio Tutorial

Textbox

Creating

Click on the text box tool





Click on the form to create default sized text box
Click and drag on the form to create custom size text box
Click on the text box to select it.
Push the delete key while it is selected to delete it
Properties Window (F4, clicking on it, toolbar button)

Name


Changes what the text box is called
Text

Changes what text is in the text box when the text box first appears.
Visual Studio Tutorial

Button

Properties

Text

Access Key – Putting an “&” in front of the text will give it an access key.


Label

Properties


If you press “Alt + the first character in front of the &” it will do the same as clicking
the button.
AutoSize – If true, the text property will decide how big the label is. If
false, you can resize it.
Tab Order – Sets the order in which the controls are focused
on when the user hits tab.

To set the tab order, number the TabIndex property of the controls
starting at 0.
Visual Studio Tutorial

Debugging/Stop Debugging

When you hit the “Debug Button” (The green play button),
your program will compile and display what it will do.



You can then test and debug your running program.
To stop debugging either close your program normally or
press the “Stop Debugging” button (The blue stop button).
Save All – Saves all files associated with the project


Click on the “Save All” button (The one with three disks) on
the toolbar.
Or click on “File” in the menu bar and then “Save All” in the
menu.
Naming


The naming (value of the name property) of controls
should indicate what it is and what it does.
Object
Prefix
Example
Form
frm
frmPayroll
Button
btn
btnComputeTotal
Label
lbl
lblAddress
Text Box
txt
txtCity
List Box
lst
lstOutput
The name should include both what the object is in the
form of a prefix, and what is does or if it doesn’t do
anything specific, what it is.
Alignment of Controls



Often you want your controls to be a comfortable
distance away from each other and the edge of the form.
Visual Studio makes it easy to do this.
When you drag a control toward the edge of the form or
another control, a Proximity Line appears to ensure a
comfortable distance is between the control and the
other object.
When you drag a control in an area that is close to being
either vertically or horizontally aligned with another
control, a Snap Line appears to help align the controls.