javafx: css 9-18-2013 - clarkson...
Post on 20-Sep-2018
248 Views
Preview:
TRANSCRIPT
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
.label {
-fx-font-size: 12px;
-fx-font-weight: bold;
}
applies to Label
property: fontsize
value: 12 pixels
// 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 {
-fx-font-size: 32px;
-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 {
-fx-fill: FIREBRICK;
-fx-font-weight: bold;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
Text scenetitle = new Text(“Welcome”);
scenetitle.setId(“welcome-text”);
final Text actiontarget = new Text();
actiontarget.setId(“actiontarget”);
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
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
top related