Graphical User Interface Concepts: Part I 13 Graphical User Interface Concepts: Part I

…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

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 ToolTips to GUI controls. How to process mouse and keyboard events.

13.1   Introduction 13.2   Windows Forms 13.3   Event Handling 13.3.1 A Simple Event-Driven GUI 13.3.2 Another Look at the Visual Studio Generated Code 13.3.3 Delegates and the Event-Handling Mechanism 13.3.4 Other Ways to Create Event Handlers 13.3.5  Locating Event Information 13.4   Control Properties and Layout 13.5   Labels, TextBoxes and Buttons 13.6   GroupBoxes and Panels 13.7   CheckBoxes and RadioButtons 13.8   PictureBoxes

13.9   ToolTips 13.10   NumericUpDown Control 13.11   Mouse-Event Handling 13.12   Keyboard-Event Handling 13.13   Wrap-Up

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

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

Fig. 13.1 | GUI controls in an Internet Explorer window. Label Button Menu bar Title bar Menu Combobox Scrollbar Fig. 13.1 | GUI controls in an Internet Explorer window.

Fig. 13.2 | Some basic GUI controls.

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

Fig. 13.3 | Components and controls for Windows Forms. Display all controls and components Categories that organize controls and components by functionality Fig. 13.3 | Components and controls for Windows Forms.

Fig. 13.4 | Common Form properties, methods and events.

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

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

Outline Inherits from Form Visual Studio generated InitializeComponent SimpleEventExample Form.cs Visual Studio generated InitializeComponent The click event handler for clickButton Let user know that clickButton was clicked by displaying MessageBox

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.

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.

13.3.2 Another Look at the 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

Fig. 13.6 | First half of the Visual Studio generated code file.

Fig. 13.7 | Second half of the Visual Studio generated code file.

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.

13.3.3 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

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

Properties icon Events icon Selected events Fig. 13.8 | Viewing events for a Button control in the Properties window.

13.3.5 Locating Event Information Read the Visual Studio documentation to learn about the different events raised (Fig. 13.9-13.10)

Fig. 13.9 | List of Button events. Class name List of events Fig. 13.9 | List of Button events.

Fig. 13.10 | Click event details. Event name Event type Event argument class Fig. 13.10 | Click event details.

13.4 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

Fig. 13.11 | Class Control properties and methods. (Part 1 of 2)

Fig. 13.11 | Class Control properties and methods. (Part 2 of 2)

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 Fig. 13.12 | Manipulating the Anchor property of a control.

Fig. 13.13 | Anchoring demonstration. Constant distance to right and bottom sides Before resizing After resizing Fig. 13.13 | Anchoring demonstration.

Fig. 13.14 | Docking a Button to the top of a Form. Before resizing After resizing Control extends along entire top portion of form Fig. 13.14 | Docking a Button to the top of a Form.

Fig. 13.15 | Control layout properties.

Look-and-Feel Observation 13.2 For resizable Forms, ensure that the GUI layout appears consistent across various Form sizes.

Fig. 13.16 | Snap lines in Visual Studio 2005. Snap line that indicates when a control reaches the minimum recommended distance from the edge of a Form. Snap line to help align controls on their left sides Fig. 13.16 | Snap lines in Visual Studio 2005.

13.5 Labels, TextBoxes and Buttons Provide text information (as well as images) Display text that user cannot directly modify Can be changed programmatically TextBoxes Area in which either text can be displayed or typed in Password TextBoxes hides information entered by user Buttons 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

Fig. 13.17 | Common Label properties.

Fig. 13.18 | TextBox properties and events.

Fig. 13.19 | Button properties and event.

Look-and-Feel Observation 13.3 Although Labels, TextBoxes and other controls can respond to mouse clicks, Buttons are more natural for this purpose.

Outline LabelTextBoxButton TestForm.cs (1 of 2)

Outline The click event handler for displayPasswordButton (2 of 2) LabelTextBoxButton TestForm.cs (2 of 2) Display the password protected text in displayPasswordLabel

13.6 GroupBoxes and Panels GroupBoxes and Panels Arrange controls on a GUI Used to group similar functionality that a related Primary difference between these two controls: GroupBoxes can display a caption (i.e., text) and do not include scrollbars Panels can include scrollbars and do not include a caption

Look-and-Feel Observation 13.4 Panels and GroupBoxes can contain other Panels and GroupBoxes for more complex layouts.

Fig. 13.21 | GroupBox properties.

Fig. 13.22 | Panel properties.

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.

Look-and-Feel Observation 13.6 Use Panels with scrollbars to avoid cluttering a GUI and to reduce the GUI’s size.

Fig. 13.23 | Creating a Panel with scrollbars. Control inside Panel Panel Scrollbars Panel Panel resized Fig. 13.23 | Creating a Panel with scrollbars.

Outline (1 of 2) The click event handler for hiButton GroupboxPanelExamp leForm.cs (1 of 2) The click event handler for hiButton Change messageLabel’s text The click event handler for byeButton Change messageLabel’s text

Outline The click event handler for leftButton Change messageLabel’s text The click event handler for rightButton GroupboxPanelExamp leForm.cs (2 of 2) Change messageLabel’s text

13.7 CheckBoxes and RadioButtons C# has two types of state buttons CheckBoxes Small squares that either is blank or contains a check mark Any number of CheckBoxes can be selected at a time Font styles can be combined via bitwise operators RadioButtons Only one can be selected at a time Selecting one RadioButton in the group forces all the others to be deselected. RadioButtons represents a set of mutually exclusive options

Fig. 13.25 | CheckBox properties and events.

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

The event handler for italicCheckBox when user checks or unchecks Outline CheckBoxTestForm .cs (2 of 2) Italicize the font of outputLabel if not done so already and vice versa

Look-and-Feel Observation 13.7 Use RadioButtons when the user should choose only one option in a group.

Look-and-Feel Observation 13.8 Use CheckBoxes when the user should be able to choose multiple options in a group.

Fig. 13.27 | RadioButton properties and events.

Software Engineering Observation 13.2 Forms, GroupBoxes, and Panels can act as logical groups for RadioButtons. The RadioButtons within each group are mutually exclusive to each other, but not to RadioButtons in different logical groups.

Outline (1 of 7) Variables to determine how MessageBox will look like 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

Outline Determine which buttons the user selected and store information in buttonType RadioButtonsTest Form.cs (2 of 7) Determine which icon the user selected and store information in iconType

Outline RadioButtonsTest Form.cs (3 of 7) Determine which icon the user selected and store information in iconType

Outline The click event handler for displayButton (4 of 7) RadioButtonsTest Form.cs (4 of 7) Display customized MessageBox

Outline Test to see which button was pressed and change displayLabel’s text accordingly RadioButtonsTest Form.cs (5 of 7)

Outline (6 of 7) RadioButtonsTest Form.cs (a) (b) (d) OK button type (c) OKCancel button type (d) OK button type (e) AbortRetryIgnore button type (f) YesNoCancel button type

Outline (7 of 7) RadioButtonsTest Form.cs (g) YesNo button type (h) RetryCancel button type RadioButtonsTest Form.cs (7 of 7)

13.8 PictureBoxes PictureBoxes Display an image

Fig. 13.29 | PictureBox properties and event.

Outline PictureBoxTestForm .cs (1 of 2) Assign an image to the imagePictureBox given the specified directory

Outline (a) (b) PictureBoxTestForm .cs (2 of 2) (c)

13.9 ToolTips ToolTips Helpful text that appears when the mouse hovers over an item

Fig. 13.31 | ToolTip properties and events.

Outline ToolTipExampleForm .cs (a) (b)

Fig. 13.33 | Demonstrating the component tray. ToolTip in component tray Fig. 13.33 | Demonstrating the component tray.

Fig. 13.34 | Setting a control’s tool tip text. Property to set tool tip text Tool tip text Fig. 13.34 | Setting a control’s tool tip text.

13.10 NumericUpDown Control 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

Fig. 13.35 | NumericUpDown properties and event.

Outline interestCalculator Form.cs (1 of 2) Retrieve, convert, and assign principalTextBox, InterestTextBox, and yearUpDown’s values

Outline (2 of 2) Calculate interest and format it as a String interestCalculator Form.cs (2 of 2) Calculate interest and format it as a String Output results in displayTextBox number of years Click to increase NumericalUpDown control number of years Click to decrease

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

Fig. 13.37 | Mouse events and event arguments. (Part 1 of 2.)

Fig. 13.37 | Mouse events and event arguments. (Part 2 of 2.)

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

Outline (1 of 2) Paint on the Form when mouse is being pressed PainterForm.cs (1 of 2) Paint on the Form when mouse is being pressed

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

Fig. 13.39 | Keyboard events and event arguments. (Part 1 of 2.)

Fig. 13.39 | Keyboard events and event arguments. (Part 2 of 2.)

Outline KeyDemoForm.cs (1 of 3) Property that returns the ASCII character for the key pressed

Outline Return the key code for the key as a value from the Keys enumerations KeyDemoForm.cs (2 of 3) Returns the key code for a key combined with modifier information as a Key value Returns key code as an int Reset labels

Outline (3 of 3) KeyDemoForm.cs (a) H pressed (b) F12 pressed (c) $ pressed (d) Enter pressed