1 / 60

Designing the Visual Interface

Designing the Visual Interface. Objectives. In this chapter you will learn: About the Graphics Device Interface How to draw in a window How to work with graphic object classes How to work with menus and commands How to work with toolbars and buttons. The Graphics Device Interface.

misae
Download Presentation

Designing the Visual Interface

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing the Visual Interface Microsoft Visual C++ .NET Chapter 12

  2. Objectives In this chapter you will learn: • About the Graphics Device Interface • How to draw in a window • How to work with graphic object classes • How to work with menus and commands • How to work with toolbars and buttons Microsoft Visual C++ .NET Chapter 12

  3. The Graphics Device Interface • A device is a generic term that refers to a particular piece of computer hardware, such as a monitor or printer • A device driver is a specialized type of program that allows the Windows operating system to communicate with a particular device • Many different types of devices, produced by numerous manufacturers, exist for personal computers • For Windows to communicate with a particular device, a driver must exist for it Microsoft Visual C++ .NET Chapter 12

  4. The Graphics Device Interface • When designing a visual interface, you must consider the program’s appearance on output devices such as monitors, printers, and plotters • The graphics device interface, or GDI, manages communication with different types of Windows graphical device drivers • In essence, the GDI acts as a translation layer between your application and the device to which it outputs • Figure 12-3 illustrates how the GDI translates between Windows applications and devices Microsoft Visual C++ .NET Chapter 12

  5. GDI Translation Between Windows Applications and Devices Microsoft Visual C++ .NET Chapter 12

  6. Device Contexts • To draw in an application window, you must do so through a device context • A device context is a Windows GDI data structure that stores information about the text and graphics displayed by an application • The data structure that represents a device context is created and manipulated by the classes listed in Figure 12-4 Microsoft Visual C++ .NET Chapter 12

  7. Device Contexts • The most important of the device context classes listed in Figure 12-4 is the CDC class; this is the base class for the other device context classes Microsoft Visual C++ .NET Chapter 12

  8. Mapping Modes • Recall that you reference a window’s pixels with x-axis and y-axis coordinates, beginning in the upper-left corner of a screen or window at an x-axis position of 0 and a y-axis position of 0 • A mapping mode is a coordinate system that determines the units and scaling orientation in a device context • Figure 12-5 illustrates the default measurement system Microsoft Visual C++ .NET Chapter 12

  9. Default Measurement System Microsoft Visual C++ .NET Chapter 12

  10. Mapping Modes • Mapping modes begin with a prefix of MM_, followed by a description of the mapping mode • The default mapping mode illustrated in Figure 12-5 is named MM_TEXT • Figure 12-6 lists the eight mapping modes you can use in applications Microsoft Visual C++ .NET Chapter 12

  11. Mapping Modes • All mapping modes begin with a point of origin of 0, 0 in the upper-left corner of the screen or window • However, for all of the mapping modes except MM_TEXT (the default), MM_ISOTROPIC, and MM_ANISOTROPIC, the values along the y-axis values decrease as you move away from the point of origin Microsoft Visual C++ .NET Chapter 12

  12. Mapping Modes • Figure 12-7 illustrates how y-axis values decrease as you move away from the point of origin Microsoft Visual C++ .NET Chapter 12

  13. Working with Color • Graphical computer systems, such as Windows, use the red, green, blue, or RGB color system for specifying colors • You create individual colors in the RGB color system using the RGB() macro • The color created with an RGB() macro is sometimes referred to as an RGB triplet • The syntax for using the RGB() macro is RGB(red, green, blue) Microsoft Visual C++ .NET Chapter 12

  14. Working with Color • Each of the three parameters in the RGB() macro can accept an integer value ranging from 0 to 255, which indicates the intensity to use for each color • You create primary colors of red, green, or blue by using a full intensity value of 255 for one of the primary colors, but values of 0 for the other primary colors • Figure 12-8 lists RGB color values for some common colors Microsoft Visual C++ .NET Chapter 12

  15. Working with Color • You can also declare your own color variable using the Windows API COLORREF data type • You create a color variable by assigning the RGB triplet returned from the RGB() macro to a variable of the COLORREF data type Microsoft Visual C++ .NET Chapter 12

  16. Drawing in a Window • Graphic objects are lines, rectangles, and circles that you add to a device context • You can create lines, rectangles, and circles using different colors, line thickness, and fills • Fills refer to colors and patterns that you apply to the interior of closed images such as rectangles and circles • Figure 12-9 shows an example of some of the graphic objects that you can display in a window through the device context Microsoft Visual C++ .NET Chapter 12

  17. Graphic Objects Microsoft Visual C++ .NET Chapter 12

  18. Drawing in a Window • To start creating the Stock Charting program, refer to the procedures listed on pages 635 and 636 of the textbook • To add dialog controls to the CStockChartingView class’s dialog window, see pages 636 through 638 of the textbook Microsoft Visual C++ .NET Chapter 12

  19. Drawing in a Window Microsoft Visual C++ .NET Chapter 12

  20. Understanding the OnPaint() Function • All Windows applications must provide an event handler for the WM_PAINT message • The WM_PAINT message informs an application that its window must be redrawn, or reprinted • Events that generate WM_PAINT messages include the user’s resizing a window or a part of a window that is obscured by another window becoming visible again • The message handler function for the WM_PAINT message is named OnPaint() and is inherited from the CWnd class Microsoft Visual C++ .NET Chapter 12

  21. Understanding the OnPaint() Function • You will never actually see the OnPaint() message handler in your programs because it is well hidden by the MFC framework • Also, you will not normally need to override the OnPaint() message handler in your programs • You add your graphic object code to the OnDraw() function Microsoft Visual C++ .NET Chapter 12

  22. Overriding the OnDraw() Function • You use the OnDraw() function, which is inherited from the CView base class, to manage an application’s device context • Essentially, the WM_PAINT message causes the OnPaint() event handler to execute, which, in turn, causes the OnDraw() function to execute • To override the OnDraw() function in the CStockChartingView class, perform the steps on pages 640 of the textbook Microsoft Visual C++ .NET Chapter 12

  23. Overriding the OnDraw() Function • You will use the pDC pointer as a handle for accessing the application’s device context Microsoft Visual C++ .NET Chapter 12

  24. Updating the Display • To modify or replace the graphic objects that are already displayed in a device context, you must first call the Invalidate() function • The Invalidate() function notifies the update region that the window needs to be erased • The update region identifies portions of a window that need to be repainted • If an application’s update region is not empty, then Windows generates a WM_PAINT message Microsoft Visual C++ .NET Chapter 12

  25. Updating the Display • You can also notify the update region that only portions of a window need to be erased by using the InvalidateRect() and InvalidateRgn() functions • If you do not call the Invalidate() function to erase the device context before adding new graphic objects, any new graphic objects you add will be placed directly on top of the old graphic objects • To create the m_Chart enum variable and switch statement in the Stock Charting program, use the processes illustrated on pages 642 and 643 Microsoft Visual C++ .NET Chapter 12

  26. Working with the CDC Class • Recall that the CDC class and its derived classes are used for accessing an application’s device context • In addition to being the base class for other device context classes, the CDC class also contains all of the functions you need to draw in the device context • The CDC class contains many functions for drawing and for working with the device context in general Microsoft Visual C++ .NET Chapter 12

  27. switch Statement Added to OnDraw() Microsoft Visual C++ .NET Chapter 12

  28. Drawing Lines • You use the LineTo() function to draw lines in the device context • The LineTo() function accepts two arguments: the x-coordinate and the y-coordinate of the line’s ending position • You append the LineTo() function to the pDC pointer using the indirect member selection operator as follows: pDC->LineTo(x,y) • The current position is the starting point for any line or curve drawing function Microsoft Visual C++ .NET Chapter 12

  29. Drawing Lines • If you don’t want your lines to start at the origin 0, 0, you use the MoveTo() function to manually change the current position • You pass to the MoveTo() function an x parameter and a y parameter specifying the new current position Microsoft Visual C++ .NET Chapter 12

  30. Drawing Lines • To use LineTo() and MoveTo() functions to draw the axes for the Stock Chart program, follow the directions shown on pages 646 through 648 Microsoft Visual C++ .NET Chapter 12

  31. Drawing Lines • To add code to the OnDraw() function that converts the stock values and displays the line chart, follow the steps on pages 649 and 650 Microsoft Visual C++ .NET Chapter 12

  32. Drawing Lines • Add message handlers to the Stock Charting program as shown on pages 650 through 652 of the textbook Microsoft Visual C++ .NET Chapter 12

  33. Drawing Rectangles • You draw rectangles into the device context using the Rectangle() function • The Rectangle() function accepts four parameters: x1, y1, x2, and y2 • The x1 and y1 parameters represent the rectangle’s upper left corner, and the x2 and y2 parameters represent the rectangle’s lower right corner Microsoft Visual C++ .NET Chapter 12

  34. Drawing Rectangles • To use rectangles to create the Stock Charting program’s column chart, follow the steps on pages 653 and 654 Microsoft Visual C++ .NET Chapter 12

  35. Drawing Ellipses • In geometry, an ellipse is the mathematical term for an oval or circle • You use the Ellipse() function to draw ovals and circles in a device context • As with the Rectangle() function, the Ellipse() function accepts four parameters: x1, y1, x2, and y2 • Instead of representing actual points on the ellipse, the x1, y1, x2, and y2 parameters represent the upper-left and lower-right positions of the ellipse’s bounding rectangle Microsoft Visual C++ .NET Chapter 12

  36. Drawing Ellipses • The bounding rectangle determines the height and width of an ellipse Microsoft Visual C++ .NET Chapter 12

  37. Drawing Ellipses • To create the Stock Charting program’s scatter chart, use the steps on pages 656-658 Microsoft Visual C++ .NET Chapter 12

  38. Outputting Text • You add text to the device context using the TextOut() function • The TextOut() function accepts three parameters, using the syntax pDC.TextOut(x, y, string) • The x and y parameters represent the upper-left corner, where you want to place the text according to the mapping mode, and the string parameter is a CString variable or a literal string containing the text you want to be displayed Microsoft Visual C++ .NET Chapter 12

  39. Outputting Text • The SetTextAlign() function sets the horizontal and vertical alignment for text objects according to the x and y parameters of the TextOut() function • You append the SetTextAlign() function to the pDC pointer with a member selection operator, just as you do for other CDC functions • To set the alignment you want, you pass to the SetTextAlign() function one of the alignment values listed in Figure 12-37 in the text Microsoft Visual C++ .NET Chapter 12

  40. Outputting Text • In order to set text alignment, you must call the SetTextAlign() function before you call any TextOut() statements Microsoft Visual C++ .NET Chapter 12

  41. Outputting Text • The SetTextColor() function sets the color of any text objects displayed with the TextOut() function • You pass to the SetTextColor() function an RGB color value using either the RGB() macro or a COLORREF variable • Figure 12-39 shows the output Microsoft Visual C++ .NET Chapter 12

  42. Outputting Text • To add the axis labels to the Stock Charting program, follow the directions listed on pages 661 and 662 Microsoft Visual C++ .NET Chapter 12

  43. Graphic Object Classes • MFC includes several GDI classes for modifying the appearance of the graphic objects that you add to a device context • Some of the display elements you can select with the GDI classes include the size and colors of lines, the colors and patterns used to fill the interiors of closed objects, and the fonts used to display text objects Microsoft Visual C++ .NET Chapter 12

  44. Working with Pens • When you draw any type of object that includes lines, you use a pen to draw those lines • A pen is an object created with the CPen class that determines a line’s style, thickness, and color • You control the formatting of a pen with constructor functions • The CreatePen() function initializes a new pen with style, width, and color values Microsoft Visual C++ .NET Chapter 12

  45. Working with Pens • The syntax for using the CreatePen() function is: CPen variable; Variable.CreatePen(style, width, color); • Figure 12-41 lists some of the common style values you can pass to the style parameter Microsoft Visual C++ .NET Chapter 12

  46. Working with Pens • The CPen object width parameter determines the width of a line • If you pass a value of 0 to the width parameter, then the line thickness will always be one pixel wide, regardless of the mapping mode that is currently in use • The SelectObject() function loads an object into the device context • In more simplified terms, you can think of the device context as being an artist Microsoft Visual C++ .NET Chapter 12

  47. Working with Brushes • A brush is an object created with the CBrush class that determines the color and pattern that is drawn in the interior of a closed object • As with the CPen class, there are multiple methods of constructing a brush • You will use the same method of constructing and initializing a brush with CBrush constructors that you used with the CPen class • The CBrush class, however, includes several overloaded constructors that allow you to construct brushes using different attributes; you will learn about two of those constructors Microsoft Visual C++ .NET Chapter 12

  48. Working with Brushes • The first overloaded constructor creates a brush that fills an object with a solid color • The second overloaded constructor creates a brush that fills an object with a predefined pattern in a selected color • The syntax for creating a brush that fills an object with a solid color is CBrush variable color; • The syntax for creating a brush that fills an object with a predefined pattern in a selected color is CBrush variable(pattern, color); Microsoft Visual C++ .NET Chapter 12

  49. Working with Brushes • The value for the pattern parameter can be any of the predefined values listed in Figure 12-46, and the color parameter is simply an RGB color with which you want to draw the pattern Microsoft Visual C++ .NET Chapter 12

  50. Working with Brushes • To add some colored brushes to the Stock Charting program perform the procedures outlined on pages 669 through 671 Microsoft Visual C++ .NET Chapter 12

More Related