Chapter 12- GUI Concepts I

1
Chapter 12-GUI Concepts I

2
Outline
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   CheckB
oxes and RadioButtons12.8   PictureBoxes12.9   M
ouse-Event Handling12.10   Keyboard-Event
Handling
3
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

4
12.1 Introduction
5
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 component

6
12.1 Introduction
Fig. 12.2 Some basic GUI components.
7
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

8
Controls
12.2 Windows Forms

• Windows Forms contains a variety of controls that
  you can place on forms.
• A control is an object that can be drawn on to
  the Form to enable or enhance user interaction
  with the application.
• TextBoxes, Buttons, Labels, Radio Buttons, etc.
  All these Windows Controls are based on the
  Control class, the base class for all controls.

9
12.2 Windows Forms
Fig. 12.3 Components and controls for Windows
Forms.
10
12.2 Windows Forms
Controls Dimensions

• 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

11
12.2 Windows Forms
Controls Dimensions
12
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.

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

14
12.2 Windows Forms
15
12.3   Event-Handling Model

• GUIs are event driventhey generate events when a
  programs 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.

16
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).

17
12.3   Event-Handling Model

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

18
12.3   Event-Handling Model

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

19
12.3   Event-Handling Model

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

20
12.3   Event-Handling Model

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

21
12.3   Event-Handling Model

• Event handlers take two arguments
• An Object (usually sender) A reference to the
  object that generated the event.
• An event arguments object (e) An instance of
  type EventArgs. Class EventArgs is the base class
  for objects that contain event information.

22
12.3   Event-Handling Model
Fig. 12.6 Events section of the Properties window.
23
12.3   Event-Handling Model
Fig. 12.8 List of Form events.
24
12.4  Control Properties and Layout
The appearance Text property can vary depending
on the context. For example, the text of a
Windows Form is its title bar, but the text of a
button appears on its face.
25
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

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

27
12.4 Control Properties and Layout
Fig. 12.11 Anchoring demonstration.
28
12.4 Control Properties and Layout
Fig. 12.12 Manipulating the Anchor property of a
control.
29
12.4 Control Properties and Layout
Fig. 12.13 Docking demonstration.
30
12.4 Control Properties and Layout
Fig. 12.14 Control layout properties.
31
12.5  Labels, TextBoxes and Buttons

• Label
• Displays read-only text
• Textbox
• Displays text
• Text input by user
• Button
• Click to trigger action

32
12.5  Labels, TextBoxes and Buttons
Fig. 12.15 Common Label properties.
33
12.5  Labels, TextBoxes and Buttons
Fig. 12.16 TextBox properties and events.
34
12.5  Labels, TextBoxes and Buttons
Fig. 12.17 Button properties and events.
35

• ' Fig. 12.18 LabelTextBoxButtonTest.vb
• ' Using a textbox, label and button to display
  the hidden
• ' text in a password box.
• Public Class FrmButtonTest
• ' handles cmdShow_Click events
• Private Sub cmdShow_Click(ByVal sender As
  System.Object, _
• ByVal e As System.EventArgs) Handles
  cmdShow.Click
• lblOutput.Text txtInput.Text
• End Sub ' cmdShow_Click
• End Class ' FrmButtonTest

The password character is set by assigning the
asterisk character () to the PasswordChar
property.
The labels text property is setequal to the
value of the textboxstext property, which was
entered by the user
36
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

37
12.6   GroupBoxes and Panels
Fig. 12.19 GroupBox properties.
Fig. 12.20 Panel properties.
38
12.6   GroupBoxes and Panels
Fig. 12.21 Creating a Panel with scrollbars.
39

• 1 ' Fig. 12.22 GroupBoxPanelExample.vb
• 2 ' Using GroupBoxes and Panels to hold
  buttons.
• 3
• 4 Public Class FrmGroupBox
• 5
• 6 ' event handlers to change lblMessage
• 7 Private Sub cmdHi_Click(ByVal sender As
  System.Object, _
• 8 ByVal e As System.EventArgs) Handles
  cmdHi.Click
• 9
• 10 lblMessage.Text "Hi pressed"
• 11 End Sub ' cmdHi_Click
• 12
• 13 ' bye button handler
• 14 Private Sub cmdBye_Click(ByVal sender As
  System.Object, _
• 15 ByVal e As System.EventArgs) Handles
  cmdBye.Click
• 16
• 17 lblMessage.Text "Bye pressed"
• 18 End Sub ' cmdBye_Click
• 19

40

• 26 ' far right button handler
• 27 Private Sub cmdRight_Click(ByVal sender
  As System.Object, _
• 28 ByVal e As System.EventArgs) Handles
  cmdRight.Click
• 29
• 30 lblMessage.Text "Far right pressed"
• 31 End Sub ' cmdRight_Click
• 32
• 33 End Class ' FrmGroupBox

41
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

42
12.7  CheckBoxes and RadioButtons
Fig. 12.23 CheckBox properties and events.
43

• 1 ' Fig. 12.24 CheckBoxTest.vb
• 2 ' Using CheckBoxes to toggle italic and bold
  styles.
• 3
• 4 Public Class FrmCheckBox
• 5 ' use Xor to toggle italic, keep other
  styles same
• 6 Private Sub chkItalic_CheckedChanged _
• 7 (ByVal sender As System.Object, ByVal e
  As System.EventArgs) _
• 8 Handles chkItalic.CheckedChanged
• 9
• 10 lblOutput.Font New
  Font(lblOutput.Font.Name, _
• 11 lblOutput.Font.Size,
  lblOutput.Font.Style _
• 12 Xor FontStyle.Italic)
• 13 End Sub ' chkItalic_CheckedChanged
• 14
• 15 ' use Xor to toggle bold, keep other
  styles same
• 16 Private Sub chkBold_CheckedChanged
  (ByVal sender As System.Object, _
• 17 ByVal e As System.EventArgs) Handles
  chkBold.CheckedChanged
• 18
• 19 lblOutput.Font New
  Font(lblOutput.Font.Name, _

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.
44
(No Transcript)
45
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 Bold
• Or 10 Italic
• ------------------
• 11 Bold and Italic

46
Why Xor?

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

47
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 Bold
• Xor 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 Italic
• Xor 01 Bold
• ------------------------
• 10 Italic

48
12.7  CheckBoxes and RadioButtons
Fig. 12.25 RadioButton properties and events.
49

• 1 ' Fig. 12.26 RadioButtonTest.vb
• 2 ' Using RadioButtons to set message window
  options.
• 3
• 4 Public Class FrmRadioButton
• 5
• 6 Private iconType As MessageBoxIcon
• 7 Private buttonType As MessageBoxButtons
• 8
• 9 ' display message box and obtain dialogue
  button clicked
• 10 Private Sub cmdDisplay_Click(ByVal sender
  _
• 11 As System.Object, ByVal e As
  System.EventArgs) _
• 12 Handles cmdDisplay.Click
• 13
• 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 label
• 19 Select Case dialog

50

• 26 Case DialogResult.Abort
• 27 lblDisplay.Text "Abort was
  pressed"
• 28
• 29 Case DialogResult.Retry
• 30 lblDisplay.Text "Retry was
  pressed"
• 31
• 32 Case DialogResult.Ignore
• 33 lblDisplay.Text "Ignore was
  pressed"
• 34
• 35 Case DialogResult.Yes
• 36 lblDisplay.Text "Yes was
  pressed"
• 37
• 38 Case DialogResult.No
• 39 lblDisplay.Text "No was
  pressed"
• 40 End Select
• 41
• 42 End Sub ' cmdDisplay_Click
• 43
• 44 ' set button type to OK

51

• 51 ' set button type to OkCancel
• 52 Private Sub radOkCancel_CheckedChanged(ByV
  al sender _
• 53 As System.Object, ByVal e As
  System.EventArgs) _
• 54 Handles radOkCancel.CheckedChanged
• 55
• 56 buttonType MessageBoxButtons.OKCancel
  
• 57 End Sub ' radOkCancel_CheckedChanged
• 58
• 59 ' set button type to AbortRetryIgnore
• 60 Private Sub radAbortRetryIgnore_CheckedCha
  nged(ByVal sender _
• 61 As System.Object, ByVal e As
  System.EventArgs) _
• 62 Handles radAbortRetryIgnore.CheckedChan
  ged
• 63
• 64 buttonType MessageBoxButtons.AbortRetr
  yIgnore
• 65 End Sub ' radAbortRetryIgnore_CheckedChang
  ed
• 66 ' set button type to YesNoCancel
• 67 Private Sub radYesNoCancel_CheckedChanged(
  ByVal sender _
• 68 As System.Object, ByVal e As
  System.EventArgs) _
• 69 Handles radYesNoCancel.CheckedChanged

52

• 73 ' set button type to YesNo
• 74 Private Sub radYesNo_CheckedChanged(ByVal
  sender _
• 75 As System.Object, ByVal e As
  System.EventArgs) _
• 76 Handles radYesNo.CheckedChanged
• 77
• 78 buttonType MessageBoxButtons.YesNo
• 79 End Sub ' radYesNo_CheckedChanged
• 80
• 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.CheckedChanged
• 85
• 86 buttonType MessageBoxButtons.RetryCan
  cel
• 87 End Sub ' radRetryCancel_CheckedChanged
• 88
• 89 ' set icon type to Asterisk when Asterisk
  checked
• 90 Private Sub radAsterisk_CheckedChanged(ByV
  al sender _
• 91 As System.Object, ByVal e As
  System.EventArgs) _

53

• 97 ' set icon type to Error when Error
  checked
• 98 Private Sub radError_CheckedChanged(ByVal
  sender _
• 99 As System.Object, ByVal e As
  System.EventArgs) _
• 100 Handles radError.CheckedChanged
• 101
• 102 iconType MessageBoxIcon.Error
• 103 End Sub ' radError_CheckedChanged
• 104
• 105 ' set icon type to Exclamation when
  Exclamation checked
• 106 Private Sub radExclamation_CheckedChanged(
  ByVal sender _
• 107 As System.Object, ByVal e As
  System.EventArgs) _
• 108 Handles radExclamation.CheckedChanged
• 109
• 110 iconType MessageBoxIcon.Exclamation
• 111 End Sub ' radExclamation_CheckedChanged
• 112
• 113 ' set icon type to Hand when Hand checked
• 114 Private Sub radHand_CheckedChanged(ByVal
  sender _

54
120 ' set icon type to Information when
Information checked 121 Private Sub
radInformation_CheckedChanged(ByVal sender _ 122
As System.Object, ByVal e As
System.EventArgs) _ 123 Handles
radInformation.CheckedChanged 124 125
iconType MessageBoxIcon.Information 126 End
Sub ' radInformation_CheckedChanged 127 128 '
set icon type to Question when Question
checked 129 Private Sub radQuestion_CheckedCha
nged(ByVal sender _ 130 As System.Object,
ByVal e As System.EventArgs) _ 131 Handles
radQuestion.CheckedChanged 132 133
iconType MessageBoxIcon.Question 134 End
Sub ' radQuestion_CheckedChanged 135 136 '
set icon type to Stop when Stop checked 137
Private Sub radStop_CheckedChanged(ByVal sender
_ 138 As System.Object, ByVal e As
System.EventArgs) _ 139 Handles
radStop.CheckedChanged 140 141 iconType
MessageBoxIcon.Stop 142 End Sub '
radStop_CheckedChanged 143
55

• 144 ' set icon type to Warning when Warning
  checked
• 145 Private Sub radWarning_CheckedChanged(ByVa
  l sender _
• 146 As System.Object, ByVal e As
  System.EventArgs) _
• 147 Handles radWarning.CheckedChanged
• 148
• 149 iconType MessageBoxIcon.Warning
• 150 End Sub ' radWarning_CheckedChanged
• 151
• 152 End Class ' FrmRadioButtons

56
(No Transcript)
57
12.8   PictureBoxes

• PictureBoxes
• Display images
• Bitmap
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographic Expert Group)
• Icons
• Image property
• Image to be displayed

58
12.8   PictureBoxes
Fig. 12.30 PictureBox properties and events.
59

• 1 ' Fig. 12.31 PictureBoxTest.vb
• 2 ' Using a PictureBox to display images.
• 3
• 4 Imports System.IO
• 5
• 6 Public Class FrmPictureBox
• 7
• 9 Private imageNumber As Integer -1
• 12
• 13 ' replace image in picImage
• 14 Private Sub picImage_Click(ByVal sender
  As System.Object, _
• 15 ByVal e As System.EventArgs) Handles
  picImage.Click
• 16
• 17 ' imageNumber from 0 to 2
• 18 imageNumber (imageNumber 1) Mod 3
• 19
• 20 ' create Image object from file,
  display in PictureBox
• 21 picImage.Image Image.FromFile _
• 22 (Directory.GetCurrentDirectory
  "\images\image" _

Whenever a user clicks picImage, the image
changes.
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
Class Image has a method FromFile, which takes a
String (the image file) and creates an Image
object.
60
(No Transcript)