ComponentOne Query 8.0
Customizing the UI with Templates

Every user interface aspect of a C1QueryFrame control can be customized using a special template mechanism. A C1QueryFrame control contains templates. Default templates are provided in the product and work without programmer’s interference. To customize templates, developers modify default templates in a text file and import the modified templates to the control.

A template text files have special structure. It consists of attributes.

Some of the template attributes are HTML display styles, some are item templates, some determine menus and messages, and there are also some that are HTML scripts.

Using display style attributes, you can change colors, fonts, borders and all other display characteristics of C1QueryFrame items.

Using item template attributes, you can change the display of query items. You can change the order of the elements in an item, hide some elements, change the texts accompanying item elements, and add images and other display elements to item display.

Using menu attributes, you can customize C1QueryFrame menus.

One of the script attributes is the C1QRender attribute – the script used to render HTML on the control surface. By changing this script, you can completely change the layout and customize it to your users’ needs, please see Customizing the UI with Scripts for more information.

Examples of customizing both display styles and the whole layout are presented in Tutorials.

Each attribute has a name and an HTML snippet text. The text of an attribute in a template file begins with a special tag:

Example Title
Copy Code
<C1QProperty:attribute_name>

and ends with the tag:

Example Title
Copy Code
</C1QProperty: attribute_name >

All template attributes with their names are described below.

For example, the CurrentRowStyle attribute determines the display style for the currently selected item. Its default value is:

Example Title
Copy Code
<C1QProperty:CurrentRowStyle>

pixelHeight:10;border-bottom-style:inset;border-top-style:inset;border-color:white;border-width:thin; </C1QProperty:CurrentRowStyle>

To modify C1QueryFrame templates, first obtain the default template file selecting Save Default Templates in a C1QueryFrame control’s context menu. Then modify the desired attributes, or create a separate template file containing only the attributes that you need to change (recommended). Once you have the modified template file, import it to the C1QueryFrame control selecting Load Templates from the control’s context menu.

You can also modify templates in a C1Query control, selecting Load Templates in its context menu. This modification will affect the C1QueryFrame controls attached to this C1Query control.

Usually, templates are modified at design time importing from a template file. But they can also be imported at run time, using the LoadTemplatesFromFile method. There is also a SetTemplateAttribute method that allows the user to set an individual template attribute dynamically, without affecting other attributes. For example, you can change the CurrentRowStyle attribute in the ItemFocusChange event so that the currently selected item will be show in different color depending on its contents. After calling SetTemplateAttribute, you need to call the Render method to update C1QueryFrame display.

The C1QueryFrame template attributes are described below. We recommend obtaining the default template file, selecting Save Default Templates from a C1QueryFrame control’s context menu and browse through its contents using the description below as a guide.

See Also

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback