cs313d: advanced programming language · windows forms dr. amal khalifa,spr 17 4 a form is a...

21
CS313D: ADVANCED PROGRAMMING LANGUAGE Lecture 11 : GUI & event handling Computer Science department

Upload: others

Post on 28-Sep-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

CS313D: ADVANCED

PROGRAMMING LANGUAGE

Lecture 11 : GUI & event handling Computer Science

department

Page 2: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Lecture Contents

dr. Amal Khalifa,Spr 17

2

What is GUI??

Windows Forms??

Controls

Labels

TextBoxes

Buttons, CheckBoxes, and RadioButtons

PictureBoxes

ToolTips

Auto generated GUI code

Event handling

Mouse-event handling

Keyboard-event handling

Page 3: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

A graphical user interface (GUI) allows a user to interact visually with a program.

What is GUI? 3

dr. Amal Khalifa,Spr 17

Page 4: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Windows Forms

dr. Amal Khalifa,Spr 17

4

A Form is a graphical element that appears on your computer’s desktop:

it can be a dialog, a window or an MDI window.

A component is an instance of a class that implements the IComponent interface defines the behaviors that components must implement, such as how the component is loaded.

A Form is a container for controls and components.

The active window is the frontmost and has a highlighted title bar.

A window becomes the active window when the user clicks somewhere inside it.

Page 5: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Form Properties & methods

dr. Amal Khalifa,Spr 17

5

Page 6: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

A control, such as a Button or Label, has a graphical representation

at runtime.

Controls == Widgets 6

dr. Amal Khalifa,Spr 17

Page 7: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Controls properties & methods

dr. Amal Khalifa,Spr 17

7

Page 8: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Case Study

dr. Amal Khalifa,Spr 17

8

Use visual

studio ToolBox

to create the

interface

Add

functionality

Test

View

automatically

generated

code!!

Page 9: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Auto-Generated GUI Code

dr. Amal Khalifa,Spr 17

9

Visual Studio places the auto-generated code in the

Designer.cs file of the Form.

Page 10: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

10 dr. Amal Khalifa,Spr 17

Page 11: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

dr. Amal Khalifa,Spr 17 11

Page 12: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Event Handling

dr. Amal Khalifa,Spr 17

12

GUIs are event driven.

When the user interacts with a GUI component, the

event drives the program to perform a task.

A method that performs a task in response to an

event is called an event handler.

By convention, the IDE names the event-handler

method as objectName_eventName (e.g.,

clickButton_Click).

Page 13: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Event handling

dr. Amal Khalifa,Spr 17

13

Each event handler receives two parameters :

an object reference typically named sender—is a

reference to the object that generated the event.

an EventArgs object (or an object of an

EventArgs derived class) which contains additional

information about the event.

Page 14: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Event Handling

dr. Amal Khalifa,Spr 17

14

Event handlers are connected to a control’s events via special objects called delegates.

A delegate type declaration specifies the signature of a method.

Example:

A delegate of type EventHandler can hold references to methods that return void and receive two parameters:

public delegate void EventHandler( object

sender, EventArgs e );

Page 15: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Event handling

dr. Amal Khalifa,Spr 17

15

A Button calls its EventHandler delegate in

response to a click.

The delegate’s job is to invoke the appropriate

method.

Page 16: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Event handling

dr. Amal Khalifa,Spr 17

16

Page 17: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Mouse-Event Handling

dr. Amal Khalifa,Spr 17

Mouse events are generated when the user interacts

with a control via the mouse.

Information about the event is passed through a

MouseEventArgs object, and the delegate type is

MouseEventHandler.

MouseEventArgs x- and y-coordinates are relative

to the control that generated the event.

17

Page 18: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

dr. Amal Khalifa,Spr 17 18

Page 19: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Keyboard-Event Handling

dr. Amal Khalifa,Spr 17

19

There are three key events:

The KeyPress

occurs when the user presses a key that represents an ASCII

character.

does not indicate whether modifier keys (e.g., Shift, Alt and

Ctrl) were pressed;

the KeyUp

KeyDown

Page 20: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

20 dr. Amal Khalifa,Spr 17

Page 21: CS313D: ADVANCED PROGRAMMING LANGUAGE · Windows Forms dr. Amal Khalifa,Spr 17 4 A Form is a graphical element that appears on your computer’s desktop: it can be a dialog, a window

Chapter 2 : 2.2

Chapter 14

That’s all ,,,

dr. Amal Khalifa,Spr 17

21