Object Oriented Programming

1
Object Oriented Programming

• Graphical User Interfaces

Dr. Mike Spann m.spann_at_bham.ac.uk
2
Contents

• Introduction
• Creating a simple GUI
• Visual programming
• Example A simple image viewer
• Mouse event handling
• Using Help
• Summary

3
Introduction

• Most modern applications come with a
  sophisticated user interface comprising
• Push buttons
• Selection boxes
• Dialog boxes
• Pull down menus
• etc
• This lecture focuses on the use of the classes
  found in the System.Windows.Forms namespace in
  the FCL to create these user interfaces
• These are the classes that you will use if you
  are writing client-side GUI applications with the
  .NET Framework

4
Introduction

• For even moderately sophisticated GUIs, it is
  advisable to use visual programming techniques
  under Visual Studio
• A lot of code is automatically generated
• Easy placement of GUI components
• Extensive use of properties to customize our GUI
  components
• Essentially all we need to do is write the event
  handlers
• However, it is important to understand how it all
  works and how we could write GUIs ourselves from
  scratch

5
Introduction

• The Form class is a basic outer container which
  then holds GUI components such as menus, buttons
  and checkboxes
• Usually GUIs comprise a class derived from Form
  to create a specialization that fits the need of
  the application

using System.Windows.Forms class App
public static void Main()
Application.Run(new Form())
6
Introduction

• This programs produces a simple outer container
  with basic windows functionality that we are
  familiar with
• Maximize button
• Minimize button
• etc
• We can easily add components to this to
  specialize its behaviour

7
Creating a simple GUI

• We can create a GUI containing a button and add
  an event handler to provide some functionality
• Normally much of this code would be generated
  automatically using visual programming techniques
• We would just have to add the event handling code
  to specify the behaviour we require
• In this case a simple pop up message box is
  displayed

8
Creating a simple GUI
using System using System.Windows.Forms class
App public static void Main()
Application.Run(new MySimpleForm())
class MySimpleForm Form public
MySimpleForm() Button button
new Button() button.Text "My
Button" button.Click new
EventHandler(OnClick)
this.Controls.Add(button) void
OnClick(Object sender, EventArgs args)
MessageBox.Show("The Button Was Clicked!")

9
Creating a simple GUI

• Demos\Simple Form\MySimpleForm.exe

10
Visual programming

• Visual programming allows us to create GUIs in
  designer view using Visual Studio
• It involves dragging and dropping GUI components
  from a toolbox onto an outer Form container
• If we select the Windows Application project
  template, we automatically get the project up in
  designer view with a small amount of
  pre-generated code
• We can drag GUI components from the toolbox onto
  our form and position them as we wish
• Clicking on a component (eg a button), adds an
  event handler for that component and the view
  changes from designer view to code view allowing
  us to add code for the event handler

11
(No Transcript)
12
Visual programming

• For example we can re-create our simple GUI and
  only have to write 1 line of code!!
• Also we can easily customize the look of the GUI
  by updating the properties
• Button text
• Background colour
• Button placement
• etc

13
(No Transcript)
14
Visual programming
using System using System.Windows.Forms namespa
ce MySimpleForm_VP public partial class
Form1 Form public Form1()
InitializeComponent()
private void button1_Click(object
sender, EventArgs e) // User code
here!! MessageBox.Show("The Button
Was Clicked!")
15
Visual programming

• Automatically generated code is put in the
  xxxx.Designer.cs file
• The InitializeComponent method involves creating
  the GUI components and their properties and
  registering event handlers
• Also a main method is automatically generated
  which calls Application.Run(...)

16
namespace MySimpleForm_VP partial class
Form1 . . . region
Windows Form Designer generated code private
void InitializeComponent()
this.button1 new System.Windows.Forms.Button()
this.SuspendLayout()
// // button1 //
this.button1.Location new
System.Drawing.Point(-1, 0)
this.button1.Name "button1"
this.button1.Size new System.Drawing.Size(75,
23) this.button1.TabIndex 0
this.button1.Text "My button"
this.button1.UseVisualStyleBackColor
true this.button1.Click new
System.EventHandler(this.button1_Click)
// // Form1 //
this.AutoScaleDimensions new
System.Drawing.SizeF(6F, 13F)
this.AutoScaleMode System.Windows.Forms.AutoSc
aleMode.Font this.ClientSize new
System.Drawing.Size(292, 266)
this.Controls.Add(this.button1)
this.Name "Form1" this.Text
"Form1" this.ResumeLayout(false)
endregion private
System.Windows.Forms.Button button1
17
using System using System.Windows.Forms namespa
ce MySimpleForm_VP static class Program
/// ltsummarygt /// The main
entry point for the application. ///
lt/summarygt STAThread static
void Main()
Application.EnableVisualStyles()
Application.SetCompatibleTextRenderingDefault(fal
se) Application.Run(new Form1())

18
Visual programming

• The code is automatically updated when we
  customize our GUI appearance using the VS
  properties window

19
(No Transcript)
20
Example A simple image viewer

• We can create a simple image viewer for loading
  and displaying images
• We will use visual programming and write a small
  amount of code
• This example will introduce the following GUI
  components
• Menus
• File dialogue boxes

21
Example A simple image viewer

• Menus can be easily added to a Form in design
  view
• A MenuStrip is dragged across from the toolbox to
  create the menu bar
• Textboxes are then available to type in the names
  of the menus and menu items
• This can be repeated for sub menus
• Shortcuts can be added by entering an before
  the name

22
menu
menu items
menustrip icon
23
Example A simple image viewer

• We can add an OpenFileDialog box by dragging it
  from the toolbox
• We also automatically add function headers for
  each event handler by clicking on the menu items
  and the OpenFileDialog icon
• The only code we need are the function bodies of
  the event handlers

24
(No Transcript)
25
public partial class Form1 Form private
readonly string initialImageDirectory
"C\\Documents and Settings\\spannm\\Desktop\\
Personal Stuff\\Images" private Image
loadedImage null public Form1()
InitializeComponent()
openFileDialog1.InitialDirectoryinitialImageDire
ctory private void
openToolStripMenuItem_Click(object sender,
EventArgs e) // Open image
file dialog box and load an image
openFileDialog1.ShowDialog()
private void exitToolStripMenuItem_Click(object
sender, EventArgs e) // Exit
application Application.Exit()
private void closeToolStripMenuItem_Cli
ck(object sender, EventArgs e)
// Close the image private void
openFileDialog1_FileOk(object sender,
CancelEventArgs e) string
fileName openFileDialog1.FileName
if (fileName.Length ! 0)
// Load the image
26
Example A simple image viewer
27
Example A simple image viewer

• We need to decide how we wish to display the
  image
• We could drag a PictureBox component inside the
  form
• This then displays the image inside the Form
  container
• Its much more realistic to have the image in a
  completely independent window
• This requires us to build a separate ImageForm
  class

28
Example A simple image viewer

• We can create a separate windows application
  comprising a Form containing a PictureBox
• The PictureBox class has an Image property which
  is the image it is displaying
• The Load() event handler displays the image when
  the form is created
• All very easy to do in design view of VS

29
(No Transcript)
30
Example A simple image viewer
public partial class ImageForm Form
private Image image public
ImageForm(Image im) image im
InitializeComponent() private
void ImageForm_Load(object sender, EventArgs e)
pictureBox1.Image image
31
Example A simple image viewer

• The only real code we have to write is the event
  handler for loading and displaying an image from
  file
• This appears in the openFileDialog1_FileOk()
  event handler which is called when the open file
  dialog box OK button is pressed
• An ImageForm object is created and the loaded
  image passed to its constructor
• Minimal code for a fairly sophisticated
  application

32
Example A simple image viewer
public partial class Form1 Form private
Image loadedImage null private
ImageForm imageForm null . . private
void closeToolStripMenuItem_Click(object sender,
EventArgs e) // Close the
image if (imageForm ! null)
imageForm.Close() private void
openFileDialog1_FileOk(object sender,
CancelEventArgs e) string
fileName openFileDialog1.FileName
if (fileName.Length ! 0)
// Display the loaded image
loadedImage Image.FromFile(file
Name) imageForm new
ImageForm(loadedImage)
imageForm.Show()
33
Example A simple image viewer

• Demos\Basic Image Viewer\Image Viewer Basic.exe

34
Example A simple image viewer

• Its easy to change both the look and the
  behaviour of the tool without additional code
• We simply change properties
• For example, we can change how the image is
  displayed by altering the SizeMode property of
  the PictureBox
• SizeModeNormal - displays image without scaling
  in the top left hand corner of the PictureBox
• SizeModeAutoSize resizes the PictureBox to
  hold the image
• etc

35
Example A simple image viewer
SizeModeAutoSize
SizeModeNormal
36
Mouse event handling

• Mouse events occur when the user clicks, presses
  and moves the mouse
• Being able to handle mouse events can lead to
  highly interactive applications
• Information about the mouse event is passed to an
  event handling method through an object of class
  MouseEventArgs or EventArgs
• Typically this might be the x and y coordinates
  of the position of the mouse cursor
• The delegate used to create the event handlers is
  MouseEventHandler

37
Mouse event handling

• We can summarise mouse events and event
  properties as follows

38
Mouse event handling

• For example, we can paint graphics on the image
  as displayed in our image viewer
• We make use of the MouseDown, MouseUp and
  MouseMove events
• With the ImageForm in design view, we click on
  the mouse events for which we wish to add event
  handlers
• Automatic code is generated for the empty
  functions
• We need to fill in the function bodies

39
(No Transcript)
40
Mouse event handling

• For example, we can combine the MouseDown and
  MouseMove event handler to draw freehand graphics
  as we move the mouse
• Or we can just select coordinates on the image
  using MouseDown and draw the rectangle through
  opposing vertices
• Useful in selecting a region of interest in an
  image processing application

41
Mouse event handling
public partial class ImageForm Form
private Image image private bool shouldPaint
false public ImageForm(Image im)
image im
InitializeComponent()
private void ImageForm_MouseMove(object sender,
MouseEventArgs e) if
(shouldPaint)
Graphics graphics CreateGraphics() graphics
.FillEllipse(new SolidBrush(Color.Blue), e.X,
e.Y, 4, 4) graphics.Dispose()
private void
ImageForm_MouseDown(object sender, MouseEventArgs
e)shouldPaint true private void
ImageForm_MouseUp(object sender, MouseEventArgs
e) shouldPaint false private void
ImageForm_Paint(object sender, PaintEventArgs e)
Graphics graphics
e.Graphics graphics.DrawImage(image
, new Point(20,20))
42
Mouse event handling

• Demos\Image Viewer Free Draw\Image Viewer.exe

43
Mouse event handling
public partial class ImageForm Form
private Image image private int startX-1
private int startY, endX, endY public
ImageForm(Image im) image
im InitializeComponent()
private void ImageForm_MouseDown(
object sender, MouseEventArgs e)
if (startX lt 0)
startX e.X startY e.Y
else
endX e.X endY
e.Y Graphics graphics
CreateGraphics() Pen whitePen
new Pen(Color.White, 2)
graphics.DrawRectangle(whitePen, new
Rectangle(startX,startY,endX-startX,endY-startY))
private
void ImageForm_Paint(object sender,
PaintEventArgs e) Graphics
graphics e.Graphics graphics.DrawImage(image,
new Point(20,20))
44
Mouse event handling

• Demos\Image Viewer ROI\Image Viewer.exe

45
Mouse event handling

• Both these examples use the Graphics object and
  other objects in the System.Drawing namespace
  such as Pen and SoilidBrush
• More about these concepts in the lecture on
  graphics and multimedia
• We use the Graphics.DrawImage() method to draw
  the image in the Paint() event handler
• Paint() is called automatically whenever the form
  needs repainting
• For example when the form is moved or resized

46
Using Help

• We have seen a few examples of GUI program
  development but we have barely scratched the
  surface
• There are dozens of GUI components and hundreds
  of methods available plus we have to know how to
  handle all the events that a component can
  generate
• It is essential that we are able to efficiently
  use the Help features available under VS
• Selecting Help-gtIndex brings up the main help
  page which we can then filter down to find the
  information we require

47
Using Help

• For example, we find information on the Button
  class, we need to enter the fully qualified name
• System.Windows.Forms.Button
• We get a list of all class members
• Constructors
• Public properties
• Protected properties
• Public methods
• Protected methods
• Public events
• Each is a displayed as a hyperlink to a separate
  page often containing code examples

48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
Summary

• We have seen how we can create a simple GUI and
  add an event handler to determine the behaviour
  of the GUI
• We have also seen how we can do the same thing
  much simpler using visual programming techniques
• We have looked at a simple image viewer
  application which uses a menu and a file input
  dialog box
• We have looked at how we can handle mouse events
• We have briefly looked at how we can use the help
  facilities of Visual Studio