Theme code components
Theme files include a number of logical blocks which can be separated depending on their function – StyleSheets, StyleFilters, and StyleActions:
StyleSheets
There two kinds of StyleSheets in a theme file – a StyleSheet serving as a root component and StyleSheets that contain StyleActions.
StyleSheets serving as a root component for the .fm2 form
<StyleSheet xmlns="http://querix.com">
...
</StyleSheet>
Purpose: as a root component, contains all the theme code components regardless of their type and number
Parent component: none
Child components: StyleSheet, StyleFilter, StyleAction
StyleSheets containing StyleActions
<StyleSheet>
...
</StyleSheet>
Purpose: contains StylesFilters and their children
Parent component: StyleFilter
Child components: StyleFilter, StyleAction
Example:
<StyleSheet>
<WithPseudoClassFilter PseudoClassName="Inactive">
...
<WithPseudoClassFilter PseudoClassName="Inactive">
<StyleSheet>
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
StyleFilters
StyleFilters are used to filter theme elements depending on their name, class, type, or function.
ElementFilter
<ElementFilter ElementName="...">
...
</ElementFilter>
Purpose: adds an element to a theme style
Takes an element name as an attribute:
ElementName="..."
Parent component: StyleSheet
Child components: StyleAction (via StyleSheet), StyleFilter (via StyleSheet)
ElementFilter cannot be the immediate child of the ElementFilter:
<ElementFilter ElementName="Button">
<ElementFilter ElementName="Label">
...
</ElementFilter>
</ElementFilter>
Example:
<ElementFilter ElementName="Button">
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
</ElementFilter>
<ElementFilter ElementName="Button">
<StyleSheet>
<ElementIdFilter Identifier="bt1">
...
</ElementIdFilter>
</StyleSheet>
</ElementFilter>
ElementIdFilter
<ElementIdFilter Identifier="...">
...
</ElementIdFilter>
Purpose: adds a With ID... filter to a theme style
Takes an identifier as an attribute:
Identifier="..."
Parent component: StyleSheet
Child components: StyleAction (via StyleSheet)
Example:
<ElementIdFilter Identifier="bt1">
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
</ElementIdFilter>
WithClassFilter
<WithClassFilter ClassName="...">
...
</WithClassFilter>
Purpose: adds a With class... filter to a theme style
Takes a class name as an attribute:
ClassName="..."
Parent component: StyleSheet
Child components: StyleAction (via StyleSheet), StyleFilter (via StyleSheet)
Example:
<WithClassFilter ClassName="myclass">
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
</WithClassFilter>
<WithClassFilter ClassName="myclass">
<StyleSheet>
<ElementFilter ElementName="ReportViewerConfig">
...
</ElementFilter>
</StyleSheet>
</WithClassFilter>
WithPseudoClassFilter
<WithPseudoClassFilter PseudoClassName="...">
...
</WithPseudoClassFilter>
Purpose: adds a With Pseudo-class... filter to a theme style
Takes a pseudo-class name as an attribute:
PseudoClassName="..."
Parent component: StyleSheet
Child components: StyleAction (via StyleSheet), StyleFilter (via StyleSheet)
Example:
<WithPseudoClassFilter PseudoClassName="Active">
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
</WithClassFilter>
<WithPseudoClassFilter PseudoClassName="Active">
<StyleSheet>
<ElementFilter ElementName="Label">
...
</ElementFilter>
</StyleSheet>
</WithPseudoClassFilter>
DescendantFilter
<DescendantFilter>
...
</DescendantFilter>
Purpose: adds a Descendants... filter to a theme style
Parent component: StyleSheet
Child components: StyleAction (via StyleSheet), StyleFilter (via StyleSheet)
Example:
<DescendantFilter>
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
</DescendantFilter>
<DescendantFilter>
<StyleSheet>
<ElementFilter ElementName="Button">
...
</ElementFilter>
</StyleSheet>
</DescendantFilter>
ChildFilter
<ChildFilter>
...
</ChildFilter>
Purpose: adds a Children... filter to a theme style
Parent component: StyleSheet
Child components: StyleAction (via StyleSheet), StyleFilter (via StyleSheet)
Example:
<ChildFilter>
<StyleSheet>
<DoStyleAction>
...
</DoStyleAction>
</StyleSheet>
</ChildFilter>
<ChildFilter>
<StyleSheet>
<ElementFilter ElementName="Button">
...
</ElementFilter>
</StyleSheet>
</ChildFilter>
StyleActions
StyleActions are used to apply properties to theme elements.
<DoStyleAction>
...
</DoStyleAction>
Purpose: indicates that a StyleAction is added and serves as a parent for any StyleActions
Parent component: StyleSheet
Child components: SetProperty
Example:
<DoStyleAction>
<SetProperty>
<PropertyPath>
<PropertyName>HideLabels</PropertyName>
</PropertyPath>
</SetProperty>
</DoStyleAction>
<SetProperty>
...
</SetProperty>
Purpose: adds a StyleAction to a theme style
Parent component: DoStyleAction
Child components: PropertyPath, PropertyValue
Example:
<SetProperty>
<PropertyPath>
<PropertyName>Cursor</PropertyName>
</PropertyPath>
<PropertyValue>WaitCursor</PropertyValue>
</SetProperty>
<PropertyPath>
...
</PropertyPath>
Purpose: specifies the property path by including the names of the added property and its parent properties (if any)
Parent component: SetProperty
Child components: PropertyName
Example:
<PropertyPath>
<PropertyName>Background</PropertyName>
<PropertyName>FillColor</PropertyName>
</PropertyPath>
<PropertyPath>
<PropertyName>Font</PropertyName>
</PropertyPath>
<PropertyName>...</PropertyName>
Purpose: specifies the name of the added property
Parent component: PropertyPath
Child components: none
Example:
<PropertyName>IsRaised</PropertyName>
or
<PropertyName>Parameter</PropertyName>
<PropertyValue>...</PropertyValue>
Purpose: specifies the value of the added property
Parent component: PropertyPath
Child components: none
Example:
<PropertyValue>Cross</PropertyValue>
or
<PropertyValue type="Font" Bold="True" />
ApplyClass
<ApplyClass Name="..." />
Purpose: adds an Apply class... action to a theme style
Takes a class name as an attribute:
Name="..."
Parent component: DoStyleAction
Child components: none
Example:
<ApplyClass Name="mybutton" />
or
<ElementFilter ElementName="Browser">
<StyleSheet>
<DoStyleAction>
<ApplyClass Name="trusted" />
</DoStyleAction>
</StyleSheet>
</ElementFilter>
Include
<Include IncludeFileName="..." />
Purpose: adds an Include... action to a theme style
Takes a name of the included file as an attribute:
IncludeFileName="..."
Parent component: DoStyleAction
Child components: none
Example:
<Include IncludeFileName="qx://application/my.qxtheme"/>
Related articles