第8回JavaFX勉強会(2012/11/30)でのLT資料です

1. 見よう見まねでJavaFX！
株式会社ビルドシステム
石丸 愛子

2. 自己紹介
• Twitter：@_denko
• お仕事：Javaで業務アプリ作ってます
• 趣味 ：スノボ、スキー、バレエ、
ZOOKEEPER、スパイダーソリティア
今日は・・・

3. 自己紹介
• Twitter：_denko
• お仕事：Javaで業務アプリ作ってます
• 趣味 ：スノボ、スキー、バレエ、
ZOOKEEPER、スパイダーソリティア
さわり始めて３週間の
今日は・・・
JavaFXのお話しをします★

4. JavaFXといえば・・・

5. リッチ！

6. グラフィカル！

7. Wonderful！

8. 煌びやかな世界

9. でもSwingの後継者
（って聞いた）

10. いぶし銀の業務アプリだって
作れるはず！

11. 作ってみました。
検索
顧客一覧画面 顧客編集画面
顧客ID
編集 更新
参照 参照・更新
DB
Customerテーブル

12. 作ってみました。
Controller FXMLファイル Controller FXMLファイル
検索
Application
顧客一覧画面 顧客編集画面
顧客ID
編集 更新
参照 参照・更新
DB
Customerテーブル

13. 環境
• Java SE 7u7
• NetBeans 7.2
• Scene Builder 1.0
• MySQL Server 5.5

14. 顧客一覧画面

15. 顧客一覧画面

16. 顧客一覧画面
you can add the data to the table by using
the setItems method of the TableView class:
table.setItems(data).

17. 顧客一覧画面
// Customerを検索
List<Customer> cList = CustomerAccess.selectAll();
ObservableList<Customer> oList =
FXCollections.observableArrayList(cList);
// テーブルに設定
tableView.setItems(oList);

18. 顧客一覧画面

19. 顧客一覧画面

20. 顧客一覧画面
DB
Customerテーブル
1 suzuki ichiro fuga
2 yamada taro hoge

21. 顧客一覧画面
DB
Customerテーブル
1 suzuki ichiro fuga
2 sato taro hoge

22. 顧客一覧画面
DB
Customerテーブル
1 suzuki ichiro fuga
2 sato taro hoge

23. 顧客一覧画面
■検索ボタン押下時
// Customerを検索 “sato” が入ってる
List<Customer> cList = CustomerAccess.selectAll();
ObservableList<Customer> oList =
FXCollections.observableArrayList(cList);
// テーブルに設定
tableView.setItems(oList);

24. 顧客一覧画面
■検索ボタン押下時
// Customerを検索 “sato” が入ってる
List<Customer> cList = CustomerAccess.selectAll();
ObservableList<Customer> oList =
FXCollections.observableArrayList(cList);
// テーブルに設定
tableView.setItems(oList);
画面は”yamada”のまま（：＿；）

25. 顧客一覧画面
• ObservableList は ListChangeListener
をもっている
リストの件数が変更されればリフレッシュする

26. 顧客一覧画面
■初期化時
// TableViewをデータ0件で初期化
List<Customer> cList = new ArrayList<>(0);
ObservableList<Customer> oList =
FXCollections.observableArrayList(cList);
tableView.setItems(oList);
■検索ボタン押下時
“sato” が入ってる
tableView.getItems().clear();
// Customerを検索
List<Customer> cList = CustomerAccess.selectAll();
tableView.getItems().addAll(cList);

27. 顧客一覧画面
■初期化時
// TableViewをデータ0件で初期化
List<Customer> cList = new ArrayList<>(0);
ObservableList<Customer> oList =
FXCollections.observableArrayList(cList);
tableView.setItems(oList);
■検索ボタン押下時
“sato” が入ってる
tableView.getItems().clear();
// Customerを検索
List<Customer> cList = CustomerAccess.selectAll();
tableView.getItems().addAll(cList);
画面は”yamada”のまま（：＿；）

28. 顧客一覧画面
• ObservableList は ListChangeListener
をもっている
リストの件数が変更されればリフレッシュする
clear、addAllでは最終的な件数が変わらず
リフレッシュしない

29. 顧客一覧画面

30. 顧客一覧画面
We are refreshing data in a tableview using
layout():

31. 顧客一覧画面
We are refreshing data in a tableview using
layout():
solution for a refresh would be great

32. 顧客一覧画面
We are refreshing data in a tableview using
layout():
solution for a refresh would be great
Without layout(), table is not refreshed ...

33. 顧客一覧画面
We are refreshing data in a tableview using
layout():
solution for a refresh would be great
Without layout(), table is not refreshed ...
there should be no refresh problem.

34. 顧客一覧画面
■初期化時
// TableViewをデータ0件で初期化
（略）
■検索ボタン押下時
tableView.getItems().clear();
tableView.layout();
// Customerを検索
List<Customer> cList = CustomerAccess.selectAll();
tableView.getItems().addAll(cList);

35. 顧客一覧画面
できた★

36. 続きましてー

37. 顧客編集画面
前画面から
IDをもらう

38. 顧客編集画面
前画面から
IDをもらう

39. 顧客編集画面
前画面から
IDをもらう？？

40. 顧客編集画面

41. 顧客編集画面
public static なフィールド
にセットすればいいのよ

42. 顧客編集画面
public static なフィールド
にセットすればいいのよ
(>_<)

43. 顧客編集画面
～（中略） ～

44. 顧客編集画面
// FXMLファイルをロード
FXMLLoader fxmlLoader = new FXMLLoader(
getClass().getResource("fxml/UpdateScreen.fxml"));
Parent root = (Parent) fxmlLoader.load();
Scene scene = new Scene(root );
// ロードしたFXMLファイルに関連づくControllerを取得
～（中略） ～
final UpdateScreenController controller =
(UpdateScreenController) fxmlLoader.getController();

45. 顧客編集画面
// FXMLファイルをロード
Parent root = FXMLLoader.load(
getClass().getResource("fxml/SearchScreen.fxml"));
Scene scene = new Scene(root);
// FXMLファイルをロード
FXMLLoader fxmlLoader = new FXMLLoader(
getClass().getResource("fxml/UpdateScreen.fxml"));
Parent root = (Parent) fxmlLoader.load();
Scene scene = new Scene(root );
// ロードしたFXMLファイルに関連づくControllerを取得
final UpdateScreenController controller =
(UpdateScreenController) fxmlLoader.getController();

46. 顧客編集画面
■顧客一覧画面Controller ■顧客編集画面Controller
fxmlLoader.load(); Initialize(URL, ResourceBundle)
controller.setId(id); public void setId(Integer id){
this.id = id;
}
newStage.setOnShowing(new
EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent t) {
// 画面が開いたことをControllerに通知 public void onShowing(){
controller.onShowing(); // id指定でCustomer検索
} }
);

47. 顧客編集画面
できた★

48. まとめ
• TableViewはSwing時代よりすっきりした印象
• まだ文献が少なく、戸惑うこともあり
• あ！櫻庭さんの次回ITpro連載は
「TableView」だ！！
JavaFXが繁栄して、文献が増えていく
と嬉しいな

49. ご清聴ありがとうございました。

50. 参考文献
• Using JavaFX UI Controls
– http://docs.oracle.com/javafx/2/ui_controls/table-view.htm
• Ability to force a ListView or TableView refresh
– http://javafx-jira.kenai.com/browse/RT-22599
• Javafx 2.0 How-to Application.getParameters() in a Controller.java file
– http://stackoverflow.com/questions/10134856/javafx-2-0-how-to-
application-getparameters-in-a-controller-java-file
• Thread: Cannot access controller
– https://forums.oracle.com/forums/thread.jspa?threadID=2379964