Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
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 07:41 Go to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 15:08 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 08:23 Go to previous messageGo to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 14:13 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 14:37 Go to previous messageGo to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 07:05 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 07:07 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 10:32 Go to previous messageGo to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 181 times)
  • Attachment: Image 2.png
    (Size: 1.62KB, Downloaded 144 times)
Re: CSS problem on JavaFX e4 app [message #1823771 is a reply to message #1823752] Wed, 01 April 2020 18:16 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 06:53 Go to previous messageGo to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 07:11 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 08:09 Go to previous messageGo to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 138 times)
Re: CSS problem on JavaFX e4 app [message #1823841 is a reply to message #1823796] Thu, 02 April 2020 20:24 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 09:44 Go to previous messageGo to next message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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 20:22 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 06:50 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
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 07:24 Go to previous message
Marco Maisano is currently offline Marco MaisanoFriend
Messages: 22
Registered: March 2020
Junior Member
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:
  


Current Time: Sat Dec 21 14:37:47 GMT 2024

Powered by FUDForum. Page generated in 0.05572 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top