見よう見まねでJavaFX!

3,229 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,229
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

見よう見まねでJavaFX!

  1. 1. 見よう見まねでJavaFX! 株式会社ビルドシステム 石丸 愛子
  2. 2. 自己紹介• Twitter:@_denko• お仕事:Javaで業務アプリ作ってます• 趣味 :スノボ、スキー、バレエ、 ZOOKEEPER、スパイダーソリティア今日は・・・
  3. 3. 自己紹介• Twitter:_denko• お仕事:Javaで業務アプリ作ってます• 趣味 :スノボ、スキー、バレエ、 ZOOKEEPER、スパイダーソリティア さわり始めて3週間の今日は・・・ JavaFXのお話しをします★
  4. 4. JavaFXといえば・・・
  5. 5. リッチ!
  6. 6. グラフィカル!
  7. 7. Wonderful!
  8. 8. 煌びやかな世界
  9. 9. でもSwingの後継者 (って聞いた)
  10. 10. いぶし銀の業務アプリだって 作れるはず!
  11. 11. 作ってみました。 検索顧客一覧画面 顧客編集画面 顧客ID 編集 更新 参照 参照・更新 DB Customerテーブル
  12. 12. 作ってみました。 Controller FXMLファイル Controller FXMLファイル 検索Application 顧客一覧画面 顧客編集画面 顧客ID 編集 更新 参照 参照・更新 DB Customerテーブル
  13. 13. 環境• Java SE 7u7• NetBeans 7.2• Scene Builder 1.0• MySQL Server 5.5
  14. 14. 顧客一覧画面
  15. 15. 顧客一覧画面
  16. 16. 顧客一覧画面you can add the data to the table by usingthe setItems method of the TableView class: table.setItems(data).
  17. 17. 顧客一覧画面// Customerを検索List<Customer> cList = CustomerAccess.selectAll();ObservableList<Customer> oList = FXCollections.observableArrayList(cList);// テーブルに設定tableView.setItems(oList);
  18. 18. 顧客一覧画面
  19. 19. 顧客一覧画面
  20. 20. 顧客一覧画面 DB Customerテーブル 1 suzuki ichiro fuga 2 yamada taro hoge
  21. 21. 顧客一覧画面 DB Customerテーブル 1 suzuki ichiro fuga 2 sato taro hoge
  22. 22. 顧客一覧画面 DB Customerテーブル 1 suzuki ichiro fuga 2 sato taro hoge
  23. 23. 顧客一覧画面■検索ボタン押下時 // Customerを検索 “sato” が入ってる List<Customer> cList = CustomerAccess.selectAll(); ObservableList<Customer> oList = FXCollections.observableArrayList(cList); // テーブルに設定 tableView.setItems(oList);
  24. 24. 顧客一覧画面■検索ボタン押下時 // Customerを検索 “sato” が入ってる List<Customer> cList = CustomerAccess.selectAll(); ObservableList<Customer> oList = FXCollections.observableArrayList(cList); // テーブルに設定 tableView.setItems(oList); 画面は”yamada”のまま(:_;)
  25. 25. 顧客一覧画面• ObservableList は ListChangeListener をもっている リストの件数が変更されればリフレッシュする
  26. 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. 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. 28. 顧客一覧画面• ObservableList は ListChangeListener をもっている リストの件数が変更されればリフレッシュする clear、addAllでは最終的な件数が変わらず リフレッシュしない
  29. 29. 顧客一覧画面
  30. 30. 顧客一覧画面We are refreshing data in a tableview usinglayout():
  31. 31. 顧客一覧画面We are refreshing data in a tableview usinglayout(): solution for a refresh would be great
  32. 32. 顧客一覧画面We are refreshing data in a tableview usinglayout(): solution for a refresh would be great Without layout(), table is not refreshed ...
  33. 33. 顧客一覧画面We are refreshing data in a tableview usinglayout(): solution for a refresh would be great Without layout(), table is not refreshed ... there should be no refresh problem.
  34. 34. 顧客一覧画面■初期化時 // TableViewをデータ0件で初期化 (略)■検索ボタン押下時 tableView.getItems().clear(); tableView.layout(); // Customerを検索 List<Customer> cList = CustomerAccess.selectAll(); tableView.getItems().addAll(cList);
  35. 35. 顧客一覧画面 できた★
  36. 36. 続きましてー
  37. 37. 顧客編集画面 前画面から IDをもらう
  38. 38. 顧客編集画面 前画面から IDをもらう
  39. 39. 顧客編集画面 前画面からIDをもらう??
  40. 40. 顧客編集画面
  41. 41. 顧客編集画面 public static なフィールド にセットすればいいのよ
  42. 42. 顧客編集画面 public static なフィールド にセットすればいいのよ(>_<)
  43. 43. 顧客編集画面 ~(中略) ~
  44. 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. 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. 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. 47. 顧客編集画面 できた★
  48. 48. まとめ• TableViewはSwing時代よりすっきりした印象• まだ文献が少なく、戸惑うこともあり• あ!櫻庭さんの次回ITpro連載は 「TableView」だ!! JavaFXが繁栄して、文献が増えていく と嬉しいな
  49. 49. ご清聴ありがとうございました。
  50. 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

×