In this post, I am going to show/teach you how to turn your boring JavaFX GUI(s) into fancy and entertaining Graphical User interfaces using JavaFX Cascading Style Sheet, or CSS. In my previous posts, I mentioned that I will be working on an application named Car Rental Enterprise Application from which the tutorial will be taken from. I have added the EJB Module although it will be updated as time goes on, also setup the Wildfly Application server and Datasource from PostgreSQL database.

Cascading Style Sheets, or CSS, is a styling language for describing and setting the layout
for markup languages. Most commonly, it is used to set the styling and format of HTML and
XHTML in websites, but it can be used with any type of XML document, including FXML which belongs to JavaFX.

It is important to remember that CSS cannot change the content or structure of your FXML
file, it can only affect the appearance – CSS is not a scripting language.

There are two ways to add Stylesheet to your work; either through the Screen builder or through the Project Main class that extends application if any.

  • To use the main class:
Scene scene = new Scene(root, 700, 650); // !! Existing code !!
scene.getStylesheets().add(“css/rentalcss.css”); // Add stylesheet
  • To use ScreenBulider, Select the root pane, go to properties tab, add stylesheet. Follow the Image below:

JavaFX CSS

Styling FXML vs. Styling HTML
For those who are familiar with CSS for styling websites, to highlight the differences between using CSS with JavaFX and HTML. There are some notable distinctions.

  • All declaration begin with –fx- when styling FXML files
  • There are no selectors for specific tags, like div for <div> when styling HTML
  • You should use the class equivalent, like .button for <Button>
  • Most objects inherit the Node tag, which has a specific set of pseudo-classes
  • Not all pseudo-classes are supported
  • :active is replaced by :pressed
  • :focus is replaced by :focused
  • The FXML CSS parser will return an Exception when a declaration is not valid for that
    object
  • This can be useful to find where styling is not working as it should
  • The color declaration for changing the font colour does not work consistently
  • You should use -fx-text-fill instead
  • Neither –fx-background or –fx-border can be used to chain commands, so the subdeclarations should be called, e.g.
  • –fx-background-color, -fx-background-imag
  • –fx-border-color, -fx-border-width
  • The width and margin declarations are not valid
  • You can set the preferred width using –fx-pref-width
  • The FXML CSS parser does not support comma separated strings of font families
/* 
    Created on : Oct 31, 2016, 8:05:26 PM
    Author     : STEINACOZ-PC
*/

.root{
    -fx-background-image: url("car16.jpg");
    -fx-background-color: transparent; 
    -fx-background-size: 100% 100%;
}

.button{
  -fx-font-size: 10pt; 
  -fx-text-fill: red;
  -fx-padding: 5px; 
  -fx-background-color: linear-gradient(transparent, royalblue);
  -fx-background-radius: 15px; 
  -fx-border-radius: 15px; 
  -fx-border-color: gold; 
  -fx-border-width: 0.5px;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

.button:hover{
    -fx-background-color: transparent;
    -fx-text-fill: tomato;
}

.button:focused{
    -fx-background-color: greenyellow;
}

.label{
  -fx-font-size: 12px;
  -fx-font-weight: bold;
  -fx-text-fill: #333333;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

.label#admin-label{
    -fx-border-color: gold;
    -fx-border-radius: 15px;
    -fx-background-radius: 15px;
    -fx-text-fill: black;
    -fx-font-size: 15pt; 
    -fx-font-weight: bold;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

.text-field{
-fx-font-size: 13px;
-fx-text-fill: #000000;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );   
}

.text-field:hover{
    -fx-background-color: transparent;
}

.check-box{
    -fx-background-color: transparent;
    -fx-font-size: 13px;
-fx-text-fill: #000000;
}

.check-box:checked{
    -fx-background-color: linear-gradient(red, royalblue);
}

.check-box:hover{
    -fx-background-color: tomato;
}

.combo-box{
       -fx-background-color: linear-gradient(red, transparent);
       -fx-font-size: 13px;
      -fx-text-fill: #000000; 
}

.combo-box:expanded{
       -fx-background-color: linear-gradient(royalblue, thistle);
       -fx-font-size: 13px;
       -fx-text-fill: #000000; 
}

.table-view{
  -fx-background-color: transparent;  
  -fx-base: transparent; /* base colour */
  -fx-control-inner-background: transparent; /* background colour */
  -fx-table-cell-border-color: transparent; /* border colour */
  -fx-table-header-border-color: transparent; /* header border colour */
}

.table-view:row-selection, /* set selection properties */
.table-view:col-selection {
-fx-background-color: transparent; /* make transparent */
-fx-text-fill: #444349; /* change selection colour */
} 

.table-view .column-header-background {
-fx-background-color: transparent; /* make header transparent */
} 

.table-view .column-header, /* remove borders for table contents */
.table-view .filler {
-fx-border-color: transparent;
-fx-background-color: linear-gradient(transparent, royalblue);
}

.table-view .column-header .label { /* set properties of header label */
-fx-text-fill: #f2f2f2;
-fx-font-size: 10pt; /* increase font size (from 12pt) */
}

.
menu-bar, /* menu bar and menu items */
.context-menu {
-fx-background-color: #f2f2f280; /* set to be 50% transparent (rrggbbaa) */
} .
context-menu .label { /* set text colour for menu labels */
-fx-text-fill: #444349;
}

 

Selectors
There are two main types of identifiers when using CSS: classes and ids. The former is
used when you want to give a series of objects the same properties, such as giving all
buttons the same colouring style, or setting the font for a particular type of label. The ID is used to define the properties for a single object where you want to identify that specific
item in your FXML document.
The format for accessing classes in CSS is to precede its name with a full-stop “.”, e.g.
.button will be used to set the properties for all items with the class “button”. Similarly,
the properties of individual items can be changed using the “#” symbol, appending it to
the ID, e.g. #admin-label will allow you to change the properties of an object with id “admin-label”.
Declarations
Aside from selectors, declarations are needed to actually set the properties of your style.
These describe the various properties, from fonts and colours to borders and padding. In JavaFX, all property declarations begin with “-fx-”. These are added to the selector
blocks and will set the properties of the elements that match up to this.
Declarations are made up of two parts: the property name and its value, separated by a
colon:

-fx-border-color: transparent;

Each separate declaration must end with a semi-colon ‘;’. If the same declaration is
called multiple times in the same selector block, the last call is the one that is used.
Property values typically come in 3 types: the numeric value, e.g. for setting the size of
something; text value, e.g. font types or urls; and colours. Numeric value properties can
often have the units specified, such as when setting the size of a border you can specify
centimetres (cm), pixels (px), or points (pt). Note when setting font-size, this is normally
in pt, e.g. 11pt.
String values vary more on the property, for example, you can specify a border type as
‘solid’ or ‘dashed’, or the font-family, ‘Arial’ or ‘sans-serif’.

Colour types are slightly different in that you can set the using a named colour (e.g. red),
using hexadecimal values (#F0AAAA), or even by specifying the red-green-blue values
(rgb(240, 170, 170)). A colour picker tool for getting the rgb.

This is the Admin Dashboard of Car Rental Enterprise Application skinned with JavaFX CSS:

css1

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here