Close the current project: on the "Home" pane, in the "General" group, expand "Close" and select "Close the project".
Validate the closing of project and save the modifications if necessary.
The WINDEV home page is displayed.
Create a new project: click "Create a project" in the home page.
- This project is a Windows application.
- This project is named "CompUse" and it has no analysis.
On the "Project" pane, in the "Project" group, expand "Import" and select "An External component ... From a file".

In the directory of "WD Full Application" project, select the "EXE\CompoOrdersByCity" sub-directory, then the "CompoOrdersByCity.wdi" file.


	Remark	If the component was created from: the "WD Full Application (Exercise)" example, select the "My Projects\My Examples\WD Full Application (Exercise)\EXE\CompoOrdersByCity" sub-directory, then the "CompoOrdersByCity.wdi" file. the "WD Full Application (with windows)" example, select the "My Projects\My Examples\WD Full Application (With windows) (Exercise)\EXE\CompoOrdersByCity" sub-directory, then the "CompoOrdersByCity.wdi" file.

Click "Open", the description of our component is displayed. This description contains:

On the "General" tab, the elements typed when creating the external component as well as its location.

On the "Details" tab, the component description as well as the help that was automatically generated. This allows you to identify the re-usable component elements.


	Remark	The component description can be accessed at any time. Simply select the component in the "Project explorer" pane and select the "Description" option from the popup menu. In this case, you also have the ability to define the load mode of component.

Validate ("Close" button). The component is included in your project.

We are now going to create a blank window to use the component.

Create a blank window.
- The window title is "Customers by city".
- The window name is "WIN_Customers_by_city".
- Save.
Display the WLanguage events associated with the window ( "Code" from the popup menu).

We are going to call the DataLocation function of component in the "End of initialization" event. This function expects in parameter the path used to access the data files handled by the component. Type the access path to the data found in the "WD Full Application" example. For example:

DataLocation(...// Specify the path of YOUR data
"C:\WINDEV\Tutorial\WD\Exercises\" + ...
"WD Full Application\Exe")


	Remark	If your project uses another procedure named "DataLocation", the name of component procedure must be prefixed by the name of the set of procedures used. The code becomes: SET_Component.DataLocation(...

Close the code editor.
Add the following controls into the window:
- A text Edit control whose caption is "City" and whose name is "EDT_City".
- A Table control named "TABLE_Result", filled by programming and that includes 2 columns:
  - a "Name" column of Text type.
  - a "Total sales" column of Currency type.
- A Button control whose caption is "Search" and whose name is "BTN_Search".

You can now edit the WLanguage events associated with "BTN_Search". When this control is clicked on, we will run the search procedure found in the component. This procedure:
- expects the city name in parameter
- returns a string in the following format:
  Name of customer 1 + TAB + Total sales 1 + CR +
  Name of customer 2 + TAB + Total sales 2 + ...
So, the code of the "Click" event from "BTN_Search" should:
- call the GiveOrdersByCity procedure of component while passing the content of EDT_City control in parameter.
- process the returned string to add it into the Table control.
Write the following WLanguage code:
sResultList is string
// Gets the list of customers and their orders
// for the specified city
sResultList = GiveOrdersByCity(EDT_City)
// If the list is not empty
IF sResultList <> "" THEN
// Clears the Table control
TableDeleteAll(TABLE_Result)
// Browses the results
FOR EACH STRING sACustomer OF sResultList SEPARATED BY CR
// Adds this client to the Table control
TableAdd(TABLE_Result, sACustomer)
END
ELSE // If the list is empty
InfoBuild("No customer found for %1", ...
EDT_City)
END

Close the code editor and save your window.

Run the window test: click among the quick access buttons. In the edit control, type "Paris" (while respecting the case) and click the "Search" button. The list of customers is displayed.

That's it! Child's play isn't it?

You know how to create a component and how to re-use it in your applications. You also have the ability to manage the setup procedures of your components, in order to distribute them separately from your applications for example.

Distributing an external component

Two methods can be used to distribute a component:

Provide the necessary files "manually", this is a "standard" distribution.
Create a more "professional" distribution, via the setup editor of WINDEV (WDInst).

Standard distribution

In this case, you must supply all the files required for your component to operate. These files are created when generating the component (WDI, WDK and WDO files, images, other documents, ...). These files will be manually copied from their source directory to the destination directory. The WINDEV projects that use this component will find the dependent files in this destination directory.

List of files that must be supplied for a standard distribution:

the files automatically generated by WINDEV (WDK, WDI, ...).
the dependency files.
the WDO file must be supplied if the component uses dependency files. This file contains the references to the external files used in the component.

Professional distribution

The distribution of components via a setup procedure consists in providing a setup program to the users of WINDEV component. This program installs all the files required for using the component in the directory specified by the user.

This setup mode is used to automatically manage:

the WDO file and the setup of additional files used by the component.
the automatic setup of necessary tools (MDAC, ODBC driver for HFSQL, ...).
the automatic update of data files used by the component (if necessary).
the uninstall program of component.

Close the "CompoUse" project: on the "Home" pane, in the "General" group, expand "Close" and select "Close the project".

Open the "WD Full Application" project that was used beforehand (for example, display the home page and select the "WD Full Application" project found in the recent projects). If necessary, select the project configuration corresponding to the component in the "Project explorer" pane.

To create the setup, on the "Project" pane, in the "Generation" group, click "Setup procedure"..

The component setup creation wizard starts.

We won't go into details about the different setup modes of a component. Follow the steps of the wizard.
See Distributing an external component for more details.