Chapter 12 - Graphical User Interface Concepts.. Part 1 PDF

Preview

Summary

Graphical User Interface Concepts 1...

Description

12 Graphical User Interface Concepts: Part 1 Objectives • To understand the design principles of graphical user interfaces. • To be able to use events. • To understand namespaces that contain graphical user interface components and event-handling classes. • To be able to create graphical user interfaces. • To be able to create and manipulate buttons, labels, lists, textboxes and panels. • To be able to use mouse and keyboard events. … 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

476

Graphical User Interface Concepts: Part 1

Chapter 12

Outline 12.1

Introduction

12.2

Windows Forms

12.3

Event-Handling Model

12.4

Control Properties and Layout

12.5

12.8

Labels, TextBoxes and Buttons GroupBoxes and Panels CheckBoxes and RadioButtons PictureBoxes

12.9

Mouse-Event Handling

12.6 12.7

12.10 Keyboard-Event Handling Summary • Terminology • Self-Review Exercises • Answers to Self-Review Exercises • Exercises

12.1 Introduction A graphical user interface (GUI) allows a user to interact visually with a program. A GUI (pronounced “GOO-ee”) gives a program a distinctive “look” and “feel.” By providing different applications with a consistent set of intuitive user-interface components, GUIs enable users to spend less time trying to remember which keystroke sequences perform what functions, freeing up time that can be spent using the program in a productive manner. Look-and-Feel Observation 12.1 Consistent user interfaces enable a user to learn new applications more quickly.

12.1

As an example of a GUI, Fig. 12.1 depicts an Internet Explorer window in which various GUI components have been labeled. Near the top of the window, there is a menu bar containing menus, including File, Edit, View, Favorites, Tools and Help. Below the menu bar is a set of buttons, each of which has a defined task in Internet Explorer. Below these buttons lies a textbox, in which users can type the locations of World Wide Web sites that they wish to visit. To the left of the textbox is a label that indicates the textbox’s purpose. Scrollbars are situated on the far right and bottom of the window. Usually, scrollbars are employed when a window contains more information than can be displayed in the window’s viewable area. By clicking the scrollbars, the user can view different portions of the window. These components form a user-friendly interface through which the user interacts with the Internet Explorer Web browser. GUIs are built from GUI components (which are sometimes called controls or widgets—short for window gadgets). A GUI component is an object with which the user interacts via the mouse or keyboard. Several common GUI components are listed in Fig. 12.2. In the sections that follow, we discuss each of these GUI components in detail. The next chapter explores the features and properties of more advanced GUI components.

Chapter 12

Label

Fig. 12.1

Graphical User Interface Concepts: Part 1

Button

Menu

Menu bar

Textbox

477

Scrollbars

GUI components in a sample Internet Explorer window.

Component

Description

Label

An area in which icons or uneditable text is displayed.

Textbox

An area in which the user inputs data from the keyboard. This area also can display information.

Button

An area that triggers an event when clicked.

CheckBox

A component that is either selected or unselected.

ComboBox

A drop-down list of items from which the user can make a selection either by clicking an item in the list or by typing into a box.

ListBox

An area in which a list of items is displayed. The user can make a selection from the list by clicking on any item. Multiple elements can be selected.

Panel

A container in which components can be placed.

Scrollbar

A component that allows the user to access a range of elements that normally cannot fit in the control’s container.

Fig. 12.2

Some basic GUI components.

478

Graphical User Interface Concepts: Part 1

Chapter 12

12.2 Windows Forms Windows Forms (also called WinForms) are used to create the GUIs for programs. A form is a graphical element that appears on the desktop; it can be a dialog, a window or an MDI window (multiple document interface window, discussed in Chapter 13, Graphical User Interfaces Concepts: Part 2). A component is an instance of a class that implements the IComponent interface, which defines the behaviors that components must implement. A control, such as a button or label, is a component that has a graphical representation at runtime. Controls are visible, whereas components that lack the graphical representation (e.g., class Timer of namespace System.Windows.Forms, see Chapter 13) are not. Figure 12.3 displays the Windows Forms controls and components that are contained in the Toolbox. The first two screenshots show the controls, and the last screenshot shows the components. To add a component or control to a Windows Form, a user selects that component or control from the Toolbox and drags it onto the Windows Form. Note that the Pointer (the icon at the top of the list) is not a component; rather it allows the programmer to use the mouse pointer and does not add an item to the form. In this chapter and the next, we discuss many of these controls.

Fig. 12.3

Components and controls for Windows Forms.

Chapter 12

Graphical User Interface Concepts: Part 1

479

In a series of windows, the active window is the frontmost window and has a highlighted title bar. A window becomes the active window when the user clicks somewhere inside it. During interaction with windows, the active Window is said to have the focus. The form acts as a container for components and controls. As we saw in Chapter 4, Control Structures: Part 1, when we drag a control from the Toolbox onto the form, Visual Studio .NET generates this code for us, instantiating the component and setting its basic properties. Although we could write the code ourselves, it is much easier to create and modify controls using the Toolbox and Properties windows and allow Visual Studio .NET to handle the details. We introduced basic concepts relating to this kind of visual programming earlier in the book. In this chapter and the next, we use visual programming to build much richer and more complex GUIs. When the user interacts with a control via the mouse or keyboard, events (discussed in Section 12.3) 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. Events are used most commonly used to signal user interactions with GUI components, but also can signal internal actions in a program. For example, clicking the OK button in a MessageBox generates an event. The MessageBox handles this event. The MessageBox component is designed to close when the event is handled, which occurs when the OK button is clicked. Section 12.3 describes how to design components so that they react differently to various types of events. Each class we present in this chapter (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. The general design process for creating Windows applications requires generating a Windows Form, setting its properties, adding controls, setting their properties and implementing the event handlers (methods that are called in response to an event). Figure 12.4 lists common Form properties, methods and events. Form Properties and Events

Description / Delegate and Event Arguments

Common Properties AcceptButton

Button that is clicked when Enter is pressed.

AutoScroll

Boolean value that allows or disallows scrollbars to appear when needed.

CancelButton

Button that is clicked when the Escape key is pressed.

FormBorderStyle

Border style for the form (e.g., none, single, 3D, sizable).

Font

Font of text displayed on the form, and the default font of controls added to the form.

Text

Text in the form’s title bar.

Common Methods Close

Fig. 12.4

Closes a form and releases all resources. A closed form cannot be reopened. Common Form properties, methods and events (part 1 of 2).

480

Graphical User Interface Concepts: Part 1

Chapter 12

Form Properties and Events

Description / Delegate and Event Arguments

Hide

Hides form (does not destroy the form or release its resources).

Show

Displays a hidden form.

Common Events

(Delegate EventHandler, event arguments EventArgs)

Load

Occurs before a form is displayed to the user. The handler for this event is displayed in the editor when the form is double-clicked in the Visual Studio .NET designer.

Fig. 12.4

Common Form properties, methods and events (part 2 of 2).

When we create controls and event handlers, Visual Studio .NET generates a large amount of the GUI–related code. Constructing GUIs can be performed graphically, by dragging and dropping components onto the form and setting properties via the Properties window. In visual programming, the IDE generally maintains GUI-related code and the programmer writes the necessary event handlers.

12.3 Event-Handling Model 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. For example, consider a form that changes color when a button is clicked. Clicking the button generates an event and passes it to the button’s event handler, causing the event-handler code to change the form’s color. Events are based on the notion of delegates, which are objects that reference methods (see Section 10.11). Event delegates are multicast (class MulticastDelegate), which means that they represent a set of delegates with the same signature. Multicast delegates enable event calls to be sent sequentially to all delegates contained within the multicast delegate. To learn more about delegates, see Chapter 10, Object-Oriented Programming: Polymorphism. In the event-handling model, delegates act as intermediaries between the objects creating (raising) events and the methods handling the events (Fig. 12.5).

call Object A generates event E

calls Delegate for event E

Handler 1 for event E Handler 2 for event E Handler 3 for event E

Fig. 12.5

Event-handling model using delegates.

Chapter 12

Graphical User Interface Concepts: Part 1

481

Delegates enable classes to specify methods that will not be named or implemented until the class is instantiated. This is extremely helpful in creating event handlers. For example, the creator of the Form class does not need to name or define the method that will handle the Click event. Using delegates, the class can specify when such an event handler would be called. Programmers who create their own forms can then name and define this event handler. As long as the event handler has been registered with the proper delegate, the method will be called at the proper time. Once an event is generated, the system calls every method (event handler) referenced by the delegate. Every method in the delegate must have the same signature, because all the methods are being passed the same information. Many situations require handling events generated by .NET controls, such as buttons and scrollbars. These controls already have predefined delegates corresponding to every event they can generate. The programmer creates the event handler and registers it with the delegate; Visual Studio .NET helps automate this task. In the following example, we create a form that displays a message box when clicked. Afterwards, we analyze the event code generated by Visual Studio .NET. Following the steps we outlined in Chapter 4, Control Structures: Part 1, create a Form containing a Label. First, create a new Windows application. Then, select the Label element from the Windows Forms list in the Toolbox window. Drag the Label element over the form to create a label. In the Properties window, set the (Name) property to lblOutput and the Text property to "Click Me!". We have been working in Design mode, which provides a graphical representation of our program. However, Visual Studio .NET has been creating code in the background, and that code can be accessed using the tab for the code or by right-clicking anywhere in the Design window and selecting View Code. To define and register an event handler for lblOutput, the IDE must be displaying the code listing for the Window application. While viewing the code, notice the two drop-down menus above the editor window. (Fig. 12.6). The drop-down menu on the left-hand side, called the Class Name menu, contains a list of all components contained in our Form other than those elements that correspond to the Form base class. The Class Name drop-down menu for our Form should list one Label, named lblOutput. Select this element from the menu. On the right-hand side, the Method Name drop-down menu allows the programmer to access, modify and create event handlers for a component. This drop-down menu lists the events that the object can generate. For the purposes of this exercise, we want the label to respond when clicked. Select the Click event in the Method Name drop-down menu. This creates an empty event handler inside the program code. Private Sub lblOutput_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles lblOutput.Click End Sub

This is the method that is called when the form is clicked. We program the form to respond to the event by displaying a message box. To do this, insert the statement MessageBox.Show("Label was clicked.")

into the event handler. The event handler now should appear as follows:

482

Graphical User Interface Concepts: Part 1

Chapter 12

Private Sub lblOutput_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles lblOutput.Click MessageBox.Show("Label was clicked.") End Sub

Now we can compile and execute the program, which appears in Fig. 12.7. Whenever the label is clicked, a message box appears displaying the text "Label was clicked". In previous examples, we commented out the code generated by the Visual Studio IDE. In this example, we present the complete code listing which we discuss in detail. The Visual Studio .NET IDE generated the code pertaining to the creation and initialization of the application that we built through the GUI design window. The code generated by Visual Studio is contained within #Region and #End Region preprocessor directives (lines 7–69). In Visual Studio, these preprocessor directives allow code to be collapsed into a single line, enabling the programmer to focus on only certain portions of a program at a time. The only code that this example required us to write is the event-handling code (line 75).

Class Name dropdown menu

Fig. 12.6

1 2 3 4 5

Code view

Method Name dropdown menu

Selected event

Events section in the Method Name drop-down menu.

' Fig. 12.7: SimpleEventExample.vb ' Program demonstrating simple event handler. Public Class FrmSimple Inherits System.Windows.Forms.Form

Fig. 12.7

Simple event-handling example using visual programming (part 1 of 3).

Chapter 12

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

Graphical User Interface Concepts: Part 1

483

#Region " Windows Form Designer generated code "

Fig. 12.7

Public Sub New() MyBase.New() ' This call is required by the Windows Form Designer. InitializeComponent() ' Add any initialization after the ' InitializeComponent() call End Sub ' Form overrides dispose to clean up the component list. Protected Overloads Overrides Sub Dispose( _ ByVal disposing As Boolean) If disposing Then If Not (components Is Nothing) Then components.Dispose() End If End If MyBase.Dispose(disposing) End Sub Friend WithEvents lblOutput As System.Windows.Forms.Label ' Required by the Windows Form Designer Private components As System.ComponentModel.Container ' NOTE: The following procedure is required by ' the Windows Form Designer. ' It can be modified using the Windows Form Designer. ' Do not modify it using the code editor. _ Private Sub InitializeComponent() Me.lblOutput = New System.Windows.Forms.Label() Me.SuspendLayout() ' 'lblOutput ' Me.lblOutput.Location = New System.Drawing.Point(32, 48) Me.lblOutput.Name = "lblOutput" Me.lblOutput.Size = New System.Drawing.Size(168, 40) Me.lblOutput.TabIndex = 0 Me.lblOutput.Text = "Click Me!" ' 'FrmSimple ' Simple event-handling example using visual programming (part 2 of 3).

484

59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

Graphical User Interface Concepts: Part 1

Chapter 12

Me.AutoScaleBaseSize = New System.Drawing.Size(5, 13) Me.ClientSize = New System.Drawing.Size(272, 237) Me.Controls.AddRange( _ New System.Windows.Forms.Control() {Me.lblOutput}) Me.Name = "FrmSimple" Me.Text = "SimpleEventExample" Me.ResumeLayout(False) End Sub #End Region ' handler for click event on lblOutput Private Sub lblOutput_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles lblOutput.Click MessageBox.Show("Label was clicked") End Sub ' lblOutput_Click End Class ' FrmSimpleExample

Fig. 12.7

Simple event-handling example using visual programming (part 3 of 3).

The Visual Studio-generated code contains all references to the controls that we created through the GUI design window (in this case, lblOutput), the non-parameterized constructor (lines 9–18), the destructor (lines 21–33) and the initialization code for each of the controls (lines 44–67). The initialization code corresponds to the changes made to the Properties window for each control. Note that as we have learned in previous chapters, Visual Studio .NET adds comments to the code that it generates. The comments appear throughout the code, such as in lines 40–43. To make programs more concise and readable, we remove some of these generated comments in future examples, leaving only those comments that pertain to new concepts. Lines 9–18 define the constructor. Because class FrmSimpleExample inherits from System.Windows.Forms.Form, line 10 of the default constructor calls the base-class constructor. This allows the base-class constructor to perform initialization before cla...