Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Special Edition Using Visual FoxPro 6

Special Edition Using Visual FoxPro 6 -- Ch 19 - The Visual FoxPro Component Gallery

Special Edition Using Visual FoxPro 6


Chapter 19

The Visual FoxPro Component Gallery




Using the Component Gallery

Visual FoxPro users have long benefited from the Project Manager. It gives them a way to easily organize and manage all the components for a project including programs, forms, reports, data, graphic files, and so forth. However, programming methodology has evolved. Now there exists a huge mass of reusable resources, which permits you to be much more productive. A new problem emerges: managing all these objects, resources, wizards, and tools. The Visual FoxPro Component Gallery is the solution to this problem.



The Component Gallery, shown in Figure 19.1, is a container that you can use to organize and maintain all your available Visual FoxPro resources. You can store visual class libraries, components, forms, programs, applications, graphics, tools, projects, and so forth. Furthermore, you can customize the Component Gallery any way you please. You can even create a visual representation of the same components in different logical groupings.

Figure 19.1 : The Visual FoxPro Component Gallery.

You can drag components from the Component Gallery and drop them on a form or project, as illustrated in Chapter 18, "The Visual FoxPro Foundation Classes." But then the Component Gallery supports all the functionality of the Project Manager and Class Browser, as you'll see later in this chapter.

All you have to do to open the Component Gallery is to choose Tools, Component Gallery. You can open the Component Gallery from the Command Window by typing the following:

DO (_GALLERY)

In either event, the Component Gallery appears as shown in Figure 19.1. As you can see, the resources are organized in logical groupings similar to the Windows Explorer. The logical groupings are visually represented in the left pane as folders, or catalogs. A visual representation of the resources is associated with each folder or catalog in the right pane. The right pane is called the Object Pane. The left pane is referred to as the Catalog Pane.

The Default FoxPro Component Gallery Contents

By default, the Catalogs item in the left pane refers to the group of available catalogs. The set of catalogs shipped with the Visual FoxPro Component Gallery is presented in Table 19.1. When you highlight the Catalogs object in the Catalog Pane, all catalogs appear in the Object Pane. Then you can click on a catalog object to display its contents.

Table 19.1  Visual FoxPro Component Gallery Default Configuration

Catalog

Description

Catalogs This catalog contains all the other catalogs.
VFP Main This catalog contains components used by other catalogs in the gallery; it contains everything.
Favorites This catalog is empty. You can put your favorite things here. When you create a program component from a wizard, it is placed in this folder. Note that the Favorites catalog is a global catalog. Global catalogs are always opened.
Visual FoxPro This default catalog contains all the Visual FoxPro components, templates, and tools.
Data This folder contains data-related tools and data sources.
Foundation Classes This catalog contains all of the Visual FoxPro Foundation Classes. The classes are organized in categories with a folder for each class.
Help This folder contains various readme files.
Templates This catalog contains folders containing categories of wizard templates.
Tools This folder contains tools and utilities that you might need while developing applications.
My Base Classes This catalog contains subclassed Visual FoxPro base classes. They are for you to customize as you please.
ActiveX This dynamic catalog contains either a list of all registered ActiveX Controls or a list of all Visual FoxPro ActiveX Controls.
World Wide Web This catalog contains folders. Each folder contains useful Web site URLs. You can double-click one, and the Internet Explorer is launched to connect to the associated Web site. Most of the folders contain Microsoft Web site URLs. However, some folders contain URLs for Visual FoxPro user groups and other Visual FoxPro resources that you might find useful.
Multimedia This catalog contains folders with various images, sounds, and video files you can use in your applications.
Samples This catalog contains folders with references to Visual FoxPro sample programs such as Tastrade, Solutions, and so forth.

Selecting Component Gallery Items

The Component Gallery is an extremely powerful context-sensitive system. It is pretty good at guessing what you normally want to do with an item when you select it based on the type of object you select. To perform an action on an item, you can do the following:

You can drag an object from the Component Gallery and drop it on a form or project. The Component Gallery knows what kind of object you are dragging and won't let you drop it in the wrong place. And when the Component Gallery does drop the object, it knows what you want done with the object. Table 19.2 describes what happens when you drag and drop particular object types onto other particular object types.

TIP
You can use another unique drag-and-drop technique to perform an action on an object. It involves using the Move icon located at the far left of the toolbar. First, click an object in the Object Pane to select the object. Then drag the Move icon to the desired target and drop it. The selected object also is dropped. You'll learn more about the Move icon later in this chapter.
Table 19.2  Actions Performed When You Drag and Drop an Item from the Component Gallery Object Pane to a Target Object

Item Type

Target

Action

Class Form Adds a class to a form
  Project Adds a visual class library to a project
Any item Catalog Adds an item to a catalog
  Folder Adds an item to a folder
Data Form Creates a grid object containing the table or view
Form Project Adds a form to a visual class library or a project
HTML Help File Form Adds an HTML button class to a form that launches the help
Image File Form Adds an Image class or sets the Picture property
  Control Adds an Image class or sets the Picture property
  Screen Sets the FoxPro wallpaper
Menu Form Adds a shortcut menu to a form
  Screen Opens the Menu Designer to edit a menu
Program Project Adds a program to a project
  Screen Opens designer to modify a program
Project Screen Opens the project
Sound File Form Adds a multimedia class to a form
Report Form Adds a button class to launch a report
Template Project Opens an appropriate wizard to create a program component and adds it to a project
Tool Screen Executes Tool
URL Form Opens a Web browser to connect to a Web site
Video File Form Adds a multimedia class to a form
In addition, you can double-click on an object, and some operation will be performed based on the type of object. Table 19.3 describes the actions performed when you double-click on an object.

Table 19.3  Actions Performed When You Double-Click on an Object in the Component Gallery Object Pane

Item Type

Action

Catalog Opens that catalog in the Object Pane
Class Opens the Class Designer
Form Opens the Form Designer
HTML Help Files Opens Help
Image File Opens the Image Editor (MS Paint)
Menu Opens the Menu Designer
Project Opens the project
Program File Opens a text editor
Sound or Video File Opens the Media Player
Report Opens the Report Designer
Template Opens an appropriate wizard to create a program component and adds it to a project
Tool Executes Tool
URL Opens a Web browser to connect to a Web site
When you right-click on a selected item in the Object Pane, the Item Shortcut menu appears. The Component Gallery is so smart that it knows all the actions that you are allowed to perform on a given object. When you right-click on a specific object, the Item Shortcut menu that appears contains a list of allowable actions that can be performed on the selected object. Table 19.4 describes the various offerings in the Item Shortcut menu. A typical Item Shortcut menu is shown in Figure 19.2.

Figure 19.2 : The Component Gallery item shortcut menu.

Table 19.4  Item Shortcut Menu Functions

Item

Action

Add to Project If the Property Manager is open, and the selected object can be added to a project, this item appears in the list. This item is described in Chapter 18, "The Visual FoxPro Foundation Classes."
Add to Form If the Form Designer is open, and the selected object can be added to a project, this item appears in the list. This item is discussed in Chapter 18, "The Visual FoxPro Foundation Classes."
Build This item builds a project. If the selected object is a project, this menu item appears.
Modify If a designer that can modify the selected object exists, this item appears in the menu. It opens the appropriate designer to edit the object. For example, if the selected object is a form, the Form Designer is opened.
View in Browser If the selected object is a class-type object, this item opens the FoxPro Class Browser so that you can look at its properties and methods.
Cut This item moves the selected object to the Gallery Clipboard, then dims the object. When a Paste operation is performed, the dimmed object is removed from the location of the cut.
Copy This item copies the selected object to the Gallery Clipboard.
Create Link This item creates a link to the selected object that can be inserted in a dynamic folder.
New Item This item adds a new item to a folder or catalog. Highlight this menu item, and you can choose an object type from a submenu that appears. You can create a new folder or add an existing object to the Object Pane. The Item Shortcut menu contains this item if you right-click on an empty spot in the Object Pane.
Paste This item adds the contents of the Gallery Clipboard to the selected folder.
Remove This item deletes the selected object from the component gallery. A message box appears, in which you can confirm or reject the deletion operation.
Rename This item enables you to rename the selected object.
Properties This item displays the Properties dialog box so that you can review or modify the properties for the selected object.

The Component Gallery Toolbar

The Component Gallery Toolbar, shown in Figure 19.3, consists of a Move icon, a view type drop-down list, and some toolbar buttons. At the right side of the toolbar are four buttons that control the display of the components in the Object Pane. The options are also present on the Windows Explorer. In other words, you can display the components as large icons, small icons, a list, or a detailed list.

Figure 19.3 : The Component Gallery toolbar.

The Move icon is used as an alternative scheme for drag-and-drop operations. You can select an object in the Object Pane and then drag and drop the Move icon to a form or project. For example, you can select a class component and drag the Move icon to a form. You might consider the Move icon to be a strange interface operation. On the contrary, it is quite innovative. Suppose you want to drag a component from the Component Gallery to a large form; you might discover that the Component Gallery covers the drop spot. The solution is to select the component, move the Component Gallery so that only its upper-left corner is visible, and then drag the Move icon to the drop spot on the form.

You can use the View Items drop-down list to select the default and various user-defined views of the catalogs in the Component Gallery. You can define a view using the Find Component dialog box to search for components that match designated search criteria. You can activate the Find Component dialog box by doing the following:

The Class Browser button is a toggle between the Component Gallery and the Class Browser. You use the Class Browser to examine and edit class methods, events, and properties.

The Open Catalog button displays the Open dialog box shown in Figure 19.4. You can specify a catalog to open by indicating either the name or filename of the catalog.

Figure 19.4 : The dialog box to open a catalog in the Component Gallery.

The Options button displays the Component Gallery Options dialog box, as shown in Figure 19.5. In it, you can alter the behavior of the Component Gallery.

Figure 19.5 : The Component Gallery Options dialog box with the Standard tab selected.

The Options dialog box has the following three tabs:

Table 19.5  Standard Tab Option Dialog Box Items

Item

Action

Enable Item Renaming If this check box is checked, you can rename a component in the Component Gallery by clicking on the component's label and typing a new name. The Item Shortcut menu renaming method is always available.
FFC Builder Lock If this check box is checked, you can designate that a builder opens when you drop a FoxPro Foundation Class on a form.
Drag and Drop to Desktop If this check box is checked, when you drop a visual class on the desktop, it appears as a sample on the desktop. For example, if you drop a control button on the desktop, a button will appear just as it would appear if it were dropped on a form. However, it has no functionality. You perform this test so that you can see what a class object looks like.
Advanced Editing Enabled If this check box is checked, a more complex set of tabs is added to the Class Item Properties dialog box. If you want to make any advanced modifications to the Component Gallery, you should set this tab.
Catalog Default Behavior
Open File as New View If this option is selected, when you double-click on a Component Gallery item that can be either opened or added, the item will be opened. (default)
Add File to Current View If If this option is selected, when you double-click on a Component Gallery item that can be either opened or added, the item will be added.
Items Default Behavior
Modify Item File If this option is selected, when you double-click on a Component Gallery item that can be either run or modified (such as a Form), the item will be run.
Run Item File If this option is selected, when you double-click on a Component Gallery item that can be either run or modified (such as a Form), the item will be modified.

The Find Component button opens the Find Component dialog box, as shown in Figure 19.6. You can search the entire Component Gallery for a component or group of components and save the search results as a new Component Gallery view. You can specify search criteria for the components you want to include in the view.

Figure 19.6 : The Component Gallery Find Component dialog box.

Now that you have looked at all facets of the Component Gallery, it is time to work with the Component Gallery. In the next section, you will create an application.

Creating an Application from the Component Gallery

You can easily create and maintain applications from the Component Gallery. Creating the application using the wizard templates is also easy. For this example, create a recipe book application. All you have to do is to open the Templates folder and click on the Recipes Template. The Enter Project Name dialog box then appears, as shown in Figure 19.7. Enter the name of the project for your new application, and adjust the directory if you want. Then click OK, and the application is created.

Figure 19.7 : The Component Gallery and the Enter Project Name dialog box.

If you examine Figure 19.8, you will see that the template-driven Application Wizard automatically built the application complete with a project. The project was placed in the Component Gallery Favorites folder.

Figure 19.8 : The MyRecipes project that was automatically created by the template-driven Application Wizard.

Now, click on Build with the Build and Run option set, and presto, you have an operational Recipe book application, as shown in Figure 19.9. Notice that it has multiple forms, and that Forms and Reports menus were added to the system menu.

Figure 19.9 : Results from running the MyRecipes application showing the application forms and new menus.

If this recipe book application is too simple for your needs, you can use the Component Gallery to enhance it. Perhaps you want to add a meal planner with an option to connect to the Internet grocery and order the ingredients automatically. Well, that might be a little ambitious. For now, use a simpler example. Let's use the Component Gallery to add a button that launches the Windows Calculator to the Ingredients form. Here are the steps:

  1. Open the Favorites catalog in the Component Gallery.
  2. Double-click on the MyRecipes project to open the Project Manager.
  3. Double-click on the Ingredients form in the Project Manager, and the Form Designer opens.
  4. From the Component Gallery, open the Foundation Classes folder. Then open the Buttons subfolder.
  5. Drag the Launch Button class from the Object Pane to the Ingredients form, and drop it. The _cmdlaunch Builder dialog box appears (see Figure 19.10).
    Figure 19.10: Using the Component Gallery to add a Calculator launch button to the MyRecipes project Ingredients form.
  6. Enter the path and filename of the Windows calculator in the Select File text box (C:\WINDOWS\CALC.EXE). You can click on the button with the ellipsis () to the right of the text box to help you find the path.
  7. Change the Caption for the launch button to \<Calculator. Now close the builder.
  8. Reposition and resize the Calculator launch button, as you like.
  9. Close the Form Designer.
  10. Build and run the application.

NOTE
During the build process, you might have to supply the directory of the FoxPro Foundation Classes directory containing the Launch Button class. It is ...\VFP98\ffc.

Now, when you click the Calculator button on the Ingredients form, the Windows Calculator appears.

Modifying the Behavior of a Component Gallery Catalog or Folder

As you become more familiar with the Component Gallery, you might want to revise it to conform to your lifestyle. You might want to create your own catalogs or folders, and rearrange the components and structure of the Component Gallery treeview.

Adding a Catalog or Folder

If you want to create a new catalog, just click on the Options button on the toolbar, and the Component Gallery Options dialog box appears. Click on the Catalogs tab, click the New button, and enter the name of the new catalog. Finally, click OK and exit from the Options dialog box. The catalog is added to the treeview.

Changing a Catalog to a Folder

With the exception of the Catalogs catalog, a catalog can contain only folders and items. Folders cannot be at the top level of the treeview. Therefore, if you want a catalog to be a folder, you can drag and drop your catalog into another catalog or folder. The former catalog becomes a folder, and its icon changes automatically from a catalog to a folder.

Changing the Behavior of a Catalog or Folder

If you want to change the configuration of a folder or catalog, right-click on the catalog or folder, and the Folder Properties dialog box appears. The dialog box contains the General, Node, Script, and Comments tabs. In the subsequent discussion, I will refer to a catalog, but the discussion relates to both catalogs and folders.

The General tab contains several text boxes, which are described in Table 19.6.

Table 19.6  Folder Properties Dialog Box General Tab Items

Item

Description

Name Designates the catalog's text label.
Description Displays text in the Description Pane when the catalog is selected. It is located at the bottom of the Gallery Window.
Picture Contains the path and filename of the icon file used to visually represent the catalog in the Gallery Window. Typically, the only field you will change is the Description text box to provide a useful description of the catalog.
Item Picture Specifies a default path and filename of the icon used to visually represent items in the catalog.
Item Desc. Designates the default text for the Description Pane when the item is selected.
The Node tab establishes values that are global to all tables. In other words, the Node tab is used to maintain the treeview. Table 19.7 specifies the items displayed in Node tab.

Table 19.7  Folder Properties Dialog Box Node Tab Items

Item

Description

ID Assigned when the catalog is created.
Link ID Specifies the link to other catalogs in the treeview. It is set when you use drag-and-drop operations to reposition a catalog in the treeview.
Class name Specifies the name of the class of the catalog.
Class Library Specifies the path and filename of the visual class library for the catalog.
Item class Specifies the class names of items in the catalog that have not yet been assigned classes.
Dynamic Catalog Specifies the expression, filename, or URL that launches when you select this catalog.
For example, suppose you want to modify the behavior of a folder to act similarly to the Windows Explorer. All you have to do is to specify a directory name in the Dynamic Catalog field, for a specified folder. Here are the steps:
  1. Click on the toolbar's Options button.
  2. Click on the Catalog tab.
  3. Click on the New button, and name the new catalog Windows Directory.
  4. Drag the new catalog to the favorites catalog. (It becomes a folder.)
  5. Right-click on the new folder, and choose Properties from the shortcut menu. The Folder Properties dialog box appears.
  6. Change the Description field to Display windows directory.
  7. Click on the Node tab, and change the Dynamic catalog field to C:\Windows.
  8. Click OK.

When you select the Windows Directory folder, the appearance of the Component Gallery changes, as illustrated in Figure 19.11. Notice that even the folder icon changes.

Figure 19.11: Component Gallery folder with the characteristics of the Windows Explorer.

The preceding example is an exception. Typically, the only Node tab field that you have to set is Item class to define default class items. For example, if a folder normally contains templates, specify _templateItem for the Class Name field. The interface and behaviors of the Component Gallery are maintained by classes in the Component Gallery class library (VpfGallery.vcx). Its path and filename are ...\VFP98\gallery\VpfGallery.vcx.

The Class Name field in the Node tab for catalogs and items refers to classes in the Component Gallery class library. The types of classes are presented in Table 19.8.

Table 19.8  Types of Classes in the Component Gallery Class Library

Item

Class Name

Object Types

ActiveX _ActiveXItem ActiveX control or server file (.ocx, .exe, .dll)
Catalog _CatalogItem Open Visual FoxPro catalogs
Class _ClassItem Any Visual FoxPro class from Visual class library file (.vcx) or from program file (.prg)
Data _DataItem Visual FoxPro data source (.dbc, .dbf, .qry, and so on)
Form _FormItem Visual FoxPro form file (.scx)
File _FileItem Any file with a valid associated application
Image _ImageItem Image files (.ani, .bmp, .cur, .dib, .gif, .ico, .jpg)
Menu _MenuItem Visual FoxPro menu (.mnx)
Program _ProgramItem Visual FoxPro program file (.prg)
Project _ProjectItem Visual FoxPro project file (.pjx)
Report _ReportItem Visual FoxPro report file (.frx)
Sample _SampleItem Visual FoxPro executable file (.app, .exe, .frx, .prg, .scx)
Sound _SoundItem Sound files (.wav, .rmi, .mid, .snd)
Template _TemplateItem Script Item Type
URL _UrlItem Web Item Type:Web documents (URLs)Local document file (.htm)Active document file
Video _VideoItem Video file (.avi, .mov)
Typically, you do not have to specify any items in the Scripts tab for a catalog or folder. Occasionally, though, you do need to set properties for a Component Gallery class to modify its behavior.

The Comments tab lets you save comments related to a specific catalog. You might find it useful to place programming notes in the Comments tab fields.

Modifying the Behavior of a Component Gallery Item

You can modify the behavior of a Component Gallery item in the Class Item Properties dialog box. To display this dialog box, right-click on an item in the Object Pane, and choose Properties from the shortcut menu. Table 19.9 describes the contents of the Class Item Properties dialog box.

NOTE
The Class Item Properties dialog box contains a group of advanced editing features that are not available by default because the item properties are usually handled automatically by the Component Gallery. If you need to access them, select the Advanced Editing Enabled check box in the Component Gallery Options dialog box. Then the Type, Scripts, Views, and Comments tabs appear.
Table 19.9  Class Item Properties Dialog Box

Item

Action

General Tab
Name Specifies the text value used as the component label.
Description Specifies the text that displays in the Component Gallery Description Pane.
Picture Specifies the path and filename of an icon, which provides visual representation of the item in the Component Gallery. Specifies
Views Tab
Views

Specifies Designates the view and folder that contains the selected item in the form:

viewName=folderName
Keywords Specifies keywords that can be used to locate the selected item using the Find Component command. The Find Component command generates a view; you execute it by clicking the toolbar's Find Component button.
Node Tab
ID Contains the item identification information.
Link Contains the name of the source item if the selected object is a link.
Class Name Specifies the Component Gallery class (refer to Table 19.8).
Class Library Specifies the path and filename of the visual class library containing the specified class.
Scripts Tab
Script Specifies an event script associated with the selected item.
Properties Specifies property assignments.
Comments Tab
Comments Specifies optional user comments.
User Specifies optional usage-related comments.
An additional Item tab is specific to the type of object selected. For File, Form, Menu, Program, and Report type objects, the Item tab specifies the path and filename of the selected object.

If the object is a project, the Item tab contains the path and filename of the project plus some build options that designate what happens if you right-click on a project file and choose Build from the Items shortcut menu. The build actions include Rebuild All, Show Errors, and Run After Build. They are the same build options supported by the Project Manager.

The Item tab for a class object lets you specify the class name, its base class, and its visual class library path and filename. In addition, it specifies the path and filename of a file containing an example of the selected class item.


© Copyright, Sams Publishing. All rights reserved.