Eclipse Community Forums: e(fx)clipse » CSS problem on JavaFX e4 app

Home » Eclipse Projects » e(fx)clipse » CSS problem on JavaFX e4 app(JavaFX app - Scene Builder - CSS problem)

CSS problem on JavaFX e4 app [message #1823015]

Wed, 18 March 2020 03:41

Eclipse User

Hi,

I write again, this time about applying CSS to an Eclipse JavaFX e4 project.

Following Tom's blog, in particular https://tomsondev.bestsolution.at/2015/01/23/efxclipse-1-2-0-themes-are-osgi-services/, I understood that CSS is linked to the concept of theme.

The structure of my project is generated using Scene Builder, then generating its FXML.

So if I change the default.css, for example going to set the color for a button, this change is not applied.

Is there any guide I can follow?

Do I have to link the .css or the theme to SceneBuilder?

I probably didn't quite understand the path to take between the application, Scene Builder and the theme.

Thanks for the reply.

Re: CSS problem on JavaFX e4 app [message #1823039 is a reply to message #1823015]

Wed, 18 March 2020 11:08

Eclipse User

Yes you need to load the default.css in theme-builder IIRC it will store it as PI inside your FXML

Re: CSS problem on JavaFX e4 app [message #1823078 is a reply to message #1823039]

Thu, 19 March 2020 04:23

Eclipse User

Okay, I state that I'm newbie to Eclipse JavaFX.

I think I don't understand your answer, so I kindly ask you to be clearer.

My need is to generate in the application the possibility to change css, therefore theme, at runtime.

What I understand is that the default.css is loaded by the DefaultTheme class. Then through the "theme-default.xml" service, the theme is passed to the application.

At this point, what should I switch to FXML and then to SceneBuilder?

Re: CSS problem on JavaFX e4 app [message #1823102 is a reply to message #1823078]

Thu, 19 March 2020 10:13

Eclipse User

SceneBuilder is only used at design time and the theme stuff is a runtime thing, the e4 themes are applied the scene hence all FXML-Files loaded will be themed

Re: CSS problem on JavaFX e4 app [message #1823635 is a reply to message #1823102]

Mon, 30 March 2020 10:37

Eclipse User

OK, now how can I change css at runtime?

For example, if I want that, clicking on a button my application takes the css A and if I click on another button, it takes a css B. Which is the best approach to do it?

Is it possibile to use a ThemeManager?

Do you have some articles as guide?

Thank

Re: CSS problem on JavaFX e4 app [message #1823683 is a reply to message #1823635]

Tue, 31 March 2020 03:05

Eclipse User

You need to define 2 themes and yes then you just call

ThemeManager#setCurrentThemeId(String)

- and no there's no guide how to do it

Re: CSS problem on JavaFX e4 app [message #1823684 is a reply to message #1823683]

Tue, 31 March 2020 03:07

Eclipse User

You might want to look at https://github.com/eclipse-efx/efxclipse-rt/blob/master/demos/org.eclipse.fx.demo.contacts.app/src/org/eclipse/fx/demo/contacts/handlers/SwitchThemeHandler.java

Re: CSS problem on JavaFX e4 app [message #1823752 is a reply to message #1823684]

Wed, 01 April 2020 06:32

Eclipse User

Then,
I created a default.css, a DefaultTheme class and a service linked to it.

The DefaultTheme is below:

@Component(service=Theme.class)
public class DefaultTheme extends AbstractTheme {
	public DefaultTheme() {
		super("theme.default", "Default theme", DefaultTheme.class.getClassLoader().getResource("css/default.css"));
		
		System.out.println("Default Theme loaded.");
	}
	
	@Reference(cardinality=ReferenceCardinality.MULTIPLE)
	@Override
	public void registerStylesheet(Stylesheet stylesheet) {
		System.out.println("Default Registration.");
		super.registerStylesheet(stylesheet);
	}

	@Override
	public void unregisterStylesheet(Stylesheet stylesheet) {
		System.out.println("Default Deregistration.");
		super.unregisterStylesheet(stylesheet);
	}
}

and the service.xml is linked to the DefaultTheme and as can be seen in the attached images.

The problem is that in the Console I see the log "Default Theme loaded.", but I can't see the other log "Default Registration.".

What am I doing wrong?

This problem do an imperfect service loading, than I can't switch themes.

Thanks

Attachment: Image 3.png
(Size: 9.10KB, Downloaded 221 times)
Attachment: Image 2.png
(Size: 1.62KB, Downloaded 169 times)

Re: CSS problem on JavaFX e4 app [message #1823771 is a reply to message #1823752]

Wed, 01 April 2020 14:16

Eclipse User

And where's your service implement Stylesheet? Did you look at the sources I pointed to and how they implement different themes.. You need at least 2 implementations of AbstractTheme to switch.

Re: CSS problem on JavaFX e4 app [message #1823788 is a reply to message #1823771]

Thu, 02 April 2020 02:53

Eclipse User

I have created two sheets of css, Day.css and Night.css "which I wish were related to two themes.

Then, I have created two classes, DayTheme and NightTheme, classes that extends AbstractTheme (implemented as above for the DefaultTheme).

Therefore, I created two OSGI services, one for each class, theme-day.xml and theme-night.xml.
theme-day.xml is associated with the DayTheme class and the same goes for Night.

Then the two .xml services are registered in the MANIFEST.

You asked me: where's your service implement Stylesheet?

What do you mean?

Then, I implemented two functions:

public static void switchTheme(String themeID) {
	themeManager.setCurrentThemeId(themeID);
}
	
public static Theme getTheme() {
	return themeManager.getCurrentTheme();
}

and I verified that the theme is actually associated, since by getting the current theme, it is returned.

But the css (ie the theme) is not associated with the context.
It is as if the theme does not register the css.

What am I missing?

Re: CSS problem on JavaFX e4 app [message #1823789 is a reply to message #1823788]

Thu, 02 April 2020 03:11

Eclipse User

Well you said that "System.out.println("Default Registration.");" is not printed which is perfectly fine because this method is only invoked if you have services of type "Stylesheet". So how does your Theme constructors look like? It should load Day.css and Night.css?

Re: CSS problem on JavaFX e4 app [message #1823796 is a reply to message #1823789]

Thu, 02 April 2020 04:09

Eclipse User

Well you said that "System.out.println("Default Registration.");" is not printed which is perfectly fine because this method is only invoked if you have services of type "Stylesheet"

I created the two services, as mentioned by linking the two classes DayTheme and NightTheme to them, then under the "Services" tab I added a "Reference Services" of the "Stylesheet" type, whose characteristics are shown in the attached image.

The constructor in the DayTheme class is as follows:

public class DefaultTheme extends AbstractTheme {
	
	public DefaultTheme() {
		
	super("theme.default", "Default theme", DefaultTheme.class.getClassLoader().getResource("css/default.css"));
		
}

then has defined with three fields:
1) theme ID
2) theme name
3) url of the linked css

Attachment: Image 3.png
(Size: 9.10KB, Downloaded 159 times)

Re: CSS problem on JavaFX e4 app [message #1823841 is a reply to message #1823796]

Thu, 02 April 2020 16:24

Eclipse User

But that's wrong you have to pass Day.css instead of default.css, and for the other theme it has to be Night.css. I can only repeat look at the sources and how the themes are defined there

Re: CSS problem on JavaFX e4 app [message #1823994 is a reply to message #1823841]

Mon, 06 April 2020 05:44

Eclipse User

Hi,

progressing step by step I seen that the themes was correctly generated.

The problem is related to the class that is linked to the Part.

In particular, the following class can load both themes:

@PostConstruct
public void init(BorderPane root) {
       try {			
		Button btn = new Button("Switch Theme");
		root.setCenter(btn);
		btn.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<Event>() {

			@Override
			public void handle(Event event) {
				System.out.println("Set night theme.");

				LifeCycleManager.switchTheme("theme.night");
			}
		});			
			
	}catch (Exception e) {
		e.printStackTrace();

Since I need to set the Part as a full screen mode, and because I want to set the Style of the Part, I need to set in the Init method the Stage.

In this case the theme is not loaded.

The code is follow:

@PostConstruct
public void init(Stage primStage) {
	try {	
			
		BorderPane root= new BorderPane();
		Button btn = new Button("Switch Theme");
		root.setCenter(btn);
		btn.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<Event>() {

			@Override
			public void handle(Event event) {
				System.out.println("Set night theme.");

				LifeCycleManager.switchTheme("theme.night");
			}
		});	
			
		primStage.setScene(new Scene(root));
			
	}catch (Exception e) {
		e.printStackTrace();
	}

How can I solve this problem?

Re: CSS problem on JavaFX e4 app [message #1824039 is a reply to message #1823994]

Mon, 06 April 2020 16:22

Eclipse User

why do you want to create a new Scene and replace the current one? That does not make sense. IIRC ThemeManager supports registering a custom scene but that is only for Popup windows. I repeat the none working code makes no sense.

Re: CSS problem on JavaFX e4 app [message #1824053 is a reply to message #1824039]

Tue, 07 April 2020 02:50

Eclipse User

see then see https://wiki.eclipse.org/Efxclipse/Runtime/e4 for information what you can specify in the e4xmi-File to get a stage without decoration or putting it into full-screen

Re: CSS problem on JavaFX e4 app [message #1824055 is a reply to message #1824053]

Tue, 07 April 2020 03:24

Eclipse User

Perfect,

Thanks for all!

Previous Topic:	Does efxclipse run on Eclipse 2020-03?
Next Topic:	E(FX)Clipse in Eclipse 2019-12 (4.14.0) No wizard.

Goto Forum:

-=] Back to Top [=-

Current Time: Mon Apr 14 19:08:10 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter