Develop Reference

JavaFX: Can not set -fx-background-image from SceneBuilder

Could someone explain why I can't load image from field -fx-background-image inside SceneBuilder?
Images for reference:
SceneBuilder
application
I've found out that I can do that from a .css file, for example:
#base {
-fx-background-image: url("background.jpg");
-fx-background-size: 100% 100%;
-fx-background-position: center center;
}
But that doesn't update from inside SceneBuilder, while I would like it too.

You need to attach the style sheet to the fxml element for it to be applied to the FXML viewed in the SceneBuilder design view.
There is a stylesheet field in the SceneBuilder property sheet view (it is actually in the image from your question). Select the root element and click the + symbol to select the CSS style sheet to apply. The style sheet will be applied to the root and all child elements.
Or you can use Preview | Scene Style Sheets | Add Style Sheet... to apply style sheets when you use the preview view.
You don't need to (and probably should not) set the style attribute in Scene Builder if you have a CSS file. The styles will be applied from the CSS files according to their selectors. Instead sets ids and style classes in scene builder and attach the stylesheet.
Your id is base, so if the id of the node is set to base, the selector will find it. I prefer working with style classes rather than ids but ids will work too.
You are referencing the image directly by name without relative path usage. So, as long as the image is in the same location as the fxml file and the style sheet is correctly applied as outlined above, the image defined in CSS should display in SceneBuilder.
I think that SceneBuilder automatically monitors the file system for changes, so if you change the FXML or CSS file externally, it will automatically reload them (notifying you of some, but not all, errors that may occur on reload).
If things still aren't working, see the Eden guide on where to put resources in JavaFX apps and try following their recommended approach (you might already be doing that, so locating the image might not be your issue).

How can I change a Java FX node's CSS style class at runtime?

I have a style.css file which contains styles such as:
.tab{
-fx-background-color:rgb(15,63,103);
... etc ...
}
.selectedTab{
-fx-background-color:rgb(52,105,155);
... etc ...
}
I am trying to change a Button's css at runtime when certain conditions are met.
I know you can set a style by typing the css inline with the:
mBtn.setStyle("-fx-background-color:rgb(15,63,103);");
Although to me that seems less clean than referencing styles in the .css file.
So I set my buttons CSS initially using:
newBtn.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
newBtn.getStyleClass().add("tab");
But then later, when I try and change it using:
mBtn.getStyleClass().removeAll();
mBtn.getStyleClass().add("selectedTab");
it doesn't change. Do I need to refresh/redraw the Node after changing it's style?
Also, generally, what is the preferred way to set styles in JavaFX. Is it with setStyle("..."); method or is it by linking it to a stylesheet, or is it a third way I haven't considered.
Thank you for your time :)
Edit: Solved by user fabian with first comment. The problem was removeAll() is a method that removes all the elements specified as arguments. What I intended to do is actually use the clear() function.

JavaFX ControlsFx adding custom CSS (Notification)

I am using the controlsfx library, particularly it's Notifications component, however it's default CSS styling doesn't fit my applications style at all, so I'm trying to change it.
I tried using the solution provided in this post
Is there a way to change the built-in controlfx notification popup color?
So:
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(css);
Notifications.create().owner(primaryStage).(...).show();
The CSS file is being successfully loaded, there are also no errors with adding it to the styleSheets, the style of the notification remains, however, the same. I have tried loading both a whole file identical, except my changes, to the one used in the library and short css file only with what I wanted to change
My css file changes, for reference:
.notification-pane .notification-bar > .pane {
-fx-background-color: linear-gradient(to top, #3e5151, #decba4);
-fx-padding: 0 7 0 7;
}
(for now I'm just trying to change the background to a gradient of my choice)
I have also, without success tried to implement advice from questions related to other controlsfx elements, that is to add the url to styleSheeT AFTER invoking show.
(I have also tried, just to check things out, brute changing the css inside the library jar, but somehow that also failed to work, as in the css remained the same, without any errors, even though I have modified the jar and added it again).
Since the explanation provided was very scarce, I am at a loss, as to what is wrong here.
Also in my solution I have to avoid invoking .owner() and assigning the notification to a particular stage, since then it shows up inside that stage, not on the screen outside it. Maybe that can be fixed by adding the stylesheet to some other element, not primaryStage? But for now I can't achieve any css change even when confining the notification to a stage

Kinda late to answer this. But if someone having this issue, you can fix it using those two methods.
Method 01
The issue might happen because you are using multiple stylesheets for your scene. Add your notificationpopup.css css to the begining of the arraylist. I dont have hard proofs how that fix the issue. But I think that happens because of the ordering of the stylesheets. (The overriding stylesheet should be placed after the original stylesheet inside the stylesheets arraylist. There cannot be other stylesheet(s) in between them.)
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(0, css);
Method 02
Put !important to css class attributes. For ex:
.notification-bar > .pane {
-fx-background-color: red !important;
-fx-padding: 10 10 10 10 !important;
}

Two possible solutions to change the css styling for a component
In your controller class, invoke the getStyle() method as such
node.getStyle("-fx-background-color: linear-gradient(to top, #3e5151, #decba4);-fx-padding: 0 7 0 7;");
with the same code you would have in your css file on that node to style it directly and override the css values.
or
Give the node a unique CSS ID in your code or fxml file by saying
node.setId("myID");
and then in your css file writing whatever you need for that tag like
#myID {
-fx-background-color: red;
}

Selenium Webdriver: Checking all fonts on a page

For a Sprint-story, I need to assert that a certain font is not available anymore on different pages. Right now, I can verify that a certain element doesn't contain a font and is indeed replaced by another, but is there a way to check entire pages for the presence of a certain font?
I use Selenium Webdriver cucumber/Java within IntelliJ.

It depends on whether the font is specified through a FONT tag or CSS. FONT tags are obsolete now and discouraged from use but you could use the code below to find them and write the entire tag out to the console.
// find FONT tags
List<WebElement> foundFontTags = driver.findElements(By.cssSelector("font[face*='fontname']"));
for (WebElement foundFontTag : foundFontTags)
{
System.out.println(foundFontTag.getAttribute("outerHTML"));
}
To find it in the CSS is going to be a bit more tricky. Your best bet is to talk to dev or your design team and ask how the font might be specified (if you don't already know). The problem is that without that knowledge, you are going to be looking all over the place for the font. It could be specified inline, a STYLE block, in a separate .css file, and so on each of which is going to require its own search. I provided one example for searching for a font in an inline CSS style.
// find font-face in inline CSS
foundFontTags = driver.findElements(By.cssSelector("[style*='font-family:fontname']"));
for (WebElement foundFontTag : foundFontTags)
{
System.out.println(foundFontTag.getAttribute("outerHTML"));
}
If the font is not specified in an external .css file, you might be able to get away with a text search of the entire HTML source for "font-face:fontname".
One other caveat... just because you find a definition of a css class that contains the wrong font doesn't mean it's actually applied to a visible element. That's a whole other issue. You probably should get a good definition of what success looks like from the Sprint team.

You could use Selenium like so:
WebElement.getCssValue("text-align")
But this will be a bit tricky for all the CSS you'll have to validate. Here is a good article about that . Maybe a CSS unit testing like Quixote libs/frameworks will be a better fit. Other possible way (that I've used succesfuly) - visual regressions with huxley, it can support your entire layout presentation's validation.

How to display part of an HTML document in Java

I have an application where I need to show one specific section of a HTML document within a swing JPanel. The section to be shown depends on what the user is doing at any given time.
I know that JEditorPane can display simple HTML, and in fact in terms of HTML support this is more than enough for my needs. However I don't think I can use this to display only part of the original HTML file.
I thought of putting each section within a div, then hiding all divs with CSS (display: none), and showing only the target section by setting display: block on the section I wanted to show. Unfortunately JEditorPane has limited CSS support and this does not seem to include the "display" attribute.
Before I go and implement something more elaborate, is there any simple way to achieve this goal?
Thanks.

You may try Cobra :
http://lobobrowser.org/cobra.jsp

Override the ViewFactory and replace DIV views. If they should be hidden let them return 0 from getXXXSpan methods.
See for example the section folding related code http://java-sl.com/collapse_area.html

I didn't find a way to do what I wanted relying on the CSS support from the JEditorPane. What I ended up doing is manually parsing the HTML document and splitting it in "fragments" (top-level DIVs representing sections), then displaying each section as required via JEditorPane.setText.