Chapter 12- GUI Concepts I

12.1Introduction 12.2 Windows Forms 12.3 Event-Handling Model Basic Event Handling 12.4 Control Properties and Layout 12.5 Label s, TextBoxes and Buttons 12.6 GroupBox es and Panel s 12.7 CheckBox es and RadioButton s 12.8 PictureBox es 12.9 Mouse-Event Handling Keyboard-Event Handling Outline

12.1 Introduction GUI – Graphical User Interface Allows visual interaction Event driven – User interaction generates events Distinctive “look” and “feel” Learn new applications more quickly

12.1Introduction

GUI Components – Objects with which user interacts Event generation – Contained in Toolbox Control – Visible by graphical representation at runtime. – ex: Label control. Component – Are not visible during runtime. Timer component – ex: Timer component

12.1Introduction Fig. 12.2Some basic GUI components.

12.2 Windows Forms Form – Acts as a container for components and controls. – Graphical element used to create GUIs. – A form is a graphical element that appears on the desktop : it can be a dialog or a window. – Click and drag component from Toolbox Code generated – Component is instantiated – Basic properties are set

Controls Windows Forms contains a variety of controls that you can place on forms. Windows Forms contains a variety of controls that you can place on forms. A control is an object that can be drawn on to the Form to enable or enhance user interaction with the application. A control is an object that can be drawn on to the Form to enable or enhance user interaction with the application. TextBoxes, Buttons, Labels, Radio Buttons, etc. All these Windows Controls are based on the Control class, the base class for all controls. TextBoxes, Buttons, Labels, Radio Buttons, etc. All these Windows Controls are based on the Control class, the base class for all controls Windows Forms

Fig. 12.3Components and controls for Windows Forms.

The distance from the left border to the right border of a control is referred to as its Width property. In the same way, the distance from the top to the bottom borders of a control is its Height value. This can be illustrated as follows: Control’s Dimensions: 12.2 Windows Forms

Control’s Dimensions: 12.2 Windows Forms

When the user interacts with a control via the mouse or keyboard, events are generated. Typically, events are messages sent by a program to signal to an object or a set of objects that an action has occurred Windows Forms

Each class we present (i.e., form, component and control) is in the System.Windows.Forms namespace. Class Form, the basic window used by Windows applications, is fully qualified as: System.Windows.Forms.Form. Likewise, class Button actually is: System.Windows.Forms.Button Windows Forms

GUIs are event driven—they generate events when a program’s user interacts with the GUI. Typical interactions include moving the mouse, clicking the mouse, clicking a button, typing in a textbox, selecting an item from a menu and closing a window. Event information is passed to event handlers, which are methods that are called as a result of specific events Event-Handling Model

For example suppose we want the label lblOutput to respond when clicked by showing a message box with the statement Label was clicked. Private Sub lblOutput_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles lblOutput.Click MessageBox.Show("Label was clicked.") End Sub An event is a message sent by an object announcing that something has happened. When events occurs, information is passed to Event handlers ( Here it is lblOutput.Click) Event-Handling Model

Events are implemented using delegates, which are objects that can call the methods of other objects for you. Whenever you create or use an event in code, you are using its delegate. When the event is thrown, the framework examines the delegate behind the event and then calls the function that the delegate points to Event-Handling Model

So, Delegates are form of object-oriented function pointer that allows a function to be invoked indirectly by way of a reference to the function. They act as an intermediate between an object that generates the event and the event handler. The inclusion of multiple handlers for one event is called event multicasting Event-Handling Model Object A creates event EDelegate for event E Handler 1 for event E Handler 3 for event E Handler 2 for event E calls

Once event is generated, system calls every method (Event Handler) referenced by the delegate, every method in delegate must have same signature since all methods are passed same information. Controls have already predefined delegates corresponding to every event they generate Event-Handling Model

In general, the format of the event-handling method is: Private Sub ControlName_EventName(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles ControlName.EventName event-handling code End Sub where the name of the event handler is, by default, the name of the control, followed by an underscore (_) and the name of the event Event-Handling Model

Event handlers take two arguments: 1. An Object (usually sender) : A reference to the object that generated the event. 2. An event arguments object (e) : An instance of type EventArgs. Class EventArgs is the base class for objects that contain event information Event-Handling Model

Fig. 12.6Events section of the Properties window.

12.3 Event-Handling Model Fig. 12.8List of Form events.

12.4 Control Properties and Layout The appearance Text property can vary depending on the context. For example, the text of a Windows Form is its title bar, but the text of a button appears on its face.

12.4 Control Properties and Layout Method Focus – Transfers focus to control Active control Tap index Method Hide – Hides control Visible property is false Method Show – Shows control Visible property is true

12.4 Control Properties and Layout Anchoring – Specifying layout of controls within container. – Controls remain fixed distances from inside of container. Docking – Sets dimensions of control to dimensions of container at all times.

Fig Anchoring demonstration Control Properties and Layout

Fig Manipulating the Anchor property of a control Control Properties and Layout

Fig Docking demonstration Control Properties and Layout

Fig Control layout properties Control Properties and Layout

12.5 Labels, TextBoxes and Buttons Label – Displays read-only text Textbox – Displays text – Text input by user Button – Click to trigger action

Fig Common Label properties Labels, TextBoxes and Buttons

Fig TextBox properties and events Labels, TextBoxes and Buttons

Fig Button properties and events Labels, TextBoxes and Buttons

1. ' Fig : LabelTextBoxButtonTest.vb 2.' Using a textbox, label and button to display the hidden 3.' text in a password box Public Class FrmButtonTest 6. ' handles cmdShow_Click events 7. Private Sub cmdShow_Click(ByVal sender As System.Object, _ 8. ByVal e As System.EventArgs) Handles cmdShow.Click lblOutput.Text = txtInput.Text 11. End Sub ' cmdShow_Click End Class ' FrmButtonTest The label’s text property is set equal to the value of the textbox’s text property, which was entered by the user The password character is set by assigning the asterisk character (*) to the PasswordChar property.

12.6 GroupBoxes and Panels Groupboxes – Arrange controls on a GUI – Can display captions – Do not include scrollbars Panels – Arrange controls on a GUI – Cannot display captions – Include scrollbars

12.6 GroupBoxes and Panels Fig GroupBox properties. Fig Panel properties.

12.6 GroupBoxes and Panels Fig Creating a Panel with scrollbars.

1 ' Fig : GroupBoxPanelExample.vb 2 ' Using GroupBoxes and Panels to hold buttons. 3 4 Public Class FrmGroupBox 5 6 ' event handlers to change lblMessage 7 Private Sub cmdHi_Click(ByVal sender As System.Object, _ 8 ByVal e As System.EventArgs) Handles cmdHi.Click 9 10 lblMessage.Text = "Hi pressed" 11 End Sub ' cmdHi_Click ' bye button handler 14 Private Sub cmdBye_Click(ByVal sender As System.Object, _ 15 ByVal e As System.EventArgs) Handles cmdBye.Click lblMessage.Text = "Bye pressed" 18 End Sub ' cmdBye_Click ' far left button handler 21 Private Sub cmdLeft_Click(ByVal sender As System.Object, _ 22 ByVal e As System.EventArgs) Handles cmdLeft.Click lblMessage.Text = "Far left pressed" 25 End Sub ' cmdLeft_Click

26 ' far right button handler 27 Private Sub cmdRight_Click(ByVal sender As System.Object, _ 28 ByVal e As System.EventArgs) Handles cmdRight.Click lblMessage.Text = "Far right pressed" 31 End Sub ' cmdRight_Click End Class ' FrmGroupBox

12.7 CheckBoxes and RadioButtons State Buttons: has a state of on/off – true/false – CheckBoxes Any number can be checked at a time – RadioButtons Usually organized in groups and only one checked at a time

12.7 CheckBoxes and RadioButtons Fig CheckBox properties and events.

1 ' Fig : CheckBoxTest.vb 2 ' Using CheckBoxes to toggle italic and bold styles. 3 4 Public Class FrmCheckBox 5 ' use Xor to toggle italic, keep other styles same 6 Private Sub chkItalic_CheckedChanged _ 7 (ByVal sender As System.Object, ByVal e As System.EventArgs) _ 8 Handles chkItalic.CheckedChanged 9 10 lblOutput.Font = New Font(lblOutput.Font.Name, _ 11 lblOutput.Font.Size, lblOutput.Font.Style _ 12 Xor FontStyle.Italic) 13 End Sub ' chkItalic_CheckedChanged ' use Xor to toggle bold, keep other styles same 16 Private Sub chkBold_CheckedChanged (ByVal sender As System.Object, _ 17 ByVal e As System.EventArgs) Handles chkBold.CheckedChanged lblOutput.Font = New Font(lblOutput.Font.Name, _ 20 lblOutput.Font.Size, lblOutput.Font.Style _ 21 Xor FontStyle.Bold) 22 End Sub ' chkBold_CheckedChanged End Class ' FrmCheckBox To enable the font to be changed, the programmer must set the Font property to a Font object. The Font constructor that we use takes the font name, size and style. The style is a member of the FontStyle enumeration, which contains the font styles Regular, Bold, Italic, Strikeout and Underline.

Why Xor? Styles can be combined via bitwise Operator: operators that perform manipulation on bits. Assume that FontStyle.Bold is represented by bits 01 and that FontStyle.Italic is represented by bits 10. When we Or both styles, we obtain the bitset = Bold Or 10 = Italic = Bold and Italic

The Or operator is helpful in the creation of style combinations, as long as we do not need to undo the bitwise operation. However, what happens if we want to undo a style combination ? The Xor operator enables us to accomplish the Or operator behavior while allowing us to undo compound styles. Why Xor?

Assume, again, that FontStyle.Bold is represented by bits 01 and that FontStyle.Italic is represented by bits 10. When we Xor both styles, we obtain the bitset = Bold Xor 10 = Italic = Bold and Italic Now, suppose that we would like to remove the FontStyle.Bold style from the previous combination of FontStyle.Bold and FontStyle.Italic. The easiest way to do so is to reapply the Xor operator to the compound style and FontStyle.Bold. 11 = Bold and Italic Xor 01 = Bold = Italic Why Xor?

12.7 CheckBoxes and RadioButtons Fig RadioButton properties and events.

1 ' Fig : RadioButtonTest.vb 2 ' Using RadioButtons to set message window options. 3 4 Public Class FrmRadioButton 5 6 Private iconType As MessageBoxIcon 7 Private buttonType As MessageBoxButtons 8 9 ' display message box and obtain dialogue button clicked 10 Private Sub cmdDisplay_Click(ByVal sender _ 11 As System.Object, ByVal e As System.EventArgs) _ 12 Handles cmdDisplay.Click Dim dialog As DialogResult = MessageBox.Show( _ 15 "This is Your Custom MessageBox", "VB", buttonType, _ 16 iconType) ' check for dialog result and display on label 19 Select Case dialog Case DialogResult.OK 22 lblDisplay.Text = "OK was pressed" Case DialogResult.Cancel 25 lblDisplay.Text = "Cancel was pressed"

26 Case DialogResult.Abort 27 lblDisplay.Text = "Abort was pressed" Case DialogResult.Retry 30 lblDisplay.Text = "Retry was pressed" Case DialogResult.Ignore 33 lblDisplay.Text = "Ignore was pressed" Case DialogResult.Yes 36 lblDisplay.Text = "Yes was pressed" Case DialogResult.No 39 lblDisplay.Text = "No was pressed" 40 End Select End Sub ' cmdDisplay_Click ' set button type to OK 45 Private Sub radOk_CheckedChanged(ByVal sender _ 46 As System.Object, ByVal e As System.EventArgs) _ 47 Handles radOk.CheckedChanged buttonType = MessageBoxButtons.OK 50 End Sub ' radOk_CheckedChanged

51 ' set button type to OkCancel 52 Private Sub radOkCancel_CheckedChanged(ByVal sender _ 53 As System.Object, ByVal e As System.EventArgs) _ 54 Handles radOkCancel.CheckedChanged buttonType = MessageBoxButtons.OKCancel 57 End Sub ' radOkCancel_CheckedChanged ' set button type to AbortRetryIgnore 60 Private Sub radAbortRetryIgnore_CheckedChanged(ByVal sender _ 61 As System.Object, ByVal e As System.EventArgs) _ 62 Handles radAbortRetryIgnore.CheckedChanged buttonType = MessageBoxButtons.AbortRetryIgnore 65 End Sub ' radAbortRetryIgnore_CheckedChanged 66 ' set button type to YesNoCancel 67 Private Sub radYesNoCancel_CheckedChanged(ByVal sender _ 68 As System.Object, ByVal e As System.EventArgs) _ 69 Handles radYesNoCancel.CheckedChanged buttonType = MessageBoxButtons.YesNoCancel 72 End Sub ' radYesNoCancel_CheckedChanged

73 ' set button type to YesNo 74 Private Sub radYesNo_CheckedChanged(ByVal sender _ 75 As System.Object, ByVal e As System.EventArgs) _ 76 Handles radYesNo.CheckedChanged buttonType = MessageBoxButtons.YesNo 79 End Sub ' radYesNo_CheckedChanged ' set button type to RetryCancel 82 Private Sub radRetryCancel_CheckedChanged(ByVal sender _ 83 As System.Object, ByVal e As System.EventArgs) _ 84 Handles radRetryCancel.CheckedChanged buttonType = MessageBoxButtons.RetryCancel 87 End Sub ' radRetryCancel_CheckedChanged ' set icon type to Asterisk when Asterisk checked 90 Private Sub radAsterisk_CheckedChanged(ByVal sender _ 91 As System.Object, ByVal e As System.EventArgs) _ 92 Handles radAsterisk.CheckedChanged iconType = MessageBoxIcon.Asterisk 95 End Sub ' radAsterisk_CheckedChanged 96

97 ' set icon type to Error when Error checked 98 Private Sub radError_CheckedChanged(ByVal sender _ 99 As System.Object, ByVal e As System.EventArgs) _ 100 Handles radError.CheckedChanged iconType = MessageBoxIcon.Error 103 End Sub ' radError_CheckedChanged ' set icon type to Exclamation when Exclamation checked 106 Private Sub radExclamation_CheckedChanged(ByVal sender _ 107 As System.Object, ByVal e As System.EventArgs) _ 108 Handles radExclamation.CheckedChanged iconType = MessageBoxIcon.Exclamation 111 End Sub ' radExclamation_CheckedChanged ' set icon type to Hand when Hand checked 114 Private Sub radHand_CheckedChanged(ByVal sender _ 115 As System.Object, ByVal e As System.EventArgs) _ 116 Handles radHand.CheckedChanged iconType = MessageBoxIcon.Hand 119 End Sub ' radHand_CheckedChanged

120 ' set icon type to Information when Information checked 121 Private Sub radInformation_CheckedChanged(ByVal sender _ 122 As System.Object, ByVal e As System.EventArgs) _ 123 Handles radInformation.CheckedChanged iconType = MessageBoxIcon.Information 126 End Sub ' radInformation_CheckedChanged ' set icon type to Question when Question checked 129 Private Sub radQuestion_CheckedChanged(ByVal sender _ 130 As System.Object, ByVal e As System.EventArgs) _ 131 Handles radQuestion.CheckedChanged iconType = MessageBoxIcon.Question 134 End Sub ' radQuestion_CheckedChanged ' set icon type to Stop when Stop checked 137 Private Sub radStop_CheckedChanged(ByVal sender _ 138 As System.Object, ByVal e As System.EventArgs) _ 139 Handles radStop.CheckedChanged iconType = MessageBoxIcon.Stop 142 End Sub ' radStop_CheckedChanged 143

144 ' set icon type to Warning when Warning checked 145 Private Sub radWarning_CheckedChanged(ByVal sender _ 146 As System.Object, ByVal e As System.EventArgs) _ 147 Handles radWarning.CheckedChanged iconType = MessageBoxIcon.Warning 150 End Sub ' radWarning_CheckedChanged End Class ' FrmRadioButtons

12.8 PictureBoxes PictureBoxes – Display images Bitmap GIF (Graphics Interchange Format) JPEG (Joint Photographic Expert Group) Icons – Image property Image to be displayed

12.8 PictureBoxes Fig PictureBox properties and events.

1 ' Fig : PictureBoxTest.vb 2 ' Using a PictureBox to display images. 3 4 Imports System.IO 5 6 Public Class FrmPictureBox 7 9 Private imageNumber As Integer = ' replace image in picImage 14 Private Sub picImage_Click(ByVal sender As System.Object, _ 15 ByVal e As System.EventArgs) Handles picImage.Click ' imageNumber from 0 to 2 18 imageNumber = (imageNumber + 1) Mod ' create Image object from file, display in PictureBox 21 picImage.Image = Image.FromFile _ 22 (Directory.GetCurrentDirectory & "\images\image" & _ 23 imageNumber & ".bmp") 24 End Sub ' picImage_Click End Class ' FrmPictureBox Class Image has a method FromFile, which takes a String (the image file) and creates an Image object. To find the images, we use class Directory (namespace System.IO) method GetCurrentDirectory We use imageNumber to append the proper number, enabling us to load either image0, image1 or image2. The value of Integer imageNumber stays between 0 and 2 because of the modulus calculation Whenever a user clicks picImage, the image changes.