Top Banner
JavaFX: CSS 9-18-2013
20

JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

Sep 20, 2018

Download

Documents

vanquynh
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

JavaFX: CSS

9-18-2013

Page 3: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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

Page 4: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

// 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”);

Page 5: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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)

Page 6: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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

Page 7: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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 );

}

Page 8: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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”);

Page 9: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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);

}

Page 10: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

// 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”);

Page 12: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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.)

Page 13: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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.

Page 14: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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();

}

Page 15: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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

Page 16: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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

Page 17: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

suppose the user

clicks on the

triangle

the resulting event dispatch chain

are the gray nodes

Page 18: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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”);

}

});

Page 20: JavaFX: CSS 9-18-2013 - Clarkson Universitypeople.clarkson.edu/~jsearlem/cs242/fa13/lectures/11.css.pdf · JavaFX Cascading Style Sheets (CSS) Scene Graphs & Nodes Convenience Methods

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)