見よう見まねでJavaFX!
Upcoming SlideShare
Loading in...5
×
 

見よう見まねでJavaFX!

on

  • 2,216 views

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

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

Statistics

Views

Total Views
2,216
Views on SlideShare
2,210
Embed Views
6

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 6

https://twitter.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

見よう見まねでJavaFX! 見よう見まねでJavaFX! Presentation Transcript

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