Tutorial 6 - Customizing the User Interface with Templates

In this tutorial, you will learn how to customize C1QueryFrame user interface. Every visual aspect of the UI can be customized. This includes colors, fonts and many other visual styles, words and phrases used in query display, composition of condition elements (left part, comparison, right part), and others.

Repeat steps 1–6 of Tutorial 3 - Query Result Fields in C1QueryFrame Control, or just copy the Tutorial 3 project to a new location. Schema and code are not important for this tutorial. All we want to show here is how to customize user interface. You can do it with any project containing a C1QueryFrame control. We suggest the one from Tutorial 3, but that does not really matter.
Press the right mouse button over the C1Query1 control and select Save Templates from the context menu. Save the default template file. This file contains all customizable settings (called template attributes) and scripts in their default form. Customizing template attributes, you will find it useful to consult with the default template file.
Set the DesignTimeTemplates property of both C1QueryFrame controls to False. This is necessary because our changed templates will use special tags (see step 6 below) that will not allow them to work at design time. Without setting the property DesignTimeTemplates to False, we would see garbled display on the surface of C1QueryFrame control at design time (after Step 4).
Press the right mouse button over the C1Query1 control and select Load Templates from the context menu. Select the TEMPLATE.TPL file supplied in the tutorial directory.

We will not explain every individual attribute in the TEMPLATE.TPL file here. You can refer to Customizing the UI with Templates for the description of template attributes. We will only make some explanations about the changes made in the template file.

All display styles are changed so that all elements, when not in focus, are always drawn as normal window text, instead of the default underscored blue text. The default 3D current row highlighting is suppressed. See the attributes ending with ‘Style’ (CMPInactiveStyle, CMPActiveStyle, CONNInactiveStyle, and so on).

Empty element is shown as ___ instead of the default underscored asterisk (see EmptyDisplayText).

Instead of menu button, we now use a filled black triangle as a current row pointer. See the IMG tag in ComplexTemplate, ElemTemplate, and other template attributes.

Strings shown in elementary and complex conditions are changed. A complex condition now says “ALL of the following” where it was saying “Select records where <connective> of the following apply:” An elementary condition is displayed simply as <field> = <constant> where it was “Records where <field> = <constant>”, and so on. This is accomplished by changing the attributes that serve as template for complex and simple conditions and result field items: ComplexTemplate, ElemTemplate, and so on.

Condition and comparison menus are changed as well. For example, comparison operators are now shown as =, >, <,… The attributes responsible for this are ConnMenu and CompMenu.

Changing the ConditionMenu attribute, we made advanced elementary conditions unavailable. All elementary conditions are now simple:

Example Title	Copy Code
<field> <comparison> <constant>

Add the following code to the Form’s Load event procedure:

Example Title	Copy Code
C1QueryFrame1.TemplateUserData("AppDir") = App.Path + "\pointer.gif" C1QueryFrame2.TemplateUserData("AppDir") = App.Path + "\pointer.gif"

This code ensures that <C1Q_USERDATA Index="AppDir"> tags used in the template file are substituted with the full path to the application directory, so our tutorial does not depend on the absolute path to the POINTER.GIF file.

Copy the POINTER.GIF file supplied in the tutorial directory to your project directory.

Run the Program and Observe the Following:

Try the new look and feel of the C1QueryFrame control, and notice that its functionality did not change although it has a different look and feel now.