Use CSS in Java Applications

JetStream picture JetStream · Feb 12, 2016 · Viewed 39.4k times · Source

I am working with Java for quite some time now and now I wanted to make a new Application and I was wondering, if it would be possible to make Java look more modern with new buttons and things like this.

So I started searching for solutions to apply CSS (used in web-programming) to Swing components but didn't find a real solution.

I dont want to use a lot of not build-in options, so using Frameworks and Libraries should be my last option.

My question is: Is there a way to apply CSS to my Java UI? And if it's not possible: is there another way of making the whole GUI look different by adding some kind of style-sheet to it?

Answer

W.Sar picture W.Sar · Feb 12, 2016

You should look up javafx. You can attach a css file to a GUI. it is fairly easy to use. I can give you some example code if you want.

These are some good tutorials on how to use it: https://www.youtube.com/watch?v=FLkOX4Eez6o

I use eclipse to create a css file right click the project -> select new -> other -> CSS file

import javafx.application.*;
import java.text.*;
import java.util.*;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.input.*;
import javafx.stage.*;
import javafx.geometry.*;

 public class Display extends Application{

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

@Override
public void start(Stage stage) throws Exception{


    HBox root = new HBox(); 

    Button button = new Button("button");
    Label  label = new Label("Label");

    root.getChildren().addAll(button, label);

    Scene scene = new Scene(root, 700,300);
    scene.getStylesheets().add("Style.css");
    stage.setScene(scene);

    stage.setTitle("Title");

    stage.show();
  }
}

<---------------------------------CSS File------------------------------>

 .root{
     -fx-background-color: linear-gradient(#383838, #838383);
     -fx-font-size: 11pt;
 }

 .label{
     -fx-text-fill: #e8e8e8;
  }

 .button{
-fx-background-color: linear-gradient(#dc9556, #ab4642);
-fx-background-radius: 100;
 }

 .text-area{
     -fx-background-color: white;
     -fx-background-radius: 0;
  }