1. Chapter 12- GUI Concepts I

2. 12.1Introduction 12.2 Windows Forms 12.3 Event-Handling Model 12.3.1 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 12.10 Keyboard-Event Handling Outline

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

4. 12.1Introduction

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

6. 12.1Introduction Fig. 12.2Some basic GUI components.

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

8. 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. 12.2 Windows Forms

9. Fig. 12.3Components and controls for Windows Forms.

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

11. Control’s Dimensions: 12.2 Windows Forms

12. 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. 12.2 Windows Forms

13. 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. 12.2 Windows Forms

15. 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. 12.3 Event-Handling Model

16. 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). 12.3 Event-Handling Model

17. 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. 12.3 Event-Handling Model

18. 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. 12.3 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

19. 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. 12.3 Event-Handling Model

20. 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. 12.3 Event-Handling Model

21. 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. 12.3 Event-Handling Model

22. Fig. 12.6Events section of the Properties window.

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

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

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

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

27. Fig. 12.11Anchoring demonstration. 12.4 Control Properties and Layout

28. Fig. 12.12Manipulating the Anchor property of a control. 12.4 Control Properties and Layout

29. Fig. 12.13Docking demonstration. 12.4 Control Properties and Layout

30. Fig. 12.14Control layout properties. 12.4 Control Properties and Layout

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

32. Fig. 12.15Common Label properties. 12.5 Labels, TextBoxes and Buttons

33. Fig. 12.16TextBox properties and events. 12.5 Labels, TextBoxes and Buttons

34. Fig. 12.17Button properties and events. 12.5 Labels, TextBoxes and Buttons

35. 1. ' Fig. 12.18: LabelTextBoxButtonTest.vb 2.' Using a textbox, label and button to display the hidden 3.' text in a password box. 4. 5.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 9. 10. lblOutput.Text = txtInput.Text 11. End Sub ' cmdShow_Click 12. 13.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.

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

37. 12.6 GroupBoxes and Panels Fig. 12.19GroupBox properties. Fig. 12.20Panel properties.

38. 12.6 GroupBoxes and Panels Fig. 12.21Creating a Panel with scrollbars.

39. 1 ' Fig. 12.22: 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 12 13 ' bye button handler 14 Private Sub cmdBye_Click(ByVal sender As System.Object, _ 15 ByVal e As System.EventArgs) Handles cmdBye.Click 16 17 lblMessage.Text = "Bye pressed" 18 End Sub ' cmdBye_Click 19 20 ' far left button handler 21 Private Sub cmdLeft_Click(ByVal sender As System.Object, _ 22 ByVal e As System.EventArgs) Handles cmdLeft.Click 23 24 lblMessage.Text = "Far left pressed" 25 End Sub ' cmdLeft_Click

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

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

42. 12.7 CheckBoxes and RadioButtons Fig. 12.23CheckBox properties and events.

43. 1 ' Fig. 12.24: 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 14 15 ' 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 18 19 lblOutput.Font = New Font(lblOutput.Font.Name, _ 20 lblOutput.Font.Size, lblOutput.Font.Style _ 21 Xor FontStyle.Bold) 22 End Sub ' chkBold_CheckedChanged 23 24 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.

45. 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 11. 01 = Bold Or 10 = Italic ------------------ 11 = Bold and Italic

46. 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?

47. 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 11. 01 = Bold Xor 10 = Italic --------------------- 11 = 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 ------------------------ 10 = Italic Why Xor?

48. 12.7 CheckBoxes and RadioButtons Fig. 12.25RadioButton properties and events.

49. 1 ' Fig. 12.26: 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 13 14 Dim dialog As DialogResult = MessageBox.Show( _ 15 "This is Your Custom MessageBox", "VB", buttonType, _ 16 iconType) 17 18 ' check for dialog result and display on label 19 Select Case dialog 20 21 Case DialogResult.OK 22 lblDisplay.Text = "OK was pressed" 23 24 Case DialogResult.Cancel 25 lblDisplay.Text = "Cancel was pressed"

50. 26 Case DialogResult.Abort 27 lblDisplay.Text = "Abort was pressed" 28 29 Case DialogResult.Retry 30 lblDisplay.Text = "Retry was pressed" 31 32 Case DialogResult.Ignore 33 lblDisplay.Text = "Ignore was pressed" 34 35 Case DialogResult.Yes 36 lblDisplay.Text = "Yes was pressed" 37 38 Case DialogResult.No 39 lblDisplay.Text = "No was pressed" 40 End Select 41 42 End Sub ' cmdDisplay_Click 43 44 ' 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 48 49 buttonType = MessageBoxButtons.OK 50 End Sub ' radOk_CheckedChanged

51. 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 55 56 buttonType = MessageBoxButtons.OKCancel 57 End Sub ' radOkCancel_CheckedChanged 58 59 ' 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 63 64 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 70 71 buttonType = MessageBoxButtons.YesNoCancel 72 End Sub ' radYesNoCancel_CheckedChanged

52. 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 77 78 buttonType = MessageBoxButtons.YesNo 79 End Sub ' radYesNo_CheckedChanged 80 81 ' 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 85 86 buttonType = MessageBoxButtons.RetryCancel 87 End Sub ' radRetryCancel_CheckedChanged 88 89 ' 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 93 94 iconType = MessageBoxIcon.Asterisk 95 End Sub ' radAsterisk_CheckedChanged 96

53. 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 101 102 iconType = MessageBoxIcon.Error 103 End Sub ' radError_CheckedChanged 104 105 ' 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 109 110 iconType = MessageBoxIcon.Exclamation 111 End Sub ' radExclamation_CheckedChanged 112 113 ' 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 117 118 iconType = MessageBoxIcon.Hand 119 End Sub ' radHand_CheckedChanged

54. 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 124 125 iconType = MessageBoxIcon.Information 126 End Sub ' radInformation_CheckedChanged 127 128 ' 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 132 133 iconType = MessageBoxIcon.Question 134 End Sub ' radQuestion_CheckedChanged 135 136 ' 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 140 141 iconType = MessageBoxIcon.Stop 142 End Sub ' radStop_CheckedChanged 143

55. 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 148 149 iconType = MessageBoxIcon.Warning 150 End Sub ' radWarning_CheckedChanged 151 152 End Class ' FrmRadioButtons

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

58. 12.8 PictureBoxes Fig. 12.30PictureBox properties and events.

59. 1 ' Fig. 12.31: 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 = -1 12 13 ' replace image in picImage 14 Private Sub picImage_Click(ByVal sender As System.Object, _ 15 ByVal e As System.EventArgs) Handles picImage.Click 16 17 ' imageNumber from 0 to 2 18 imageNumber = (imageNumber + 1) Mod 3 19 20 ' 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 25 26 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.