Graphical User Interface Concepts: Part I

1. 13 • Graphical User Interface Concepts: Part I

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 1Apple Computer, Inc. 1985 • All the better to see you with my dear. • The Big Bad Wolf to Little Red Riding Hood

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

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

5. 13.9   ToolTips • 13.10   NumericUpDownControl • 13.11   Mouse-Event Handling • 13.12   Keyboard-Event Handling • 13.13   Wrap-Up

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. 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. Menu bar Label Button Menu Title bar Combobox Scrollbar Fig. 13.1 | GUI controls in an Internet Explorer window.

9. Fig. 13.2 | Some basicGUI controls.

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. Display all controls and components Categories that organize controls and components by functionality Fig. 13.3 | Components and controls for Windows Forms.

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

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. 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. Outline Inherits from Form SimpleEventExampleForm.cs Visual Studio generated InitializeComponent The click event handler for clickButton Let user know that clickButton was clicked by displaying MessageBox

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. 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. 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. Fig. 13.6 | First half of the Visual Studio generated code file.

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

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. 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. 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. Properties icon Events icon Selected events Fig. 13.8 | Viewing events for a Button control in the Properties window.

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. Class name List of events Fig. 13.9 | List ofButtonevents.

27. Event name Event type Event argument class Fig. 13.10 | Clickevent details.

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. Fig. 13.11 | Class Control properties and methods.(Part 1 of 2)

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

31. Anchoring window Click down-arrow in Anchor property to display 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 theAnchorproperty of a control.

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

33. After resizing Before resizing Control extends along entire top portion of form Fig. 13.14 | Docking aButtonto the top of aForm.

34. Fig. 13.15 | Control layout properties.

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

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

37. 13.5 Labels, TextBoxesand Buttons • Labels • 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 • PasswordTextBoxes hides information entered by user • Buttons • Control that user clicks to trigger specific action • There are several types of buttons, such as checkboxes and radiobuttons • All buttons derive from class ButtonBase

38. Fig. 13.17 | Common Label properties.

39. Fig. 13.18 | TextBox properties and events.

40. Fig. 13.19| Button properties and event.

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

42. Outline LabelTextBoxButtonTestForm.cs (1 of 2)

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

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

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

46. Fig. 13.21 | GroupBox properties.

47. Fig. 13.22 | Panel properties.

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. Look-and-Feel Observation 13.6 • Use Panels with scrollbars to avoid cluttering a GUI and to reduce the GUI’s size.

50. Control inside Panel Panel PanelScrollbars Panelresized Fig. 13.23 | Creating aPanelwith scrollbars.