MonkeyStyler Wiki

Apply Styles

2012-04-27T20:45:37+00:00

This feature lets you link MonkeyStyler to one or more applications. You can then update the style(s) within that application in a single mouse click. To link an application all you need to is add a couple of supplied units to your software and set a couple of properties.

The client can update both the default style from the TApplication object and the contents of one or more StyleBook objects stored on your forms (or elsewhere).

Enabling your application
Look in the Redist folder under the MonkeyStyler program folder (C:\Program Files (x86)\MonkeyStyler\Redist) and copy the following files to your project:
Solent.Logging
Solent.DDECommon
Solent.DDEClient
Styler.CommsClient

Add Styler.CommsClient to the implementations sections uses clause of your main unit.

In your Create method or FormCreate event handler you need to set up the client. Here is a typical scenario

StylerComms.AppName := 'CommsTest';
StylerComms.AddStyleBook(StyleBook1, StyleFileName);
StylerComms.DefaultStyleFileName := DefaultStyleFileName;
StylerComms.Enabled := True; 

We need to give our application a unique name so MonkeyStyler can identify it.


StylerComms.AppName := 'CommsTest';

We can add any number of TStyleBook objects which will be updated with a given file when that file is changed. Note that the file name must be a fully qualified path to the file. You can add as many stylebooks as you want, so you can add those for your main form and any child forms if they use a different StyleBook object[1].


StylerComms.AddStyleBook(StyleBook1, StyleFileName);

If you want to be able to update the applications default style file, set the DefaultStyleFileName property:


StylerComms.DefaultStyleFileName := DefaultStyleFileName;

To initiate the communications we need to set the Enabled property to True. (You probably only want to do this during development. For a redistributable application simply leave Enabled as False to prevent styles being updated by an end user).


StylerComms.Enabled := True;

The order of the above commands is not significant.

Finally, you can remove a stylebook from the comms object with the RemoveStyleBook method. This is best done in the forms FormDestroy event handler:


StyleComms.RemoveStyleBook(StyleBook1);

In MonkeyStyler

To 'apply' a modified style from within MonkeyStyler:
Open and select the file as the current file.
Click the Apply item on the menu bar.

It may take a moment or two for the style to be reloaded by your application. During that time MonkeyStyler and your application will not be responsive (this delay should be very short on a modern computer).

It does not matter whether you start MonkeyStyler or your application first.

Sample application
MonkeyStyler is supplied with a sample application which demonstrates how to create a client application. On a default Windows installation this will be located at C:\Users\Publib\Documents\MonkeyStyler\Samples\Comms

If you build this you will need to copy the style files to your compilers output folder (e.g. Win32\Debug). The style files are Custom.Style and Default.Style.

Troubleshooting

If you experience problems:
First check that everything is set up correctly.
Check the filenames are the same within your application and MonkeyStyler (in particular ensure your application uses fully qualified file names).

If that looks good, look for the log files. There will be one for the client and one or MonkeyStyler:
C:\Users\\AppData\Roaming\MonkeyStyler\CommsLog.Log
C:\Users\\AppData\Roaming\MonkeyStyler Client\ClientLog.Log

You should be able to see any communications errors in these files.

Footnotes

[1]Personally I like to reuse a single StyleBook object throughout my projects. You can do this in each child forms FormCreate event handler:


StyleBook := TForm(Application.MainForm).StyleBook;

You can see this technique in the Comms sample application detailed above.

Category:MonkeyStyler

MonkeyStyler

2012-04-27T20:44:17+00:00

Apply Styles - one click preview of style changes in a live copy of your application.

Category:MonkeyStyler

index

2012-04-27T20:40:38+00:00

Welcome to the MonkeyStyler wiki/docs

Commercial Products

MonkeyStyler

Free Products

MonkeyRecolor

Articles

My First FireMonkey Custom Control: TBitmapSpeedButton

Custom Controls

TBitmapSpeedButton

TBitmapSpeedButton

2012-01-26T09:15:37+00:00

Parent component: TSpeedButton (at Embarcadero's DocWiki).
How to create this component.
Source files (zip).

A speed button, suitable for use on a tool bar etc., which can show a bitmap image. There are properties to adjust the images position and whether text is shown or not.

Types:


TImageAlign = (iaTop, iaLeft, iaRight, iaBottom, iaCenter);

See ImageAlign property.


ImageType = (itBitmap, itStyleLookup);

See the ImageType property.

Properties:


property Bitmap: TBitmap read FBitmap write FBitmap;

If ImageType is itBitmap, the bitmap image for the button. Call Bitmap.LoadFromFile to load an image file (in any FireMonkey supported format on your platform). Note that LoadFromFile doesn't raise an exception if the file is invalid. You have been warned.

property ImageAlign: TImageAlign read FImageAlign write SetImageAlign default iaCenter; 

The position of the image in relation to the text. Setting iaCenter doesn't look to good if you also have TextVisible=True


property ImageHeight: Single read FImageHeight write SetImageHeight;


property ImageWidth: Single read FImageWidth write SetImageWidth;

The image size. It will be resized to fit neatly within these dimensions if too large or too small (unless you modify the style). FireMonkey is rather good at image resizing, as long as you don't push it.


property ImagePadding: Single read FImagePadding write SetImagePadding;

Padding to put around the image. If the ImageAlign = iaTop or iaBottom this value will be applied both above and below the image. For iaLeft and iaRight, it will be applied either side, and for iaCener it will be ignored.

property ImageStyleLookup: String read FImageStyleLookup write SetImageStyleLookup; 

If ImageType is itStyleLookup, this is the style object from which to fetch the bitmap. The object should be of type TImage.


property ImageType: TImageType read FImageType write SetImageType;

Specifies whether the component should fill it's image from an explicitly stated bitmap (the Bitmap property) or from a style resource (the ImageStyleLookup property). If using a style lookup the object should be of type TImage.


property TextVisible: Boolean read FTextVisible write SetTextVisible;

Whether the text is visible, or whether the control only shows the image. If you are only showing the image you'll probably want to set ImageAlign=iaCenter. Note that the default is false.

Category:Custom Controls

Recolor History

2012-01-08T23:02:05+00:00

8 Jan '12

Initial release.

Category:MonkeyRecolor

Recolor Folders

2012-01-08T15:01:45+00:00

The following install locations are used by MonkeyRecolor:

{Programs Files}/MonkeyRecolor

The demo application, license and uninstall files.

{user}/Documents/MonkeyRecolor

Colors config file.

C:/Users/Public/Public Documents/MonkeyRecolor

Source code for both MonkeyRecolor and the demo application.

The MonkeyRecolor specific files are:
Solent.Recolor.pas
Solent.Recolor.fmx
Solent.DoColors.pas

Category:MonkeyRecolor

MonkeyRecolor

2012-01-08T14:54:06+00:00

See Recolor Folders for details of what is installed where.

See Recolor History for the revision history.

MonkeyRecolor is an easy way to radically change the color scheme of any FireMonkey style. It gives you a number of controls for selecting colors for various part of a style and a single button to apply the changes. See MonkeyRecolor Controls. If you are new to HSL color schemes and selecting colors see Tips for Selecting MonkeyRecolor Colors.

FireMonkey applications can contain both default styles and custom styles. See FireMonkey Styles and MonkeyRecolor for more on what these are and how MonkeyRecolor can modify them.

The color changes respect subtle (and not so subtle) variations in colors and hues in the original style. Eg. a control which varies from light to dark red in the original style will vary from (say) light to dark blue in the revised style. A control which is brighter or darker than others will still be brighter or darker.

MonkeyRecolor is a Delphi form which you can attach to your application. Set up a button or menu item to call it and the Recolor button will give a near instant view of your new style. See MonkeyRecolor Integration.

The download also includes a demonstration executable which you can use straight away to load, modify and save styles. You can find the demo on the start menu under MonkeyRecolor Demo. Once the application is running, use the menu item File/MonkeyRecolor to open the MonkeyRecolor window.

A set of MonkeyRecolor color settings is called a scheme, and schemes can also be saved and reloaded - the the File and Scheme menus in MonkeyRecolor.

A file called the Colors config file defines how the scheme is applied to a style. This file can be edited to customise your styles even further.

See Using styles to see how to add customised styles to your applications.

Category:MonkeyRecolor

Using styles

2012-01-04T21:19:02+00:00

Default Styles

To load default styles from a file set Application.StyleFileName:


Application.StyleFileName := 'C:\MyStyle.style';

Custom Styles

Custom styles can again be loaded from a file, this time by setting the stylebooks FileName property.


StyleBook1.FileName :='C:\MyStyle.style';

Colors config file

2011-12-06T20:31:24+00:00

The colors config file is a text file which tells MonkeyRecolor how to apply it's color settings to the style. You will find the default version installed in {AppData}/MonkeyRecolor with the name colors.txt. Use the Load item on the Colors menu to use a different file.

Each line takes the form


[<Path>][/][$<Trigger>] = [!]<value>[,[!]<value2>]

Examples include:

backgroundstyle = background
checkboxstyle.background/TColorAnimation = lowlights,highlights
checkboxstyle.background.checkmark = !highlights
speedbuttonstyle.background/TColorAnimation$IsMouseOver&3D;#;IsPressed&3Dfalse; = lowlights,highlights
.selection = selection
/TGlowEffect = gloweffect 

The left hand side specifies which component to apply changes to. The right hand side is the color or colors to apply. All child components of the specified component will also be given the same color(s) settings. The file is processed in order from top to bottom and any later settings will overwrite conflicting settings higher in the file. In other words, make general settings (eg. for the whole style) first and specify settings for child components later.

Component Specifiers

Path is the path to the object, separated by periods, where each path item is the style components StyleName property. If no StyleName is given for a component, then no entry will be made in the path for that component. E.g. if 'buttonstyle' has a child with no StyleName, which has a child called text then the path will be 'buttonstyle.text'.

A path which starts with a period applies to any component whose path ends thus. I.e. '.text' applies to 'button.text' and 'label.text' etc.

Sometimes you need to specify a component which hasn't been assigned a StyleName. If so, you can usually get around this with the Class item. The class is the components class (eg. TColorAnimation preceded by a forward slash.

This example:


checkboxstyle.background/TColorAnimation

modifies any TColorAnimation components which are under the checkboxstyles background. Animations are often paired, one to 'switch on' a color change and one to 'switch' it off again. MonkeyRecolor is smart enough to know which is which and make the color changes correctly.

If the class is specified, the path can be left out and all components of that class will be modified. The following line:


/TGlowEffect = gloweffect

uses this to modify every TGlowEffect in the file.

Some components have multiple color animations to turn on and off different effects. Trigger can be used to distinguish them. It is used only for TColorAnimation objects. Only objects with a matching Trigger property will be affected. A # character in the Trigger phrase will be replaced with either true or false for matching purposes, i.e. to identify which animation turns the animation on and which turns it off (see Class above for more on this).

To 'quote' characters which would otherwise screw up parsing of the line, use the &xx; format, where xx is the hex code of the character to be inserted. (Currently this means = characters which would become &3D;)

An example:

speedbuttonstyle.background/TColorAnimation$IsMouseOver&3D;#;IsPressed&3Dfalse; = lowlights,highlights 

The trigger is converted to:


IsMouseOver=#;IsPressed=false

which matches the TColorAnimations whose trigger properties are:


IsMouseOver=true;IsPressed=false

and


IsMouseOver=false;IsPressed=false

Again, MonkeyRecolor is smart enough to know which is the on and which the off component and modify their colors appropriately.

Value specifiers

Value is the value to apply: (See MonkeyRecolor Controls for more details).

background: background color
lowlights: usually similar to the background color but slightly highlighted, eg. backgrounds of scroll bars, combos, etc.
highlights: use the first secondary color
althighlights: use the second background color
selection: selected text of edits, lists, memos etc.
gloweffect: gloweffect color.

Values are normally calculated relative to original colors and target color, to set an absolute value, prefix the value with a !, e.g.
[codecheckboxstyle.background.checkmark = !highlights

Two values can be given for TColorAnimations. If given, the first will be used for the normal (false) state, and the second for the true state, e.g.


checkboxstyle.background/TColorAnimation = lowlights,highlights

General

All paths, classes, triggers and values are case insensitive

Use the word

end

on a line on it's own to stop parsing this file early - useful for testing

To add a comment, start the line the a semicolon:


;This will be ignored

Category:MonkeyRecolor

MonkeyRecolor Integration

2011-12-06T20:29:51+00:00

MonkeyRecolor comes as two units, Solent.Recolor which contains the form and Solent.DoColors which does the processing.

1) After installing the download, find the folder containing the forms and add the folder name to Delphi's search path. You can find the files installed under Common Files/MonkeyRecolor, or find the MonkeyRecolor Source item under the start menu.

2) Open your forms project file (Project/View Source within Delphi);.

3) Add the following to the uses list:


Solent.Colors in 'Solent.Colors.pas' {ColorsForm},

4) And between Application.Initialize and Application.Run:


Application.CreateForm(TColorsForm, ColorsForm);

5) Add Solent.Recolor to the uses list of the form you want to recolor.

6) Create a button or menu item for MonkeyRecolor, open it's OnClick event and add the following:

ColorsForm.Form := Self;
ColorsForm.StyleBook := StyleBook1;
ColorsForm.Show; 

7) Compile, run and enjoy...

The properties you are setting in step 6 are:
Form is the form whose colors will be updated by ColorsForm. (You will need to update you application to load the final style files - Using styles.
StyleBook is a TStyleBook which can, optionally, also be recolored. (See FireMonkey Styles and MonkeyRecolor) for more.