Chapter 12- GUI Concepts I. 12.1Introduction 12.2 Windows Forms 12.3 Event-Handling Model 12.3.1...

Chapter 12Chapter 12--GUI Concepts IGUI Concepts I

12.1 Introduction12.2 Windows Forms12.3 Event-Handling Model

12.3.1 Basic Event Handling12.4 Control Properties and Layout12.5 Labels, TextBoxes and Buttons12.6 GroupBoxes and Panels12.7 CheckBoxes and RadioButtons12.8 PictureBoxes12.9 Mouse-Event Handling12.10 Keyboard-Event Handling

Outline

12.1 Introduction

• GUI– Graphical User Interface

• Allows visual interaction• Event driven

– User interaction generates events

• Distinctive “look” and “feel”• Learn new applications more quickly

12.1 Introduction

12.1 Introduction• GUI Components

– Objects with which user interacts• Event generation

– Contained in Toolbox• Control

– Visible by graphical representation at runtime. – ex: Label control.

• Component– Are not visible during runtime. – ex: Timer componentTimer component

12.1 IntroductionComponent Description Label An area in which icons or uneditable text can be 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 not selected.

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 element. 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 values that normally cannot fit in the controller’s container.

Fig. 12.2 Some basic GUI components.

Fig. 12.2 Some basic GUI components.

12.2 Windows Forms

• Form– Acts as a container for components and controls.– Graphical element used to create GUIs.– A form is a graphical element that appears on the

desktop : it can be a dialog or a window. – Click and drag component from Toolbox

• Code generated– Component is instantiated– Basic properties are set

Controls• Windows Forms contains a variety of controls that you Windows Forms contains a variety of controls that you

can place on forms.can place on forms.

• A control is an object that can be drawn on to the Form A control is an object that can be drawn on to the Form to enable or enhance user interaction with the to enable or enhance user interaction with the application.application.

• TextBoxes, Buttons, Labels, Radio Buttons, etc. All these TextBoxes, Buttons, Labels, Radio Buttons, etc. All these Windows Controls are based on the Windows Controls are based on the Control Control classclass, the base class for all controls. , the base class for all controls.

12.2 Windows Forms

12.2 Windows Forms

Fig. 12.3 Components and controls for Windows Forms.

The distance from the left border to the right border of a control is referred to as its Width property. In the same way, the distance from the top to the bottom borders of a control is its Height value. This can be illustrated as follows:

Control’s Dimensions:

12.2 Windows Forms

Control’s Dimensions:

12.2 Windows Forms

• When the user interacts with a control via the mouse or keyboard, events 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.

12.2 Windows Forms

• Each class we present (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.

12.2 Windows Forms

12.2 Windows FormsForm Properties and Events Description / Delegate and Event Arguments

Common Properties AutoScroll Boolean value that allows or disallows the use of scrollbars to

appear when needed.

FormBorderStyle Border of 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 Closes a form and releases all resources. A closed form cannot be

reopened.

Hide Hides form (does not release resources).

Show Displays a hidden form.

Common Events (Delegate EventHandler, event arguments EventArgs)

Load Occurs before a form is shown. This event is the default when the form is double-clicked in the Visual Studio .NET designer.

Fig. 12.4 Common Form properties and events.

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

12.3 Event-Handling Model

• For example suppose we want the label lblOutput to respond when clicked by showing a message box with the statement Label was clicked.

Private Sub lblOutput_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles lblOutput.Click

MessageBox.Show("Label was clicked.")End Sub

• An event is a message sent by an object announcing that something has happened.

• When events occurs, information is passed to Event handlers ( Here it is lblOutput.Click).


• Events are implemented using delegates, which are objects that can call the methods of other objects for you.

• Whenever you create or use an event in code, you are using its delegate.

• When the event is thrown, the framework examines the delegate behind the event and then calls the function that the delegate points to.


• So, Delegates are form of object-oriented function pointer that allows a function to be invoked indirectly by way of a reference to the function.

• They act as an intermediate between an object that generates the event and the event handler.

• The inclusion of multiple handlers for one event is called event multicasting.


Object A creates event E Delegate for event E

Handler 1 for event E



calls

calls

• Once event is generated, system calls every method (Event Handler) referenced by the delegate, every method in delegate must have same signature since all methods are passed same information.

• Controls have already predefined delegates corresponding to every event they generate.


In general, the format of the event-handling method is:

Private Sub ControlName_EventName(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles ControlName.EventName event-handling codeEnd Sub

• where the name of the event handler is, by default, the name of the control, followed by an underscore (_) and the name of the event.


Event handlers take two arguments:1. An Object (usually sender) : A reference to

the object that generated the event.

2. An event arguments object (e) : An instance of type EventArgs. Class EventArgs is the base class for objects that contain event information.



Fig. 12.6 Events section of the Properties window.


Fig. 12.8 List of Form events.

12.4 Control Properties and LayoutClass Control Properties and Methods

Description

Common Properties BackColor Sets the background color of the control.

BackgroundImage Sets the background image of the control.

Enabled Indicates whether the control is enabled (i.e., if the user can interact with it). A disabled control will still be displayed, but portions of the control will appear in gray.

Focused Indicates whether a control has the focus.

Font Sets the Font to use in Text property of control.

ForeColor Sets the foreground color of the control. This is usually the color of the Text property.

TabIndex Sets the tab order of the control. When the Tab key is pressed, the focus is moved to various controls according to the tab order. This order can be set by the programmer.

TabStop Indicates whether user can employ the Tab key to select the control. If True, then this feature is enabled.

Text Sets the text associated with the control. The location and appearance varies depending on the type of control.

TextAlign Establishes the alignment of the text on the control—possibilities are one of three horizontal positions (left, center or right) and one of three vertical positions (top, middle or bottom).

Visible Indicates whether the control is visible.

Common Methods Focus Transfers the focus to the control.

Hide Hides the control (sets Visible to False).

Show Shows the control (sets Visible to True).

Fig. 12.10 Class Control properties and methods.

The appearance Text property can vary depending on the context. For example, the text of a Windows Form is its titlebar, but the text of a button appears on its face.

12.4 Control Properties and Layout• Method Focus

– Transfers focus to control• Active control• Tap index

• Method Hide– Hides control

• Visible property is false

• Method Show– Shows control

• Visible property is true

12.4 Control Properties and Layout

• Anchoring– Specifying layout of controls within container.– Controls remain fixed distances from inside of

container.

• Docking– Sets dimensions of control to dimensions of

container at all times.

Fig. 12.11 Anchoring demonstration.


Fig. 12.12 Manipulating the Anchor property of a control.


Fig. 12.13 Docking demonstration.


Common Layout Properties

Description

Anchor Attaches control to the side of parent container. Used during resizing. Possible values include top, left and right.

Dock Allows controls to extend themselves along the sides of their containers—values cannot be combined.

DockPadding (for containers)

Sets the dock spacing for controls inside the container. Default is zero, causing controls to appear flush with the side of the container.

Location Specifies the location of the upper-left corner of the control, in relation to its container.

Size Specifies the size of the control. Takes a Size structure, which has properties Height and Width.

MinimumSize, MaximumSize (for Windows Forms)

Indicates the minimum and maximum size of the form.

Fig. 12.14 Control layout properties.

Fig. 12.14 Control layout properties.


12.5 Labels, TextBoxes and Buttons

• Label– Displays read-only text

• Textbox– Displays text– Text input by user

• Button– Click to trigger action

Common Label Properties

Description / Delegate and Event Arguments

Font The font used by the text on the Label.

Text The text that appears on the Label.

TextAlign The alignment of the Label’s text on the control. Possibilities are one of three horizontal positions (left, center or right) and one of three vertical positions (top, middle or bottom).

Fig. 12.15 Common Label properties.

Fig. 12.15 Common Label properties.


TextBox Properties and Events


Common Properties

AcceptsReturn If True, pressing Enter creates a new line (if textbox is configured

to contain multiple lines.) If False, pressing Enter clicks the default button of the form.

Multiline If True, textbox can span multiple lines. The default value is False.

PasswordChar If a character is entered, the TextBox becomes a password box, and the stated character replaces all characters typed. If no character is specified, Textbox displays the typed text.

ReadOnly If True, TextBox has a gray background, and its text cannot be edited. The default value is False.

ScrollBars For multiline textboxes, indicates which scrollbars appear (none, horizontal, vertical or both).

Text Specifies the text to be displayed in the text box.


TextChanged Raised when text changes in TextBox (i.e., when the user adds or deletes characters). When a user double-clicks the TextBox control in design view, an empty event handler for this event is generated.

Fig. 12.16 TextBox properties and events.

Fig. 12.16 TextBox properties and events.


Button properties and events


Common Properties

Text Specifies text displayed on the Button face.


Click Is raised when user clicks the control. When a user double-clicks on the Button control in design view, an empty event handler for this event is generated.

Fig. 12.17 Button properties and events.

Fig. 12.17 Button properties and events.


1. ' Fig. 12.18: LabelTextBoxButtonTest.vb2. ' Using a textbox, label and button to display the hidden3. ' text in a password box.4. 5. Public Class FrmButtonTest 6. ' handles cmdShow_Click events7. Private Sub cmdShow_Click(ByVal sender As System.Object, _8. ByVal e As System.EventArgs) Handles cmdShow.Click9. 10. lblOutput.Text = txtInput.Text11. End Sub ' cmdShow_Click12. 13. End Class ' FrmButtonTest

The label’s text property is setequal to the value of the textbox’s

text property, which was entered by the user

The password character is set by assigning the asterisk character(*) to the PasswordChar property.

12.6 GroupBoxes and Panels

• Groupboxes– Arrange controls on a GUI– Can display captions– Do not include scrollbars

• Panels– Arrange controls on a GUI– Cannot display captions– Include scrollbars


GroupBox Properties Description

Controls Lists the controls that the GroupBox contains.

Text Specifies text displayed on the top portion of the GroupBox (its caption).

Fig. 12.19 GroupBox properties.

Panel Properties Description

AutoScroll Indicates whether scrollbars appear when the Panel is too small to hold its controls. Default is False.

BorderStyle Sets the border of the Panel (default None; other options are Fixed3D and FixedSingle).

Controls Lists the controls that the Panel contains.

Fig. 12.20 Panel properties.

Fig. 12.19 GroupBox properties.

Fig. 12.20 Panel properties.


Fig. 12.21 Creating a Panel with scrollbars.

1 ' Fig. 12.22: GroupBoxPanelExample.vb 2 ' Using GroupBoxes and Panels to hold buttons.3 4 Public Class FrmGroupBox5 6 ' event handlers to change lblMessage7 Private Sub cmdHi_Click(ByVal sender As System.Object, _8 ByVal e As System.EventArgs) Handles cmdHi.Click9 10 lblMessage.Text = "Hi pressed" 11 End Sub ' cmdHi_Click12 13 ' bye button handler14 Private Sub cmdBye_Click(ByVal sender As System.Object, _15 ByVal e As System.EventArgs) Handles cmdBye.Click16 17 lblMessage.Text = "Bye pressed" 18 End Sub ' cmdBye_Click19 20 ' far left button handler21 Private Sub cmdLeft_Click(ByVal sender As System.Object, _22 ByVal e As System.EventArgs) Handles cmdLeft.Click23 24 lblMessage.Text = "Far left pressed"25 End Sub ' cmdLeft_Click

26 ' far right button handler27 Private Sub cmdRight_Click(ByVal sender As System.Object, _28 ByVal e As System.EventArgs) Handles cmdRight.Click29 30 lblMessage.Text = "Far right pressed"31 End Sub ' cmdRight_Click32 33 End Class ' FrmGroupBox

12.7 CheckBoxes and RadioButtons

• State Buttons: has a state of on/off – true/false– CheckBoxes

• Any number can be checked at a time

– RadioButtons• Usually organized in groups and only one checked at a

time


CheckBox events and properties


Common Properties

Checked Indicates whether the CheckBox has been checked.

CheckState Indicates whether the Checkbox is checked (contains a black checkmark) or unchecked (blank). An enumeration with values Checked, Unchecked or Indeterminate.

Text Specifies the text displayed to the right of the CheckBox (called the label).


CheckedChanged Raised every time the Checkbox is either checked or unchecked. When a user double-clicks the CheckBox control in design view, an empty event handler for this event is generated.

CheckStateChanged Raised when the CheckState property changes.

Fig. 12.23 CheckBox properties and events.

Fig. 12.23 CheckBox properties and events.

1 ' Fig. 12.24: CheckBoxTest.vb2 ' Using CheckBoxes to toggle italic and bold styles.3 4 Public Class FrmCheckBox 5 ' use Xor to toggle italic, keep other styles same6 Private Sub chkItalic_CheckedChanged _7 (ByVal sender As System.Object, ByVal e As System.EventArgs) _8 Handles chkItalic.CheckedChanged9 10 lblOutput.Font = New Font(lblOutput.Font.Name, _11 lblOutput.Font.Size, lblOutput.Font.Style _12 Xor FontStyle.Italic)13 End Sub ' chkItalic_CheckedChanged14 15 ' use Xor to toggle bold, keep other styles same16 Private Sub chkBold_CheckedChanged (ByVal sender As System.Object, _17 ByVal e As System.EventArgs) Handles chkBold.CheckedChanged18 19 lblOutput.Font = New Font(lblOutput.Font.Name, _20 lblOutput.Font.Size, lblOutput.Font.Style _21 Xor FontStyle.Bold)22 End Sub ' chkBold_CheckedChanged23 24 End Class ' FrmCheckBox

To enable the font to be changed, the programmer must set the Font property to a Font object.

The Font constructor that we use takes the font name, size and style.

The style is a member of the FontStyle enumeration, which contains the font styles Regular, Bold, Italic, Strikeout and Underline.

Why Xor?• Styles can be combined via bitwise Operator:

operators that perform manipulation on bits.• Assume that FontStyle.Bold is represented by

bits 01 and that FontStyle.Italic is represented by bits 10. When we Or both styles, we obtain the bitset 11.

01 = BoldOr 10 = Italic------------------ 11 = Bold and Italic

• The Or operator is helpful in the creation of style combinations, as long as we do not need to undo the bitwise operation. However, what happens if we want to undo a style combination ?

• The Xor operator enables us to accomplish the Or operator behavior while allowing us to undo compound styles.

Why Xor?

• Assume, again, that FontStyle.Bold is represented by bits 01 and that FontStyle.Italic is represented by bits 10. When we Xor both styles, we obtain the bitset 11.

01 = BoldXor 10 = Italic--------------------- 11 = Bold and Italic

• Now, suppose that we would like to remove the FontStyle.Bold style from the previous combination of FontStyle.Bold and FontStyle.Italic. The easiest way to do so is to reapply the Xor operator to the compound style and FontStyle.Bold.

11 = Bold and ItalicXor 01 = Bold------------------------ 10 = Italic

Why Xor?


RadioButton properties and events


Common Properties

Checked Indicates whether the RadioButton is checked.

Text Specifies the text displayed to the right of the RadioButton (called the label).


Click Raised when user clicks the control.

CheckedChanged Raised every time the RadioButton is checked or unchecked. When a user double-clicks the TextBox control in design view, an empty event handler for this event is generated.

Fig. 12.25 RadioButton properties and events.

Fig. 12.25 RadioButton properties and events.

1 ' Fig. 12.26: RadioButtonTest.vb2 ' Using RadioButtons to set message window options.3 4 Public Class FrmRadioButton5 6 Private iconType As MessageBoxIcon7 Private buttonType As MessageBoxButtons8 9 ' display message box and obtain dialogue button clicked10 Private Sub cmdDisplay_Click(ByVal sender _11 As System.Object, ByVal e As System.EventArgs) _12 Handles cmdDisplay.Click13 14 Dim dialog As DialogResult = MessageBox.Show( _15 "This is Your Custom MessageBox", "VB", buttonType, _16 iconType)17 18 ' check for dialog result and display on label19 Select Case dialog20 21 Case DialogResult.OK22 lblDisplay.Text = "OK was pressed"23 24 Case DialogResult.Cancel25 lblDisplay.Text = "Cancel was pressed"

26 Case DialogResult.Abort27 lblDisplay.Text = "Abort was pressed"28 29 Case DialogResult.Retry30 lblDisplay.Text = "Retry was pressed"31 32 Case DialogResult.Ignore33 lblDisplay.Text = "Ignore was pressed"34 35 Case DialogResult.Yes36 lblDisplay.Text = "Yes was pressed"37 38 Case DialogResult.No39 lblDisplay.Text = "No was pressed"40 End Select41 42 End Sub ' cmdDisplay_Click43 44 ' set button type to OK45 Private Sub radOk_CheckedChanged(ByVal sender _46 As System.Object, ByVal e As System.EventArgs) _47 Handles radOk.CheckedChanged48 49 buttonType = MessageBoxButtons.OK50 End Sub ' radOk_CheckedChanged

51 ' set button type to OkCancel52 Private Sub radOkCancel_CheckedChanged(ByVal sender _53 As System.Object, ByVal e As System.EventArgs) _54 Handles radOkCancel.CheckedChanged55 56 buttonType = MessageBoxButtons.OKCancel57 End Sub ' radOkCancel_CheckedChanged58 59 ' set button type to AbortRetryIgnore60 Private Sub radAbortRetryIgnore_CheckedChanged(ByVal sender _61 As System.Object, ByVal e As System.EventArgs) _62 Handles radAbortRetryIgnore.CheckedChanged63 64 buttonType = MessageBoxButtons.AbortRetryIgnore65 End Sub ' radAbortRetryIgnore_CheckedChanged66 ' set button type to YesNoCancel67 Private Sub radYesNoCancel_CheckedChanged(ByVal sender _68 As System.Object, ByVal e As System.EventArgs) _69 Handles radYesNoCancel.CheckedChanged70 71 buttonType = MessageBoxButtons.YesNoCancel72 End Sub ' radYesNoCancel_CheckedChanged

73 ' set button type to YesNo74 Private Sub radYesNo_CheckedChanged(ByVal sender _75 As System.Object, ByVal e As System.EventArgs) _76 Handles radYesNo.CheckedChanged77 78 buttonType = MessageBoxButtons.YesNo79 End Sub ' radYesNo_CheckedChanged80 81 ' set button type to RetryCancel 82 Private Sub radRetryCancel_CheckedChanged(ByVal sender _83 As System.Object, ByVal e As System.EventArgs) _84 Handles radRetryCancel.CheckedChanged85 86 buttonType = MessageBoxButtons.RetryCancel87 End Sub ' radRetryCancel_CheckedChanged88 89 ' set icon type to Asterisk when Asterisk checked90 Private Sub radAsterisk_CheckedChanged(ByVal sender _91 As System.Object, ByVal e As System.EventArgs) _92 Handles radAsterisk.CheckedChanged93 94 iconType = MessageBoxIcon.Asterisk95 End Sub ' radAsterisk_CheckedChanged96

97 ' set icon type to Error when Error checked98 Private Sub radError_CheckedChanged(ByVal sender _99 As System.Object, ByVal e As System.EventArgs) _100 Handles radError.CheckedChanged101 102 iconType = MessageBoxIcon.Error103 End Sub ' radError_CheckedChanged104 105 ' set icon type to Exclamation when Exclamation checked106 Private Sub radExclamation_CheckedChanged(ByVal sender _107 As System.Object, ByVal e As System.EventArgs) _108 Handles radExclamation.CheckedChanged109 110 iconType = MessageBoxIcon.Exclamation111 End Sub ' radExclamation_CheckedChanged112 113 ' set icon type to Hand when Hand checked114 Private Sub radHand_CheckedChanged(ByVal sender _115 As System.Object, ByVal e As System.EventArgs) _116 Handles radHand.CheckedChanged117 118 iconType = MessageBoxIcon.Hand119 End Sub ' radHand_CheckedChanged

120 ' set icon type to Information when Information checked121 Private Sub radInformation_CheckedChanged(ByVal sender _122 As System.Object, ByVal e As System.EventArgs) _123 Handles radInformation.CheckedChanged124 125 iconType = MessageBoxIcon.Information126 End Sub ' radInformation_CheckedChanged127128 ' set icon type to Question when Question checked129 Private Sub radQuestion_CheckedChanged(ByVal sender _130 As System.Object, ByVal e As System.EventArgs) _131 Handles radQuestion.CheckedChanged132 133 iconType = MessageBoxIcon.Question134 End Sub ' radQuestion_CheckedChanged135 136 ' set icon type to Stop when Stop checked137 Private Sub radStop_CheckedChanged(ByVal sender _138 As System.Object, ByVal e As System.EventArgs) _139 Handles radStop.CheckedChanged140 141 iconType = MessageBoxIcon.Stop142 End Sub ' radStop_CheckedChanged143

144 ' set icon type to Warning when Warning checked145 Private Sub radWarning_CheckedChanged(ByVal sender _146 As System.Object, ByVal e As System.EventArgs) _147 Handles radWarning.CheckedChanged148 149 iconType = MessageBoxIcon.Warning150 End Sub ' radWarning_CheckedChanged151 152 End Class ' FrmRadioButtons

12.8 PictureBoxes

• PictureBoxes– Display images

• Bitmap• GIF (Graphics Interchange Format)• JPEG (Joint Photographic Expert Group)• Icons

– Image property• Image to be displayed

12.8 PictureBoxes

PictureBox properties and events


Common Properties

Image Sets the image to display in the PictureBox.

SizeMode Enumeration that controls image sizing and positioning. Values are Normal (default), StretchImage, AutoSize and CenterImage. Normal places image in top-left corner of PictureBox, and CenterImage puts image in middle (both cut image off if it is too large). StretchImage resizes image to fit in PictureBox. AutoSize resizes PictureBox to hold image.


Click Raised when user clicks the control. Default event when this control is double clicked in the designer.

Fig. 12.30 PictureBox properties and events.

Fig. 12.30 PictureBox properties and events.

1 ' Fig. 12.31: PictureBoxTest.vb2 ' Using a PictureBox to display images.3 4 Imports System.IO5 6 Public Class FrmPictureBox7 9 Private imageNumber As Integer = -112 13 ' replace image in picImage14 Private Sub picImage_Click(ByVal sender As System.Object, _15 ByVal e As System.EventArgs) Handles picImage.Click16 17 ' imageNumber from 0 to 218 imageNumber = (imageNumber + 1) Mod 3 19 20 ' create Image object from file, display in PictureBox21 picImage.Image = Image.FromFile _22 (Directory.GetCurrentDirectory & "\images\image" & _23 imageNumber & ".bmp")24 End Sub ' picImage_Click25 26 End Class ' FrmPictureBox

Class Image has a method FromFile, which takes a String (the image file) and creates an Image object.

To find the images, we use class Directory (namespace System.IO) method GetCurrentDirectory

We use imageNumber to append the proper number, enabling us to load either image0, image1 or image2. The value of Integer imageNumber stays between 0 and 2 because of the modulus calculation

Whenever a user clicks picImage,the image changes.

Chapter 12- GUI Concepts I. 12.1Introduction 12.2 Windows Forms 12.3 Event-Handling Model 12.3.1...

Documents

Transcript of Chapter 12- GUI Concepts I. 12.1Introduction 12.2 Windows Forms 12.3 Event-Handling Model 12.3.1...