engr/cs 101 cs session lecture 4 - university of...

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

Properties

Events and handlers


Problem Specification

Today's program will be a GUI application

that has the same functionality as the console

program from last time.

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


Interface Mockup

Textboxes to enter

plaintext and shift

key, and to display

ciphertext

Button to encipher

plaintext.

Labels to identify the

textboxes


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.


Creating a GUI Project


GUI Designer


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).


Properties


Properties

window

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.


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

E.g., Textbox, Button, Label


GUI Designer


Toolbar tab

GUI element

GUI Designer


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.


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.



Change the following properties:

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.


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


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:

Mouse events include: Click, DoubleClick,

MouseDown, MouseMove, MouseUp, Rollover

Keyboard events include: KeyPress


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.


Events and Handlers


Event handler code

goes here!

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( )


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.



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.


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 = "";


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());


engr/cs 101 cs session lecture 4 - university of...

Documents