Styling default JavaFX Dialogs - javafx

I'm looking for a way to style the default JavaFX Dialog (javafx.scene.control.Dialog).
I tried to get the DialogPane and add a stylesheet, but it covers only a small piece of the dialog. I would prefer to style only with an external css file and without to add styleClasses over the code. This would look messy (header, content, own content on the content and more..)
I googled already alot and only found examples for ControlsFX, but since jdk8_40 JavaFX has it's own Dialogs i use them now.
Any suggestions?
Edit:
Since José Pereda posted the solution i created my own dialog.css.
I'll post it here because it covers the whole dialog and maybe someone want's to copy&paste it. Note .dialog-pane is already a given styleClass name so you don't need to apply your own. Of course, Josés is more fine detailed.
.dialog-pane {
-fx-background-color: black;
}
.dialog-pane .label {
-fx-text-fill: white;
}
.dialog-pane:header .header-panel {
-fx-background-color: black;
}
.dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

You can style your dialogs with your own css file, but for that you need to take into consideration that the dialog is in fact a new stage, with a new scene, and the root node is a DialogPane instance.
So once you create some dialog instance:
#Override
public void start(Stage primaryStage) {
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Confirmation Dialog");
alert.setHeaderText("This is a Custom Confirmation Dialog");
alert.setContentText("We override the style classes of the dialog");
...
}
you can access to its dialog pane and add your own style sheet and your own class selector:
DialogPane dialogPane = alert.getDialogPane();
dialogPane.getStylesheets().add(
getClass().getResource("myDialogs.css").toExternalForm());
dialogPane.getStyleClass().add("myDialog");
Now the trick is knowing all the rules a Dialog style sheet has implemented by default.
And that's a difficult task... since they are not in the modena.css file, as for all the regular controls. On the contrary, they are found in the modena.bss file, a binary file located in the jfxrt.jar under private packages.
After some digging I've managed to get those rules, so your custom myDialogs.css file will look something like this:
.myDialog{
-fx-background-color: #f9d900;
}
.myDialog > *.button-bar > *.container{
-fx-background-color: #a9e200;
}
.myDialog > *.label.content{
-fx-font-size: 14px;
-fx-font-weight: bold;
}
.myDialog:header *.header-panel{
-fx-background-color: #a59c31;
}
.myDialog:header *.header-panel *.label{
-fx-font-size: 18px;
-fx-font-style: italic;
-fx-fill: #292929;
}
And you will have your styled dialog:
Note that being a bss file under private packages, these selectors can change without notice in future releases.
EDIT
I've just found that the .dialog-pane selector is already part of modena.css in the last 8u40 early versions, so you can find all the selectors and rules applied to the dialog pane there.

Related

JavaFX Subclass pseudoclass

I wan to make 2 different styles of button in one css. So when creating the second button i added class to it using:
close.getStyleClass().add("close-button");
so now i can reference this button in css by:
.button.close-button
But now i dont know how to reference pseudoclasses of button when using the .close-button class.
I tried accessing it by
.button.close-button:selected
or
.button:selected.close-button
Nor of these seems to work. Is there any way how to do it? Or do i have to create my own pseudoclasses for the .close-button class and add and remove them in listeners of the btton in code?
I am creating the button using:
Button close = new Button("X");
close.getStyleClass().add("close-button");
close.setOnAction((event) -> {
....
});
Than i am adding it to the layout:
HBox hbox = new HBox(rbSelect, label, pane, close);
my css looks like:
.button {
...
}
.button.close-button {
-fx-background-color: #E81123;
}
.button:selected.close-button {
-fx-background-color: greenyellow;
}
The button looks like this:
When i click on it:
Seems like nothing happens, when i would expect the button to change color to greenyellow
I'm not 100% sure this is necessary, but by convention the pseudo class selector is added after the class selectors:
.button.close-button:selected {
-fx-background-color: greenyellow;
}
However there is no selected pseudo class for Button. It's available for CheckBox and ToggleButton, but not for regular Buttons. Pseudoclasses that are available are :pressed and :hover, see css reference.
You could of course add the pseudoclass yourself, assuming you're using JavaFX 8:
PseudoClass selected = PseudoClass.getPseudoClass("selected");
close.setOnAction((event) -> {
....
close.pseudoClassStateChanged(selected, true);
});

CSS doesn't have effect on JavaFX GUI

My CSS code isn't doing anything to the look of the elements for the JavaFX application I have. I've noticed that the lines of code in the CSS document say "Unknown property" and are highlighted in yellow. I tried to uninstall and then reinstall e(fx)clipse but that didn't help. Here's the code
CSS
.header-one {
-fx-stroke-width: 4;
-fx-fill: 99000;
}
Java
Label patronHeader = new Label("Current Patron");
patronHeader.getStyleClass().add("header-one");
What should I do to fix the problem?
In your case, you use css elements, that a Label does not support:
Visit this site for more information on what you can set on Labeled controls:
http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#labeled
-fx-stroke-width and -fx-fill are not supported CSS properties for a Label.
You need
.header-one {
-fx-text-fill: #990000 ;
}
.header-one .text {
-fx-stroke-width: 4 ;
}

javaFX css styling for an array of text not working

I have a CSS file that styles my application MusicPlayer. I'm trying to style my array of javafx.scene.text.Text named sliderText. However nothing works. even when i use .text it styles the text of everything else EXCEPT my array of sliderText. any ideas how to get this working?
thanks
heres my declaration of slider text =
public static javafx.scene.text.Text[] sliderText = new Text[10];
also general question, how do i use .setID() in both javafx and CSS?
I've tried doing the following:
.text {
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-fill: #818181;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
And that changes literally everything except what i want it to
By default, Text objects have no style class attached to them. (Only Controls have default style classes set.) So your rule (which applies to the style class "text"), won't apply to your text objects.
The basic CSS tutorial for JavaFX covers all this, but briefly you need to do something like
for (Text text : sliderText) {
text.getStyleClass().add("text");
}
either in the constructor or in the start() method or an initialization method (you haven't shown enough context for your code for me to know how your application is set up).
For your question:
how do i use .setID() in both javafx and CSS?
you can do
someNode.setId("specialNode");
and then in CSS
#specialNode {
/* style rules for specialNode here.... */
}
Ids should be unique to a single node within any scene graph.

How to set Default CSS for all Buttons in JAVAFx

I have over 100 Buttons in my JAVAfx application and I want to give a DEFAULT styling[given below] to all buttons in the programme. Please help ! :)
-fx-background-color:#3c7fb1;
-fx-text-fill: black;
-fx-font-size: 14px;
-fx-padding: 3 30 3 30;
Create a new CSS file.
Attach the CSS file to your Scene.
Put your button styles to .button {}.
It's easy to set default Style for all JavaFX Button in an application.
Just give a id to the style sheet which you want to set as default for all button.And then set this id for all button of your application.
Button button =new Button("Button");
Button button1 =new Button("Button");
button.setId("allbtn");
button1.setId("allbtn");
String style= getClass().getResource("New.css").toExternalForm();
scene.getStylesheets().add(style);
Create buttons
apply id to them (for css as we apply in the html) using setId().
Define CSS for this ID
Finally add CSS file to the Scene Thats it.
And CSS file :
#allbtn{
-fx-color:black;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-background-radius: 10px;
}
Learn more about JavaFX Button CSS
To apply a default style in an fxml file add a '.button' class to your css file and include it in the Anchor pane
Add this to your css file e.g. app.css
.button {
-fx-color:black;
-fx-padding:4px;
-fx-background-color:blue;
-fx-background-radius: 10px;
}
Update your AnchorPane tag to include the stylesheet:
<AnchorPane prefHeight="700.0" prefWidth="500.0" stylesheets="#../app.css" >
This will change all buttons to use your style for within the fxml file

how to style a prompt text of combobox in java FX application?

I want to modify the css style of my combobox to reduce the text-size of its promptText.
How can this be done?
If you only want to change size of the prompt text, and not the other text, I don't think there is any way: there's simply no hook into the text node for the prompt text that distinguishes it from the displayed text.
You can change the color via a special css property:
.combo-box .text-field {
-fx-prompt-text-fill: rgba(255, 0, 0, 0.5) ;
}
.combo-box .text-field:focused {
-fx-prompt-text-fill: transparent ;
}
but I don't see any way to change any other style properties.
just add the following codes at your css
.combo-box-base .text{
-fx-fill: rgb(130.0, 130.0, 130.0);
}
Have you checked this out? Try something like:
.combo-box .list-view {
-fx-font-size: xxxx;
}
You may need to specify additional properties/and or additional selectors to achieve the desired effect (e.g. -fx-cell-size). See the relevant section in caspian.css (located inside the jfxrt.jar in the lib folder of your JRE).
A bit of a hack using Scenic View
.combo-box .list-cell {
-fx-font-size: xxxx;
}
As James D said this piece of code work in certain condition only
.combo-box .text-field {
-fx-prompt-text-fill: rgba(255, 0, 0, 0.5) ;
}
.combo-box .text-field:focused {
-fx-prompt-text-fill: transparent ;
}
but only if you active editable property of your combobox.
If you add
.combo-box-base .text
it will apply even for the element of your combobox
If you don't want your combobox editable JavaFx don't take this into account. I think you have to manage it yourself by adding a PseudoClass and activate it yourself ...
Or put your combobox editable but forbid keyboard
Or You'll have to take another ComboBox from another Interface framework
Those solutions are workaround and not definitive solution i hope JavaFx developpers will improve this.
I know this is old, someone might get helped.
For default combo box:
.combo-box{
-fx-prompt-text-fill: #ffffff;
}
For JFoenix Combo box:
.jfx-combo-box {
-fx-prompt-text-fill: #ffffff;
}
You can also style the .list-cell .label .text-field sub-property(ies) if need be.
With this code I change styles of comboboxes: font, font-size, text color etc.
ComboBox<String> comboBox= new ComboBox<String>();
comboBox.setPromptText("Text");
comboBox.setButtonCell(new ListCell<String>(){
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
setStyle("-fx-font-size: 17.0");
if(!(empty || item==null)){
setText(item.toString());
}
}
});

Resources