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

2.  2007 Pearson Education, Inc. All rights reserved. 2...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. — Apple Computer, Inc. All the better to see you with, my dear. — The Big Bad Wolf to Little Red Riding Hood...the wisest prophets make sure of the event first. — Horace Walpole

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

4.  2007 Pearson Education, Inc. All rights reserved. 4 13.1Introduction 13.2Windows Forms 13.3Event Handling 13.3.1A 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.4Control Properties and Layout 13.5 Label s, TextBox es and Buttons

5.  2007 Pearson Education, Inc. All rights reserved. 5 13.6 GroupBox es and Panel s 13.7 CheckBox es and RadioButton s 13.8 PictureBox es 13.9 ToolTip s 13.10 NumericUpDown Control 13.11Mouse-Event Handling 13.12Keyboard-Event Handling 13.13Wrap-Up

6.  2007 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.  2007 Pearson Education, Inc. All rights reserved. 7 Look-and-Feel Observation 13.1 Consistent user interfaces enable a user to learn new applications faster because the applications have the same look-and-feel.

8.  2007 Pearson Education, Inc. All rights reserved. 8 Fig. 13.1 | GUI controls in an Internet Explorer window.

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

10.  2007 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.  2007 Pearson Education, Inc. All rights reserved. 11 Fig. 13.3 | Components and controls for Windows Forms.

12.  2007 Pearson Education, Inc. All rights reserved. 12 Fig. 13.4 | Common Form properties, methods and an event. (Part 1 of 2.)

13.  2007 Pearson Education, Inc. All rights reserved. 13 Fig. 13.4 | Common Form properties, methods and an event. (Part 2 of 2.)

14.  2007 Pearson Education, Inc. All rights reserved. 14 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

15.  2007 Pearson Education, Inc. All rights reserved. 15 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) There are naming conventions for variable names of controls and components – In most cases, there is a three letter prefix depending on its type By convention, VB names the event-handler method as controlName_eventName (e.g., btnClickMe_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

16.  2007 Pearson Education, Inc. All rights reserved. 16 Outline FrmSimpleEvent Example.vb The click event handler for btnClickMe Let user know that btnClickMe was clicked by displaying MessageBox

17.  2007 Pearson Education, Inc. All rights reserved. 17 Software Engineering Observation 13.1 Event handlers do not return values—they are designed to execute code based on an action and return control to the main program.

18.  2007 Pearson Education, Inc. All rights reserved. 18 Good Programming Practice 13.1 Use the event-handler naming convention controlName_eventName so that your method names will be 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.

19.  2007 Pearson Education, Inc. All rights reserved. 19 13.3.2 Another Look at the Visual Studio Generated Code Visual Studio Generated Code – The auto-generated code is saved in the Designer.vb file of the Form Partial class – By default, all variable declarations for controls created through Visual Basic have a Friend access modifier – The code also includes Dispose and InitializeComponent

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

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

22.  2007 Pearson Education, Inc. All rights reserved. 22 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 make an application function incorrectly. You should modify control properties through the Properties window.

23.  2007 Pearson Education, Inc. All rights reserved. 23 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 Handles clause - “Register” your event handler as the method to call in response to an event

24.  2007 Pearson Education, Inc. All rights reserved. 24 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)

25.  2007 Pearson Education, Inc. All rights reserved. 25 Fig. 13.8 | Viewing events for a Button control in the Properties window.

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

27.  2007 Pearson Education, Inc. All rights reserved. 27 Fig. 13.9 | List of Button events.

28.  2007 Pearson Education, Inc. All rights reserved. 28 Fig. 13.10 | Click event details.

29.  2007 Pearson Education, Inc. All rights reserved. 29 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

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

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

32.  2007 Pearson Education, Inc. All rights reserved. 32 Fig. 13.12 | Manipulating the Anchor property of a control.

33.  2007 Pearson Education, Inc. All rights reserved. 33 Fig. 13.13 | Anchoring demonstration.

34.  2007 Pearson Education, Inc. All rights reserved. 34 Fig. 13.14 | Docking a Button to the top of a Form.

35.  2007 Pearson Education, Inc. All rights reserved. 35 Fig. 13.15 | Control layout properties.

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

37.  2007 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.  2007 Pearson Education, Inc. All rights reserved. 38 Fig. 13.16 | Snap lines in Visual Studio 2005.

39.  2007 Pearson Education, Inc. All rights reserved. 39 Fig. 13.17 | Common Label properties.

40.  2007 Pearson Education, Inc. All rights reserved. 40 Fig. 13.18 | TextBox properties and an event. (Part 1 of 2.)

41.  2007 Pearson Education, Inc. All rights reserved. 41 Fig. 13.18 | TextBox properties and an event. (Part 2 of 2.)

42.  2007 Pearson Education, Inc. All rights reserved. 42 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.

43.  2007 Pearson Education, Inc. All rights reserved. 43 Fig. 13.19 | Button properties and an event.

44.  2007 Pearson Education, Inc. All rights reserved. 44 Outline FrmLabelTextBox ButtonTest.vb The click event handler for btnDisplayPassword Display the password protected text in lblDisplayPassword

45.  2007 Pearson Education, Inc. All rights reserved. 45 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

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

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

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

49.  2007 Pearson Education, Inc. All rights reserved. 49 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 can then be anchored or docked inside a Form. This divides controls into functional “groups” that can be arranged easily.

50.  2007 Pearson Education, Inc. All rights reserved. 50 Fig. 13.23 | Creating a Panel with scrollbars.

51.  2007 Pearson Education, Inc. All rights reserved. 51 Outline FrmGroupboxPanel Example.vb (1 of 2 ) The click event handler for btnHi The click event handler for btnBye Change lblMessage ’s text Change lblmessage ’s text The click event handler for btnLeft Change lblmessage ’s text The click event handler for btnRight Change lblmessage ’s text

52.  2007 Pearson Education, Inc. All rights reserved. 52 Outline FrmGroupboxPanel Example.vb (2 of 2 )

53.  2007 Pearson Education, Inc. All rights reserved. 53 13.7 CheckBox es and RadioButton s Visual Basic 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.  2007 Pearson Education, Inc. All rights reserved. 54 Fig. 13.25 | CheckBox properties and events. (Part 1 of 2.)

55.  2007 Pearson Education, Inc. All rights reserved. 55 Fig. 13.25 | CheckBox properties and events. (Part 2 of 2.)

56.  2007 Pearson Education, Inc. All rights reserved. 56 Outline FrmCheckBoxTest. vb (1 of 2 ) The event handler for chkBold when user checks or unchecks Bold the font of lblOutput if not done so already and vice versa The event handler for chkItalic when user checks or unchecks Italicize the font of lblOutput if not done so already and vice versa

57.  2007 Pearson Education, Inc. All rights reserved. 57 Outline FrmCheckBoxTest. vb (2 of 2 )

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

59.  2007 Pearson Education, Inc. All rights reserved. 59 Look-and-Feel Observation 13.7 Use CheckBox es when the user should be able to choose multiple options (or no options at all) in a group.

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

61.  2007 Pearson Education, Inc. All rights reserved. 61 Fig. 13.27 | RadioButton properties and an event.

62.  2007 Pearson Education, Inc. All rights reserved. 62 Outline FrmRadioButtons Test.vb (1 of 6 ) Variables to determine how MessageBox will look like Determine which buttons the user selected and store information in buttonType

63.  2007 Pearson Education, Inc. All rights reserved. 63 Outline FrmRadioButtons Test.vb (2 of 6 ) Determine which buttons the user selected and store information in buttonType Determine which icon the user selected and store information in iconType

64.  2007 Pearson Education, Inc. All rights reserved. 64 Outline FrmRadioButtons Test.vb (3 of 6 ) Determine which icon the user selected and store information in iconType

65.  2007 Pearson Education, Inc. All rights reserved. 65 Outline FrmRadioButtons Test.vb (4 of 6 ) Determine which icon the user selected and store information in iconType Display customized MessageBox

66.  2007 Pearson Education, Inc. All rights reserved. 66 Outline FrmRadioButtons Test.vb (5 of 6 ) Test to see which button was pressed and change lblDisplay ’s text accordingly

67.  2007 Pearson Education, Inc. All rights reserved. 67 Outline FrmRadioButtons Test.vb (6 of 6 )

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

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

70.  2007 Pearson Education, Inc. All rights reserved. 70 Outline FrmPictureBox Test.vb (1 of 2 ) Assign an image to the picImage given the specified directory

71.  2007 Pearson Education, Inc. All rights reserved. 71 Outline FrmPictureBox Test.vb (2 of 2 )

72.  2007 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.  2007 Pearson Education, Inc. All rights reserved. 73 Fig. 13.31 | ToolTip properties and an event.

74.  2007 Pearson Education, Inc. All rights reserved. 74 Outline FrmToolTip Example.vb

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

76.  2007 Pearson Education, Inc. All rights reserved. 76 Fig. 13.34 | Setting a control’s tool tip text.

77.  2007 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.  2007 Pearson Education, Inc. All rights reserved. 78 Fig. 13.35 | NumericUpDown properties and an event.

79.  2007 Pearson Education, Inc. All rights reserved. 79 Outline FrmInterest Calculator.vb (1 of 2 ) Retrieve, convert, and assign principalTextBox, interestTextBox, and yearUpDown ’s values Calculate interest Output results in txtDisplay

80.  2007 Pearson Education, Inc. All rights reserved. 80 Outline FrmInterest Calculator.vb (2 of 2 )

81.  2007 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.  2007 Pearson Education, Inc. All rights reserved. 82 Fig. 13.37 | Mouse events and event arguments.

83.  2007 Pearson Education, Inc. All rights reserved. 83 Outline FrmPainter.vb (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

84.  2007 Pearson Education, Inc. All rights reserved. 84 Outline FrmPainter.vb (2 of 2 ) Paint on the Form when mouse is being pressed

85.  2007 Pearson Education, Inc. All rights reserved. 85 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

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

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

88.  2007 Pearson Education, Inc. All rights reserved. 88 Outline FrmKeyDemo.vb (1 of 3 ) Return the ASCII character for the key pressed

89.  2007 Pearson Education, Inc. All rights reserved. 89 Outline FrmKeyDemo.vb (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 and then convert it to a String Returns key code as an Integer and convert to a String

90.  2007 Pearson Education, Inc. All rights reserved. 90 Outline FrmKeyDemo.vb (3 of 3 )

91.  2007 Pearson Education, Inc. All rights reserved. 91 Software Engineering Observation 13.3 To make a control react when a particular key is pressed (such as Enter), handle a key event for that control and test for the pressed key. To allow a Button to be clicked when the user presses the Enter key on a Form, set the Form ’s AcceptButton property.