JDD 2013 JavaFX

JavaFX 2! Make Java Sexy Again!張益裕甲骨文授權教育訓練中心聯成電腦講師

JTable

SwingAWT

Java2DJava3D

ActionListener

ItemListener

KeyListener

MouseListener

AdjustmentListener

WindowListener

TextListener

FocusListener

ComponentListener

JEditorPane

JOptionPane

JPanel

JRootPane

JScrollPane

JTextPane

JDialog

JFrame

JWindow

JToolbar

JSplitPane

JTabbedPane

JButton

JCheckBox

JColorChooser

JLabel

JList

JTree

JToolBar

JTextField

JToggleButton

JTextArea

JPasswordField

JMenuItem

JRadioButton

JMenu

JComboBox

JPopupMenu

JScrollBar

JProgressBar

BorderLayout

GridLayout

FlowLayout

GroutLayout

ScrollPaneLayout

CardLayout

Beautiful Smooth SimpleFast

Beautiful Smooth SimpleFast

Java Programming Language

JVM

Java SE

Card VM

Java Card

Java EE

Java ME VM

Java ME

JavaFX

•Java language features• FXML for defining user interfaces•New graphics pipeline for modern GPUs•Rich set of UI controls•Powerful Properties Model•Swing and AWT Interoperability

JavaFX Public APIs and Scene Graph

Quantum Toolkit

GlassWindowing

Toolkit

MediaEngine

WebEngine

Java 2D Open GL 3D

Prism

•Over 50+ components•CSS skinning and layout•Advanced UI controls

Designed by Jasper Potts http://www.jasperpotts.com/blog/

Animation

BelgiumAntwerpen

FXML

javafx.stage.Stage

javafx.scene.Scene

root parent leaf

public class HelloJavaFX extends Application {

@Override public void start(Stage stage) {

BorderPane root = new BorderPane(); Button btn = new Button("Hello JavaFX!"); root.setCenter(btn); Scene scene = new Scene(root, 300, 250); stage.setScene(scene); stage.show(); }

public static void main(String[] args) { launch(args); }}

javafx.application.Application

Place Button

Run...

Top level container

Root container

BorderPane FlowPane GridPane TilePane

StackPane AnchorPane HBox VBox

HBox

FlowPane

GridPane

VBox

StackPane

BorderPane

AnchorPane with HBox

+ =

•All new event structure and Handler•Working with convenience methods•Support Multi-Touch

Event.ANY

InputEvent.ANY

ActionEvent.ACTION

WindowEvent.ANY

KeyEvent.ANY

MouseEvent.ANY

...

KeyEvent.KEY_PRESSED

KeyEvent.KEY_RELEASED

KeyEvent.KEY_TYPED

MouseEvent.MOUSE_PRESSED

MouseEvent.MOUSE_RELEASED

...

WindowEvent.WINDOW_SHOWING

WindowEvent.WINDOW_SHOWN

...

Button btn = new Button("Hello JavaFX!");

btn.setOnAction(new EventHandler<ActionEvent>() {

@Override public void handle(ActionEvent event) { /* Do something */ }

});

Register Generic Event type

Generic Event type

listener?

Override

final Circle circle = new Circle(radius, Color.RED);

circle.setOnMouseEntered(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { ... }});

circle.setOnMouseExited(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { ... }});

circle.setOnMousePressed(new EventHandler<MouseEvent>() { public void handle(MouseEvent me) { ... }});

EventHandlerhandle

view.setOnScroll(new EventHandler<ScrollEvent>() {...});

view.setOnZoom(new EventHandler<ZoomEvent>() {...});

view.setOnRotate(new EventHandler<RotateEvent>() {...});

ImageView view = new ImageView(android_in_apple);

•JavaBean Component architecture•Expanded JavaBean properties•In conjunction with Binding

Label mile = new Label();

double kmValue = 32.5;double mileValue = kmValue * 0.621371192;String mileText = Double.toString(kmValue);

mile.setText(mileText);

KM to mile

Double to String

Set Label text

DoubleProperty kmPro = new SimpleDoubleProperty();

Label mile = new Label();

StringBinding mileBinding = kmPro.multiply(0.621371192).asString();

mile.textProperty().bind(mileBinding);

...

kmPro.set(32.5);

KM Property Object

StringBinding Object, hold KM to mile value

Bind mile value to Text Property

Change KM Property value

DoubleProperty kmPro = new SimpleDoubleProperty();Label mile = new Label();

StringBinding mileBinding = new StringBinding() { { super.bind(kmPro); }

@Override protected String computeValue() { return Double.toString(kmPro.get() * 0.621371192); }

};

mile.textProperty().bind(mileBinding);...kmPro.set(32.5);

Extends Binding Class

Binding Property

Override computeValue method

Produce value here

.root { -‐fx-‐background-‐image: url("background.jpg");}

.label { ... }

#welcome-‐text { ... }

#acJontarget { ... }

.buKon { ... }

.buKon:hover { ... }

Login.css

Scene scene = new Scene(grid, 300, 275);scene.getStylesheets().add("login/Login.css");

Text scenetitle = new Text("Welcome");scenetitle.setId("welcome-text");

Text actiontarget = new Text();actiontarget.setId("actiontarget");

.root { -‐fx-‐background-‐image: url("background.jpg");}.label { ... }#welcome-‐text { ... }#ac,ontarget { ... }.buKon { ... }.buKon:hover { ... }

Login.css

•XML-based language•Separate UI from your code•Support localize•Support any JVM language

FXML

BorderPane border = new BorderPane();

Label topPaneText = new Label("Label - TOP");border.setTop(topPaneText);

Button centerPaneButton = new Button("Button - CENTER");border.setCenter(centerPaneButton);

BorderPane

Label

Button

<BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center></BorderPane>

FXML

Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml")); Scene scene = new Scene(root);stage.setScene(scene);stage.show();

<BorderPane> <top> <Label text="Label - TOP"/> </top> <center> <Button text="Button - CENTER"/> </center></BorderPane>

Sample.fxml

<BorderPane fx:controller="SampleController" > <top> <Label text="Label - TOP" fx:id="label" /> </top> <center> <Button text="Button - CENTER" fx:id="button" onAction="#handleButtonAction"/> </center></BorderPane>

Sample.fxml

...public class SampleController implements Initializable { @FXML private Label label; @FXML private Button button; @FXML private void handleButtonAction(ActionEvent event) { button.setText("Button Pressed!"); label.setText("Button Pressed!"); } ...}

SampleController.java

•UI Layout Tool•FXML Visual Editor•Integrated Developer Workflow•Preview Your Work•CSS support

ListView

TableView

Label, TextField and TextArea

ImageView Button

.theme { master-‐color: grey; -‐fx-‐background-‐color: derive(master-‐color, 70%); -‐fx-‐font-‐size: 14px;}

.split-‐pane { -‐fx-‐padding: 0; -‐fx-‐border-‐width: 0; -‐fx-‐background-‐color: derive(master-‐color, 100%);}...

SuperGrey.css.theme { master-‐color: #0049a6; -‐fx-‐background-‐color: derive(master-‐color, 70%); -‐fx-‐font-‐size: 14px;}


SuperNavy.css.theme { master-‐color: #99cc00; -‐fx-‐background-‐color: derive(master-‐color, 70%); -‐fx-‐font-‐size: 14px;}


SuperGreen.css

•JavaFX❖http://www.oracle.com/technetwork/java/javafx/•NetBeans❖http://netbeans.org/

http://www.oracle.com/technetwork/java/javafx/

http://www.oracle.com/technetwork/java/javafx/

http://netbeans.org/

http://netbeans.org/

•Make Java Sexy Again!•JavaFX架構•Hello JavaFX! Part 1•Hello JavaFX! Part 2•Hello JavaFX! Part 3•...

http://www.codedata.com.tw

Thanks張益裕

甲骨文授權教育訓練中心聯成電腦

Education

JDD 2013 JavaFX