Modify directly the control's style properties.

I don’t know what new features the Web framework will bring us for the CSS.
I have done some tests with ExecuteJavascript to modify directly the style properties of controls (not the webstyle) and it seems to work fine and reliably.

This technique can be considered “wrong” and possibly incompatible with future enhancements?
There is an more “compatible” and better way to do this?

Regards.

[quote=233263:@Maurizio Rossi]I don’t know what new features the Web framework will bring us for the CSS.
I have done some tests with ExecuteJavascript to modify directly the style properties of controls (not the webstyle) and it seems to work fine and reliably.

This technique can be considered “wrong” and possibly incompatible with future enhancements?
There is an more “compatible” and better way to do this?

Regards.[/quote]
Any direct manipulation of the DOM is discouraged. We reserve the right to change the way our controls render at any time, and you may end up with unexpected results. Also, the web framework expects that controls will be the way they were written by the framework, so your changes may interfere with the stability of the app.

Thank you Greg for the reply.
So for a more powerful and flexible way to manipulate the style’s properties I think that a feature request must be submitted.

Regards.

The feature request is <https://xojo.com/issue/41736>.

To anyone interested in this feature: please vote.

Best regards.

Then please rank the feature request to make the CSS elements of a webStyle editable at runtime, or to be able to create webStyle classes dynamically in code. If we had that I would promise never to otherwise modify the DOM.

There is a way to use a CSS style created in code.
Add the style as dot, such as

.mystyle { color: red; }

Then create a mystyle webstyle and set it to your control.

Xojo will in fact use the style created in code, which can be modified in JavaScript without messing up the framework.

So, it would be possible to create a style, for example with a color of red, and then later in the code change the color to blue? I have an area in a program where I allow the user to choose the background color and font size for certain labels. I am having to create multiple webstyles to support this. It would be extremely useful to be able to create one .labelstyle and be able to change it in code before assigning the style to the label.

Here is an example :

  • In App.HTMLHeader :

<style id=toto > .toto { color: red; } </style>

A WebStyle toto has been added to the project and set to a label.

When the project runs, the label is red.

In a button :

[code] dim js as string

js = js + “mystyle = document.getElementById(‘toto’);”
js = js + “mystyleText = mystyle.innerHTML;”
js = js + “mystyle.innerHTML = mystyleText.replace(‘red’,‘blue’);”

self.ExecuteJavaScript(js)[/code]

When clicked, the button text turns blue.

To see more about colors in CSS : http://www.w3schools.com/cssref/pr_text_color.asp
For the background, the variable is background-color.

As Greg stated, any direct manipulation of the DOM is discouraged.
There is a fundamental problem when an application changes a control’s style: the framework has no knowledge of these changes.

On some control types (images for example) if you change some style property or a new style created in code is applied to the control itself, the framework in some circumstances will rewrite the control’s style.
In these cases there is no way for the application to have knowledge of the framework actions.
For now the only way is using the WebSDK to create a custom control with possibly no interaction with the framework and its operations on styles.

My feature request (reported above) is to have a method to stop the framework to overwrite control styles created in code by the application i.e. let the framework be aware that the application has made some customization that must be preserved.

Regards.

While direct manipulation of the framework is indeed fragile, having your own css styles does not modify the framework.