1

Note: Javafx newbie

Problem:

Many websites and tutorial show one how to set the style of a button using classes or ID's.

After setting the style from an Id, I need to restore the style to the previous state or simply the .button class.

Some Styles:

I have the following css (extract) used for all my buttons:

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

and an Id for a button that is selected:

#button-selected {
    -fx-background-color: linear-gradient(#3f6770, #82c0ce);
}

The code (extract):

//load stylesheet from resources into scene    someScene.getStylesheets().add(Main.class.getResource("/gui.css").toExternalForm());
//...
Button b = new Button("some button");
//...
b.getStyleClass().add("button");       <----- adds .button class style to button

some trigger later on calls: 

(activeButton, bSelectedButton) -> {

    //...
    if (!activeButton.equals(bSelectedButton)){

        //restore activeButton to ".button" class

        bSelectedButton.setId("button-selected");
    }
    //...

}

As a short summary above: (to put question into a practical application)

A trigger occurs, e.g. mouse click event, calling the lambda.

This checks if the buttons are the "same buttons", if not then:

  • clear the previous button's formatting activeButton,
  • and set the new button's bSelectedButton style with the #button-selected id.

Please note:

I have tried:

.button:pressed {
    -fx-background-color: linear-gradient(#3f6770, #82c0ce);
}

but it does not change the colours as expected after the click (on the button)

Question:

How do I "unsetId" / "removeId" to restore the previous style of the button,

or simply how do I set the active style on the button from a loaded style sheet?

CybeX
  • 2,060
  • 3
  • 48
  • 115

3 Answers3

3

Use a toggle button rather than a standard button

You seem to be re-inventing the wheel. A selectable button is a ToggleButton, you should probably be using that. A toggle button has a selected psuedo-state that is used to configure the styling when the button is selected.

Aside comment on -fx-background-color usage

As an aside it is usually not best to directly set -fx-background-color for controls, but instead to set one of the higher level looked up colors, such as -fx-base. See modena.css for the definitions of these looked up colors and examples of how to use them (as well as the pseudo-state selectors).

Aside comment on -fx-effect usage

Setting a drop shadow effect on things can often lead to blurred text. For this reasons (and others), the standard way to simulate a shadow 3D effect for JavaFX controls is layered backgrounds, which is a bit complicated, but documented somewhat sparsely in the JavaFX CSS reference and abundant samples are in the modena.css file.

Advice on css id usage

The css id of an element should not change. It is used to identify the element, and should be unique in a given document. So you should not set and unset the id to something like button-selected. Instead you should use classes or pseudo-classes for maintaining keys to dynamic styling information.

You could effectively "unset" a CSS id by setting it to null, but I wouldn't advise that.

Related toggle button styling

Related answer mentions styling for ToggleButtons (but slightly different from the kind of styling you are asking for):

Style by custom psuedo-class

If you really need to create your own psuedo-class, then see:

Style by style class setting

If you don't need or want to use pseudo-classes, then you can set different style classes on your control and use "and" style selectors:

styleclass.anotherstyleclass { 
   \\ your style attributes 
}

For instance:

.button.selected { 
   -fx-base: palegreen; 
}

With this method you would need to add and remove the additional style classes from the node's style class list as needed.

Generic selectable node styling

If you want a very generic selectable node style which is not tied to a button type, then see the solution here:

Community
  • 1
  • 1
jewelsea
  • 150,031
  • 14
  • 366
  • 406
  • See my solution below, it does break a few "rules" but it works. I am required to use a Button, cannot use toggle button. – CybeX Apr 25 '17 at 07:51
  • 1
    "required to use a Button" => that's just plain stupid IMO. Why use a hammer to drive a screw? If the purpose is a learning exercise, one should be free to learn better ways of doing things. Artificial constraints are an annoyance of mine. Regarding breaking a few rules: they're just guidelines mainly, they are made to be broken sometimes :-) – jewelsea Apr 25 '17 at 12:06
1

In order to switch style by css file, you can use these commands:

scene.getStylesheets().clear();
setUserAgentStylesheet(null);
scene.getStylesheets().add(getClass().getResource("theme1.css").toExternalForm());

For your purpose, restoring previous style, I think you cannot do directly, but you can do as follows: 1) Use variable to store previousStyle.

2) When you switch to new style, you have to set value previousStyle is current style. So, if you want to restore to previous style, you just call the previousStyle.

user3697373
  • 83
  • 2
  • 10
0

My solution does obey all css rules.

According to w3schools :

one should use an the id selector (denoted by #your_id_name) when referring to a specific/unique object.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

NOTE: This rule is not adhered to in my solution

Solution:

CSS contains:

#button-default {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

#button-default:hover {
    -fx-background-color: linear-gradient(#82c0ce, #3f6770);
}

#button-selected {
    -fx-background-color: linear-gradient(#3f6770, #82c0ce);
}

Code:

When creating my buttons, I set the id there:

Button b = new Button();
//....
b.setId("button-default");

and some trigger event:

//....
(activeButton, newSelectedButton) -> {
    if (!activeButton.equals(newSelectedButton)){
        activeButton.setId("button-default");
        newSelectedButton.setId("button-selected");
    }
} 
//....

A short summary:

The button is created with a specific id from the css file.

When some event gets triggered requiring the style change:

  • The button to be reset to the default style with an id referred to as button-default
  • Followed by setting the new buttons style with style referred to as button-selected

Note again: Not recommended since it does not adhere to standard practices, but I posted it here for completeness sake.

CybeX
  • 2,060
  • 3
  • 48
  • 115