ENGR/CS 101 CS Session
Lecture 4



Log into Windows/ACENET (reboot if in
Linux)
Start Microsoft Visual Studio 2010
Any questions about exercise from last time?
Lecture 4
ENGR/CS 101 Computer Science Session
1
Outline


Problem: Use a GUI to enter user input
Microsoft Visual Studio GUI designer


Forms, textboxes, buttons, labels
C# programming language


Lecture 4
Properties
Events and handlers
ENGR/CS 101 Computer Science Session
2
Problem Specification

Today's program will be a GUI application
that has the same functionality as the console
program from last time.




Lecture 4
Allow the user to enter a shift key letter in
uppercase
Allow the user to enter a plaintext letter in
uppercase to be enciphered
Have a button for the user to click to have the
plaintext letter enciphered
Display the ciphertext letter
ENGR/CS 101 Computer Science Session
3
Interface Mockup



Textboxes to enter
plaintext and shift
key, and to display
ciphertext
Button to encipher
plaintext.
Labels to identify the
textboxes
Lecture 4
ENGR/CS 101 Computer Science Session
4
Creating a GUI Project



Create a new project. Make sure the
language template is Visual C#.
Select "Windows Form Application". Give
the project a name like "cs101gui".
Click on OK. You will get the GUI designer
with a blank form.
Lecture 4
ENGR/CS 101 Computer Science Session
5
Creating a GUI Project
Lecture 4
ENGR/CS 101 Computer Science Session
6
GUI Designer
Lecture 4
ENGR/CS 101 Computer Science Session
7
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 change the initial values in the
Properties Window. Can also change them
in program code (i.e., while program is
running).
Lecture 4
ENGR/CS 101 Computer Science Session
8
Properties
Properties
window
Lecture 4
ENGR/CS 101 Computer Science Session
9
Text Property

Almost every GUI element has a Text
property that is the text displayed by the
element. E.g., the main form's Text property
is its titlebar. We can change it to give the
application a title.
Lecture 4
ENGR/CS 101 Computer Science Session
10
GUI Designer



Every GUI application has a base form that
contains all other GUI elements. Change
size by pulling on the handles.
GUI elements are available in the Toolbox.
Click on form, then roll mouse over the
Toolbox tab, click on Common Controls.
Select and place GUI elements

Lecture 4
E.g., Textbox, Button, Label
ENGR/CS 101 Computer Science Session
11
GUI Designer
Toolbar tab
GUI element
Lecture 4
ENGR/CS 101 Computer Science Session
12
GUI Designer
Lecture 4
ENGR/CS 101 Computer Science Session
13
Name Property

Each GUI element is an object with a
Name property that is its variable name in
the code. Always change the Name of
manipulated elements so they have
meaningful variables names. E.g.
plaintextBox rather than textbox1.
Lecture 4
ENGR/CS 101 Computer Science Session
14
In-class Exercise, Part 1


Create a simple form with three Textboxes for
the plaintext, ciphertext, and shift key, and a
Button.
After changing the properties as described on
the next slide, label and arrange these
elements however you like on the form.
Lecture 4
ENGR/CS 101 Computer Science Session
15
In-class Exercise, Part 1

Change the following properties:



Lecture 4
For the Textboxes, change their Name property to
"plaintextBox", "ciphertextBox", and "keyBox"
(without the quotes), respectively. For plaintextBox
and ciphertextBox, change Multiline property to True.
After this, pull on the handles to make them as large
as you like.
For the Button, change its Name to "encipher" and its
Text to "Encipher".
Change Font properties to the font and size of your
choice.
ENGR/CS 101 Computer Science Session
16
Accessing Properties

Properties are accessed in programs using a
dot (.):
<element name>. <property name>

For example, textboxes have a Text property
that is a string containing the contents of the
box. To access this string in the plaintext box
use: plaintextBox.Text
Lecture 4
ENGR/CS 101 Computer Science Session
17
Events and Handlers


Unlike console programs, which require the
programmer to prompt and read in user data,
GUI programs have form elements that 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
18
Events and Handlers



Double-clicking on a form element in the GUI
designer brings up the code view of the form. As
with console programs, MSVS has created 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 our Encipher
button.
When a user clicks the Encipher button, this handler
method is run to respond to the event. We'll have it
encipher a plaintext letter.
Lecture 4
ENGR/CS 101 Computer Science Session
19
Events and Handlers
Event handler code
goes here!
Lecture 4
ENGR/CS 101 Computer Science Session
20
Events and Handlers


A handler method can access any of the GUI
elements and their properties.
We will get the user data from the keyBox and
plaintextBox using the Text property like so:



keyBox.Text
plaintextBox.Text
Just as with the user input from the console, we
need to convert a string into a char using
char.Parse( )
Lecture 4
ENGR/CS 101 Computer Science Session
21
Handler Design

The design of the handler code for the Encipher
button basically is the same as the console
program. However, the details of how the user
input is received and the result displayed are
different since we are using Textboxes. (New or
modified steps in bold.)
1. Clear the ciphertext box
2. Get the shift key from keyBox.Text
3. Get the plaintext letter from plaintextBox.Text
4. Compute the ciphertext letter
5. Append the cipher letter to the ciphertext box.
Lecture 4
ENGR/CS 101 Computer Science Session
22
In-class Exercise, Part 2


For our program, we want to handle a mouse
click on the Encipher button. Double-click on
the button to get to the handler function stub,
if you haven't done so already.
Add the handler function code shown on the
next two slides. It basically is the same as
the console program code, except the user
interaction uses the textboxes rather than the
console.
Lecture 4
ENGR/CS 101 Computer Science Session
23
Encipher Button Handler Code
// This code goes in the place indicated on Slide 19
// Modified parts from the console program are bold
// Variable declarations - same as console program
char shiftKey,
// key letter
plainLetter, // user input
cipherLetter; // result
int shiftNumber,
// # of shift places
index;
// of cipher letter
// Clear the result box
ciphertextBox.Text = "";
Lecture 4
ENGR/CS 101 Computer Science Session
24
Encipher Button Handler Code
// Get the key letter and a letter to encipher
shiftKey = char.Parse(keyBox.Text);
plainLetter = char.Parse(plaintextBox.Text);
// Compute the corresponding ciphertext letter
// Same as the console program
shiftNumber = shiftKey - 'A';
index = (plainLetter - 'A' + shiftNumber) % 26;
cipherLetter = (char)((int)'A' + index);
// Display the results
// Append the enciphered letter to ciphertext box
// Need to convert it to a string first
ciphertextBox.AppendText(cipherLetter.ToString());
Lecture 4
ENGR/CS 101 Computer Science Session
25