In some of the previous chapters, you learned about many of the controls that you can use in Visual Basic. These controls are the heart and soul of most programs that you create. In Chapter 9, "Using the Windows Standard Controls," you learned about many of the controls that have been a part of Visual Basic since its inception. These controls let you work with text, handle choices, work with lists, and initiate program actions. In Chapter 10, "Using the Windows Common Controls," you learned about the controls that are used in many Windows 95/Windows NT programs. If you have followed the progress of Visual Basic, you know that each new version brings with it new and enhanced controls. In version 5 of Visual Basic, Microsoft did not disappoint us. Visual Basic 5 contains some new controls that give you greater capabilities in your programs. Three of these controls are the subject of this chapter:
NOTE: The controls discussed in this chapter are available only in the Professional and Enterprise Editions of Visual Basic. If you are using the Learning Edition, you won't be able to re-create the examples.
Much of the information that computer programs deal with is presented in the form of columns and rows. The most common example of a program which deals with this type of information display is a spreadsheet. Since spreadsheets were among the first successful commercial PC programs, and spreadsheet software is one of the two most widely used program categories in the world (word processors being the other), it is safe to assume that people have become very comfortable seeing data displayed in rows and columns. In fact, for many people, and many types of data, this is the preferred method of viewing information.
Figure 11.1 shows a typical table view of data.
FIG. 11.1
A table view allows users to quickly view and process a large amount of data.
Visual Basic has two separate controls for working with rows and columns of information: the DBGrid control for displaying and editing the contents of a database, and the new MSFlexGrid control for handling many other grid display needs. The DBGrid control is covered in Chapter 30, "Doing More with Bound Controls."
NOTE: The MSFlexGrid control can be bound to a data control to display information from a database. However, the information is displayed as read-only and therefore cannot be modified as it can with the DBGrid control.
The MSFlexGrid control is capable of displaying text or pictures in any of its cells. Moreover, you can use the grid to sort information in the tables and format the information for easier viewing. The FlexGrid, as it's also known, is capable of fixing (or freezing) rows and columns along the top and left edges of the grid. This lets you provide labels for the items that are always displayed to the user. Sounds great, right? Then let's take a look at how this grid works.
The first step to using the MSFlexGrid control is to add it to the Toolbox. You do this by choosing Project, Components. This brings up the Components dialog box, which allows you to add and remove controls and other components from your project. To add the MSFlexGrid, select the check box next to the control name and click OK. The control is listed as Microsoft FlexGrid Control 5.0 and is contained in the Msflxrd.ocx file, usually in your \Windows\system directory. When you close the Components dialog box, the FlexGrid is added to the Toolbox. It appears as a yellow grid with a cylinder attached.
After adding the control to the Toolbox, you are ready to add a FlexGrid to your form. Do this by clicking the control and then drawing it on the form. The FlexGrid is initially drawn with two rows and two columns as shown in Figure 11.2.
FIG. 11.2
Resizing the FlexGrid in the design environment does not change the number
of rows or columns.
After drawing the control on the form, you first want to specify a unique name for the control. Then you are ready to begin setting the properties that will control its appearance and be-havior.
Controlling the FlexGrid's Appearance There are several properties that affect the appearance of the FlexGrid control. The FlexGrid control is much more customizable than the standard grid included with previous versions of Visual Basic. Properties can be used to control the headers of the grid, the colors that are used to indicate the various states of cells, and of course the fonts used to display information. The Rows and Cols properties of the FlexGrid determine how many total rows and columns display in the grid. If the number of rows and columns is greater than can fit on-screen, the FlexGrid automatically provides scrollbars. Some of the displayed rows and columns can set as fixed (non-scrolling), which creates Excel-style headers. The headers are controlled by the FixedRows and FixedCols properties. The default value of these properties is 1, but you can set them to anything from 0 up to the value of the Rows and Cols properties respectively. These four properties are illustrated in Figure 11.3.
FIG. 11.3
Use fixed rows and columns for the headers of the grid.
To control the colors displayed, the FlexGrid control has five major sets of color properties. These properties are summarized in Table 11.1.
Background Color Property | Foreground Color Property | Color Use |
BackColor | ForeColor | Controls the colors of any standard cells in the grid. A standard cell is one that is not part of the fixed rows or columns and is not selected. |
BackColorFixed | ForeColorFixed | Controls the colors of the "header" cells in the fixed rows and columns. |
BackColorSel | ForeColorSel | Controls the colors in cells that are selected. |
BackColorBkg | N/A | Controls the color of the "empty space" in the FlexGrid control that is not occupied by any cells. |
CellBackColor | CellForeColor | Controls the color of an individual cell. Can only be used during runtime. |
The font information for most cells in the grid is controlled by the Font property of the grid itself. This property has the same effect as the Font property in other controls. However, you can format individual cells with different fonts using the properties listed next:
When the settings of the CellFont properties are changed, the properties will affect only the current cell, unless a group of cells is selected. If multiple cells are selected, the property change affects all the selected cells.
To change the appearance of an individual cell, you can use the Color and Font properties in conjunction with the Row and Col properties. For example, the following code selects the cell in row 3, column 4, and then changes it to a Bold Red font:
fgMain.Row = 3 fgMain.Col = 4 fgMain.Text = "Bold Font" fgMain.CellFontBold = True fgMain.CellForeColor = vbRed
In addition to handling the cells' colors, the FlexGrid control gives you control over the lines that make up the grid. These lines are controlled by the following properties:
Controlling the FlexGrid's Behavior As you know, the properties of a control affect not only its appearance, but its behavior as well. The FlexGrid is no exception. The FlexGrid has several unique properties that control how it behaves while running in your program. These properties include:
FIG. 11.4
No merging keeps all cells separate regardless of their contents.
FIG. 11.5
Free merging allows cells to automatically combine if their contents are the
same.
FIG. 11.6
Restricted merging allows merging in a single direction.
One use of the FlexGrid is to display the contents of a database table or the results of a query. The FlexGrid is can be bound to a data source, but can only display the data from the source; you cannot update via the attached Data control.
To use the FlexGrid to display data, follow these steps:
NOTE: Chapter 30, "Using the Visual Basic Data Control," contains detailed coverage of setting up and using data controls.
See "Understanding the Data Control," Chapter 29
Figure 11.7 shows a FlexGrid being used to display information from biblio.mdb, a sample database included with Visual Basic. The RecordSource property of the data control has been set to the following SQL statement:
Select PubID, Name, [Company Name] from Publishers
As you can see, the column headings default to the field names in the query results.
FIG. 11.7
You can display information from a database in the FlexGrid control.
Obviously, the FlexGrid would be of limited value if you could only make changes to it at design time or use it only to display database information. You can, of course, work with the grid and its contents from your program code. Most of the properties that you can set at design time can also be set from program code. In addition, there are other properties that enable you to set and retrieve the contents of individual cells. There are also several methods and events that are specific to the FlexGrid control. You take a look at these features in this section.
Working with Cells The most common task that you will perform in working with a grid is setting or retrieving the value of a cell. In the FlexGrid, the contents of all cells are treated as text strings. This means that you have to perform the appropriate checks and conversions if you need to retrieve numerical values or dates from the cells. There are three properties that you can use to set or retrieve the value of a cell in the FlexGrid: Text, TextArray, and TextMatrix. You can use each of these properties to retrieve or set the value of a single cell.
When used to retrieve a value, the Text property returns the value of the current cell. This cell is defined by the settings of the Row and Col properties. The following code shows how you would retrieve the value of the cell in the second row and second column of the grid:
fgMain.Row = 1 fgMain.Col = 1 txtReturn = fgMain.Text
NOTE: The row and column numbers are zero based, meaning that the first row is row 0, the second row is row 1, and so forth.
When using the Text property to set a value, the cell(s) that are affected depend on the setting of the FillStyle property and the current user selection. If only a single cell is selected, the Text property only sets the value of the selected cell. If multiple cells are selected, the Text property will set the value of the current cell if the FillStyle property is set to 0, or will set the value of all the selected cells if the FillStyle property is set to 1. The Text property has one disadvantage in its use: You can only retrieve or set the value of the current cell. This means if you want to process multiple cells, you will have to set the Row and Col properties for each cell's value you want to retrieve:
fgMain.Row = 1 fgMain.Col = 1 fgMain.Text = "One Cell" fgMain.Col = 2 fgMain.Text = "Another Cell"
The TextArray property provides another means of setting and retrieving the value of a cell. The TextArray property can be used to retrieve the value of any cell, not just the cur- rent cell. This makes it a little easier to use than the Text property for working with multiple cells. The TextArray property uses a single index to specify the cell to be retrieved. This index is determined by multiplying the desired row number by the number of columns in the grid and then adding the desired column number. This index numbering system is shown in Figure 11.8. The following code shows how to retrieve the value from the cell in the third column of the second row:
inDesiredCol = 2 inDesiredRow = 1 txtRet = fgMain.TextArray(inDesiredRow * fgMain.Cols + inDesiredCol)
FIG. 11.8
TextArray indexes go across each row sequentially.
The final property for setting and retrieving the value of a cell is the TextMatrix property, which requires two arguments: the index of the row and the index of the column to be retrieved. This is probably the easiest of the value properties to use. The following code shows how the TextMatrix property would be used to retrieve the value from the cell in the third column of the second row:
txtReturn = fgMain.TextMatrix(1,2)
Notice in Figure 11.8 that the row and column numbers start with 0. Therefore, code example row 1 is actually the second row in the grid, and column 2 is the third column.
Adding and Deleting Rows There are two ways that you can change the number of rows that are contained in the FlexGrid: You can change the Rows property of the grid, or you can use the AddItem and RemoveItem methods. Whereas changing the Rows property adds or removes items from the bottom of the grid, the FlexGrid's methods let you control the insertion and deletion points.
NOTE: The only way to change the number of columns is by setting the Cols property of the grid.
The AddItem method enables you to add a new row to the FlexGrid control. By default, the row is added to the bottom of the grid. You can, however, specify an index value for the method to insert the row somewhere else in the grid. This method works the same way as a list box's AddItem method. When using the AddItem method, you must specify the text to insert in at least the first column of the grid. The following lines of code show how the AddItem method can be used:
fgMain.AddItem "NewRow" fgMain.AddItem "NewRow",2 fgMain.AddItem "NewRow" & Chr(9) & "NewRow"
NOTE: To specify the values for multiple cells, create a text string containing the values of all the input cells, in column order. Between each pair of values, insert the Tab character by using the Chr(9) function.
To delete a specific row from the grid, you use the RemoveItem method, which requires you to specify the row number of the row to be removed. This method works in a similar manner to the RemoveItem method of the ListBox control. The following code shows you how to remove the second row of the grid. (Remember that row numbers are zero based.)
fgMain.RemoveItem 1
NOTE: The AddItem and RemoveItem methods do not work with fixed rows.
To clear the entire grid, you use the Clear method, as shown in the following line:
MSFlexGrid1.Clear
Understanding the Unique Events of the FlexGrid The FlexGrid control responds to many of the same events as other controls. There are, however, several unique events that you will find useful as you program the grid:
A possible use of these events is updating another control when a user chooses a new cell. For example, you could have report detail information displayed when a user clicks a particular cell.
The Animation control provides you an easy way to get animation in your programs. You use the Animation control to play silent AVI (Audio Video Interleaved) clips. The AVI file format is basically aseries of bitmaps that are shown in sequence to create the animation effect, similar to the individual drawings in a cartoon. You would typically use the Animation control to indicate that a task is in progress, such as the File Copy routine of Windows 95, shown in Figure 11.9. These animations run in the background while other tasks are performed.
FIG. 11.9
A copy in progress is indicated by a simple animation.
NOTE: Another way to create simple animation effects might be to use a Timer control to change the position of an Image control at a specified interval. Although this method requires a little more coding than is necessary with the Animation control, you do not need to have your animation already saved in an AVI file. The Timer control is covered in Chapter 9, "Using the Windows Standard Controls."
You can find additional information about creating your own animation in "Creating Multimedia Programs," on this book's CD-ROM.
See "Counting Time," Chapter 9
The Animation control is one of the two controls contained in the Windows Common Controls 2 set. The other control is the UpDown control discussed in the later section called "Using the UpDown Control." These controls are contained in the file Comct232.ocx. To use the Animation control, you have to first add "Microsoft Windows Common Controls-2 5.0" to your Toolbox by using the Components dialog box. Choose Project, Components to access this dialog box.
After you have added the Animation control to your Toolbox, you can add an instance of the control to your form by drawing it on the form. Figure 11.10 shows the initial appearance of the Animation control.
FIG. 11.10
The Animation control initially looks like a picture box with a reel of film
in the middle.
Drawing the Animation control on the form provides the container for the animation sequence. However, to run an animation, you need to open a file and start playback.
To open a file, use the Open method of the Animation control. (Several AVI videos are included in the \Graphics\AVIs subdirectory of Visual Basic, if you chose to install them.) After opening an AVI file, execute the Play method to start the animation. The sample code in Listing 11.1 is used to play an AVI file.
Private Sub cmdPlayAvi_Click() anmAVIPlayer.Open "D:\VB5\Graphics\AVIs\filenuke.avi" anmAVIPlayer.Play End Sub
TIP: You can set the Animation control's AutoPlay property to True to start the video automatically, without executing the Play method.
To stop the animation, simply use the Stop method of the control as shown in the following line of code:
anmAVIPlayer.Stop
Figure 11.11 shows the setup of the Animation control with a CommonDialog control and command buttons to start and stop the playback of the video. Figure 11.12 shows the program in use.
FIG. 11.11
The complete setup of the Animate project includes buttons to control playback.
FIG. 11.12
Running the Animate project and pressing the Play Animation button causes
the video to play repeatedly.
The code shown in Listing 11.1 "loops" the video's playback. In other words, the animation will be played over and over from start to finish until the Stop method executes. There are, however, three optional parameters to the Play method which allow you to change this behavior:
These optional parameters are used in the following line of code, which repeats frames 5 through 15 of an animation two times:
anmAviPlayer.Play 2, 5, 15
You can specify any or all of the optional parameters. Any parameters that are omitted will use their default values. The parameters must be specified in the order Repeat, Start, and Stop. If you omit one of the earlier parameters, you must use a comma as a placeholder.
The UpDown control is unique in that it is not designed to be a stand-alone control. Instead, it is designed to work with another "buddy" control to allow the user to easily modify its numeric values. The UpDown control, shown in Figure 11.13 with a text box, consists of a pair of arrow buttons. These buttons let the user increment or decrement the value of a numeric control. The UpDown control can be used with any other control that can handle numbers, including text boxes, labels, scrollbars, and sliders.
FIG. 11.13
The UpDown Control allows the user to adjust the value of a number.
To use the UpDown control in your program, you must first add it to the Toolbox by using the Components dialog box. The control is part of the group Microsoft Windows Common Controls - 2. After you have added the control to your Toolbox by choosing Project, Components, you can add an instance of the control to the form. To set up the UpDown control, follow these steps:
After completing the basic setup of the UpDown control, you can set other properties to control its appearance and behavior. For controlling the appearance of the UpDown control, the two key properties are:
The effects of the Alignment and Orientation properties are shown in Figure 11.14.
FIG. 11.14
The UpDown control can appear in several forms.
Probably of greater importance to the programmer and user are the properties that determine the behavior of the UpDown control. These properties are:
When you use the UpDown control, there are two ways of obtaining the number selected by the user: retrieving the Value property of the UpDown control or retrieving the appropriate property of the buddy control. For almost all cases, you will use the Value property of the UpDown control. The only time you would want to use the property of the buddy control is if the user were allowed to enter a value that is outside the range of the UpDown control.
CAUTION: Keep in mind that the SyncBuddy property previously mentioned updates the buddy control with its values, not the other way around. In the example figures, if a user were to type a number in the text box, the UpDown control's Value property would not be updated. One way to remedy this would be to assign the Value property in the text box's Change event.
In addition to the usual events that are present for most controls, the UpDown control has three key events of interest:
This chapter introduced you to some of the new controls that were added to Visual Basic 5. The first control, the FlexGrid, allows you to display data in a spreadsheet format. The Animationcontrol lets you add videos to your forms. The UpDown control lets the user change numeric values by using the mouse. To learn more about other controls, refer to the following chapters:
© Copyright, Macmillan Computer Publishing. All rights reserved.