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.
Related
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;
}
I'm using netBeans and SceneBuilder to create a small window with a few text editor options. One of the buttons I've included in the screen is a colorPicker that I have modified according to the following style;
<ColorPicker fx:id="clrFill" layoutX="119.0" layoutY="18.0" prefHeight="30.0" prefWidth="30.0" style="-fx-color-label-visible: false; -fx-color-rect-height: 3; -fx-color-rect-width: 17;" styleClass="button" stylesheets="/css/colorPickerStyle.css" />
Here is the current stylesheet being used;
.color-picker .color-picker-label .picker-color
{
-fx-alignment : bottom-center;
}
colorPicker.getStyleClass().add("button");
.color-picker{
-fx-background-image: "/gui_resources/fill.png"
-fx-background-size: 20 20;
-fx-background-position: top center;
}
My objective is to have an image display above the modified colorpicker 'rectangle' that displays the current color. Initially, I tried to treat the colorPicker as a Button class, as I have changed the style to a "button", but I was unable to place an image using the setGraphic method. As you can see from the css file, I have also tried to implement a background image unsuccessfully.
Here is a copy of what my screen currently looks like. The colorPicker is located beside the ComboBox dropdown.
In case you were trying to change the ColorPicker style class inside the css file, that won't work, you can't place code there.
Actually, to use an image, you don't need to change its style class, you just need to use url(image.png) (image placed in the same folder as FXML), or with a relative path to the FXML file like url(../image.png), or using # in case of an absolute path.
This should work:
.color-picker {
-fx-background-image: url(fill.png);
-fx-background-size: 20 20;
-fx-background-position: top center;
-fx-background-repeat: no-repeat;
}
.color-picker .color-picker-label .picker-color {
-fx-alignment : bottom-center;
}
You can check the <uri> format for the image here.
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 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.
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; }