| **Navigation:**  Window Designer >====== Window Preview Configuration ====== | [[windowdesignerwin32.htm|{{btn_prev_n.gif|Previous page}}]][[coming future.htm|{{btn_home_n.gif|Return to chapter overview}}]][[window properties.htm|{{btn_next_n.gif|Next page}}]] | | || To see the Window Previewer IDE configuration options, click [[softvelocity clarion windowpreviewer windowprevieweroptionspanel.htm|here]]. The Window Preview option is available in the Structure Designer. It is activated from the Designer toolbar button as shown below: {{windowpreview.jpg|WindowPreview.jpg}} You can also use CTRL+SHIFT+V to activate the Previewer. During Preview mode your window can display user-defined data based upon the type of control. The actual data that is displayed is defined by the content of the //.winprev// files. Winprev files are detected (read) in three possible locations: 1.<;user_data_directory> \SoftVelocity\Clarion\7.0\Window Previewer 2.<;Clarion root>\data\Window Previewer 3.The same directory as the project directory. Winprev files by default use the application name. For example: **school.winprev** These files are simple XML files. The schema for these files is located at <;Clarion root>\data\schemas\winprev.xsd. **Winprev File Structure** The //winprev// file consists of a single //windowPreviewer// element which has one or more child elements of type style, control or column. **Style Element** A style element describes a style that can be used in LIST controls. A style has one or more attributes describing the style. Possible attributes are: | **Name** | **Data Type** | **Description** | | Id | String | A unique name that is used to reference this style in Column data definitions (required). | | fontName | String | The name of the font. Sets PROPSTYLE:FontName | | fontSize | Integer | The size of the font. Sets PROPSTYLE:FontSize | | fontStyle | String | Either the font style number or a FONT: equate. Sets PROPSTYLE:FontStyle | | textColor | String | The foreground color to use when not selected. Either a color id or a COLOR: equate. Sets PROPSTYLE:TextColor | | backColor | String | The background color to use when not selected. Either a color id or a COLOR: equate. Sets PROPSTYLE:BackColor | | textSelected | String | The foreground color to use when selected. Either a color id or a COLOR: equate. Sets PROPSTYLE:TextSelected. | | backSelected | String | The background color to use when selected. Either a color id or a COLOR: equate. Sets PROPSTYLE:BackSelected | | barFrame | String | The bar frame color. Either a color id or a COLOR: equate. Sets PROPSTYLE:BarFrame | | charSet | String | The Font's char set. Sets PROPSTYLE:CharSet | | fontColor | String | The font color. Either a color id or a COLOR: equate. Sets PROPSTYLE:FontColor | | Picture | String | The picture to apply to the data. Sets PROPSTYLE:Picture. | **Column Element** A column element describes data that should appear in the column of a LIST or COMBO control. A column element has one //id// attribute and one or more row child elements. The //id// attribute gives a unique name for the column data that can be used in a column child element of a control element. **Column Row Element** A column row Element describes a box within a list or combo. Possible attributes are: | **Name** | **Data Type** | **Description** | | Text | String | The text to display | | Style | String | The name of a style element. The specified style will be used whenever a column in a list specifies that it uses styles | | Icon | String | The name of a .ico file. This file is found using redirection. This icon will be used whenever a column in a list specifies that it uses an icon | | treeLevel | Integer | The level of the tree at which to display this data. The level information is only used on a column that is a tree control. | | Tooltip | String | The text to display in the tooltip whenever a column in a list specifies that a tooltip exists | | textColor | String | The foreground color to use when not selected. Either a color id or a COLOR: equate | | backColor | String | The background color to use when not selected. Either a color id or a COLOR: equate | | textSelected | String | The foreground color to use when selected. Either a color id or a COLOR: equate | | backSelected | String | The background color to use when selected. Either a color id or a COLOR: equate | **Control Element** A control element describes what data should be displayed in controls. A control element has one or more attributes describing which controls should use the values specified in the Control. If a Control element has multiple attributes, then a Window Control must match all attributes. Possible attributes are: | **Name** | **Data Type** | **Description** | | Type | Control Type | Valid values that correspond to the matching Clarion Window control are: ENTRY, LIST, COMBO, PROGRESS, SPIN, STRING, IMAGE, or TEXT. | | Use | A regular expression | This control will match any window control whose USE attribute matches the regular expression. | | Picture | A regular expression | This control will match any ENTRY or STRING control whose picture matches the regular expression. | A Control must have one or more Child elements indicating what is to be displayed. The Child elements have //percentage//, //image//, //column// or //text// elements. A //percentage// element has a **value** attribute from 0 to 100 inclusive. This indicates what percentage of a PROGRESS control is to be filled in. An //image// element has a **location** attribute which specifies the location of an image file to display in the image. If no path is supplied, then the project's redirection file is used to find the file. A //text// element has a **value** attribute which indicates what data should be displayed in a control. For a TEXT control multiple lines can be specified by supplying multiple //text// elements. A //column// element indicates what type of column data can be used with this control. The particular set of column data that is applied to each column of a LIST or COMBO is controlled by the following attributes: | **Name** | **Data Type** | **Description** | | Tree | Boolean | If true, this column data only applies to columns that have the tree attribute set. | | Icon | Boolean | If true, this column data only applies to columns that have the icon attribute set. | | Header | A regular expression | Only columns whose header text matches the regular expression will use the column data. | | Picture | A regular expression | Only columns whose data picture matches the regular expression will use the column data. | | Column | String | Either a number or an expression in the form operator number. Operator can be one of >, <;, =, !=, >=, or <;=. If an operator is supplied, then the column will use the data for the column only if it's position in the list evaluated against the expression is true. If a number (n) is specified, then only the n'th column will use the column data. Column positions start from 1 | Which particular column is used depends on these attributes: | **Name** | **Data Type** | **Description** | | Text | String | The name of a column that contains the text to display. It can also optionally contain any of the other attributes of a column (icons, color, tooltip, tree level, styles) ' Required | | Icon | String | The name of a column that contains the icons to display if a column has icons. If the icon attribute is supplied and the text column also contains icons, then the list supplied in the icon attribute will be used. | | Color | String | The name of a column that contains the colors to display if a column has colors. If the color attribute is supplied and the text column also contains colors, then the list supplied in the color attribute will be used. | | Style | String | The name of a column that contains the styles to display if a column has styles. If the style attribute is supplied and the text column also contains styles, then the list supplied in the style attribute will be used. | | Tooltip | String | The name of a column that contains the tooltips to display if a column has tooltips. If the tooltip attribute is supplied and the text column also contains tooltips, then the list supplied in the tooltip attribute will be used. | **Control Priorities** Which display data is used depends on the //priority// of the *.winprev file and the position within that winprev file. When a control on the window needs to display data, the preview option looks through all *.winprev files it finds, processing them in the order of the priority attribute of the //windowPreviewer// element from highest value to lowest. If two files have the same priority, only one will be read and a warning message displayed indicating which one has been ignored. Within each winprev file, the Control elements are processed from the top too bottom of the file. Searching stops. when a winprev Control has been found that matches the Window Control A Window control matches a winprev Control if it matches all elements of the winprev Control. **Example:** Given the following //winprev// file' <;windowPreviewer priority = "0"> <;control use=".*money.*"> <;text value="999999.99"/> <;/control> <;control picture="@N.*"> <;text value="12345.6789"/> <;/control> <;control type="Entry"> <;text value="The quick brown fox jumped over the lazy dog"/> <;/control> <;/WindowPreviewer> 'and a WINDOW structure that looks like this: Window WINDOW('Window Preview'),AT(,,119,136),FONT('MS Sans Serif', 8),GRAY BUTTON('&OK'), AT(19,90,41,14), USE(?OkButton), DEFAULT BUTTON('&Cancel'), AT(61,90,42,14), USE(?CancelButton) ENTRY(@N9.2), AT(19,11), USE(MyMoneyField) ENTRY(@N-16.4), AT(19,38), USE(MyNumericField) ENTRY(@s20), AT(19,61), USE(AStringField) END The Preview option would show: {{wpreviewex.jpg|WpreviewEx.jpg}} **Editing the .winprev file** You can edit //winprev// files in any text editor. Once you save the changes they will be immediately used by the window preview option. If you edit //winprev// files in the Clarion IDE you will also get auto-completion help. {{notebox.jpg|NoteBox.jpg}} Extended Visual Styles (e.g., Luna Blue, Windows Aero, etc.) are not properties of the MENU control in the window structure but runtime code that is set from template symbols, and their display is not available in the Window Preview option.