From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド

From Swing To JavaFX

Java in the Box櫻庭祐一

SwingからJavaFXへのマイグレーションガイド

JavaFX の基本

JavaFXJavaFX

次世代の Java の GUI Library

機能的には Swing+Java2D+α

JavaSE8 から標準 (JavaFX3.0)

public class Hello extends Application {

}

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

アプリケーションスレッドの起動

@Override public void start(Stage stage) {

}

// コンテナ Group container = new Group(); // Scene Graph のルートを生成し、コンテナを貼る Scene scene = new Scene(container, 100, 20); stage.setScene(scene);

// ラベルを生成しコンテナに貼る Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.show(); SceneGraph

はまりそうなところ

コンテナへの追加pane.add(comp);pane.getChildren().add(comp);

イベントリスナは1種類のみbutton.setOnAction( new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { // イベント処理 }});

BindModel

View

ControllerEvent

Observer Pattern

BindModel

View

Controller

Bind

BindModel

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

シナリオで考えるマイグレーション

シナリオ 1 JavaFX in Swing

シナリオ 2 Swing to JavaFX w/o FXML

シナリオ 3 Swing to JavaFX w/ FXML

JavaFX in Swing

Swing アプリケーションに JavaFX を埋め込む

逆はサポートしない

JavaFX でしかできないことを Swing へ

Webグラフ

メディアアニメーション

JavaFX in Swing

Swing アプリケーションに JavaFX を埋め込む

逆はサポートしない

JavaFX でしかできないことを Swing へ

Webグラフ

メディアアニメーション

JFXPanelJFXPanel

Swing に貼れる JavaFX 部品JFXPanel にはシーングラフを記述

final JFXPanel fxPanel = new JFXPanel(); jframe.add(fxPanel);

Platform.runLater(new Runnable() { @Override public void run() { AnchorPane root = new AnchorPane(); Scene scene = new Scene(root); root.getChildren().add(new Button("JavaFX Button")); fxPanel.setScene(scene); } });

Swing EDT

JavaFX App Thread

Swing to JavaFX w/o FXML

Swing を JavaFX に書き換える

使い方がほとんど同じもの

やり方は違うが、概念は同じもの

使い方が違うもの

Label,Button,TextField, et al.

レイアウト

TableView,TreeView,ListView

Swing

JavaFX

Button

JButton = new JButton(”Swing”);

button.addActionListener(new ActionListener() { @Override public void actionPerformed(new ActionEvent event) { // イベント処理 } });

Button = new Button(”JavaFX”);

button.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { // イベント処理 } });

LayoutLayout

Swing: コンテナ + レイアウトマネージャ

JPanel panel = new JPanel();panel.setLayout(new BorderLayout());

panel.add(comp, BorderLayout.CENTER);

JavaFX: コンテナがレイアウトを含む

BorderPane pane = new BorderPane();

pane.setCenter(comp);

TableTableSwing: TableModelJavaFX: Bean を Column にバインド

class Student { ...... } // Java Bean

TableView<Student> table = new TableView<>();

TableColumn col1 = new TableColumn("Name");col1.setCellValueFactory( new PropertyValueFactory<Student, String>("name"));TableColumn col2 = new TableColumn("Grad Year");col2.setCellValueFactory( new PropertyValueFactory<Student, Integer>("gradYear"));

table.setItems(students);table.getColumns().addAll(col1, col2);

class Student { ...... } // Java Bean

TableView<Student> table = new TableView<>();

TableColumn col1 = new TableColumn("Name");col1.setCellValueFactory( new PropertyValueFactory<Student, String>("name"));TableColumn col2 = new TableColumn("Grad Year");col2.setCellValueFactory( new PropertyValueFactory<Student, Integer>("gradYear"));

table.setItems(students);table.getColumns().addAll(col1, col2);

Swing to JavaFX

w/ FXML

FXMLFXML

GUI の構造を XML で表す

シーングラフを表現する

スキーマレスクラス : 要素プロパティ : 属性 or 要素

Java との連携

<AnchorPane prefHeight="400.0" prefWidth="600.0"> <children> <HBox alignment="CENTER" prefHeight="50.0" prefWidth="572.0" spacing="20.0"> <children> <TextField prefWidth="200.0" style="-fx-font-size: 24;" /> <Button style="-fx-font-size: 24;" text="Load" /> </children> </HBox> <WebView prefHeight="302.0" prefWidth="572.0" /> </children></AnchorPane>




AnchorPane pane = FXMLLoader.load( this.getClass().getResource("browser.fxml"));

FXML と Java の連携

ModelView ControllerFXML Java Java

fx:id#method

@FXML

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>



public class BrowserController implements Initializable { @FXML private TextField textfield; @FXML private WebView webview; private WebEngine engine; @FXML public void handleAction(ActionEvent event) { engine.load(textfield.getText()); } @Override public void initialize(URL url, ResourceBundle rb) { engine = webview.getEngine(); } }

public class BrowserController implements Initializable { @FXML private TextField textfield; @FXML private WebView webview; private WebEngine engine; @FXML public void handleAction(ActionEvent event) { engine.load(textfield.getText()); } @Override public void initialize(URL url, ResourceBundle rb) { engine = webview.getEngine(); } }

Tool

Java

FXML

NetBeans

Scene Builder

Conclusion

マイグレーション 3 つのシナリオ

Component ベースならそれほど違いはないFXML

今日やらなかったことCSS, Animaction, EffectShape, 非同期処理

From Swing To JavaFX

Java in the Box櫻庭祐一

SwingからJavaFXへのマイグレーションガイド

Technology

From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド