への誘い

Agenda

JavaFX 2.0

General Purpose

Java の UI の歴史

UI

Conclusion

History

JDK/JRE

Java

Non-Java

AWT SwingJava 2D

SwingX

JAI/ImageIO

Java 3DJOGL

LG3D

SWTGWTF3 JavaFX

JavaFX2.0

JavaFX3.0

JavaFX 2.0

第3の Java の GUI ライブラリ

高性能レンダリングエンジン

アニメーション /エフェクト

JVMで動作する言語から利用可

JavaFX

UI GeneralPurpose

SceneGraph

Stage

StageScene

Scene

VBox

VBox

HBox

HBox

TableView

TableView

Label

TextBox

Button

Node

Control Pane Shape

Node

Control Pane Shape

Web

Media

Chart

WebWebView view = new WebView();

WebEngine engine = view.getEngine();engine.load("http://google.com/");

Media

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

player.play();

SceneGraph の構築

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(Hello.class, null); }}

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(Hello.class, null); }}

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(Hello.class, null); }}

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(Hello.class, null); }}

SceneGraph の構築

SceneGraph の構築

<?import javafx.scene.control.*?><?import javafx.scene.layout.*?>

<FlowPane xmlns:fx="http://javafx.com/fxml"> <children> <Label text="Label" /> <TextBox fx:id="textBox" text="TextBox" /> <Button fx:id="button" text="Button" /> </children></FlowPane>

FXML

JavaFX

SceneGraph

UI GeneralPurpose

Node

Control Region Shape

Web Media Chart

FXMLAnimation

Effect

CSS

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

JavaFX

SceneGraph

UI GeneralPurpose

Node

Control Region Shape

Web Media Chart

FXMLAnimation

Effect

CSS

Property Async

Bind Collection

MVC

Model

View

ControllerEvent

Observer Pattern

MVC

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

JavaFX

SceneGraph

UI GeneralPurpose

Node

Control Region Shape

Web Media Chart

FXMLAnimation

Effect

CSS

Property Async

Bind Collection

JavaSE8 OpenJDK

Tool

NetBeans 7.1 Scene Builder

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

への誘い