How to add the styles(JavaFX)?

Question

Using the Brand enum, I'd like add styles to the root container. I added an fx:id for the container and I wrote some code to remove the brand styles.

Can you please add the styles for the Brand in the switchBrand method? Please call the clearBrandStyles method first.

com/example/Controller.java

package com.example;

import com.example.model.Brand;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;

public class Controller {
    @FXML
    private VBox container;

    public void handlePlay(ActionEvent actionEvent) {
        System.out.println("[MUSIC PLAYING] - I shot the sheriff, but I didn't shoot the deputy");
    }

    public void switchBrand(Brand brand) {
        clearBrandStyles();// Help me clear the old, and add the proper styles
    }

    public void clearBrandStyles() {
        for (Brand brand : Brand.values()) {
            container.getStyleClass().remove(brand.toString().toLowerCase());
        }
    }

    public void handleBrandSwitch(ActionEvent actionEvent) {
        // Get a handle on the calling button
        Button btn = (Button) actionEvent.getSource();
        // Get access to the brand like Brand.APPLE by name
        Brand brand = Brand.valueOf(btn.getText().toUpperCase());
        switchBrand(brand);
    }
}

com/example/boombox.css

/* Brand settings */

.sony {
    -fx-background-color: black;
}

.jvc {
    -fx-background-color: red;
}

.apple {
    -fx-background-color: silver;
}

.coby {
    -fx-background-color: gray;
}

com/example/Main.java

package com.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("boombox.fxml"));
        primaryStage.setTitle("Boombox");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

com/example/boombox.fxml

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Text?>
<VBox fx:controller="com.example.Controller"
      xmlns:fx="http://javafx.com/fxml"
      stylesheets="@boombox.css"
      fx:id="container">

    <HBox>
      <Button onAction="#handleBrandSwitch">Sony</Button>
      <Button onAction="#handleBrandSwitch">Apple</Button>
      <Button onAction="#handleBrandSwitch">JVC</Button>
      <Button onAction="#handleBrandSwitch">Coby</Button>
    </HBox>

    <Text text="Boombox" />
    <Button onAction="#handlePlay" text="Play"/>
</VBox>

com/example/model/Brand.java

package com.example.model;

public enum Brand {
    JVC("JVC"),
    SONY("Sony"),
    APPLE("Apple"),
    COBY("Coby");

    private String mDisplayName;

    Brand(String displayName) {
        mDisplayName = displayName;
    }

    public String getDisplayName() {
        return mDisplayName;
    }
}

Answer 1 · 2015-09-25T00:26:03Z

September 25, 2015 12:26am

Ina;

Great question.

It looks like you have properly cleared the styles already in the switchBrand method. Therefore we are left with the task of adding the styles for the Brand portion of our task.

If we walk through the steps needed to add a style to our Brand, we probably need to start with getting the current style from our container object, correct? Something like container.getStyleClass() would be a start then. Now, we want to add a style to that, which we can with the add() method. To get the brand information we want, we should be adding brand.toString().toLowerCase().

That should get you headed in the right direction, just combine all those together and you should be good. Post back if you are still stuck though.

Happy coding,
Ken

Answer 2 · 2015-09-25T00:11:09Z

September 25, 2015 12:11am

Hi, you should add styles similarly as they are removed below in the 'clearBrandStyles' method:

container.getStyleClass().remove(brand.toString().toLowerCase());```

But, you should be adding instead of removing and 'Brand' has a 'displayName', instead of toString() method.
Hope it helps a bit, good luck!

Welcome to the Treehouse Community

Looking to learn something new?

Inge L

Inge L

How to add the styles(JavaFX)?

2 Answers

Ken Alger

Ken Alger

Ken Alger

Ken Alger

Inge L

Inge L

chase singhofen

chase singhofen

deckey

deckey