1

Lesson 13 — Graphics, Help, and Deployment

Microsoft Visual Basic .NET, Introduction to Programming

2

Objectives

Use ToolTips to provide immediate Help to the user. Implement Graphics methods and scaling techniques

to draw graphs. Provide Help to a user through a pop-up Help button

on the form. Use the HelpProvider control to attach Help topics

within a Help file to specific controls. Write HTML code for Web pages that serve online

Help for an application. Deploy a simple application to another machine that

hosts the .NET framework.

3

Vocabulary

Deployment HelpProvider control High-level programming language Modal dialog box Source code

4

ToolTips

ToolTips appear in the familiar yellow box that pops open when you hover the mouse pointer over a control, text box, or form. You affix ToolTips to controls and forms by adding a ToolTip control to an application and using its SetToolTip method to associate a particular control with a string that then becomes the control’s ToolTip.

5

Adding a ToolTip

There are two ways to add a ToolTip control to a project. In the form’s Designer, you can add a ToolTip control to the form’s component tray by dragging the control from the Toolbox to the form or by double-clicking the control in the Toolbox.

You can also create a ToolTip control using the statement:

Dim ToolTip1 As New ToolTip()

6

ToolTip

The following statement associates the ToolTip, “Enter a value for a:” with a button, Button1.

ToolTip1.SetToolTip(Button1, "Enter a value for a:")

Typically, you would add a statement for each control to document its use.

7

Pens and Colors

All the graphing methods work with a pen or brush. The pen component determines the color and thickness of lines and shapes drawn by the Graphics methods. A typical declaration for a pen appears below:

Dim myPenDraw As New System.Drawing.Pen(myColor, 3)

8

Colors

The declaration of the myColor variable appears below:

Dim myColor As Color = Color.DarkCyan

A line to change myColor to Red appears below:

myColor = Color.Red

9

The Paint Event

The Paint method of the picture box (or form) is used to invoke the Graphics methods that are used to draw shapes and text. The Paint method has a special parameter (e of type PaintEventArgs) through which the Graphics methods are called and executed.

10

ReDraw

To force a picture box to redraw itself, the picture box’s Refresh method is called. This allows lines of code in a button to change the value for the coefficients of the equation and then call on the picture box to redraw itself and display the new graph.

11

Note

All the Graphics methods use pixels to locate the points, lines, and shapes drawn on a form or picture box. Pixel is short for picture element. It is the smallest screen element that can represent a colored dot. In past versions of Visual Basic, properties of forms and picture boxes could impose a custom coordinate system that was, in turn, translated into pixel coordinates. Those properties are not included in Visual Basic .NET.

12

DrawLine Method

You use the DrawLine method to draw a single line from one point to another. There are several versions of the method which differ only in the number and data types of parameters sent to the method. The version used in the Graphing project, in addition to the pen parameter, requires four integer data type parameters. The first two represent the x and y coordinates of the first endpoint of the line. The third and fourth parameters represent the coordinates of the line's second endpoint. Another version accepts the pen parameter and four numeric parameters of the Single data type that represent the coordinates of the endpoints. Another accepts two parameters (beside the pen parameter) of the Point type.

13

The Point Type

The Point type is part of the System.Drawing library. Each point has an x and a y component specifying the x and y coordinates of a point.

14

The DrawLines Method

The DrawLines method draws lines from point to point. The parameter sent to the method (in addition to the pen parameter) is an array of the Point data type.

When the x and y coordinates of the graph are generated, they are translated into pixel coordinates and stored in the Points array .

15

Scaling the x and y Values

The pixel coordinates of the points that make up the area of a picture box are very unlike the coordinates used in math classes to graph points and lines. In a picture box, the upper left corner is the “origin” of the coordinate system. The first value of the pixel coordinate represents the column number and the second number represents the row number. The column coordinates get larger from left to right, just as the x coordinate of a graph in math class. But the row pixel coordinates in a picture box gets larger going from top to bottom, not from bottom to top as in a math graph.

16

Scaling

A second consideration in converting from x, y coordinates to pixel coordinates is the number of pixels compared to the number of units represented in the graph. A typical math graph may span from –10 to 10 in both the x and y directions. The number of pixels in a medium to small picture box numbers in the hundreds and, of course, all the pixel coordinate values are positive.

17

TabPage Collection Editor Showing the Addition of the First Tab Page

18

The Quadratic Tab Page Showing the Final Placement of Controls

19

Step-by-Step 13.1

Dim myColor As Color = Color.Red

Dim xMax As Integer = 10

Dim yMax As Integer = 10

Dim a, b, c As Double

Dim Points(100) As Point

20

Step-by-Step 13.1

Dim myPenDraw As New Pen(myColor, 3)

Dim myPenAxis As New Pen(Color.Green, 2)

Dim halfx As Integer = picQuadratic.Size.Width / 2

Dim halfy As Integer = picQuadratic.Size.Height / 2

e.Graphics.DrawLine(myPenAxis, 0, halfy, 2 * halfx, halfy)

e.Graphics.DrawLine(myPenAxis, halfx, 0, halfx, 2 * halfy)

21

Appearance of the Application after the First Installment of Code in the Paint Method

22

Step-by-Step 13.1

Dim xWidth As Integer = picQuadratic.Size.Width

Dim yHeight As Integer = picQuadratic.Size.Height

Dim xMultiple As Double = xWidth / (2 * xMax)

Dim yMultiple As Double = -yHeight / (2 * yMax)

Dim xOffset As Integer = xWidth \ 2

Dim yOffset As Integer = yHeight \ 2

23

Step-by-Step 13.1

a = CDbl(txtA.Text)

b = CDbl(txtB.Text)

c = CDbl(txtC.Text)

Dim x, y As Double

Dim Increment As Integer = xWidth / 100

Dim Index As Integer = 0

24

Step-by-Step 13.1

For x = -xMax To xMax Step 2 * xMax / 100 y = a * x * x + b * x + c With Points(Index) .X = CInt(x * xMultiple) + xOffset .Y = CInt(y * yMultiple) + yOffset End With Index += 1Nexte.Graphics.DrawLines(myPenDraw, Points)

25

Step-by-Step 13.1

Dim Answer = MessageBox.Show("Would you like to change the graphing window?", _

"Graphing Window", MessageBoxButtons.YesNo, MessageBoxIcon.Question)

If Answer = MsgBoxResult.Yes Then

xMax = CInt(InputBox("Enter maximum value for x:"))

yMax = CInt(InputBox("Enter maximum value for y:"))

End If

26

Step-by-Step 13.1

If TabControl1.SelectedTab Is tpQuadratic Then

If txtA.Text = "" Then

MessageBox.Show("Enter values for a, b, and c.")

Exit Sub

End If

picQuadratic.Refresh()

End If

27

Step-by-Step 13.1

ToolTip1.SetToolTip(picQuadratic, "Max x: " & xMax & vbCrLf & "Max y: " & yMax)

28

Note

The constant vbCrLf is a shortcut for the carriage return and linefeed characters. Including this constant in the string shown by the ToolTip forces the second part of the string, "Max y: ...", to appear on a second line.

29

Pop-Up Help

A Help button is another way to provide Help to the user. The Help button replaces a form’s Minimize and Maximize buttons. The user clicks the Help button and then clicks on the control with which he or she wants Help. If provided, Help appears in the form of a pop-up window, not unlike a larger, shadowed version of a ToolTip.

30

HelpProvider Control

The HelpProvider control resides in the component tray and has no visible appearance in the application.

After you add the HelpProvider control to a form, change the HelpButton property of the form from its default setting of False to True. The Help button cannot appear with a form’s Minimize and Maximize buttons, so you need to turn them off by setting the MinimizeBox and MaximizeBox properties of the form to False.

31

The Help Button

32

HelpString Property

To provide pop-up help for a particular control, you enter a help string into the control’s HelpString property. The Help string can be hundreds of words long. It is a good idea to work on the text of the Help string in a text editor and then copy and paste it to the HelpString property of the control in the control’s Property window.

33

Note

Once you have clicked the Help button, you activate pop-up Help for the tab page by clicking any of the controls on the page. Clicking the body of the page or the tab itself does not activate the Help window.

34

Online Help

Online Help lets you provide help in the format of Web pages, either resident in the application on a local machine or on the Internet.

Once you link your application through the HelpProvider control introduced in the last section to a Web page on the Internet or an HTML page stored locally, the extent of the Help you can provide is almost unlimited. A Help page stored on the Internet means that, if necessary, the contents of the page can be changed to give the user the most up-to-date information about running an application. Hyperlinks on the Help page can send a user to other Web pages and even more information.

35

Note

Although it is customary to launch Help by pressing the F1 key when the control for which you want help has the focus, you can also launch help by clicking the Help button (if present) and clicking again on the control.

36

Note

Setting the HelpKeyword and HelpNavigator properties are necessary to activate online Help but, in this exercise, these properties are not used.

37

Step-by-Step 13.3

<html> <head> <title>Graphing Help Jump

Page</title> </head> <body> <h1>Graphing Help</h1> <hr> <table> <tr> <td>

<li>Click here for help with <a href =

"EnteringValues.htm">Entering Values</a></li>

<li>Click here to read about <a href = "Quadratic.htm">Quadratic

Equations</a></li> </td> </tr> </table> </body></html>

38

JumpPage.htm

39

Step-by-Step 13.3

<html> <head> <title>Entering Values

Help Page</title> </head> <body> <h1>Entering

Values</h1> <hr>

<p>Enter decimal or integer values for the

coefficients of the equation.</p>

</body></html>

40

The Entering Values Help Page

41

Deployment

Deployment of an application means making your application available to others.

42

Languages

Programs are written in source code. Source code is the program code written by the programmer to solve a problem. What the source code looks like depends on the programming language. Visual Basic .NET is a high-level programming language. This means that it is a language easily understood by a programmer, used to provide instructions to a computer about the input, processing, and display of data.

To get from source code in Visual Basic to the language used by the processor to actually manipulate data and turn it into information requires several steps and the help of the operating system, a language compiler, and the common language run-time files.

43

Languages

The language compiler turns the source code into Microsoft intermediate language (MSIL) code. All the high-level languages in Visual Studio are converted to the same intermediate language. This is one of the reasons that applications can be built using several languages. The pieces, once compiled, are able to work together.

Once the application is converted to MSIL code, it can run on any computer that supports the .NET framework. The .NET framework supplies the common language run-time file that executes the code and the .NET framework class library. The class library includes objects available to all the .NET programming languages, objects for file I/O, messaging, networking, and security.

44

Languages

Moving a program from one computer to another is easy, as long as the target computer supports the .NET framework. Indeed, .NET is Microsoft’s vision for the future and all of its applications will one day be written in a .NET language. Remember, the future in the world of computers cannot be predicted for more than about five years.

45

Deployment

Deploy a simple .NET application by moving its .exe file to the new computer or by copying the file through a network, disk, or the Internet. If the new computer supports the .NET framework, that’s all the program needs to run on the local machine. No entries are made in the local machine's registry.

To remove the application from the target machine, merely erase its file from its folder. No other action needs to be taken: there are no hidden DLL files lurking in folders taking up disk space.

46

Historically Speaking

In the past, many computer languages have been translated from high-level source code to the code actually used by the processor by passing through more than one stage. In an early version of the C programming language, source code was first translated to Microsoft Assembly language. The Microsoft Assembler then translated the assembly language program into machine code executed by the machine’s processor. A language called Forth was compiled to a special language that was then executed by a program called the Forth Virtual Machine. This program turned an actual processor into a Forth processor created by the program.

47

Historically Speaking

A similar system was used by an early version of the programming language Pascal. The high-level code was turned into P-code. The P-code was, in turn, executed by an interpreter, which turned each line of P-code into machine language and executed it on the local processor. Even Java passes through an intermediate step called Bytecode. A program that becomes part of the browser then executes the Bytecode.

48

Summary

All users expect extensive online Help to run an application.

ToolTips are attached to controls by executing the SetToolTip method of the ToolTip control. When you hover the mouse pointer over a control with a ToolTip, Help text appears (for a limited time) in a yellow box at the site of the mouse pointer.

Pen objects are required to draw figures on the screen.

49

Summary

The Paint method of the picture box (or form) is used to invoke the Graphics methods used to draw shapes and text. The Paint method has a special parameter (e of type PaintEventArgs) through which the Graphics methods are called and executed.

Since the coordinate system of a picture box does not match the coordinate system used to graph mathematical equations, x and y values generated by mathematical equations have to be scaled and altered.

The HelpProvider control is necessary to provide pop-up and online Help to an application.

50

Summary

Pop-up help is activated when a control’s HelpString property is set to a text message.

Online help is activated when the HelpProvider’s HelpNamespace property is set to a Web page's URL or local path name and a control’s HelpProvider and HelpNavigator properties are set.

Although it is only as good as the effort that has gone into creating it, online Help has no limits. Its size depends on local disk space or space on the Internet server. If it is on the Internet, it can be updated to provide up-to-the-minute information about running an application.