ENGR/CS 101 CS Session
Lecture 4




Log into Windows/ACENET (reboot if in Linux)
Start Microsoft Visual Studio 2012
Open DotChaser project
Everyone have a GUI designed?
Lecture 4
ENGR/CS 101 Computer Science Session
1
Outline

Dot Chaser game project implementation


C# programming language
Implement update score




Implement move dot


Lecture 4
Event handlers
Types, variables, expressions, assignment
Accessing properties
Methods
Random number generator
ENGR/CS 101 Computer Science Session
2
MS Visual Studio

Integrated Development Environment (IDE)






Lecture 4
GUI designer
Editor
Compiler
Linker
Loader
Debugger
ENGR/CS 101 Computer Science Session
3
C# Programming Language





Developed by Microsoft for .NET framework
Syntax similar to C++ and Java
Semantics similar to Java
Object-oriented - won't cover in this class
Integrated with GUI designer
Lecture 4
ENGR/CS 101 Computer Science Session
4
Classes


C# program statements are organized in
classes.
Each application is a class containing the
code generated by the GUI designer for the
GUI elements of the program, and code
written by the programmer to store,
manipulate, and display data.
Lecture 4
ENGR/CS 101 Computer Science Session
5
Anatomy of a program




Constants: named values.
Variables: named memory locations that
store values, i.e. the data.
Executable statements: instructions of
computation, i.e. the algorithm.
Methods: subprograms (or functions) that
can be called from multiple places in a
program
Lecture 4
ENGR/CS 101 Computer Science Session
6
Events and Handlers


GUI elements are always waiting for data, but
computation only happens when an event
occurs.
Input devices cause events that the GUI then
handles. For example:


Lecture 4
Mouse events include: Click, DoubleClick,
MouseDown, MouseMove, MouseUp, Rollover
Keyboard events include: KeyPress
ENGR/CS 101 Computer Science Session
7
Events and Handlers



Double-clicking on a form element in the GUI
designer brings up the code view of the form.
MSVS creates a skeleton program.
It also creates a handler method stub for the
most common event for the element type and
attaches it to the element. E.g., Click event for
the dot button.
When a user clicks the dot button, this handler
method is run to respond to the event.
Lecture 4
ENGR/CS 101 Computer Science Session
8
Events and Handlers
Application data
goes here!
Initialization code
goes here!
Event handler code
for dot click goes here!
Lecture 4
ENGR/CS 101 Computer Science Session
9
C# Programs

The IDE tries to be helpful by creating the parts
of code that all C# program have. This includes:



Lecture 4
using statements that cause (pre-defined) method
names in libraries like System to become known. (A
method is the same thing as a function.)
namespace and class definition names based on the
project name given.
Form1( ) constructor method. This code is executed
first when the program is launched. Initialization code
goes here.
ENGR/CS 101 Computer Science Session
10
Review

Basic Rule for Dot Chaser Game


Data


When a user clicks on the dot, her score
increases by 1
An integer named score
Algorithm


Lecture 4
Compute new numeric score
Update user interface score
ENGR/CS 101 Computer Science Session
11
Constants & Variables

Have a name




Have a type


Must start with a letter
Uses only letters, digits, and underscore (_)
Cannot be a reserved word of the language
Specifies what kind of value may be stored.
Have a value

Lecture 4
Stored as bits (binary digits)
ENGR/CS 101 Computer Science Session
12
Data types


Primitive types: built into low-level machine.
E.g., integers, characters, real numbers
Abstract types (or objects): combination of
types to represent complex values


Lecture 4
Predefined by language: String, Array, List,…
Written by programmer: Employee, Account,…
ENGR/CS 101 Computer Science Session
13
Types and Variables



A variable is a named memory location that
holds a value. All memory is in bits.
The type determine how the bits are interpreted
into a value. Numbers are in binary. Characters
are mapped to binary numbers. E.g., ASCII or
Unicode.
C# types include



Lecture 4
int for integers (e.g., 5, -25, 0)
char for characters (e.g. 'A', 'b', '7', '%')
string (e.g. "Hello!")
ENGR/CS 101 Computer Science Session
14
Types and Variables



Variables are declared by giving type and name
Syntax is: <type> <var1>, <var2>, ..., <varn>;
Example:
int score;

// player's score
// marks the beginning of a comment to the end
of the line. Comments are ignored by the
compiler and used for writing notes.
Lecture 4
ENGR/CS 101 Computer Science Session
15
Assignments and Expressions



Assignment means to store a value into a
variable.
Syntax is: <var> = <expression>;
The expression is evaluated and the result is
stored in the variable. An expression can be:




Lecture 4
A literal. E.g., 12 or 'A'
A variable. E.g., score
A method call. (More on this later.)
An expression of one or more literals, variables, or
method calls connected by operators.
ENGR/CS 101 Computer Science Session
16
Application Data



Application data is declared inside the
application class. It is initialized in the class
constructor (a special kind of function with
the same name as the class).
Write the declaration for the variable that
keeps track of the score in the Dot Chaser
game.
Write the code to initialize the score to 0 in
the Form1 constructor.
Lecture 4
ENGR/CS 101 Computer Science Session
17
dot_Click Event Handler


The event handler for clicking on the dot must
increment the score and move the dot.
The specific algorithm for incrementing the
score is:
1. Increment score by one
2. Display the new score by updating the score label
Lecture 4
ENGR/CS 101 Computer Science Session
18
Properties

GUI element properties are variables that can
be accessed in program code using "dot"
notation: <name>.<property>

Lecture 4
E.g., scoreLbl.Text, dot.BackColor
ENGR/CS 101 Computer Science Session
19
dot_Click Event Handler

Here is the code to update the score that
goes inside the handler:
// add one to the score
score = score + 1;
// display the new score
scoreLbl.Text = score.ToString();

After you type in this code, test your program.
The score should increment each time you
click the dot.
Lecture 4
ENGR/CS 101 Computer Science Session
20
Moving the Dot


In addition to updating the score, the dot
click handler must move the dot.
The algorithm for moving a dot is:
1. Compute random x and y coordinates for the
top-left corner of the dot.
2. Set the location of the dot button
- use the dot.setBounds( ) method to do this
Lecture 4
ENGR/CS 101 Computer Science Session
21
Random Objects

To get a random number, we need a Random
object. We declare one in the application
data area:
Random rnd;

We create one in the constructor
rnd = new Random();

Random objects have a method called Next
that returns a number between 0 and its
argument.
Lecture 4
ENGR/CS 101 Computer Science Session
22
Methods

There are two times we want to move the dot:




When the dot is clicked
When the time period is up
To avoid copying the dot moving code, a
better way to add this functionality is to
use a method (also called a function).
Methods are used to encapsulate
computational ideas, such as moving a
dot.
Lecture 4
ENGR/CS 101 Computer Science Session
23
Methods
x
y
f(x, y, z, ...)
z
.
.
.


Consider a (mathematical) function as a black
box that receives data and returns an unnamed
result.
A method is the programming code equivalent
Lecture 4
ENGR/CS 101 Computer Science Session
24
Method Analysis & Design


A method is like a mini-program. We ask the
same questions as when designing a main
program or event handler.
Identify the data (and their types) being provided
by the caller


In the case of moving a dot, the caller doesn't
need to provide anything
Write the steps of an algorithm

Lecture 4
These were given previously for moving the dot
ENGR/CS 101 Computer Science Session
25
Methods

Method declaration syntax is:
private <return type> <name> (<parameter list>)
{
<local variable declarations>
<computation statements>
return <result>;
// if needed
}


Parameters are the names given to the received
data. They are declared like variables.
The type of the result must match the declared
returned type. (Private is a magic word.)
Lecture 4
ENGR/CS 101 Computer Science Session
26
Computing coordinates



The location of the dot button is determined
by the coordinates of the upper-left corner
that are relative to the upper-left corner of the
game area panel
What is the range of the x and y coordinates
of the dot?
To make things easier to type, declare and
initialize variables to hold the width and
height of the game area and the dot.
Lecture 4
ENGR/CS 101 Computer Science Session
27
dot_Move( )

Here is the code for the method that moves the
dot. It does not need to receive data.
private void dot_Move()
{
// Pick random (x,y) coordinates
// inside the game area
// Button is anchored at left-top
int x = rnd.Next(areaWidth-dotWidth);
int y = rnd.Next(areaHeight-dotHeight);
dot.SetBounds(x, y, dotWidth, dotHeight);
}

void mean the method does not return a result
Lecture 4
ENGR/CS 101 Computer Science Session
28
Method Call

A method is used by calling it with arguments
that are the data being sent into the method.

The arguments, if any, correspond to the
parameters by position. The argument values
are used to initialize the parameter variables
before the method is executed.
If a method returns a result, it must be saved
using an assignment statement. E.g. the calls to
rnd.Next() on previous slide.

Lecture 4
ENGR/CS 101 Computer Science Session
29
dot_Click Event Handler

Here is the code to move the dot that goes
inside the handler:
// move the dot
dot_Move(); // no arguments
// no returned result

After you type in this code, test your program.
The dot should move and the score should
increment each time you click the dot.
Lecture 4
ENGR/CS 101 Computer Science Session
30