Introduction to Graphical User Interfaces

Objectives

* Students should understand what a procedural program is.* Students should understand what an event driven program is.* Students should understand how to design event driven programs.

A Simple View of a Procedural Program

static class Program{ int Main ( ) { declare variables get console input do application work . . . output to the console . . . return 0; }}

A Simple View of a Procedural Program

static class Program{ int Main ( ) { declare variables get console input do application work . . . output to the console . . . return 0; }}

The code youwrite in Mainis in charge.

Execution flows from top tobottom.

Event Driven Model

ApplicationObject

FormObject

Domain Objects

Event Driven Model

ApplicationObject

The application object “listens”for events to occur, then callsevent handlers in the Formobject. You write these event handlers.

With Visual Studio we never haveto worry about writing code for theapplication object. It is done for us.

Graphical User Interface Model

FormObject

A ListBox

GUI Components generate events.

Event handlers reactto events

A Button

A Menu Item

xFile Edit View Help

Name:

Phone:

PUSH

GUI Components

Form

Event Driven Model

Domain Objects

Domain objects do the work ofthe application. An example of adomain object would be an Employeeobject in a payroll application.

File Edit View Help

PUSH

ApplicationObject

WindowsEvent Queue

ButtonEvent

ApplicationObject

WindowsEvent Queue

FormObject

ButtonEvent

ApplicationObject

WindowsEvent Queue

FormObject

ButtonEvent

Call event handler

Graphical User Interfaces

ApplicationObject

WindowsEvent Queue

FormObject

ButtonEvent

Call event handler

Domain Objects

Call functions indomain objectsto do some work.

Creating a Simple GUI Program

(1) Start Visual Studio.(2) Select New Project

Select Windows Form Application

You should see the Form Design Page

We want to add some GUI components to the Form.Click on View->Other Windows->Toolbox.

The toolbox lists all of theavailable GUI components,organized into categories. If they are not visible, click the +button on the Common Controlsline .

Move the cursor over the Button symbol in the toolbox.Press and hold the left mousebutton and drag a Button ontothe Form.

ab

button1

We want to be able to seeand modify the propertiesof this button.

Click on View->OtherWindows->Properties Window to openthe Properties window.

Here you can see and changevarious properties of thecurrent button object on theform.

I have changed the text onthe button to “Click Me”

Now drag a TextBox from thetoolbox onto the form. Positionit just beneath the Button object.

In the Properties window noticethat the TextBox has a propertynamed Text. This is the text thatappears in the box. Leave thisblank for now.

Now let’s create an event handler for the Buttonobject. To do this, double click on the Button. Youshould see a code window like this open up:

Caution: Do NOT double click on GUIcomponents that you do not want towrite an event handler for.

If you do this by mistake, don’t tryto delete the code that Visual Studiogenerates.

Don’t change any of the code that you see.

We will add code between the curly braces in the button1_Click method. This code willbe executed whenever the button is clicked on.

Let’s change the Text property of the TextBox tosomething like “Ouch!”.

Build and run the program. It should looksomething like this. Now click on the Button.