何が変わった javafx 2.0

31
何が変わった

Upload: yuichi-sakuraba

Post on 06-Jun-2015

3.325 views

Category:

Technology


4 download

DESCRIPTION

Japan JavaFX User Group Seminar on 10 Dec. 2011.

TRANSCRIPT

Page 1: 何が変わった JavaFX 2.0

何が変わった

Page 2: 何が変わった JavaFX 2.0

Agenda

JavaFX 1.x JavaFX 2.0

Position の変化

How to Write

Conclusion

Page 3: 何が変わった JavaFX 2.0

Position の変化

JavaFX

Java SE Java ME

Page 4: 何が変わった JavaFX 2.0

Position の変化

JavaFX 1.xJavaFX Script

Page 5: 何が変わった JavaFX 2.0

Position の変化

JavaFX 2.0Java

Page 6: 何が変わった JavaFX 2.0

JDK/JRE

Java

Non-Java

AWT Swing

SwingX

JAI/ImageIO

Java 3D

JOGL

Java 2D

SWT

JMF

JavaFX

Page 7: 何が変わった JavaFX 2.0

JDK/JRE

Java

Non-Java

AWT Swing

SwingX

JAI/ImageIO

Java 3D

JOGL

Java 2D

SWT

JMFJavaFX2.0

Page 8: 何が変わった JavaFX 2.0

JDK/JRE

Java

Non-Java

AWT Swing

SwingX

JAI/ImageIO

Java 3D

JOGL

Java 2D

SWT

JMF

JavaFX

2.0

3.0JavaSE8

Page 9: 何が変わった JavaFX 2.0

JavaCard CLDC SE

Java ME Java SE

CDC SE Embedded

Page 10: 何が変わった JavaFX 2.0

JavaCard CLDC SE

Java ME Java SE

CDCSE Embedded

JavaFX

Page 11: 何が変わった JavaFX 2.0

インスタンシエーション

追加された機能

削除された機能

何が変わった

Scene Graph

Page 12: 何が変わった JavaFX 2.0

Stage

StageScene

Scene

VBox

VBox

HBox

HBox

TableView

TableView

Label

TextBox

Button

Page 13: 何が変わった JavaFX 2.0

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

Page 14: 何が変わった JavaFX 2.0

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

Page 15: 何が変わった JavaFX 2.0

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

Page 16: 何が変わった JavaFX 2.0

WebView/WebEngine

Preloader

Production Suite

REST/JSON Perser

Page 17: 何が変わった JavaFX 2.0

EffectEffect

AppDesign

Page 18: 何が変わった JavaFX 2.0

WebView/WebEngine

Page 19: 何が変わった JavaFX 2.0

WebView/WebEngine

Page 20: 何が変わった JavaFX 2.0

Animation

自動補完

Page 21: 何が変わった JavaFX 2.0

Animation

Page 22: 何が変わった JavaFX 2.0

Animation

自動補完

Page 23: 何が変わった JavaFX 2.0

Animation

自動補完

Page 24: 何が変わった JavaFX 2.0

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

Page 25: 何が変わった JavaFX 2.0

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

Page 26: 何が変わった JavaFX 2.0

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

Page 27: 何が変わった JavaFX 2.0

Media

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

player.play();

Page 28: 何が変わった JavaFX 2.0

Bind

Model

View

ControllerEvent

Observer Pattern

Page 29: 何が変わった JavaFX 2.0

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

Page 30: 何が変わった JavaFX 2.0

Conclusion

JavaFX 2.0 Java の GUI ライブラリ

JavaSE 8 JavaFX 3.0 を含むOpenJFX

FXMLHTML

Animation

Media

CSSBind

EffectTool

Scene BuilderNetBeans 7.1

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

Page 31: 何が変わった JavaFX 2.0

何が変わった