Lecture 10
●
Log into a Windows client
●
Create a folder for CS 350 in-class work
●
Browse to course homepage
http://csserver.evansville.edu/~hwang/f14courses/cs350.html
●
●
Right-click on PurplePizzaParlor1.zip
and Save Link/Target As to folder
Extract the zip file. Creates a MSVS project
folder.
September 30, 2014
CS 350 - Computer/Human Interaction
1
Outline
●
Event-driven programming
●
Visual C#
●
References: CSST, CSRF
September 30, 2014
CS 350 - Computer/Human Interaction
2
Windowing Systems
●
●
●
●
WIMP interface: Window, Icons, Menus,
Pointers
Abstract actual hardware into notions of screen,
keyboard, and mouse
Device driver translates abstract commands
into actual hardware commands
USB has become the meta-abstraction for
many peripherals
September 30, 2014
CS 350 - Computer/Human Interaction
3
Window Management
●
●
Several ways to organize
–
Each application could be responsible for its own
windows. Not efficient.
–
Operating system manages windows. E.g.
Windows, old MacOS
–
Separate management server, e.g. X Windows.
Generic across operating systems, e.g. Unix,
MacOS X.
Generally, client-server architecture; often
network-based
September 30, 2014
CS 350 - Computer/Human Interaction
4
Read-Eval Loop
●
Read-evaluation loop - Win 3.1, old MacOS
–
Client maintains a queue of interaction events.
Server notices events and places them on client
(foreground process) queue.
–
Client handles events in queue order
Loop
event = getEvent()
Select on event.type
Case type1: do type1 processing
Case type2: do type2 processing
:
End Loop
September 30, 2014
CS 350 - Computer/Human Interaction
5
Event-Driven Processing
●
●
●
Notification-based - Win, MacOS X, X
Windows, GUI programs
Each program registers a handler for events it
is interested in. E.g., keypress, mouse click,
mouse move...
Handlers also are called callback functions
September 30, 2014
CS 350 - Computer/Human Interaction
6
Event-Driven Processing
Application
Register
Server
Wait for
notify
Receive
Event
Send to appropriate handler
Handler1
September 30, 2014
Handler2
Handler3
CS 350 - Computer/Human Interaction
7
Creating Visual C# Projects
●
●
●
Launch Visual Studio. As with all VS projects,
C# code belongs to a project. Click on the New
Project link.
If C# is not the default language, choose C#
under Other Languages. Choose Windows
Form Application.
After selecting the appropriate template, set the
Name box to the application name and browse
to the location desired.
September 30, 2014
CS 350 - Computer/Human Interaction
8
GUI Designer
●
●
●
The default view of the application is the GUI
designer view showing the rendered GUI
elements. (Initially just the main form.)
GUI elements can be placed using the
Designer or created at run-time in code.
In the designer, GUI elements are available in
the Toolbox. Select one and then click on the
form.
September 30, 2014
CS 350 - Computer/Human Interaction
9
Visual C# Applications
●
●
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.
Every GUI application has a base form that is a
subclass of the Form class and is the
application object class.
September 30, 2014
CS 350 - Computer/Human Interaction
10
Visual C# Applications
●
●
●
The GUI elements are private data members of
the application class.
As such, GUI objects are visible to all methods,
including event handlers.
Application data is declared as private data
members and initialized in the form constructor.
September 30, 2014
CS 350 - Computer/Human Interaction
11
Visual C# Code Files
●
●
●
Designer-generated code is available in file
Form1.Designer.cs
User-written code is in file Form1.cs
To get the code view of the application, press
F7.
September 30, 2014
CS 350 - Computer/Human Interaction
12
Properties
●
●
●
Each GUI element has properties that control
its appearance. E.g., Text, Font, Size
Values for the selected element are shown in
Properties Window (View -> Properties
Window), usually in the lower right corner
You can set the initial values in the Properties
Window. Can also change properties at runtime in code.
September 30, 2014
CS 350 - Computer/Human Interaction
13
Name Property
●
●
●
Each GUI element is an object with a Name
property.
The Name property value is the variable name
of the GUI element in the C# code. Usual
variable name rules apply.
The Name of manipulated elements should be
changed so they have meaningful names in the
code. E.g. nameField rather than textbox1.
September 30, 2014
CS 350 - Computer/Human Interaction
14
Event Handlers
●
●
Double-clicking on a form element in the GUI
designer 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
a button.
Other handler stubs can be created from the
property window.
September 30, 2014
CS 350 - Computer/Human Interaction
15
Example: PurplePizzaParlor1
●
●
Browse to PurplePizzaParlor1.sln and
double-click on it to bring up project.
Features
–
–
–
–
–
–
Tabbed Control Container
Computed padding for labels used as headings
Textboxes, read-only, multi-line, scrollbars
➢ Debug area for printing out messages
Radio buttons in a GroupBox
CheckListBox, single-click
Submit and Reset buttons
September 30, 2014
CS 350 - Computer/Human Interaction
16
Radio Button Handler
●
●
●
Every event handler has two parameters, a
sender object, that identifies which object
caused the event, and an arguments object,
that contains information about the event.
This allows us to write just one handler and
attach it to all of the radio buttons.
The sender is passed as type object, so it must
be cast to a specific type before using it.
September 30, 2014
CS 350 - Computer/Human Interaction
17
CheckListBox Handler
●
●
For the CheckListBox, we want to handle the
ItemCheck event, which is not the default
event.
For this handler, the arguments object contains
information regarding the original value, the
new value, and the index of the item that was
checked.
September 30, 2014
CS 350 - Computer/Human Interaction
18