1.  2006 Pearson Education, Inc. All rights reserved. 1 13 Graphical User Interface Concepts: Part I

2.  2006 Pearson Education, Inc. All rights reserved. 2 …the wisest prophets make sure of the event first. — Horace Walpole...The user should feel in control of the computer; not the other way around. This is achieved in applications that embody three qualities: responsiveness, permissiveness, and consistency. — Inside Macintosh, Volume 1 Apple Computer, Inc. 1985 All the better to see you with my dear. — The Big Bad Wolf to Little Red Riding Hood

3.  2006 Pearson Education, Inc. All rights reserved. 3 OBJECTIVES In this chapter you will learn:  Design principles of graphical user interfaces (GUIs).  How to create graphical user interfaces.  How to process events that are generated by user interactions with GUI controls.  The namespaces that contain the classes for graphical user interface controls and event handling.  How to create and manipulate Button, Label, RadioButton, CheckBox, TextBox, Panel and NumericUpDown controls.  How to add descriptive ToolTip s to GUI controls.  How to process mouse and keyboard events.

4.  2006 Pearson Education, Inc. All rights reserved. 4 13.1 Introduction 13.2 Windows Forms 13.3 Event Handling 13.3.1A Simple Event-Driven GUI 13.3.2Another Look at the Visual Studio Generated Code 13.3.3Delegates and the Event-Handling Mechanism 13.3.4Other Ways to Create Event Handlers 13.3.5 Locating Event Information 13.4 Control Properties and Layout 13.5 Label s, TextBox es and Button s 13.6 GroupBox es and Panel s 13.7 CheckBox es and RadioButton s 13.8 PictureBox es

5.  2006 Pearson Education, Inc. All rights reserved. 5 13.9 ToolTip s 13.10 NumericUpDown Control 13.11 Mouse-Event Handling 13.12 Keyboard-Event Handling 13.13 Wrap-Up

6.  2006 Pearson Education, Inc. All rights reserved. 6 13.1 Introduction Graphical User Interface (GUI) – Gives a program distinctive “look” and “feel” – Built from GUI controls (Fig. 13.2) Objects that can display information on the screen or enable users to interact with an application Implements IComponent interface

7.  2006 Pearson Education, Inc. All rights reserved. 7 Look-and-Feel Observation 13.1 Consistent user interfaces enable a user to learn new applications more quickly because the applications have the same “look” and “feel.”

8.  2006 Pearson Education, Inc. All rights reserved. 8 Fig. 13.1 | GUI controls in an Internet Explorer window. LabelButton Menu bar Title barMenuCombobox Scrollbar

9.  2006 Pearson Education, Inc. All rights reserved. 9 Fig. 13.2 | Some basic GUI controls.

10.  2006 Pearson Education, Inc. All rights reserved. 10 13.2 Windows Forms Windows Forms – Used to create GUIs for programs – Graphical element that appears on your computer’s desktop – Active window is the front most window – A Form is a container for controls and components – In visual programming, Visual Studio generates much of the GUI-related code

11.  2006 Pearson Education, Inc. All rights reserved. 11 Fig. 13.3 | Components and controls for Windows Forms. Display all controls and components Categories that organize controls and components by functionality

12.  2006 Pearson Education, Inc. All rights reserved. 12 Fig. 13.4 | Common Form properties, methods and events.

13.  2006 Pearson Education, Inc. All rights reserved. 13 13.3 Event Handling Event Handling – GUIs are event driven – When user interacts with a GUI component, the interaction is known as an event – A method that performs a task in response to an event is called an event handler

14.  2006 Pearson Education, Inc. All rights reserved. 14 13.3.1 A Simple Event-Driven GUI Can create a Click event handler by double clicking the Button control on the Form (if applicable) By convention – Each variable name we create for a control ends with the control’s type – C# names the event-handler method as controlName_eventName (e.g., clickButton_Click) Each event handler receives two parameters when called – object named sender A reference to the object that generated the event – EventArgs named e Contains additional information about the event that occurred

15.  2006 Pearson Education, Inc. All rights reserved. 15 Outline SimpleEventExample Form.cs The click event handler for clickButton Let user know that clickButton was clicked by displaying MessageBox Inherits from Form Visual Studio generated InitializeComponent

16.  2006 Pearson Education, Inc. All rights reserved. 16 Software Engineering Observation 13.1 You should not expect return values from event handlers—event handlers are designed to execute code based on an action and return control to the main program.

17.  2006 Pearson Education, Inc. All rights reserved. 17 Good Programming Practice 13.1 Use the event-handler naming convention controlName_eventName, so method names are meaningful. Such names tell users what event a method handles for what control. This convention is not required, but it makes your code easier to read, understand, modify and maintain.

18.  2006 Pearson Education, Inc. All rights reserved. 18 13.3.2 Another Look at the Visual Studio Generated Code Visual Studio Generated Code – The auto-generated code is saved in the Designer.cs file of the Form – partial modifier allow the class created to be split among multiple files – By default, all variable declarations for controls created through C# have a private access modifier – The code also includes Dispose and InitializeComponent

19.  2006 Pearson Education, Inc. All rights reserved. 19 Fig. 13.6 | First half of the Visual Studio generated code file.

20.  2006 Pearson Education, Inc. All rights reserved. 20 Fig. 13.7 | Second half of the Visual Studio generated code file.

21.  2006 Pearson Education, Inc. All rights reserved. 21 Error-Prevention Tip 13.1 The code generated by building a GUI in Design mode is not meant to be modified directly, and doing so can result in an application that functions incorrectly. You should modify control properties through the Properties window.

22.  2006 Pearson Education, Inc. All rights reserved. 22 13.3.3 Delegates and the Event-Handling Mechanism Delegates and the Event-Handling Mechanism – Event sender Control that generates an event – Event receiver Responds to a particular event – Delegates Hold a reference to a method with a signature delegate keyword Multicast delegates – Represent a set of delegate objects that all have same signature

23.  2006 Pearson Education, Inc. All rights reserved. 23 13.3.4 Other Ways to Create Event Handlers Other ways to create event handlers – By double clicking a control, the Form creates a event handler for that control – Able to create additional event handlers through the Properties window (Fig. 13.8)

24.  2006 Pearson Education, Inc. All rights reserved. 24 Fig. 13.8 | Viewing events for a Button control in the Properties window. Properties icon Events icon Selected events

25.  2006 Pearson Education, Inc. All rights reserved. 25 13.3.5 Locating Event Information Read the Visual Studio documentation to learn about the different events raised (Fig. 13.9-13.10)

26.  2006 Pearson Education, Inc. All rights reserved. 26 Fig. 13.9 | List of Button events. Class name List of events

27.  2006 Pearson Education, Inc. All rights reserved. 27 Fig. 13.10 | Click event details. Event name Event type Event argument class

28.  2006 Pearson Education, Inc. All rights reserved. 28 13.4 Control Properties and Layout Control Properties and Layout – Focus method Transfers the focus to a control and makes it the active control – Enabled property Indicates whether the user can interact with a control to generate an event – Anchoring property Causes controls to remain at a fixed distance from the sides of the container (Fig. 13.12 – 13.13) – Docking property Attaches a control to a container such that the control stretches across an entire side (Fig. 13.14) – Padding property Specifies the distance between the docked controls and the Form edges – Width and Height Specifies size of Form Using Visual Studio To Edit GUI’s Layout – Snap lines Appear to help you position the control with respect to other controls

29.  2006 Pearson Education, Inc. All rights reserved. 29 Fig. 13.11 | Class Control properties and methods. (Part 1 of 2)

30.  2006 Pearson Education, Inc. All rights reserved. 30 Fig. 13.11 | Class Control properties and methods. (Part 2 of 2)

31.  2006 Pearson Education, Inc. All rights reserved. 31 Fig. 13.12 | Manipulating the Anchor property of a control. Click down-arrow in Anchor property to display anchoring window Anchoring window Darkened bars indicate the container’s side(s) to which the control is anchored; use mouse clicks to select or deselect a bar

32.  2006 Pearson Education, Inc. All rights reserved. 32 Fig. 13.13 | Anchoring demonstration. Constant distance to right and bottom sides Before resizing After resizing

33.  2006 Pearson Education, Inc. All rights reserved. 33 Fig. 13.14 | Docking a Button to the top of a Form. Before resizing After resizing Control extends along entire top portion of form

34.  2006 Pearson Education, Inc. All rights reserved. 34 Fig. 13.15 | Control layout properties.

35.  2006 Pearson Education, Inc. All rights reserved. 35 Look-and-Feel Observation 13.2 For resizable Form s, ensure that the GUI layout appears consistent across various Form sizes.

36.  2006 Pearson Education, Inc. All rights reserved. 36 Fig. 13.16 | Snap lines in Visual Studio 2005. Snap line to help align controls on their left sides Snap line that indicates when a control reaches the minimum recommended distance from the edge of a Form.

37.  2006 Pearson Education, Inc. All rights reserved. 37 13.5 Label s, TextBoxe s and Button s Label s – Provide text information (as well as images) – Display text that user cannot directly modify – Can be changed programmatically TextBoxe s – Area in which either text can be displayed or typed in – Password TextBoxe s hides information entered by user Button s – Control that user clicks to trigger specific action – There are several types of buttons, such as checkboxes and radio buttons – All buttons derive from class ButtonBase

38.  2006 Pearson Education, Inc. All rights reserved. 38 Fig. 13.17 | Common Label properties.

39.  2006 Pearson Education, Inc. All rights reserved. 39 Fig. 13.18 | TextBox properties and events.

40.  2006 Pearson Education, Inc. All rights reserved. 40 Fig. 13.19 | Button properties and event.

41.  2006 Pearson Education, Inc. All rights reserved. 41 Look-and-Feel Observation 13.3 Although Label s, TextBox es and other controls can respond to mouse clicks, Button s are more natural for this purpose.

42.  2006 Pearson Education, Inc. All rights reserved. 42 Outline LabelTextBoxButton TestForm.cs (1 of 2)

43.  2006 Pearson Education, Inc. All rights reserved. 43 Outline LabelTextBoxButton TestForm.cs (2 of 2) The click event handler for displayPasswordButton Display the password protected text in displayPasswordLabel

44.  2006 Pearson Education, Inc. All rights reserved. 44 13.6 GroupBoxe s and Panel s GroupBoxe s and Panel s – Arrange controls on a GUI – Used to group similar functionality that a related – Primary difference between these two controls: GroupBoxe s can display a caption (i.e., text) and do not include scrollbars Panel s can include scrollbars and do not include a caption

45.  2006 Pearson Education, Inc. All rights reserved. 45 Look-and-Feel Observation 13.4 Panel s and GroupBox es can contain other Panel s and GroupBox es for more complex layouts.

46.  2006 Pearson Education, Inc. All rights reserved. 46 Fig. 13.21 | GroupBox properties.

47.  2006 Pearson Education, Inc. All rights reserved. 47 Fig. 13.22 | Panel properties.

48.  2006 Pearson Education, Inc. All rights reserved. 48 Look-and-Feel Observation 13.5 You can organize a GUI by anchoring and docking controls inside a GroupBox or Panel. The GroupBox or Panel then can be anchored or docked inside a Form. This divides controls into functional “groups” that can be arranged easily.

49.  2006 Pearson Education, Inc. All rights reserved. 49 Look-and-Feel Observation 13.6 Use Panel s with scrollbars to avoid cluttering a GUI and to reduce the GUI’s size.

50.  2006 Pearson Education, Inc. All rights reserved. 50 Fig. 13.23 | Creating a Panel with scrollbars. Control inside Panel Panel Scrollbars Panel Panel resized

51.  2006 Pearson Education, Inc. All rights reserved. 51 Outline GroupboxPanelExamp leForm.cs (1 of 2) The click event handler for hiButton The click event handler for byeButton Change messageLabel ’s text

52.  2006 Pearson Education, Inc. All rights reserved. 52 Outline GroupboxPanelExamp leForm.cs (2 of 2) The click event handler for leftButton Change messageLabel ’s text The click event handler for rightButton Change messageLabel ’s text

53.  2006 Pearson Education, Inc. All rights reserved. 53 13.7 CheckBox es and RadioButton s C# has two types of state buttons – CheckBoxe s Small squares that either is blank or contains a check mark Any number of CheckBoxe s can be selected at a time Font styles can be combined via bitwise operators – RadioButton s Only one can be selected at a time Selecting one RadioButton in the group forces all the others to be deselected. RadioButton s represents a set of mutually exclusive options

54.  2006 Pearson Education, Inc. All rights reserved. 54 Fig. 13.25 | CheckBox properties and events.

55.  2006 Pearson Education, Inc. All rights reserved. 55 Outline CheckBoxTestForm.cs (1 of 2) The event handler for boldCheckBox when user checks or unchecks Bold the font of outputLabel if not done so already and vice versa

56.  2006 Pearson Education, Inc. All rights reserved. 56 Outline CheckBoxTestForm.cs (2 of 2) The event handler for italicCheckBox when user checks or unchecks Italicize the font of outputLabel if not done so already and vice versa

57.  2006 Pearson Education, Inc. All rights reserved. 57 Look-and-Feel Observation 13.7 Use RadioButton s when the user should choose only one option in a group.

58.  2006 Pearson Education, Inc. All rights reserved. 58 Look-and-Feel Observation 13.8 Use CheckBox es when the user should be able to choose multiple options in a group.

59.  2006 Pearson Education, Inc. All rights reserved. 59 Fig. 13.27 | RadioButton properties and events.

60.  2006 Pearson Education, Inc. All rights reserved. 60 Software Engineering Observation 13.2 Form s, GroupBox es, and Panel s can act as logical groups for RadioButton s. The RadioButtons within each group are mutually exclusive to each other, but not to RadioButton s in different logical groups.

61.  2006 Pearson Education, Inc. All rights reserved. 61 Outline RadioButtonsTest Form.cs (1 of 7) Variables to determine how MessageBox will look like Determine which buttons the user selected and store information in buttonType

62.  2006 Pearson Education, Inc. All rights reserved. 62 Outline RadioButtonsTest Form.cs (2 of 7) Determine which buttons the user selected and store information in buttonType Determine which icon the user selected and store information in iconType

63.  2006 Pearson Education, Inc. All rights reserved. 63 Outline RadioButtonsTest Form.cs (3 of 7) Determine which icon the user selected and store information in iconType

64.  2006 Pearson Education, Inc. All rights reserved. 64 Outline RadioButtonsTest Form.cs (4 of 7) The click event handler for displayButton Display customized MessageBox

65.  2006 Pearson Education, Inc. All rights reserved. 65 Outline RadioButtonsTest Form.cs (5 of 7) Test to see which button was pressed and change displayLabel ’s text accordingly

66.  2006 Pearson Education, Inc. All rights reserved. 66 Outline RadioButtonsTest Form.cs (6 of 7) (c) OKCance l button type (a) (b) (e) AbortRetryIgnore button type (d) OK button type (f) YesNoCance l button type

67.  2006 Pearson Education, Inc. All rights reserved. 67 Outline RadioButtonsTest Form.cs (7 of 7) (h) RetryCance l button type (g) YesNo button type

68.  2006 Pearson Education, Inc. All rights reserved. 68 13.8 PictureBoxe s PictureBoxe s – Display an image

69.  2006 Pearson Education, Inc. All rights reserved. 69 Fig. 13.29 | PictureBox properties and event.

70.  2006 Pearson Education, Inc. All rights reserved. 70 Outline PictureBoxTestForm.cs (1 of 2) Assign an image to the imagePictureBox given the specified directory

71.  2006 Pearson Education, Inc. All rights reserved. 71 Outline PictureBoxTestForm.cs (2 of 2) (a) (b) (c)

72.  2006 Pearson Education, Inc. All rights reserved. 72 13.9 ToolTip s ToolTip s – Helpful text that appears when the mouse hovers over an item

73.  2006 Pearson Education, Inc. All rights reserved. 73 Fig. 13.31 | ToolTip properties and events.

74.  2006 Pearson Education, Inc. All rights reserved. 74 Outline ToolTipExampleForm.cs (a) (b)

75.  2006 Pearson Education, Inc. All rights reserved. 75 Fig. 13.33 | Demonstrating the component tray. ToolTip in component tray

76.  2006 Pearson Education, Inc. All rights reserved. 76 Fig. 13.34 | Setting a control’s tool tip text. Property to set tool tip text Tool tip text

77.  2006 Pearson Education, Inc. All rights reserved. 77 13.10 NumericUpDown Control NumericUpDown – Restrict a user’s input choices to a specific range of numeric values. – Appears as a TextBox, with two small Buttons on the right side – NumericUpDown ’s ReadOnly property indicates if user can type a number into the control

78.  2006 Pearson Education, Inc. All rights reserved. 78 Fig. 13.35 | NumericUpDown properties and event.

79.  2006 Pearson Education, Inc. All rights reserved. 79 Outline interestCalculator Form.cs (1 of 2) Retrieve, convert, and assign principalTextBox, InterestTextBox, and yearUpDown ’s values

80.  2006 Pearson Education, Inc. All rights reserved. 80 Outline interestCalculator Form.cs (2 of 2) Click to increase number of years Click to decrease number of years NumericalUpDown control Calculate interest and format it as a String Output results in displayTextBox

81.  2006 Pearson Education, Inc. All rights reserved. 81 13.11 Mouse-Event Handling Mouse-Event Handling – Mouse events can be handled for any control that derives from class System.Windows.Forms.Control – Class MouseEventArgs Contains information related to the mouse event Information about the event is passed to the event-handling method through an object of this class – The delegate used to create the mouse-event handlers is MouseEventHandler

82.  2006 Pearson Education, Inc. All rights reserved. 82 Fig. 13.37 | Mouse events and event arguments. (Part 1 of 2.)

83.  2006 Pearson Education, Inc. All rights reserved. 83 Fig. 13.37 | Mouse events and event arguments. (Part 2 of 2.)

84.  2006 Pearson Education, Inc. All rights reserved. 84 Outline PainterForm.cs (1 of 2) Default instance variable to false to identify that painting will not occur Set shouldPaint to true to identify that painting will occur Set shouldPaint to false to identify that painting will not occur

85.  2006 Pearson Education, Inc. All rights reserved. 85 Outline PainterForm.cs (1 of 2) Paint on the Form when mouse is being pressed

86.  2006 Pearson Education, Inc. All rights reserved. 86 13.12 Keyboard-Event Handling Keyboard-Event Handling – Key events occur when keyboard keys are pressed and released – There are three key events: KeyPress – The event occurs when the user presses a key that represents an ASCII character The specific key can be determined with property KeyChar of the event handler’s KeyPressEventArgs argument Does not indicate whether modifier keys were pressed KeyUp and KeyDown – If information about the modifier keys are important, use the KeyUp or KeyDown events The KeyEventArgs argument for each of these events contains information about modifier keys.

87.  2006 Pearson Education, Inc. All rights reserved. 87 Fig. 13.39 | Keyboard events and event arguments. (Part 1 of 2.)

88.  2006 Pearson Education, Inc. All rights reserved. 88 Fig. 13.39 | Keyboard events and event arguments. (Part 2 of 2.)

89.  2006 Pearson Education, Inc. All rights reserved. 89 Outline KeyDemoForm.cs (1 of 3) Property that returns the ASCII character for the key pressed

90.  2006 Pearson Education, Inc. All rights reserved. 90 Outline KeyDemoForm.cs (2 of 3) Reset labels Return the key code for the key as a value from the Keys enumerations Returns the key code for a key combined with modifier information as a Key value Returns key code as an int

91.  2006 Pearson Education, Inc. All rights reserved. 91 Outline KeyDemoForm.cs (3 of 3) (c) $ pressed (a) H pressed (b) F12 pressed (d) Enter pressed