ENGR/CS 101 CS Session Lecture 4 Log into Windows/ACENET (reboot if - PowerPoint PPT Presentation

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 Lecture 4 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.  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 Lecture 4 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  E.g., Textbox, Button, Label Lecture 4 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:  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. Lecture 4 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:  Mouse events include: Click, DoubleClick, MouseDown, MouseMove, MouseUp, Rollover  Keyboard events include: KeyPress Lecture 4 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