ENGR/CS 101 CS Session Lecture 4 Log into Windows/ACENET (reboot if - PowerPoint PPT Presentation

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  Event handlers  Types, variables, expressions, assignment  Accessing properties  Implement move dot  Methods  Random number generator Lecture 4 ENGR/CS 101 Computer Science Session 2

MS Visual Studio  Integrated Development Environment (IDE)  GUI designer  Editor  Compiler  Linker  Loader  Debugger Lecture 4 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:  Mouse events include: Click, DoubleClick, MouseDown, MouseMove, MouseUp, Rollover  Keyboard events include: KeyPress Lecture 4 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:  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. Lecture 4 ENGR/CS 101 Computer Science Session 10

Review  Basic Rule for Dot Chaser Game  When a user clicks on the dot, her score increases by 1  Data  An integer named score  Algorithm  Compute new numeric score  Update user interface score Lecture 4 ENGR/CS 101 Computer Science Session 11

Constants & Variables  Have a name  Must start with a letter  Uses only letters, digits, and underscore (_)  Cannot be a reserved word of the language  Have a type  Specifies what kind of value may be stored.  Have a value  Stored as bits (binary digits) Lecture 4 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  Predefined by language: String, Array, List,…  Written by programmer: Employee, Account,… Lecture 4 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  int for integers (e.g., 5, -25, 0)  char for characters (e.g. 'A', 'b', '7', '%')  string (e.g. "Hello!") Lecture 4 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:  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 . Lecture 4 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>  E.g., scoreLbl.Text, dot.BackColor Lecture 4 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 f ( x , y , z , ...) y 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  These were given previously for moving the dot Lecture 4 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