Japan Java User Group Cross Community Conferece 2012 Spring "From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド"

1. From Swing
To JavaFX
SwingからJavaFXへの
マイグレーションガイド
Java in the Box
櫻庭 祐一

3. JavaFX の基本

4. JavaFX
次世代の Java の GUI Library
機能的には Swing+Java2D+α
JavaSE8 から標準 (JavaFX3.0)

5. public class Hello extends Application {
@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
public static void main(String[] args) {
Application.launch(args);
}
} アプリケーションスレッドの起動

6. はまりそうなところ
コンテナへの追加
pane.add(comp);
pane.getChildren().add(comp);
イベント リスナは1種類のみ
button.setOnAction(
new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
// イベント処理
}
});

7. Observer Pattern
Bind View
Model
Event
Controller

8. Bind View
Model
Bind
Controller

9. Bind View
Model
Bind
Controller
// モデル
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);

10. シナリオで考える
マイグレーション
シナリオ 1 JavaFX in Swing
シナリオ 2 Swing to JavaFX
w/o FXML
シナリオ 3 Swing to JavaFX
w/ FXML

11. JavaFX in Swing
Swing アプリケーションに
JavaFX を埋め込む
逆はサポートしない
JavaFX でしかできないことを
Swing へ
Web メディア
グラフ アニメーション

12. JavaFX in Swing
Swing アプリケーションに
JavaFX を埋め込む
逆はサポートしない
JavaFX でしかできないことを
Swing へ
Web メディア
グラフ アニメーション

13. JFXPanel
Swing に貼れる JavaFX 部品
JFXPanel にはシーングラフを記述
final JFXPanel fxPanel = new JFXPanel(); Swing EDT
jframe.add(fxPanel);
Platform.runLater(new Runnable() {
@Override
public void run() { JavaFX App Thread
AnchorPane root = new AnchorPane();
Scene scene = new Scene(root);
root.getChildren().add(new Button("JavaFX Button"));
fxPanel.setScene(scene);
}
});

14. Swing to JavaFX w/o FXML
Swing を JavaFX に書き換える
使い方がほとんど同じもの
Label,Button,TextField, et al.
やり方は違うが、概念は同じもの
レイアウト
使い方が違うもの
TableView,TreeView,ListView

15. Button
Swing
JButton = new JButton(”Swing”);
button.addActionListener(new ActionListener() {
@Override
public void actionPerformed(new ActionEvent event) {
// イベント処理
}
});
JavaFX
Button = new Button(”JavaFX”);
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
// イベント処理
}
});

16. Layout
Swing: コンテナ + レイアウトマネージャ
JPanel panel = new JPanel();
panel.setLayout(new BorderLayout());
panel.add(comp, BorderLayout.CENTER);
JavaFX: コンテナがレイアウトを含む
BorderPane pane = new BorderPane();
pane.setCenter(comp);

17. Table
Swing: TableModel
JavaFX: 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);

18. Swing to JavaFX
w/ FXML

19. FXML
GUI の構造を XML で表す
シーングラフを表現する
スキーマレス
クラス : 要素
プロパティ : 属性 or 要素
Java との連携

20. <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"));

21. FXML と Java の連携
View Controller Model
FXML Java Java
fx:id @FXML
#method

22. <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>
public class BrowserController implements Initializable {
</AnchorPane> @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();
}
}

23. Tool
Java NetBeans
FXML Scene Builder

24. Conclusion
マイグレーション 3 つのシナリオ
Component ベースなら
それほど違いはない
FXML
今日やらなかったこと
CSS, Animaction, Effect
Shape, 非同期処理

25. From Swing
To JavaFX
SwingからJavaFXへの
マイグレーションガイド
Java in the Box
櫻庭 祐一