TestComplete provides over 20 built-in controls that you can use in your custom forms. Among them are enhanced editors with embedded buttons. You may have noticed similar controls in many of TestCompletes dialogs and panels. For example, a text box with the embedded button is often used to specify a file or folder name, and the button click calls the dialog, where the user can visually select the desired file or folder.
Did you know that in TestComplete 5 you can also incorporate this functionality into your custom forms? In this blog, I will explain how to implement this.
Suppose, you need a form that will ask the tester to enter the name of the test data file. Since the tester could misprint the file name, it is a good idea to provide them with the Open file dialog, where they can select the desired file. The solution is to use the TcxButtonEdit control together with TOpenDialog. The former control provides a text box with the ellipsis button; the latter represents the Open file dialog. You will need to adjust the components behavior so that the Open file dialog is displayed when the user clicks the editors ellipsis button.
First, we start with a new TestComplete project that contains the User Forms project item and a form. You need to add the following components to the form, and set the property values, as stated below:
- A TcxLabel control (from the Helpers category) that will hold the helper text. Change the label text (the
Caption
property) to: Specify the path to the test data file: (without quotes). - A TcxEditButton control (from the Editors category) that will be used to input the file name. Clear the
Text
property. - A TOpenDialog component (from the Dialogs category), which provides the Open file dialog.
- A TcxButton control (from the Buttons category), which is the OK button. Specify the following property values:
Caption
= OK (without quotes),
ModalResult
= mrOk
,
Default
= True.
(Ive described the meaning of these properties in the previous blog; these values make the button act as the OK button)
- Another TcxButton control, which is the Cancel button. Specify the following property values:
Caption
= Cancel (without quotes),
ModalResult
= mrCancel
,
Cancel
= True.
After placing and adjusting the components as described, the form should look like:
Now you need a way to display the Open file dialog when the user clicks the editors button. This can be done by creating an event handler for the editors OnButtonClick
event:
- Click the cxButtonEdit1 control on the form.
- In the Properties pane, press the Events button to switch to the list of controls events.
- Expand the Properties node and select the
OnButtonClick
event. - Click the ellipsis button within the events cell. This will display a dialog asking you to specify the name of the script routine to be created. Leave the default name and press OK.
TestComplete has now created a new script routine. It has also automatically attached it to the OnButtonClick
event of the cxButtonEdit1 control. Now, when you view the list of controls events, you can see the routines name next to the OnButtonClick
event.
The sample code for the event handler routine is below. It displays the Open file dialog and after the user selects a file, it writes the file name to the editors text.
Id like to point out the Sender
parameter of the routine. In event handlers, this parameter provides access to the forms control that raised the event. In our case, Sender
represents the cxButtonEdit1 control and frees us from having to use the UserForms.UserForm1.cxButtonEdit1
notation.
Also, AButtonIndex
specifies the index of the editors button that was clicked. Since our control has only one button, we do not need to use this parameter.
The code for the scripts Main
routine is below. It displays the form, and if the tester chooses to proceed, runs the test routine. Try this sample to see how the form works: