JavaFX: CSS
9-18-2013
JavaFX
Cascading Style Sheets (CSS)
Scene Graphs & Nodes
Convenience Methods for Event Handling
UI Controls
HW#2 posted; due 9/23/2013
Reading Assignment:
Fancy Forms with JavaFX CSS
Styling an FX Button with CSS
Working with JavaFX Scene Graphs
Using JavaFX UI Controls
Cascading style sheets (CSS) separate content
from presentation, so the presentation style can
be changed easily without modifying the code
A style sheet is a set of rules that control how to
display elements
each rule has a selector that matches an
element and a set of properties with values
that define the settings for the selected
element; for example property: fontsize
.label {
-fx-font-size: 12px; value: 12 pixels
applies to Label
-fx-font-weight: bold;
}
// without .css
Text scenetitle = new Text(“Welcome”);
scenetitle.setFont(Font.font(“Tahoma”,
FontWeight.NORMAL, 20));
Label userName = new Label(“User Name:”);
TextField userTextfield = new TextField();
Label pw = new Label(“Password:”);
PasswordField pwBox = new PasswordField();
Button btn = new Button(“Sign in”);
final Text actiontarget = new Text();
// event handler performed
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText(“Sign in button pressed”);
Create the CSS file, e.g. Login.css, in the same
directory as the source file
Initialize the stylesheets variable, e.g.
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
scene.getStylesheets().add
(Login.class.getResource("Login.css").toExternalForm());
primaryStage.show();
JavaFX will look in the src/login directory for the style
sheet (note that the class name in this example is
Login)
Add the following to the .css file:
.root { -fx-background-image: url("background.jpg"); }
This applies the background image to the root node of
the Scene instance
The name of the property is –fx-background-image
The value for this property is url(“background.jpg”)
The image url is relative to the directory containing the
.css file
cf. JavaFX CSS Reference Guide
styles are first applied to the parent then the
children
each node in the scene graph has a styleClass
variable and an id variable
e.g. style a label
.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 );
}
There were 2 text variables in the example:
#welcome-text { Text scenetitle = new Text(“Welcome”);
-fx-font-size: 32px; scenetitle.setId(“welcome-text”);
-fx-font-family: "Arial Black";
-fx-fill: #818181;
-fx-effect: innershadow(three-pass-box , rgba(0,0,0,0.7),6,0.0,0,2);
}
#actiontarget { final Text actiontarget = new Text();
-fx-fill: FIREBRICK; actiontarget.setId(“actiontarget”);
-fx-font-weight: bold;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
cf. Styling an FX Button with CSS
.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);
}
.button:hover {
-fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
// with .css
Text scenetitle = new Text(“Welcome”);
scenetitle.setId(“welcome-text”);
Label userName = new Label(“User Name:”);
TextField userTextfield = new TextField();
Label pw = new Label(“Password:”);
PasswordField pwBox = new PasswordField();
Button btn = new Button(“Sign in”);
final Text actiontarget = new Text();
actiontarget.setId(“actiontarget”);
// event handler performs
actiontarget.setText(“Sign in button pressed”);
cf. Working with JavaFX Scene Graphs
javafx.scene: Group, Region, Node, Scene
javafx.scene.shape: Circle, Rectangle, Line…
javafx.scene.paint: Color
javafx.scene.Node
leaf nodes: Rectangle, Text, ImageView, etc.
branch nodes (of type Parent): Group,Region,Control
javafx.scene.Group (extends Parent)
node that contains a list of children that are rendered
in order
javafx.scene.layout.Region (extends Parent)
area of the screen that can contain other nodes and
styled with CSS
javafx.scene.Control (extends Parent)
user interface controls (e.g. MenuBar, ScrollPane,
ChoiceBox, Slider, etc.)
The javafx.scene package includes (plus others)
Node: abstract base class for all scene graph nodes.
Parent: abstract base class for all branch nodes.
(This class directly extends Node).
Scene: base container class for all content in the
scene graph.
These base classes define important functionality
including paint order, visibility, composition of
transformations, support for CSS styling, and so
on.
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 500, 500, Color.BLACK);
// upper right (25,25); lower left (250,250)
Rectangle r = new Rectangle(25,25,250,250);
r.setFill(Color.BLUE);
root.getChildren().add(r);
stage.setTitle("JavaFX Scene Graph Demo");
stage.setScene(scene);
stage.show();
}
Property Description
Event type Type of event that occurred
Source Origin of the event.
Target Node on which the action occurred
Event type: InputEvent (KeyEvent,
MouseEvent,…), ActionEvent, WindowEvent
Target: an instance of any class that
implements the EventTarget interface
Window, Scene and Node classes implement the
EventTarget interface and all subclasses of them
inherit the implementation
Key events: target is the node that has
focus
Mouse events: node at the location of the
cursor
Continuous gesture events: node at the
center point of all touches at the beginning
of the gesture
Swipe events: node at the center of the
entire path of all the fingers
Touch events: node at the location pressed
suppose the user
clicks on the
triangle
the resulting event dispatch chain
are the gray nodes
easy way to create and register event handlers to
respond to mouse events, keyboard events,
action events, drag-and-drop events, window
events, etc.
general form:
setOnEvent-type(EventHandler<? super event-class> value)
// example: handle a button event
btn.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent e) {
actiontarget.setText(“Sign in button pressed”);
}
});
cf. Using JavaFX UI Controls
javaFX.scene.control package
Design a GUI that displays the following:
top face of a six-sided Die
Button that, when clicked, rolls the Die
Then add the ability for the user to input
the number of sides desired (could use
JOptionPane for this)
