Login ProductsSalesSupportDownloadsAbout |
Home » Technical Support » Elevate Web Builder Technical Support » Support Forums » Elevate Web Builder General » View Thread |
Messages 1 to 10 of 10 total |
External customization of look and feel on a EWB app? CSS anyone? |
Fri, Sep 28 2018 6:00 PM | Permanent 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 AM | Permanent 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 PM | Permanent Link |
Mario Enríquez Open Consult | Thank you Matthew, I'll look into it.
Regards, Mario |
Wed, Oct 3 2018 1:08 AM | Permanent 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 AM | Permanent 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 AM | Permanent Link |
Mark Brooks Slikware | 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 PM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 PM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 PM | Permanent 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 PM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. 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 |
This web page was last updated on Wednesday, May 15, 2024 at 08:40 PM | Privacy PolicySite Map © 2024 Elevate Software, Inc. All Rights Reserved Questions or comments ? E-mail us at info@elevatesoft.com |