Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 10 total
Thread External customization of look and feel on a EWB app? CSS anyone?
Fri, Sep 28 2018 6:00 PMPermanent Link

Mario Enríquez

Open Consult

Hello folks,

I'm in middle of developing a EWB application and want to allow the customer to customize the look and feel of the app at some extent.

I would like to allow the configuration to be done externally without requiring a recompile. Something like CSS, but couldn't find a way to integrate that with EWB.

The "elements" I would like to customize are background/font colours on some button and labels.

The main objetive is to allow a customer, if he chooses to host the app on his own server, to have some control on the look and feel of the app to make it blend with the "institutional look" of their main site.

Any advice?

Regards,
Mane
Sat, Sep 29 2018 7:27 AMPermanent Link

Matthew Jones

Mario Enríquez wrote:

> The main objetive is to allow a customer, if he chooses to host the app on his own server, to have some control on the look and feel of the app to make it blend with the "institutional look" of their main site.

One of my applications does this, but only to a limited extent. Indeed, the way it operates is that it manages user accounts for multiple services, and the app is started with a ?app=thisone parameter, and the application passes that to the server and gets a JSON config object which it then uses to load the logo, change the background color and that sort of thing. You can take that as far as you want, programmatically.

The full answer is of course the Theme, which is all about CSS in how it operates, but is not a traditional CSS file. The customer would need to have EWB or you'd have to do it for them. I have one application that is "white labelled" for someone, and it has a bit of custom code (where is conditional compilation?) but a completely different theme to match their CSS style.

So you can do it, but not using "pure CSS" in the way you might a plain HTML site.

--

Matthew Jones
Sat, Sep 29 2018 12:54 PMPermanent Link

Mario Enríquez

Open Consult

Thank you Matthew, I'll look into it.

Regards,
Mario
Wed, Oct 3 2018 1:08 AMPermanent Link

ooptimum

Hello Matthew,

<< The full answer is of course the Theme, which is all about CSS in how it operates, but is not a traditional CSS file. >>

Could you go a bit further than that? Do you mean there is run-time theming support in EWB?

<< where is conditional compilation? >>

Do you mean something like {$ifdef Debug} ... {$endif}? I have it all over the place, and it works as you would expect it
Wed, Oct 3 2018 9:57 AMPermanent Link

Matthew Jones

CSS - just look at the DOM - and the theme capabilities. It is all CSS, but not .css files.

Conditional compilation is not available in a fully baked form yet. Can't select on the command line, and it doesn't work quite right across different files.

--

Matthew Jones
Wed, Oct 3 2018 11:11 AMPermanent Link

Mark Brooks

Slikware

Avatar

I think the short answer is no. As far as I can see, the only way to achieve this (as we do at the moment with our apps) is to "code" for it. By this I mean look for something like a config file on the server at startup (probably JSON format for ease of parsing) and have your app load it and react to it at startup. With this mechanism you can easily adjust colours, logos and labels at runtime.
Wed, Oct 3 2018 1:07 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Mario,

<< I'm in middle of developing a EWB application and want to allow the customer to customize the look and feel of the app at some extent.

I would like to allow the configuration to be done externally without requiring a recompile. Something like CSS, but couldn't find a way to integrate that with EWB.

The "elements" I would like to customize are background/font colours on some button and labels. >>

You can do so programmatically, but you'll need to refresh any controls that change afterward using this method:

https://www.elevatesoft.com/manual?action=viewmethod&id=ewb2&comp=TInterfaceController&method=RefreshInterface

The way that you modify these properties is through this class in the WebUI unit:

https://www.elevatesoft.com/manual?action=viewcomp&id=ewb2&comp=TInterfaceManager

Here's an example of changing the interface background color for the TButton control interface's Normal and Focused states:

procedure TForm1.Button22Click(Sender: TObject);
var
  TempInterface: TInterface;
  TempState: TInterfaceState;
begin
  TempInterface:=InterfaceManager.Interfaces.FindInterfaceByClassName(Button22.InterfaceClassName);
  if Assigned(TempInterface) then
     begin
     TempState:=TempInterface.States.FindState(NORMAL_STATE_NAME);
     if Assigned(TempState) then
        TempState.RootElement.Background.Fill.Color:=clElevateBlue;
     TempState:=TempInterface.States.FindState(FOCUSED_STATE_NAME);
     if Assigned(TempState) then
        TempState.RootElement.Background.Fill.Color:=clElevateBlue;
     Button22.RefreshInterface;
     end;
end;

The key is looping through any controls and making sure to call RefreshInterface so that they pick up the changes.  And, you will need to know a little bit about how each of the control interfaces work in terms of elements, etc.  You can review this information by simply opening the control interface using the control interface editor from the form designer using the toolbar button on the far right of the form designer's toolbar.

Having said all of this, I am planning on making theming a bit easier, at least with colors and other values that can be substituted using declarative variables.  I will be doing this by allowing control interfaces and other persistent interfaces like forms to store values as variables instead of their actual value, and then performing the name resolution at runtime with default fallback values.

Tim Young
Elevate Software
www.elevatesoft.com
Wed, Oct 3 2018 1:10 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Mark,

<< I think the short answer is no. As far as I can see, the only way to achieve this (as we do at the moment with our apps) is to "code" for it. By this I mean look for something like a config file on the server at startup (probably JSON format for ease of parsing) and have your app load it and react to it at startup. With this mechanism you can easily adjust colours, logos and labels at runtime. >>

You can actually load control interfaces directly from the server at runtime.  Check out the TInterfaces.Load method in the WebUI unit to see how this is done (the TInterface class is a TPersistent-descendant, so it can load itself from JSON using a Load method).

But, as I replied to Mario, you *do* need to loop through the controls and make sure that you refresh the interface for each once you change the interfaces.  You don't *have* to do so, but if you don't, then the interface changes will only get displayed once the state of a given control changes (mouse hover, etc.).

Tim Young
Elevate Software
www.elevatesoft.com
Wed, Oct 3 2018 1:20 PMPermanent Link

Mario Enríquez

Open Consult

Thank you Tim.

I'll look into int.

Can we expect to see this new "theme" functionality in EWB 3.0?

Regards,
Mario
Wed, Oct 3 2018 3:06 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Mario,

<< Can we expect to see this new "theme" functionality in EWB 3.0? >>

Not in the initial release, no.

Tim Young
Elevate Software
www.elevatesoft.com
Image