Best practices for managing color schemes in UniGui applications

[Tim]

Hello,

 

Our designer has specified certain colors to be used in our UniGui application. For example, instead of using clBlack/clWindowText as the fontcolor for TUniLabels and as the background color for various TUniPanels, we use $00383838. Many controls in our application are created dynamically and/or their color/fontcolor gets changed at runtime in response to certain events. In addition to this, colors for certain parts of controls -- e.g. the selection and mouseover color for items in a combobox -- are specified in UniServerModule.CustomCSS. I have been able to implement the desired color scheme and it works well. What bothers me however is that the color settings are now scattered across many different locations in the code:

• for some controls, color/fontcolor properties are specified for each individual control in the Object Inspector;
• for some controls, the ParentFont property is set in the Object Inspector and the fontcolor (and fontsize and other font settings) are taken from the TUniFrame on which the controls reside;
• for some controls, the color/fontcolor properties are specified at runtime in pascal code (or it initially uses the values set in the Object Inspector, but these later get modified);
• as previously mentioned, some colors are specified in UniServerModule.CustomCSS.

Ideally i would like to have one location in the project where the color scheme is specified. I have defined constants cCustomColor_Black, cCustomColor_Gray etc in MainModule.pas, which i use whereever i need to set color/fontcolor properties in code. I suppose i could also assign UniServerModule.CustomCSS in code in the UniGUIServerModuleCreate event, allowing me to use the same constants for defining colors there. But constants can't be used when setting properties in the Object Inspector as far as i know.

 

I'm just wondering how other UniGui developers handle this issue? I would be grateful for any advice

 

Many thanks,

Tim

[zilav]

The only way to handle it is if unigui will provide SASS/LESS templates that can be configured by users and compiled to css.

You can always do it yourself though, but keeping it up to date with newer unigui versions could become nightmare.

[Tim]

Thanks for the feedback For the time being i have solved this by writing a function SetupControl which sets the color and fontcolor/size to values obtained from an ini file. This function has to be called in the OnCreate event of each frame for each control. So the colors set at design time in the object inspector are just a guide; the values obtained from the ini file determine how the application will look at run time.

[xxxpilot]

Could you please post here an example for such "OnCreate" event? I am fighting with similar issue.. (colors/fonts), so, maybe helps

[Tim]

Hi Dmitriy,

 

In MainModule.pas i have the following procedure:

 

type TUniControl_ProtectedPropertiesHack = class(TUniControl);


procedure TControlManager.SetupControl(AUniControl : TUniControl; AColor, AFontColor : TColor; AFontSize : integer);
var
  tmp : string;
begin
  if not Assigned(AUniControl) then begin
    exit;
  end;


  if AColor <> clNone then begin
    AUniControl.Color := AColor;
  end;


  if AFontColor <> clNone then begin
    TUniControl_ProtectedPropertiesHack(AUniControl).ParentFont := false;
    TUniControl_ProtectedPropertiesHack(AUniControl).Font.Color := AFontColor;
  end;


  if AFontSize <> cCustomFontSize_None then begin
    TUniControl_ProtectedPropertiesHack(AUniControl).ParentFont := false;
    TUniControl_ProtectedPropertiesHack(AUniControl).Font.Size := AFontSize;
  end;


  if AUniControl is TUniPanel then begin
    TUniPanel(AUniControl).BorderStyle := ubsNone;
    tmp := TUniPanel(AUniControl).Caption;
    TUniPanel(AUniControl).Caption := '';
    TUniPanel(AUniControl).Caption := tmp;
  end;
end;

 

I then call this procedure in the OnCreate event for each control on the frame:

 

procedure TfrmWizardFrame1.UniFrameCreate(Sender: TObject);
begin
  UniMainModule().ControlManager.SetupControl(lblPageHeading , clNone,                          UniServerModule().COLOR_Emphasis, cCustomFontSize_Title);
  UniMainModule().ControlManager.SetupControl(lblError       , clNone,                          UniServerModule().COLOR_Error,    cCustomFontSize_Normal);
  UniMainModule().ControlManager.SetupControl(edtOrt         , UniServerModule().COLOR_Lighter, UniServerModule().COLOR_Darkest,  cCustomFontSize_Normal);
end;

 

COLOR_Emphasis, COLOR_Error and so on are loaded from an ini file when the application starts up. So it is possible to switch the website to a different color scheme just by modifying some lines in the ini file. This approach does work quite well, but the downsides are (1) having to maintain all the SetupControl calls, and (2) the design-time and run-time appearance of the website can be radically different.

 

I hope this helps a bit,

Tim

[md9projetos]

Hi Tim,

 

I know it is an old thread but justa a few questions.

 

Does this slow downs the creation of forms?

It works well when you press ctrl+ to magnify the form?

I´m pretty satisfied with the UNIGUI themes,but that can be helpful in some situations.

 

Marcello

[Tim]

Hi Marcello,

 

I certainly haven't noticed any problems with the form creation speed or the ctrl+ magnification that could be attributed to the SetupControl calls in the OnCreate event. If you want to be sure, I suppose you could create your own test project (or modify one of the demo projects) that uses this approach, do some tests, then repeat your tests with the SetupControl calls commented out.

 

Most of the speed issues we've had relate rather to the large number of controls on some of our frames.

 

Have you had problems magnifying forms using ctrl+ in UniGui applications? It would be interesting to know, I've never come across such problems before

 

I hope this helps,

 

Tim

[md9projetos]

Thank you Tim.

The problems I had were only in Chrome last version,with CTR+ ,but only magnFying to an unrealistic ratio.

Asked just for curiosity.

I think this problem of speed due to an enourmous number of components its not related to Unigui itself,but

to Ajax,Extjs suffers from that,and also Polymer,but sencha Site has a lot of literature explainig how to improve that.

 

Also React.Js introduced some changes,that were copied from Polymer(they created a tool called Vulcanize),and

I´ve read in Senchas Forum that they´re looking to do something about,So I expect the next version of EXTJS to be a big one.

While studying polymer they gave several design tips,like divinding your tabs as much as you can,and give

something the users to look at, while the other stuff is being loaded.

Also this thread can help.

https://www.sencha.com/forum/showthread.php?33072-SOLVED-Why-extjs-is-soooo-slow-gt-Extremely-fast!/page3

 

But I think just doing whats stated here do exactly what Polymer Vulcanize do https://unigui.wikispaces.com/How+to+improve+loading+time

So I think Extjs people discovered it before google.

https://unigui.wikispaces.com/How+to+improve+loading+time

 

Marcello