Friday, September 13, 2019

VCL and FMX Styles and the Styledesigner...

I never used VCL-Styles before, because my last app for VCL is still on D2007 and we have written our own styling. 

Since XE 2, I use FMX only.

For FMX - of course - I had to use styling and the Bitmap-Style designer. I'm not so happy with this app. There is a QC Entry from 2018, RSP-22407, please support.

If you tried the Styledesigner there are many objects - that's fine - and PNG's for a different resolution. From my point of view, one big image is only helpful if you are using some kind of template for a well know graphic program. By comparing different styles you find out, that nearly every style has its own layout. Horrible. Unfortunately, there is no guide in which part of the graphic is used for which object/action. Also the Style/New creates different layouts. 

Ok, let's take it easy: Use a predefined style, save the png file, convert the colors, reload the png file, done... Isn't it? No... You have to adjust the font-colors because these colors are set individually. Wouldn't it be nice if the colors are taken from the png?
There is a "choose color under mouse" tool, but you can not open the png file and at the same time choose a color. The trick is to open on object, select background and open the rectangle editor. These windows could stay open while choosing the color.

How to uses these colors at runtime? There is no Color table in the style and if you change one color, the values are set to all objects. If you want to match a TRectangle to the given style the have to choose a control and get the color from there. So if your color settings are different from the SysColors, it's difficult. I like to have more than the given SysColors like clHelpTextColor, clWarnColor, clInfoColor. 

So how to select a color in the ObjectInspector? You can select "Red" or "clRed" but not "clMenu" or "clScrollBar". 

The Styles that are downloadable or included are - from my point of view - all too monochrome. Most dark styles are too dark (lol... perhaps, because I do not like dark-styles at all) and all of the colored- styles have only one dominant color. I like my UI uniform, but not so uniform. Colors help you to guide the user's attention. If you place some controls on a Panel / Rectangle with a different color you can show the user that these inputs are important or less important. Perhaps UserColor1, UserColor2..UserColorN would be nice.

How to get a button with an icon? You can use a button with an Icon or you can create a new entry in the object list, add an image to the "Big-Picture", select all rectangles for enabled, disabled, hot, focused. Copying a button is a piece of cake, but how to add the image? There is no build-in function. You have to take a graphic-editor to expand your png's (1x,1.5x,2x,3x) keep in mind to place your 5 images on the same spot, if not, you have to select all rectangle individually. But how? Solution: Write a tool to add Images. After your tool has created all png's you can import these images and select the rectangles. But where are the right corners? There is no grid  and if your icon has no outside Rectangle. you never find the right points (up/left,bottom/right). Wouldn't it be great if your tool could provide a config to do this selection on import of the png? And why is there no function to do this inside the Style designer? And why is there a big image depending on how to create and find all the right places? 

Wouldn't it be cool if you can provide single images for all functions/objects and on style-save, these images got composed (with no, or less spaces) into one big png? (for each resolution)! No Rectangle selection no guessing game where to find what? Perhaps single images are not so easy to create if you are a style-artist, but in this case, the Bitmap-Styledesigner should be able to export a uniform png with rectangles where to place your images. This image could be re-imported and could be striped into single images for later composing.

If you want to change the Font-Color for e.g. TabTextActiveNormal, you can open is (Font Dialog, no selection of pre-select colors) or you can change the color, but the actual color is not set in the color-dialog. So to change the color to a darker color you have to guess or you have to put in the colors for RGB. (Not with the clipboard.)

Many stuff to do... Like in RSP-22407 - I really have no time to write my own Styledesigner starting by New-FMX-Project.

Please leave a comment of your idea or if I'm totally wrong. ;-)



1 comment:

  1. Totally agreeing, even if styles are a great UI thing there are still thorns :
    "SystemColors", the only way I found to have an equivalent is a deep looking in style with FindStyleResource of a buttonstyle to get Normal,Focused,Hot,Pressed,Active colors

    Buttons with icons ? With the new versions 10.2 and higher I prefer TPath to Png, lighter, dpi independent but monochrome (excepting gradient filling)independent. Note : BindNavigator use TPath for each buttons (sorely constants), recent styles use lot of TPaths (is this a sign ?)

    ReplyDelete