I looked for a solution on this particular issue & found a few ones on Silverlight & JavaScript, but not on JavaFX.
Now on the issue:
I am designing a GUI in JavaFX where I have added two buttons: ADD & REMOVE
I have styled the ADD button using CSS, but it has lost its hovering & onclick effect. I have attached a couple of images for better understanding of the issue
If you look at this photo here, you'll see that when the REMOVE button is clicked, it slightly changes its color to give the effect that it is being clicked currently. Also when the cursor hovers over it, it turns slightly brighter than it usually is.
The code for this button is given below
VBox rightBox = new VBox(remBttn);
rightBox.setPadding(new Insets(10));
rightBox.setAlignment(Pos.CENTER);
remBttn.setPadding(new Insets(100,0,100,0));
remBttn.setPrefWidth(100);
remBttn.setOnAction(
new EventHandler<ActionEvent>()
{
public void handle(ActionEvent ae)
{
myLabel.setText("You Clicked The REMOVE Button");
}
});
remBttn.setFont(Font.font(20));
However, if you look at this photo here, you'll notice that hovering and clicking have no effects on it. I don't know much about CSS, so I copied a snippet of code from a random Website to style my button. But I think that is where I messed it all up.
The code for that give below:
VBox leftBox = new VBox(addBttn);
leftBox.setPadding(new Insets(10));
leftBox.setAlignment(Pos.CENTER);
addBttn.setPadding(new Insets(100,0,100,0));
addBttn.setPrefWidth(100);
addBttn.setStyle("-fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%); -fx-background-radius: 30; -fx-background-insets: 0,1,1; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 ); -fx-focus-color: transparent; -fx-base: coral;");
So I want to know what methods or properties can be used to bring back the same effects without changing the style.
The moment you change the background of the button,It will lose its default hover and click effect,So I think the better way of doing it is to set the hover and click effect in css.
By the way instead of setting style again in code, just create a css file in your src folder then link it to your scene using this.
scene.getStylesheets().add(getClass().getResource("your_file_name.css").toExternalForm());
Then add an id to your add button using addBttn.setId("addBttn"); Then
refer to it in your_file_name.css like
#addBttn{
/*Your custom default button style*/
}
#addBttn:hover{
/*Your button style on hover*/
}
#addBttn:pressed{
/*Your button style on pressed*/
}
Hope this solves your problem.
Related
I need that when I press a button, the button color changes, Im making the interface in scene builder and style it with fx css. I tried:
.botones:hover {
-fx-background-color: red;
}
.botones:pressed {
-fx-background-color: blue;
}
.botones {
-fx-background-color: #262626;
}
The hover works fine, but when i press the button, it turns blue for a second and then changes to its original color and i want it to stay blue.
Maybe i could use a toggle button instead, but im using jfoenix buttons because they have some cool effects.
You're right that the ToggleButton in JFoenix is more of a switch:
However, you can use a lesser-known control in JFoenix called JFXToggleNode.
Just put a label inside of it. (Don't forget to include the import statements.)
<?import com.jfoenix.controls.JFXToggleNode?>
<?import javafx.scene.control.Label?>
...
<JFXToggleNode>
<Label text="Boton Azul" />
</JFXToggleNode>
and add this rule to your stylesheet:
.jfx-toggle-node {
/* This is the color once toggled on. */
-jfx-toggle-color: deepskyblue;
}
Note that SceneBuilder doesn't support non-standard controls very well, yet, so though you can't drag and drop it, you can add it manually to the FXML file just fine.
I have a table in a JavaFX application where I want to be able to change the color of the selected element with a color picker.
When I try the following:
menuBar.setStyle("-fx-background-color:" + settings.getRgbString(memberView.colorPicker.getValue()));
There is no way to add the style just to the selected item. I tried to use a pseudo class but I can't understand how to do it. How do I solve this?
Note: changing the background of buttons works fine with this method.
try to add a css file to the project and put
.table-row-cell:selected .table-cell {
-fx-background-color: #FF9034;
-fx-text-fill: #FFF;
}
What is normal background color and border color on toggle button? example:
i.toggle11.setOnAction(e->{
if(i.toggle11.isSelected()){
i.toggle11.setStyle("-fx-background-color:red");
i.toggle12.setStyle("-fx-background-color:white");
i.toggle13.setStyle("-fx-background-color:white");
}
else {
i.toggle11.setStyle("-fx-background-color:white");
}
});
I want to after this action to put other toggles 'normal color'(same when togglebutton was created)
To answer how to add/remove styles
The simplest approach if you color your ToggleButtons by adding a CSS styleclass, then when it is not needed anymore you remove them, therefore it will have the same style as before your formatting.
Example
Code to add
i.toggle11.setOnAction(e->{
if(i.toggle11.isSelected()){
i.toggle11.getStyleClass().add("red-button");
i.toggle12.getStyleClass().add("white-button");
i.toggle13.getStyleClass().add("white-button");
}
else{
i.toggle13.getStyleClass().add("white-button");
}
});
Then Code to remove
i.toggle11.getStyleClass().removeAll("red-button", "white-button");
CSS
.red-button {
-fx-background-color: red;
}
.white-button {
-fx-background-color: white;
}
Just make sure that you have added the stylesheet which contains the CSS styles like:
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
But
I don't know what you want to achieve, but if you want to just simply color your ToggleButton when it is selected, you can also overwrite .toggle-button:selected in your stylesheet and no other styling needed:
.toggle-button:selected {
-fx-background-color: red;
}
It is always the simplest way to overwrite existing CSS classes and pseudoclasses. This is a good starting point to learn working with ToggleButtons and to style them: Using JavaFX UI Controls.
You can for example check the available style classes for .toggle-button here and also you can check the CSS reference guide.
I've got a Button in my FXML file and i give a style to it by below CSS
.button {
-fx-background-color: linear-gradient(#ff5400, #be1d00);
-fx-background-radius: 30;
-fx-background-insets: 0;
-fx-text-fill: white;
}
as you can see the button has a new awesome style, but whenever i click on it, it remains as like as before and you can't understand is it clicked or not...
As I searched, I found one solution in this link: Pressed CSS, but if you notice it is The CSS that is used by Web Browsers and JavaFX does not support it.
so what is the solution? I want my button changes its appearance when the users hit or click it.
You need to add the psuedoclass state pressed to you css and add new css to it, which will differentiate your current button css with that when pressed :
.button:pressed {
// Your new css
}
For changing the style while hovering the button use :
.button:hover {
// Your new css
}
For better understanding of what style you can add for styling the button, you can go through How to make a button appear to have been clicked or selected?
for arrayLists on javaFX, try this on the CSS to change colors on mouse click:
.list-cell:selected { -fx-background-color: yellow; }
How does one change the color of a JavaFX 2 MenuBar in JavaFX Scene Builder? I want to make it the same color as the menu bar in the Scene Builder. CSS´s color and background-color doesn't seem to help.
I'd also be happy to know the color of the Scene Builder menu bar (in hexadecimal or decimal RGB).
You can use the fx-background-color css property to set the menu bar background color.
Regarding the Scene Builder menu bar background color, you can use:
-fx-background-color:
derive(#e0e0e0, -0.291),
linear-gradient(
to bottom,
derive(#e0e0e0, 0.353) 0%,
derive(#e0e0e0, -0.058) 100%
);
-fx-background-insets: 0, 0 0 1 0;
I extracted these css "coordinates" from Scene Builder jar, located at SceneBuilderInstalationRoot/lib/SceneBuilder.jar. In the jar, its on the package com.oracle.javafx.authoring.css_stylesheets, file SceneBuilderTheme.css. This css file uses a named constant -fx-color which I inferred to have value #e0e0e0.
You can find help about css directly in scene builder : on the menu View > Show CSS analyser
here you will can see that the menu bar use the class .menu-bar and have this -fx-background-color set with some color. So now you know that you have to put on the style of your MenuBar
-fx-background-color : thecoloryouwant
And that it.