MonkeyStyler Preview Screenshots

MonkeyStyler is my stand alone FireMonkey style designer. I’ve spent the last week or so making it look presentable, and here are the first screenshots. Please note that this is still ‘alpha’ software and much is planned to change, in terms of visuals, usabality and functionality.

So, here’s the complete screenshot.

File and Element Manager
Lets deal with each area individually. First the file and element manager.

You can load a number of files at once, create new files, close and save open ones, and switch between files. The ability to have multiple files open means you can easily copy style elements between them (or indeed copy a style element within a file to create a duplicate).

(Note that I refer to individual elements within a style file as style elements or just elements. Hence the ‘buttonstyle’ for a TButton is one element, ‘checkboxstyle’ another and so on).

The element manager lists all available elements within the currently selected file and enables you to copy elements within and between files (as described above), create, delete and rename elements.

And, of course select elements, which shows the selected element in the control viewer:

Control Viewer

The control viewer shows a live preview of your style. Note here that you’re not actually looking at a TButton. You’re seeing the components which make up the style for one. You can’t actually interact with it (eg. mouseovers, clicks etc. do nothing), but the Components button shows the drop down shown in the screenshot.

With this components drop-down you can see which components make up a style. You can also show and hide individual components by checking or clearing the relevant check box. This is a great way to see how a style is actually made up.

A neat feature is that the check boxes for animations and effects run the animation or effect. Have an animation which takes a second to run and you will see it running for a second in the preview. In other words, while the preview may not be an actual control, all the components (and animations and effects) which make it up are ‘live’ and working. An animation which is set to loop will be constantly running and looping in the preview.

Property Editor

And finally, we come to the property editor. This should all look pretty familiar from Delphi/C++ Builder. Use the drop down to select which component within the element to edit and it’s properties will be displayed. Sub-properties can be expanded and edited as you would expect.

As for editing properties there is one feature you’ll notice immediately: all edits are live. Start typing into a ‘Text’ property and the text on the control preview will change live as you type. Adjust the width, alignment or cornerstyle (or anything else) and the preview will update immediately, and without the need to hit enter, or otherwise tab away from the editor.

Another useful feature is the drop-down property editors. Edit a numeric property and you’ll see a slider appear, for a color or gradient property you’ll get a drop down color or gradient editor and so on. And these are also live: you’ll see preview control change live as you drag the slider, adjust colors or edit the gradient. There’s no modal dialog. No need to hit enter. You get instant feedback and quickly get the values you want. (And even if you have a drop down editor, you are still free to type in/cut and paste values if you want).

You also get:
A button which brings down a menu for adding/editing animations;
No nasty modal error messages. Set an illegal value and you’ll get a drop-down error message which simply clears as you keep typing;
Buttons to add and delete components.

And, like I said, much will change, much will improve and much will be added.

Enjoy.

Previous Comments

#1 from .(JavaScript must be enabled to view this email address) on February 14, 2012

This could be really helpful tool. Looking forward to it.

Commenting is not available in this channel entry.