Eclipse Community Forums: Eclipse 4 » Overriding CSS styling in RCP

Home » Eclipse Projects » Eclipse 4 » Overriding CSS styling in RCP(Once a generic css style is applied, the programmatic .setXX do no longer work)

Show: Today's Messages :: Show Polls :: Message Navigator

Overriding CSS styling in RCP [message #1746069]

Fri, 21 October 2016 09:25

Matthias Nowak

Messages: 2
Registered: May 2016

Junior Member

CSS works nice. I can per default set the background of all Text widgets to white:
Text {
background-color: #ffffff;
}

If I now create my widgets in a @PostConstruct function and set the background color according to values (red== outside bounds) then those changes are not visible. My guess is that right after the creation and visualization of the part, the style engine is applied and overrides those values.

I tried to change the background color in a delayed function (timeExec...) and the background color changes. The changed background color is visible until focus or similar changes, and the style engine overrides my values.

From the inspection of the code, there is no possibility to stop the style engine at one place in the widget hierarchy. There is probably no possibility in SWT to set the "default" values for each widget, hence styling has to be applied to the current values. CSS styling would in this case also stop decorators from working.

I'm not sure how CSS is supposed to work together with the programmatic setting of colors and similar.

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1746116 is a reply to message #1746069]

Sat, 22 October 2016 09:09

Dirk Fauth

Messages: 2902
Registered: July 2012

Senior Member

The css engine frequently applies style options at runtime to support dynamic styling. So it doesn't work in combination with programmatic styling as such settings will be overwritten constantly

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1746154 is a reply to message #1746116]

Mon, 24 October 2016 07:40

Matthias Nowak

Messages: 2
Registered: May 2016

Junior Member

Yes, this was my impression how it works. However, it would be nice, if one could protect a widget subtree from the general styling. This is useful for tables, where one likes to color the background according to the values. The applyStyles function could check a certain attribute and jump over the widget having this attribute and its children. It could be something like widget.setData("noCss", Boolean.True); .

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1746181 is a reply to message #1746154]

Mon, 24 October 2016 16:02

Eclipse User

You accomplish this as you would in the HTML world: via widget classes.

Your CSS:

Text {
   color: black;
   background: white;
}
Text#error {
   color: white;
   background: red;
}

In your Java code:

WidgetElement.setCSSClass(textWidget, "error");

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1832521 is a reply to message #1746181]

Sun, 20 September 2020 06:23

Andreas Buchen

Messages: 123
Registered: July 2009

Senior Member

I would like to revisit this discussion.

For my pure e4 application, I am in the process of adopting theming.
In the application there are some labels (Label and CLabel) styled in custom colors.
For example, the background might be a gradient representing the value of a calculation.
Or the background is the color of a data series that the user picked (the text color is then either black or white calculated based on the brightness).
In short: I wouldn't know how to statically define this in CSS.

Do you have proposals how to handle such labels?

One idea: implement my custom Label extending Canvas. It would need to ignore the standard foreground and background colors.

Do you have other suggestions?
* Maybe one can attach local styles to a widget, say label.setData("styles", "{ background-color: #656565}").
* Is there a way to extend the CSSEngine to have a "noCSS" property as suggested above?

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1834453 is a reply to message #1832521]

Tue, 10 November 2020 14:51

Phil Beauvoir

Messages: 62
Registered: October 2012

Member

There are many occasions where, for example, a table cell background or foreground color, or a label color needs to be set programmatically. It is not possible to set all possible colors in a CSS class declaration.

It would be very useful if there was some means to over-ride the Theme setting programmatically for a widget.

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1834477 is a reply to message #1834453]

Wed, 11 November 2020 03:36

Eclipse User

You can associate style properties to a widget by using the `style` data element. For example:

Widget w = ...;
w.setData("style", "color: yellow;");

Report message to a moderator

Re: Overriding CSS styling in RCP [message #1834484 is a reply to message #1834477]

Wed, 11 November 2020 09:57

Phil Beauvoir

Messages: 62
Registered: October 2012

Member

Brian de Alwis wrote on Wed, 11 November 2020 03:36

You can associate style properties to a widget by using the `style` data element. For example:
Widget w = ...;
w.setData("style", "color: yellow;");

Aha! That's great, thank-you.

One more question - if one is setting the style data more than once on the widget (for example to represent a different state) how do you then do a "refresh" to see the re-skinned widget immediately? At the moment I have to deselect and reselect the containing part to see a change.

Report message to a moderator

Previous Topic:	How to contribute to main toolbar using Eclipse 4?
Next Topic:	Adding 3.x ViewParts to E4XMI

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Fri Apr 19 14:43:32 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter