adding custom css to button in JavaFX - java

I am trying to add some custom css to a button of mine, the css file is in the same folder as my testButton.java. this is my main/only class:
import com.jfoenix.controls.JFXButton;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;
import javafx.stage.Window;
public class testButton extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Vulpix Skyen");
GridPane gridPane = createRegistrationFormPane();
addUIControls(gridPane);
Scene scene = new Scene(gridPane, 800, 500);
scene.getStylesheets().clear();
scene.getStylesheets().add(getClass().getResource("test.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
private GridPane createRegistrationFormPane() {
GridPane gridPane = new GridPane();
return gridPane;
}
private void addUIControls(GridPane gridPane) {
JFXButton jfoenixButton = new JFXButton("JFoenix Button");
JFXButton button = new JFXButton("Raised Button".toUpperCase());
button.getStyleClass().add("button-raised");
jfoenixButton.getStyleClass().add("button-raised");
gridPane.add(jfoenixButton, 0, 0);
gridPane.add(button, 1, 0);
}
public static void main(String[] args) {
launch(args);
}
}
and here is the css file:
.button-raised {
-fx-padding: 0.7em 0.57em;
-fx-font-size: 140px;
-jfx-button-type: raised;
-fx-background-color: rgb(77, 102, 204);
-fx-pref-width: 200;
-fx-text-fill: ORANGE;
}
And no matter what I change, my button stays the same default style. nothing in particular i am trying to add with the css, but no idea why its not changing at all.

You are not adding the styled button to the gridPane. The only button added to the pane is jfoenixButton which does not have the button-raised class.
Either add the class to that button too:
jfoenixButton.getStyleClass().add("button-raised");
Or add the styled button to your gridPane:
gridPane.add(button, 1, 0);
One of the options should solve your problem.

You should import your CSS in your GridPane (with Scene Builder) to allow you utilize jfoenixButton.getStyleClass().add("button-raised");

Related

Bind TextArea's font size to current Scene's width using JavaFX

I want a TextArea's font-size to increase or decrease depending on the width property of the Scene it's in. But I don't want the font-size to grow beyond 16px or shrink beyond 10px.
I found this older post that has the code for making TextArea's font-size grow and shrink from being binded to the Scene's width property but I'm not sure how to add the conditional Bindings for the functionality I want.
This is the code from that post which suits my needs:
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class FontBind extends Application {
private DoubleProperty fontSize = new SimpleDoubleProperty(10);
private IntegerProperty blues = new SimpleIntegerProperty(50);
#Override
public void start(Stage primaryStage) {
Button btn = new Button("click me, I change color");
btn.setOnAction((evt)->{blues.set(blues.get()+20);});//max?
Label lbl = new Label("I'm a label");
TextArea ta = new TextArea("Lots of text can be typed\nand even number 1234567890");
HBox hbox = new HBox(new Label("I never change"));
VBox child = new VBox(btn, lbl, ta);
VBox root = new VBox(child, hbox);
Scene scene = new Scene(root, 300, 250);
fontSize.bind(scene.widthProperty().add(scene.heightProperty()).divide(50));
child.styleProperty().bind(Bindings.concat("-fx-font-size: ", fontSize.asString(), ";"
,"-fx-base: rgb(100,100,",blues.asString(),");"));
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Any help would be very much appreciated. I really want to learn more about using Bindings but I'm having trouble understanding how to implement the Bindings methods

Set up size of button (javafx) using css

I create a button and I want to set up its width and height through css. I tried this but it didn't work.
Other properties( such as font-size and text fill) are fine and work correctly. But the width of Button seems to be fixed and doesn't change.
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
VBox root = new VBox();
Button button = new Button("Button");
root.getChildren().add(button);
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("Style.css").toExternalForm());
button.setId("button");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
And in "Style.css":
#button{
-fx-width: 300;
-fx-font-size:20;
-fx-text-fill: yellow;
}

Background not showing javaFX

I am trying to create a start screen in javaFX and add a background to it to go behind the button and the text. It does not seem to work for me however, as the background doe not appear for my app. Would like to know what is wrong. Here is my code:
package calendar;
import java.io.IOException;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Calendar extends Application {
#Override
public void start(Stage primaryStage) throws IOException {
primaryStage.setTitle("JavaFX Welcome");
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Text scenetitle = new Text("Get Started");
scenetitle.setFont(Font.font("Bookman", FontWeight.BOLD, 30));
grid.add(scenetitle, 0, 0, 2, 1);
Button start = new Button("Start");
HBox hbStart = new HBox(10);
hbStart.setAlignment(Pos.CENTER);
hbStart.getChildren().add(start);
grid.add(hbStart, 1, 10);
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
start.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent e) {
}
});
Scene scene = new Scene(grid, 800, 600);
primaryStage.setScene(scene);
scene.getStylesheets().add
(Calendar.class.getResource("background.css").toExternalForm());
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
The code for the css file is as follows:
.root { -fx-background-image: url("background.jpeg"); }
Any help would be appreciated. I am fairly certain that this is not a problem with me misplacing or misnaming the file.

HBox not showing up

So, I can't seem to make the HBox show up in my application. The Button shows up, but the HBox does not. Can someone please let me know what I'm doing wrong?
package cyanlauncher;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
public class Main extends Application {
private int numApps = 0;
private float btnSize = 48;
private float btnSpacing = 12;
#Override
public void start(Stage primaryStage) {
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.setTitle("CyanLauncher");
Button quitBtn = new Button();
Pane root = new Pane();
root.getChildren().add(addHBox());
quitBtn.setGraphic(new ImageView(new Image(getClass().getResourceAsStream("./../data/exit.png"))));
quitBtn.setLayoutX(10 + ((btnSize + btnSpacing) * numApps));
quitBtn.setLayoutY(7);
quitBtn.setPadding(new Insets(0,0,0,0));
quitBtn.setPrefSize(btnSize, btnSize);
quitBtn.setOnAction(new EventHandler<ActionEvent>(){
#Override
public void handle(ActionEvent event){
System.exit(0);
}
});
root.getChildren().add(quitBtn);
Scene scene = new Scene(root,64,64);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
scene.setFill(null);
primaryStage.setScene(scene);
primaryStage.show();
}
public HBox addHBox() {
HBox hbox = new HBox();
hbox.setPrefSize(64, 64);
hbox.setLayoutX(10);
hbox.setLayoutY(7);
return hbox;
}
public static void main(String[] args) {
launch(args);
}
}
And here is my CSS:
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
.root {
-fx-background-color: rgba(0,255,0,1);
}
.button {
-fx-background-color: rgba(0,0,255,1);
}
.hbox {
-fx-background-color: rgba(255,0,0,1);
}
HBox has no style class by default (see docs). So you need to do hbox.getStyleClass().add("hbox") in your (really badly named) addHBox() method.

How to make a Button on a JavaFX's browser?

I'm trying to make a "launcher" with javafx.
This is my code :
I'm not shure you have to read all of this code, this code is here.
I'm trying to put a javaFX "play" button (i know how to make a button and how to set up an onclick event but i don't know where to add it :/)
Have you got an idea ? Thx.
package fr.whiteplay.main.launcher;
public class Launcher{
private static WebViewSample launcher;
private static String[] a;
public static void main(String[] args){
launcher = new WebViewSample();
a = args;
}
public static void start(){
launcher.go(a);
}
}
package fr.whiteplay.main.launcher;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
public class WebViewSample extends Application{
private Browser browser;
private Scene scene;
public void start(Stage stage){
// create the scene
stage.setTitle("WhitePlay");
browser = new Browser();
scene = new Scene(browser, 992, 620, Color.web("#000000"));
stage.setScene(scene);
stage.show();
}
public static void go(String[] args){
launch(args);
}
}
package fr.whiteplay.main.launcher;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
class Browser extends Region{
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser(){
getStyleClass().add("browser");
webEngine.load("http://www.whiteplay.fr/launcher/index.html");
getChildren().add(browser);
}
private Node createSpacer(){
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
return spacer;
}
protected void layoutChildren(){
layoutInArea(browser, 0, 0, getWidth(), getHeight(), 0, HPos.CENTER, VPos.CENTER);
}
}
Instead of the browser itself, the scene root must be a structured panel, which contains the browser, the button, and whatever else.
The simplest example is to replace your WebViewSample.start() method with the following:
public void start(Stage stage){
// create the scene
stage.setTitle("WhitePlay");
browser = new Browser();
BorderPane root = new BorderPane();
root.setCenter(browser);
Button button = new Button("Play");
root.setBottom(button);
button.setOnAction(a -> System.out.println("Play"));
scene = new Scene(root, 992, 620, Color.web("#000000"));
stage.setScene(scene);
stage.show();
}
Check this page for further reference on various layouts options, and how to work with them.

Categories

Resources