Object Oriented Programming Graphical User Interfaces Dr Mike

Object Oriented Programming Graphical User Interfaces Dr. Mike Spann m. spann@bham. ac. uk

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

Introduction n n Most modern applications come with a sophisticated user interface comprising u Push buttons u Selection boxes u Dialog boxes u Pull down menus u 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 u These are the classes that you will use if you are writing client-side GUI applications with the. NET Framework

Introduction n n For even moderately sophisticated GUI’s, it is advisable to use visual programming techniques under Visual Studio u A lot of code is automatically generated u Easy placement of GUI components u Extensive use of properties to customize our GUI components u 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 GUI’s ourselves from scratch

Introduction n n The Form class is a basic outer container which then holds GUI components such as menus, buttons and checkboxes Usually GUI’s 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()); } }

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

Creating a simple GUI n n 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 u We would just have to add the event handling code to specify the behaviour we require u In this case a simple pop up message box is displayed

Creating a simple GUI using System; using System. Windows. Forms; class App { public static void Main() { Application. Run(new My. Simple. Form()); } } class My. Simple. Form : Form { public My. Simple. Form() { Button button = new Button(); button. Text = "My Button"; button. Click += new Event. Handler(On. Click); this. Controls. Add(button); } void On. Click(Object sender, Event. Args args) { Message. Box. Show("The Button Was Clicked!"); } }

Creating a simple GUI n DemosSimple FormMy. Simple. Form. exe

Visual programming n n n Visual programming allows us to create GUI’s 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

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

Visual programming using System; using System. Windows. Forms; namespace My. Simple. Form_VP { public partial class Form 1 : Form { public Form 1() { Initialize. Component(); } private void button 1_Click(object sender, Event. Args e) { // User code here!! Message. Box. Show("The Button Was Clicked!"); } } }

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

namespace My. Simple. Form_VP { partial class Form 1 {. . . #region Windows Form Designer generated code private void Initialize. Component() { this. button 1 = new System. Windows. Forms. Button(); this. Suspend. Layout(); // // button 1 // this. button 1. Location = new System. Drawing. Point(-1, 0); this. button 1. Name = "button 1"; this. button 1. Size = new System. Drawing. Size(75, 23); this. button 1. Tab. Index = 0; this. button 1. Text = "My button"; this. button 1. Use. Visual. Style. Back. Color = true; this. button 1. Click += new System. Event. Handler(this. button 1_Click); // // Form 1 // this. Auto. Scale. Dimensions = new System. Drawing. Size. F(6 F, 13 F); this. Auto. Scale. Mode = System. Windows. Forms. Auto. Scale. Mode. Font; this. Client. Size = new System. Drawing. Size(292, 266); this. Controls. Add(this. button 1); this. Name = "Form 1"; this. Text = "Form 1"; this. Resume. Layout(false); } #endregion private System. Windows. Forms. Button button 1; } }

using System; using System. Windows. Forms; namespace My. Simple. Form_VP { static class Program { /// <summary> /// The main entry point for the application. /// </summary> [STAThread] static void Main() { Application. Enable. Visual. Styles(); Application. Set. Compatible. Text. Rendering. Default(false); Application. Run(new Form 1()); } } }

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

Visual Designer demo

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

Example – A simple image viewer Menus can be easily added to a Form in design view n A Menu. Strip is dragged across from the toolbox to create the menu bar n Textboxes are then available to type in the names of the menu’s and menu items u This can be repeated for sub menu’s u Shortcuts can be added by entering an & before the name n

menu items menustrip icon

Example – A simple image viewer We can add an Open. File. Dialog box by dragging it from the toolbox n We also automatically add function headers for each event handler by clicking on the menu items and the Open. File. Dialog icon u The only code we need are the function bodies of the event handlers n

public partial class Form 1 : Form { private readonly string initial. Image. Directory= "C: \Documents and Settings\spannm\Desktop\Personal Stuff\Images"; private Image loaded. Image = null; public Form 1() { Initialize. Component(); open. File. Dialog 1. Initial. Directory=initial. Image. Directory; } private void open. Tool. Strip. Menu. Item_Click(object sender, Event. Args e) { // Open image file dialog box and load an image open. File. Dialog 1. Show. Dialog(); } private void exit. Tool. Strip. Menu. Item_Click(object sender, Event. Args e) { // Exit application Application. Exit(); } private void close. Tool. Strip. Menu. Item_Click(object sender, Event. Args e) { // Close the image } private void open. File. Dialog 1_File. Ok(object sender, Cancel. Event. Args e) { string file. Name = open. File. Dialog 1. File. Name; if (file. Name. Length != 0) { // Load the image } } }

Example – A simple image viewer n We need to decide how we wish to display the image u We could drag a Picture. Box component inside the form t This then displays the image inside the Form container u It’s much more realistic to have the image in a completely independent window u This requires us to build a separate Image. Form class

Example – A simple image viewer n We can create a separate windows application comprising a Form containing a Picture. Box u The Picture. Box class has an Image property which is the image it is displaying u The Load() event handler displays the image when the form is created u All very easy to do in design view of VS

Example – A simple image viewer public partial class Image. Form : Form { private Image image; public Image. Form(Image im) { image = im; Initialize. Component(); } private void Image. Form_Load(object sender, Event. Args e) { picture. Box 1. Image = image; } }

Example – A simple image viewer n The only real code we have to write is the event handler for loading and displaying an image from file u This appears in the open. File. Dialog 1_File. Ok() event handler which is called when the open file dialog box ‘OK’ button is pressed u An Image. Form object is created and the loaded image passed to its constructor u Minimal code for a fairly sophisticated application

Example – A simple image viewer public partial class Form 1 : Form { private Image loaded. Image = null; private Image. Form image. Form = null; . . private void close. Tool. Strip. Menu. Item_Click(object sender, Event. Args e) { // Close the image if (image. Form != null) image. Form. Close(); } private void open. File. Dialog 1_File. Ok(object sender, Cancel. Event. Args e) { string file. Name = open. File. Dialog 1. File. Name; if (file. Name. Length != 0) { // Display the loaded image loaded. Image = Image. From. File(file. Name); image. Form = new Image. Form(loaded. Image); image. Form. Show(); } } }

Example – A simple image viewer n DemosBasic Image ViewerImage Viewer Basic. exe

Example – A simple image viewer n It’s easy to change both the look and the behaviour of the tool without additional code u We simply change properties u For example, we can change how the image is displayed by altering the Size. Mode property of the Picture. Box t Size. Mode=Normal - displays image without scaling in the top left hand corner of the Picture. Box t Size. Mode=Auto. Size – resizes the Picture. Box to hold the image t etc

Example – A simple image viewer Size. Mode=Auto. Size. Mode=Normal

Mouse event handling n n 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 Mouse. Event. Args or Event. Args u 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 Mouse. Event. Handler

Mouse event handling n We can summarise mouse events and event properties as follows:

Mouse event handling For example, we can paint graphics on the image as displayed in our image viewer n We make use of the Mouse. Down, Mouse. Up and Mouse. Move events n With the Image. Form in design view, we click on the mouse events for which we wish to add event handlers u Automatic code is generated for the empty functions u We need to fill in the function bodies n

Mouse event handling For example, we can combine the Mouse. Down and Mouse. Move event handler to draw freehand graphics as we move the mouse n Or we can just select coordinates on the image using Mouse. Down and draw the rectangle through opposing vertices u Useful in selecting a region of interest in an image processing application n

Mouse event handling public partial class Image. Form : Form { private Image image; private bool should. Paint = false; public Image. Form(Image im) { image = im; Initialize. Component(); } private void Image. Form_Mouse. Move(object sender, Mouse. Event. Args e) { if (should. Paint) { Graphics graphics = Create. Graphics(); graphics. Fill. Ellipse(new Solid. Brush(Color. Blue), e. X, e. Y, 4, 4); graphics. Dispose(); } } private void Image. Form_Mouse. Down(object sender, Mouse. Event. Args e){should. Paint = true; } private void Image. Form_Mouse. Up(object sender, Mouse. Event. Args e) {should. Paint = false; } private void Image. Form_Paint(object sender, Paint. Event. Args e) { Graphics graphics = e. Graphics; graphics. Draw. Image(image, new Point(20, 20)); } }

Mouse event handling n DemosImage Viewer Free DrawImage Viewer. exe

Mouse event handling public partial { private class Image. Form : Form Image image; int start. X=-1; int start. Y, end. X, end. Y; public Image. Form(Image im) { image = im; Initialize. Component(); } private void Image. Form_Mouse. Down(object sender, Mouse. Event. Args e) { if (start. X < 0) { start. X = e. X; start. Y = e. Y; } else { end. X = e. X; end. Y = e. Y; Graphics graphics = Create. Graphics(); Pen white. Pen = new Pen(Color. White, 2); graphics. Draw. Rectangle(white. Pen, new Rectangle(start. X, start. Y, end. X-start. X, end. Y-start. Y)); } } private void Image. Form_Paint(object sender, Paint. Event. Args e) { Graphics graphics = e. Graphics; graphics. Draw. Image(image, new Point(20, 20)); } }

Mouse event handling n DemosImage Viewer ROIImage Viewer. exe

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

Summary n n 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