何が変わった JavaFX 2.0

何が変わった

Agenda

JavaFX 1.x JavaFX 2.0

Position の変化

How to Write

Conclusion

Position の変化

JavaFX

Java SE Java ME

Position の変化

JavaFX 1.xJavaFX Script

Position の変化

JavaFX 2.0Java

JDK/JRE

Java

Non-Java

AWT Swing

SwingX

JAI/ImageIO

Java 3D

JOGL

Java 2D

SWT

JMF

JavaFX

JDK/JRE

Java

Non-Java

AWT Swing

SwingX

JAI/ImageIO

Java 3D

JOGL

Java 2D

SWT

JMFJavaFX2.0

JDK/JRE

Java

Non-Java

AWT Swing

SwingX

JAI/ImageIO

Java 3D

JOGL

Java 2D

SWT

JMF

JavaFX

2.0

3.0JavaSE8

JavaCard CLDC SE

Java ME Java SE

CDC SE Embedded

JavaCard CLDC SE

Java ME Java SE

CDCSE Embedded

JavaFX

インスタンシエーション

追加された機能

削除された機能

何が変わった

Scene Graph

Stage

StageScene

Scene

VBox

VBox

HBox

HBox

TableView

TableView

Label

TextBox

Button

Scene Graph の構築public class Hello extends Application { @Override public void start(Stage stage) { // コンテナ Group container = new Group(); // シーングラフのルート要素を生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene);

// ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.setVisible(true); } public static void main(String[] args) { Application.launch(args); }}

public class Hello extends Application { @Override public void start(Stage stage) { // コンテナ Group container = new Group(); // シーングラフのルート要素を生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene);

// ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.setVisible(true); } public static void main(String[] args) { Application.launch(args); }}

public class Hello extends Application { @Override public void start(Stage stage) { // コンテナ Group container = new Group(); // シーングラフのルート要素を生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene);

// ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.setVisible(true); } public static void main(String[] args) { Application.launch(args); }}

public class Hello extends Application { @Override public void start(Stage stage) { // コンテナ Group container = new Group(); // シーングラフのルート要素を生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene);

// ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.show(); } public static void main(String[] args) { Application.launch(args); }}

SceneGraph

Java

public void start(Stage stage) { stage.setTitle("Custom Browser"); VBox vbox = new VBox(10); vbox.setLayoutY(10); Scene scene = new Scene(vbox, 800, 600); HBox hbox = new HBox(10); hbox.setAlignment(Pos.CENTER); TextField field = new TextField(); field.setPrefWidth(400); hbox.getChildren().add(field); Button button = new Button("Load"); hbox.getChildren().add(button); vbox.getChildren().add(hbox); WebView view = new WebView(); vbox.getChildren().add(view); stage.setScene(scene); stage.show(); }

Java

+ F

XM

L<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="contents.browser2" spacing="10" layoutY="10"> <children> <HBox spacing="10" style="-fx-alignment: center"> <children> <TextField fx:id="field" prefWidth="200" onAction="#handleAction" /> <Button text="Load" onAction="#handleAction" /> </children> </HBox> <WebView fx:id="view" /> </children></VBox>

public class browser2 { @FXML private TextField field; @FXML private WebView view; private WebEngine engine;

@FXML private void handleAction(ActionEvent event) { String url = field.getText(); engine.load(url); }}

WebView/WebEngine

Preloader

Production Suite

REST/JSON Perser

EffectEffect

AppDesign

WebView/WebEngine

WebView/WebEngine

Animation

自動補完

Animation

Animation

自動補完

Animation

自動補完

Effect

Node image = ...;GaussianBlur blur = new GaussianBlur();blur.setRadius(10.0);image.setEffect(blur);

Node image = ...;DropShadow shdw= new DropShadow();shdw.setOffsetX(5); shdw.setOffsetY(5);image.setEffect(shdw);

Node image = ...;image.setEffect(new Reflection());

Node image = ...;image.setEffect(new SepiaTone());

CSS

Scene scene = new Scene(container, 400, 100);// スタイルシートの設定scene.getStylesheets().add("/style.css");

.button { -fx-font: 24pt "SansSerif"; -fx-text-fill: #006666; -fx-background-color: orange; -fx-border-radius: 20; -fx-background-radius: 20; -fx-padding: 5;}

.button { -fx-font: 16pt "SansSerif"; -fx-text-fill: #00FF33; -fx-background-color: #0066FF; -fx-border-radius: 0; -fx-background-radius: 0; -fx-padding: 20;}

CSS

Scene scene = new Scene(container, 400, 100);// スタイルシートの設定scene.getStylesheets().add("/style.css");

.button { -fx-font: 24pt "SansSerif"; -fx-text-fill: #006666; -fx-background-color: orange; -fx-border-radius: 20; -fx-background-radius: 20; -fx-padding: 5;}

.button { -fx-font: 16pt "SansSerif"; -fx-text-fill: #00FF33; -fx-background-color: #0066FF; -fx-border-radius: 0; -fx-background-radius: 0; -fx-padding: 20;}

Media

Media media = new Media(url);MediaPlayer player = new MediaPlayer(media);MediaView view = new MediaView(player);

player.play();

Bind

Model

View

ControllerEvent

Observer Pattern

Bind

Model

View

Controller

Bind

// モデルDoubleProperty xProperty = new DoubleProperty();

Slider slider = new Slider(50, 300, 0);// モデルにスライダの値をバインドさせるxProperty.bind(slider.valueProperty());

Rectangle rect = new Rectangle(50, 10, 50, 30); // 四角の x座標にモデルをバインドさせるrect.xProperty().bind(xProperty);

Conclusion

JavaFX 2.0 Java の GUI ライブラリ

JavaSE 8 JavaFX 3.0 を含むOpenJFX

FXMLHTML

Animation

Media

CSSBind

EffectTool

Scene BuilderNetBeans 7.1

デザイナ向けツールが ...

何が変わった