LMD StyleManager tutorial - Revision history

Bocharov: /* LMD Style Manager */

2007-12-09T21:48:46Z

‎LMD Style Manager

Bocharov: /* LMD Style Manager */

2007-12-09T21:46:32Z

‎LMD Style Manager

Bocharov: /* LMD Style Manager */

2007-12-09T21:45:48Z

‎LMD Style Manager

Bocharov at 21:08, 9 December 2007

2007-12-09T21:08:26Z

New page

=== LMD Style Manager ===

'''1. Styles storage'''

Style manager uses LMDIniCtrl (with MemIniFile) for internal style storing. If saved to file, styles hierarchy looks like a set of ini sections, each section represents a style:

<pre>
[(Default)]

[.red]
_StyleKind=2
Color:TColor=clRed

[.red|.flat]
_StyleKind=2
Flat:Boolean=1

[.blue]
_StyleKind=2
Color:TColor=clAqua

[.blue|.flat]
_StyleKind=2
Flat:Boolean=1

[.red|.bump]
_StyleKind=2
Flat:Boolean=0

[.blue|.bump]
_StyleKind=2
Flat:Boolean=0

[.blue|.flat|.bold]
_StyleKind=2
Font.Style:TFontStyles=[fsBold]

[.blue|.flat|.norm]
_StyleKind=2
Font.Style:TFontStyles=[]
</pre>

Here, _StyleKind is actually internal dummy entry, its meaning will be explained further. Property lines conform to following format: 

<pre>
PropName:TypeName=Value
</pre>

Style (section) lines conform to following format: 
<pre>
[ancestor style|...|style]
</pre>

Style hierarchy supports any level needed and for any given style its name explicitly defines what style is the ancestor for this given style.

As we see, styles hierarchy file can be easily edited manually, if needed.

'''2. Styles hierarchy concept'''

Style is a set of property values. Styles can be arranged in a hierarchies. There are four kinds of styles:

* Default style (hierarchy root);
* Style for component;
* Specific style (user style);
* State style.

Default style name is always (Default). Component style is named by component class name. User(specific) style name always begins with dot. State styles have predefined names ''.focused, .hot, .readonly, .modified, .disabled, .pressed, .wrongdata''. State styles can be only leaves in style hierarchy.

Currently two main hierarchy types are supported (state styles omitted):

Type 1. User styles serve to group component styles, style name qualifier is a prefix telling face controller from were it must get style to apply:

<pre>
default
userstyle1
userstyle2
component
</pre>

Type 2. Component styles serve to group users style subhierarchies, style name qualifier can be set as a suffix to tell face controller from were it must get style to apply:

<pre>
default
component
userstyle1
userstyle2
</pre>

Examples:

Type 1.

<pre>
(Default)
.red
.flat
TLMDMemo
TLMDButton
.bump
TLMDMemo
TLMDButton
.aqua
.flat
TLMDMemo
TLMDButton
.bump
TLMDMemo
TLMDButton
</pre>

In this example, we will have to specify prefix for face controller: .red|.flat or .aqua|.bump.

Type 2.

<pre>
(Default)
TLMDMemo
.red
.flat
.bump
.aqua
.flat
.bump
</pre>

In this example, we will have to specify suffix for face controller: .red|.flat or .aqua|.bump.

Style hierarchy can include component hierarchy. For example, we can define style from TLMDBaseEdit and then specify styles for TLMDEdit and TLMDMemo:

<pre>
(Default)
TLMDBaseEdit
TLMDEdit
TLMDMemo
</pre>

In this case TLMDBaseEdit style will be automatically applied to TLMDBaseEdit descendants.

'''3. Runtime styles handling'''

New style controller supports runtime writing and reading prop values, creating, renaming, erasing styles.

'''4. Styles editor'''

With new style editor you can:

1. Conveniently navigate through properties (initially they are grouped by components, but grouping by typename is also avaliable). 
2. View a list of components/classes that use property selected in the property tree. 
3. Drag & drop styles and properties while editing style hierarchy: 
3.1. Create and move styles; 
3.2. Add properties to styles; 
3.3. Clone properties from one style to another (drag while holding SHIFT key). 
4. Create style from any control on the form. 
5. Add any registered component class to the property tree. 
6. Preview style on a special panel 
7. Automatically validate style name and placement. 

[[Image:LMDStyleEditor.PNG]]

''' 5. Important notes about using styles'''

When a style is applied to a control, its property values are overriden by those specified by style. So, if you use state styles and property value is changed, e.g. in "mouse above" state (this value will be specified by ''.hot'' state style), then you have to define default property value for normal control state.

For example, if a style ".green" have state substyle ".hot", and in hot state font color is changed, then font color must be
specified also in ".green" style. Otherwise, font color will not return to its normal value when control returns to its normal state.

Generally speaking, if there are style "A" and style "B", and they are applied to some control one after another, then
these styles must specify same property sets.

''' 6. LMDStyleManager and LMDFaceController'''

LMDStyleManager object is a container class that allows to create and edit styles. LMDStyleManager can be used standalone, if no state styles are used. That is, you can apply styles to controls in runtime, but LMDStyleManager is not aware about state changes in controls. If you want styles to be applied dynamically when control changes its state, you have to link LMDStyleManager to LMDFaceController.

In order to use LMDFaceController to apply state styles dynamically, you have to add state settings objects and assign style objects to them. Normally one style is assigned to one state.

Then you can set StyleName property of LMDFaceController to specify style to read properties from. If this style has state substyles, then LMDFaceController will apply this substyles to controlls dynamically. Of course, these controls have to support ILMDFaceController interface.

'''7. New in LMDFaceController'''

Besides style support, LMDFaceController received one new method and one event:
* FillControlList
* OnSetFaceController

''FillControlList'' method gathers all controls that support ILMDFaceController interface and sets their FaceController property to the instance from which the method is called.

Before changing controll's FaceController property, FillControlList method triggers ''OnSetFaceController''
event, where programmer can allow or disallow changing controll's FaceController property.

@@ Line 161: / Line 161: @@
 . Automatically validate style name and placement.<br>
-[[Image:LMDStyleEditor.PNG]]
+[[Image:LMDStyleEditor.png]]
 '''6. Important notes about using styles'''

@@ Line 45: / Line 45: @@
 </pre>
-Here, _StyleKind is actually internal dummy entry, its meaning will be explained further. Property lines conform to following format:<br>
+Here, _StyleKind is actually an internal dummy entry. Property lines conform to following format:<br>
 <pre>

@@ Line 1: / Line 1: @@
 === LMD Style Manager ===
-'''1. Styles storage'''
+'''1. Introduction '''
 Style manager uses LMDIniCtrl (with MemIniFile) for internal style storing. If saved to file, styles hierarchy looks like a set of ini sections, each section represents a style:
@@ Line 57: / Line 61: @@
-'''2. Styles hierarchy concept'''
+'''3. Styles hierarchy concept'''
 Style is a set of property values. Styles can be arranged in a hierarchies. There are four kinds of styles:
@@ Line 138: / Line 142: @@
 In this case TLMDBaseEdit style will be automatically applied to TLMDBaseEdit descendants.
-'''3. Runtime styles handling'''
+'''4. Runtime styles handling'''
 New style controller supports runtime writing and reading prop values, creating, renaming, erasing styles.
-'''4. Styles editor'''
+'''5. Styles editor'''
 With new style editor you can:
@@ Line 159: / Line 163: @@
 [[Image:LMDStyleEditor.PNG]]
-''' 5. Important notes about using styles'''
+'''6. Important notes about using styles'''
 When a style is applied to a control, its property values are overriden by those specified by style. So, if you use state styles and property value is changed, e.g. in "mouse above" state (this value will be specified by ''.hot'' state style), then you have to define default property value for normal control state.
@@ Line 169: / Line 173: @@
 these styles must specify same property sets.
-''' 6. LMDStyleManager and LMDFaceController'''
+'''7. LMDStyleManager and LMDFaceController'''
 In order to use LMDFaceController to apply state styles dynamically, you have to add state settings objects and assign style objects to them. Normally one style is assigned to one state.
@@ Line 177: / Line 179: @@
 Then you can set StyleName property of LMDFaceController to specify style to read properties from. If this style has state substyles, then LMDFaceController will apply this substyles to controlls dynamically. Of course, these controls have to support ILMDFaceController interface.
-'''7. New in LMDFaceController'''
+'''8. New in LMDFaceController'''
 Besides style support, LMDFaceController received one new method and one event: