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)