1. T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 26 CheckWriter Application Introducing Graphics and Printing

2.  2009 Pearson Education, Inc. All rights reserved. 2 Outline 26.1 Test-Driving the CheckWriter Application 26.2 GDI+ Introduction 26.3 Constructing the CheckWriter Application 26.4 PrintPreviewDialog s and PrintDocument s 26.5 Creating an Event Handler for the CheckWriter Application

3.  2009 Pearson Education, Inc. All rights reserved. 3 Outline 26.6 Graphics Objects: Colors, Lines and Shapes 26.7 Printing Each Control of the CheckWriter Application 26.8 Font Class 26.9 Previewing and Printing the Check

4.  2009 Pearson Education, Inc. All rights reserved. 4 In this tutorial you will learn: ■Print. ■Draw two-dimensional shapes. ■Use type Single. ■Use keyword Me. ■Control the colors and patterns of filled shapes. ■Use Graphics objects. ■Draw shapes on an object. ■Create an application to write checks. Objectives

5.  2009 Pearson Education, Inc. All rights reserved. 5 ■The GDI+ Application Programming Interface (API) allows you to create 2D vector graphics, fonts and images. ■A vector graphic is represented by a set of mathematical properties called vectors. ■GDI+ graphics capabilities help you preview and print a check in the following application. Introduction

6. Application Requirements  2009 Pearson Education, Inc. All rights reserved. 6 26.1 Test-Driving the CheckWriter Application A local business is responsible for distributing paychecks to its employees. The human-resources department needs a way to generate and print the paychecks. You have been asked to create an application that allows the human- resources department to input all the information necessary for a valid check, which includes the employee’s name, the date, the amount that the employee should be paid and the company’s address information. Your application should graphically draw the check so that it can be printed.

7.  2009 Pearson Education, Inc. All rights reserved. 7 Test-Driving the CheckWriter Application ■Run the completed application (Fig. 26.1). Figure 26.1 | CheckWriter application displaying an empty check. Company information Check number Written check amount Memo text Date Amount Recipient

8.  2009 Pearson Education, Inc. All rights reserved. 8 Test-Driving the CheckWriter Application (Cont.) ■Type values into each of the inputs, as shown in Figure 26.2. Figure 26.2 | CheckWriter application displaying a completed check. MICR numbers

9.  2009 Pearson Education, Inc. All rights reserved. 9 Test-Driving the CheckWriter Application (Cont.) ■Click the Preview Button to display the completed check in a Print preview (Fig. 26.3). Figure 26.3 | Preview of the completed check. Print Page to view Zoom Displays three pages Close

10.  2009 Pearson Education, Inc. All rights reserved. 10 ■Class Graphics contains methods used for drawing text, lines, rectangles and other shapes. ■A Pen object specifies the line style used to draw a shape. ■A Brush object specifies how to fill a shape. ■The Color structure contains pre-defined colors and methods. ■The Font class contains properties that describe font characteristics. ■The FontFamily class contains methods for obtaining font information. 26.2 GDI+ Introduction

11.  2009 Pearson Education, Inc. All rights reserved. 11 ■GDI+ uses a coordinate system (Fig. 26.4) to identify every point on the screen, composed of: –the x-coordinate (the horizontal coordinate) –the y-coordinate (the vertical coordinate). ■The upper-left corner of a GUI component has the coordinates (0, 0). 26.2 GDI+ Introduction (Cont.) Figure 26.4 | GDI+ coordinate system.

12.  2009 Pearson Education, Inc. All rights reserved. 12 Portability Tip Different computer monitors have different resolutions, so the density of pixels on various monitors will vary. This may cause graphics to appear in different sizes on different monitors.

13.  2009 Pearson Education, Inc. All rights reserved. 13 When the user clicks the Preview Button Retrieve check information from the user Display the check in a Print Preview dialog When the user clicks the Print Button Retrieve check information from the user Print the check on the printer 26.3 Constructing the CheckWriter Application

14.  2009 Pearson Education, Inc. All rights reserved. 14 ■Use an ACE table to convert the pseudocode into Visual Basic (Fig. 26.5). Figure 26.5 | ACE table for the CheckWriter application. Part 1 of 2.) Action/Control/Event (ACE) Table for the CheckWriter Application

15.  2009 Pearson Education, Inc. All rights reserved. 15 Figure 26.5 | ACE table for the CheckWriter application. Part 2 of 2.) Action/Control/Event (ACE) Table for the CheckWriter Application (Cont.)

16.  2009 Pearson Education, Inc. All rights reserved. 16 Adding a PrintPreviewDialog in the CheckWriter Application ■Drag the PrintPreviewDialog control from the Toolbox ’s All Windows Forms onto the Form ( Fig. 26.6). Figure 26.6 | CheckWriter application in Design view with PrintPreviewDialog. PrintPreviewDialog in the component tray

17.  2009 Pearson Education, Inc. All rights reserved. 17 ■The PrintPreviewDialog displays a dialog that allows users to: –view a document at different sizes –print a document –display multiple pages of a document before printing ■Change the PrintPreviewDialog ’s Name to previewObject. ■Set the UseAntiAlias property to True, making the text in the dialog appear smoother on the screen. Adding a PrintPreviewDialog in the CheckWriter Application (Cont.)

18.  2009 Pearson Education, Inc. All rights reserved. 18 ■The dialog object contains the Document property. –This specifies the object of type PrintDocument to preview. ■The PrintDocument object allows you to specify how to print a specified document. –The object raises a PrintPage event when the data is needed to print. –The PrintDocument also contains a Print method that uses a Graphics object to print the document. 26.4 PrintPreviewDialog s and PrintDocument s

19.  2009 Pearson Education, Inc. All rights reserved. 19 Importing a Namespace ■Import the System.Drawing.Printing namespace (Fig. 26.7). ■The namespace also enables access to the PrintPageEventArgs class. Figure 26.7 | Import System.Drawing.Printing namespace. Importing namespace System.Drawing.Printing

20.  2009 Pearson Education, Inc. All rights reserved. 20 Defining an Event Handler to Print Pages ■These lines (Fig. 26.8) create the event handler for the PrintPage event. Figure 26.8 | document_PrintPage event handler. Empty PrintPage event handler

21.  2009 Pearson Education, Inc. All rights reserved. 21 ■A Font variable named fontObject (Fig. 26.9) is used to specify the text font. ■ Single is a floating-point value that is less precise and requires less memory than Double. Defining an Event Handler to Print Pages (Cont.) Figure 26.9 | Variables created for document_PrintPage. Declare a Font variable Declare coordinates Set left margin of page Set top margin of page Declare variable that stores a control’s text

22.  2009 Pearson Education, Inc. All rights reserved. 22 Defining an Event Handler to Print Pages (Cont.) ■This For Each...Next statement (Fig. 26.10) iterates through the controls on the Form to print the check. Figure 26.10 | For Each...Next statement used for iteration. Declaring a For Each...Next statement

23.  2009 Pearson Education, Inc. All rights reserved. 23 ■Checks contain lines for payee, payment amount, and memo information. ■To draw these lines, use the Graphics object’s DrawLine method (Fig. 26.10). –A Pen specifies the characteristics of the line that is drawn. Defining an Event Handler to Print Pages (Cont.)

24.  2009 Pearson Education, Inc. All rights reserved. 24 Defining an Event Handler to Print Pages (Cont.) Figure 26.11 | Event handler document_PrintPage modified to draw formatting lines on the check. Draw payee line Draw payment line Draw memo line Draw border of check

25.  2009 Pearson Education, Inc. All rights reserved. 25 ■To draw the rectangle around the check (the Form ’s border is not part of the control), use the PrintPageEventArgs object. ■Call the DrawRectangle method on the Graphics object. –The first argument specifies how to draw the rectangle’s border. –The second argument specifies the x-coordinate of the upper-left corner. –The third argument specifies the y-coordinate of the upper-left corner. –The fourth and fifth arguments specify the width and height of the rectangle. ■ Me references the current object. Defining an Event Handler to Print Pages (Cont.)

26.  2009 Pearson Education, Inc. All rights reserved. 26 ■To draw on any control, obtain a Graphics object from its displayPanel : Dim graphicsObject As Graphics = displayPanel.CreateGraphics() ■Color are created from alpha, red, green and blue components. –The alpha value determines the opacity (amount of transparency). –All three RGB components are Byte s that represent integer values in the range 0–255. ■You can create your own colors by using the FromArgb method: Dim colorSilver As Color = Color.FromArgb(192, 192, 192) 26.6 Graphics Objects: Colors, Lines and Shapes

27.  2009 Pearson Education, Inc. All rights reserved. 27 Good Programming Practice When working with color, keep in mind that many people are color blind or have difficulty perceiving and distinguishing colors. So, use colors that can be distinguished easily.

28.  2009 Pearson Education, Inc. All rights reserved. 28 ■Figure 26.12 summarizes some predefined Color constants. Figure 26.12 | Color structure constants and their RGB values. 26.6 Graphics Objects: Colors, Lines and Shapes (Cont.)

29.  2009 Pearson Education, Inc. All rights reserved. 29 ■Figure 26.13 summarizes several Graphics methods and their parameters. Figure 26.13 | Graphics methods that draw lines, rectangles and ovals. 26.6 Graphics Objects: Colors, Lines and Shapes (Cont.)

30.  2009 Pearson Education, Inc. All rights reserved. 30 Iterating through All the Objects of the Form to Print Each Control ■This If...Then statement (Fig. 26.14) determines whether the current control is a Button. Figure 26.14 | Code to determine whether the current control is a Button. Make sure current control is not a Button

31.  2009 Pearson Education, Inc. All rights reserved. 31 Iterating through All the Objects of the Form to Print Each Control (Cont.) ■Add code to properly print the value that appears in each control on the check (Fig. 26.15). Figure 26.15 | Select Case statement to print controls. Determine if current control is a Button Underline the text if displaying date from DateTimePicker Draw box around dollar amount Set the default font

32.  2009 Pearson Education, Inc. All rights reserved. 32 ■The DrawString method (Fig. 26.16) draws the specified String of text. ■The Brushes class provides properties to access Brush objects of any standard color. Iterating through All the Objects of the Form to Print Each Control (Cont.) Figure 26.16 | Code to set String positions of the controls. Set horizontal location of current control Print current control’s text Set vertical location of current control

33.  2009 Pearson Education, Inc. All rights reserved. 33 ■A Font object specifies the style of the text printed on a page. ■Some properties of the Font class are summarized in Fig. 26.17. Figure 26.17 | Font class read-only properties. 26.8 Font Class

34.  2009 Pearson Education, Inc. All rights reserved. 34 Common Programming Error Specifying a font that is not available on a system is a logic error. If this occurs, the system’s default font is used instead.

35.  2009 Pearson Education, Inc. All rights reserved. 35 Defining the printButton_Click Event Handler ■Double click the Print Button and write the printButton_Click event handler (Fig. 26.18). Figure 26.18 | Code that creates the PrintDocument object. Declaring a PrintDocument object

36.  2009 Pearson Education, Inc. All rights reserved. 36 Defining the printButton_Click Event Handler (Cont.) ■The AddHandler statement (Fig. 26.19) associates the PrintPage event with the event handler specified by the AddressOf operator. Figure 26.19 | Code that adds a PrintPage event handler to the PrintDocument object. Adding an event handler for the PrintDocument object

37.  2009 Pearson Education, Inc. All rights reserved. 37 Defining the printButton_Click Event Handler (Cont.) ■The property PrinterSettings.Installed Printers.Count (Fig. 26.20) determines how many printers are installed on the user’s computer. ■This property includes the internal Microsoft XPS Document Writer installed as part of.NET 3.5. Figure 26.20 | Exiting the event handler if no printers are installed. Take no action if there are no printers installed

38.  2009 Pearson Education, Inc. All rights reserved. 38 Defining the printButton_Click Event Handler (Cont.) ■Add the call to the PrintDocument ’s Print method (Fig. 26.21), which raises the PrintPage event each time it needs output for printing. ■Your PrintPage event handler then executes. Figure 26.21 | Event handler printButton_Click modified to print the document. Print the check

39.  2009 Pearson Education, Inc. All rights reserved. 39 Defining the previewButton_Click Event Handler ■Double click the Preview Button to create its event handler (Fig. 26.22). Figure 26.22 | Event handler previewButton_Click modified to create PrintDocument and add PrintPage event handler. Creating a PrintDocument object Adding an event handler for the PrintDocument

40.  2009 Pearson Education, Inc. All rights reserved. 40 Defining the previewButton_Click Event Handler (Cont.) ■An error message should be displayed if there are no installed printers (Fig. 26.23). Figure 26.23 | Exiting the print preview event handler if no printers are installed.

41.  2009 Pearson Education, Inc. All rights reserved. 41 ■This line (Fig. 26.24) sets previewObject ’s Document property to the PrintDocument document. Figure 26.24 | Event handler previewButton_Click modified to set the PrintPreviewDialog object’s Document property. Setting the document to preview Defining the previewButton_Click Event Handler (Cont.)

42.  2009 Pearson Education, Inc. All rights reserved. 42 ■The PrintPreviewDialog object’s ShowDialog method (Fig. 26.25) displays the Print preview dialog. Figure 26.25 | Event handler previewButton_Click modified to show preview dialog. Displaying the preview dialog Defining the previewButton_Click Event Handler (Cont.)

43.  2009 Pearson Education, Inc. All rights reserved. 43 ■If there is no printer installed on the computer, this code (Fig. 26.26) displays an error message. Figure 26.26 | Displaying an error message when no printer is installed. Method to display error message Defining the previewButton_Click Event Handler (Cont.)

44.  2009 Pearson Education, Inc. All rights reserved. 44 ■Figure 26.27 presents the source code for the CheckWriter application. Outline (1 of 7 ) Importing the necessary namespace Event handler indicating what to print Instance variable to store font Using type Single to store coordinates Variable to store left margin value Variable to store top margin value

45.  2009 Pearson Education, Inc. All rights reserved. 45 Outline (2 of 7 ) Creating a Font object Drawing a rectangle using the DrawRectangle method

46.  2009 Pearson Education, Inc. All rights reserved. 46 Outline (3 of 7 ) Drawing a text using the DrawString method Drawing a line using the DrawLine method

47.  2009 Pearson Education, Inc. All rights reserved. 47 Outline (4 of 7 ) Drawing a box around the check

48.  2009 Pearson Education, Inc. All rights reserved. 48 Outline (5 of 7 ) Create a PrintDocument object Add an event handler for the PrintDocument object Display an error message if no printers are installed Printing the document

49.  2009 Pearson Education, Inc. All rights reserved. 49 Outline (6 of 7 ) Create a PrintDocument object Add an event handler for the PrintDocument object Display error message if no printers are installed

50.  2009 Pearson Education, Inc. All rights reserved. 50 Outline (7 of 7 ) Specifying the print document Previewing the document to be printed