ハンズオン JH2-01 ~Building an Rich Graphical Enterprise Application~ JavaFX 2.0によるリッチグラフィカルアプリケーション開発 Java Embedded Global Business Unit 佐藤芳樹 1 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Russia 17 18 April 2012 India 3 4 May 2012 San Francisco September 30 October 4, 2012 2 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
以下の事項は 弊社の一般的な製品の方向性に関する概要を説明するものです また 情報提供を唯一の目的とするものであり いかなる契約にも組み込むことはできません 以下の事項は マテリアルやコード 機能を提供することをコミットメント ( 確約 ) するものではないため 購買決定を行う際の判断材料になさらないで下さい オラクル製品に関して記載されている機能の開発 リリースおよび時期については 弊社の裁量により決定されます Oracle と Java は Oracle Corporation 及びその子会社 関連会社の米国及びその他の国における登録商標です 文中の社名 商品名等は各社の商標または登録商標である場合があります 3 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 4 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
開発するアプリケーション JavaFX 2.0 を使った自動車販売アプリケーション DB から読み込んだ売上実績データを テーブルとグラフチャートで表示 新規の売上データをフォームから登録し DB へ反映 学べる事 NetBeans での JavaFX プロジェクト開発 JavaFX のテーブル チャート レイアウト アニメーション等の標準部品 FXML を利用した UI 開発 CSS を利用した UI スタイリング ( バックグラウンドタスクによる非同期処理 ) 5 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
開発するアプリケーション - 画面構成メインダッシュボード入力画面 6 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
開発するアプリケーション - アーキテクチャ 7 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 8 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 1 Create a JavaFX FXML Project 空の JavaFX FXML プロジェクトを作成し雛型アプリケーションをそのまま実行 9 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 10 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 2 Add a Table ダッシュボード上にテーブルコントロールを配置 Dashboard.fxml を編集 <TableView fx:id="salestable" xmlns:fx="http://javafx.com/fxml" fx:controller="henleyclient.dashboard" /> Dashboard.java から Dashboard.fxml を読み込み 11 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 12 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 3 Populate the Table with Data 1. Jersey API と HenleyModel プロジェクトを追加 2. Web サービスへの接続を Java によるコントローラに実装 3. Web サービスから読み込んだデータと FXML で定義したテーブルのマッピング 13 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 3 FXML について JavaFX シーングラフを構築する スクリプト的な XML マークアップ言語 静的な GUI ツリー構造を XML で定義 動的なイベントハンドラは JSR-223 準拠スクリプト言語か Java で定義 GUI エディタの JavaFX Scene Builder が提供 ( 現在 β 版 ) 14 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 3 JavaFX Scene Builder アイコンをダブルクリックして起動してみて下さい 15 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 3 -JavaFX インスタンス定義 FXML はインスタンス作成の Dependency Injection 大文字エレメントはインスタンス生成 小文字エレメントとアトリビュートはフィールド代入 Builder を使った Java プログラムに対応 <TableView fx:id="salestable" > <columns> <TableColumn text="date"> <cellvaluefactory> <PropertyValueFactory property="date" /> </cellvaluefactory> </TableColumn> <TableColumn text="product"> <cellvaluefactory> <PropertyValueFactory property="productid"/> </cellvaluefactory> </TableColumn> </TableView> FXML と等価な Java ソース TableView salestable = TableViewBuilder.<DailySales>create().columns( TableColumnBuilder.<DailySales,String>create().text( Date ).cellvaluefactory( PropertyValueFactoryBuilder.<DailySales,String>create().property( date )).build(), TableColumnBuilder.<DailySales,String>create().text( Product ).cellvaluefactory( PropertyValueFactoryBuilder.<DailySales,String>create().property( productid )).build(), ).build(); PropertyValueFactory を使って各カラムのセルファクトリをセットし TableView のデータモデルを定義しており データ自体はコントローラの中で salestable.setitems(sales) でセットされます 16 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 17 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 5 Add a Chart 1. テーブルの上にバーチャートを定義 2. チャートのデータモデルをコントローラへ実装し データソースとバインド ( 同期 ) X 軸に製品 Y 軸に積算売上台数データ 18 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 5 -JavaFX インスタンス定義 FXML はインスタンス作成の Dependency Injection 大文字エレメントはインスタンス生成 小文字エレメントとアトリビュートはフィールド代入 Builder を使った Java プログラムに対応 <BarChart fx:id="saleschart" legendvisible="false"> <xaxis> <CategoryAxis/> </xaxis> <yaxis label="quantity of Sales"> <NumberAxis/> </yaxis> </BarChart> FXMLと等価なJavaソース BarChart saleschart = BarChartBuilder.<String,Integer>create().xAxis(CategoryAxisBuilder.create().build()).yAxis(NumberAxisBuilder.create().label( Quantity of Sales ).build()).build(); 19 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 5 ー注意点 salesservice.getresults() を sales へ変更して下さい @Override public void initialize(url url, ResourceBundle rb) { salestable.setitems(sales); /** bind the code to the chart */ saleschart.dataproperty().bind(new ObjectBinding<ObservableList<XYChart.Series<String,Integer>>>() { { bind(sales); } @Override protected ObservableList<XYChart.Series<String,Integer>> computevalue() {Map<String,Integer> totals = new HashMap<String,Integer>(); for (DailySales sale : sales) { final String producttype = sale.getproductid().getproducttypeid().getclass1(); final Integer qty = sale.getquantity(); } if (totals.containskey(producttype)) { totals.put(producttype, totals.get(producttype) + qty); } else { totals.put(producttype, qty); } 20 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 21 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 7 Build a Form 1. 入力フォーム画面を作成しダッシュボードとの遷移を実装 ダッシュボードへ Record Sales ボタン フォームへ Save, Cancel ボタン 2. フォームへデータ入力用部品を定義 チョイスボックス テキストフィールド プログレスバー等々 3. フォームへデータ取り込み 製品 / 地域 / 州データをチョイスボックスへ 4. 入力データをサーバへ登録 バックグラウンドタスクで Web サービス呼び出し 22 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 7 - マウスイベントハンドラの実装 <GridPane xmlns:fx="http://javafx.com/fxml" fx:controller="henleyclient.salesform" hgap="10" vgap="10"> <padding><insets top="10" right="10" bottom="10" left="10"/></padding> <children> <HBox spacing="10" alignment="center_right" GridPane.columnIndex="2" GridPane.rowIndex="4" GridPane.columnSpan="2"> <children> <Button text="cancel" onaction="#cancelaction"/> <Button text="save" onaction="#saveaction"/> コントローラへイベントハンドラを実装 public class SalesForm implements Initializable { @FXML private void cancelaction(actionevent event) { returntodashboard(event);} @FXML private void saveaction(final ActionEvent event) { returntodashboard(event);} 23 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
このハンズオンのアジェンダ 開発するアプリケーション Exercise 0- Set Up the Application Backend Exercise 1- Create a JavaFX FXML Project Exercise 2- Add a Table Exercise 3- Populate the Table with Data Exercise 4- Load Data into a Background Thread Exercise 5- Add a Chart Exercise 6- Customize the Table Exercise 7- Build a Form Exercise 8- Style the Application Exercise 9- Extra Credit: Add Animation 24 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 8 Style the Application CSS ファイルを定義 全体の余白 背景画像 背景色 影 バーの背景 テキストサイズ バーチャートの色 境界色 位置 背景画像 バーチャートのデータシリーズ毎の背景画像 ボタンアクションに応じたボタンスタイル設定 ロゴ画像 25 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 8 JavaFX CSS について JavaFX シーングラフノードのスタイルをカスタマイズするスタイルシート W3C CSS v2.1 ベースの HTML 向け CSS と同様の形式で定義 JavaFX Scene Builder でもセット可能 JavaFX クラスと CSS スタイルクラス JavaFX プロパティと CSS プロパティが対応 セレクタのシンタックス. スタイルクラス { CSSプロパティ : 値 ; CSSプロパティ : 値 ; } 擬似クラスを利用したセレクタ. スタイルクラス : 擬似クラス { CSSプロパティ : 値 ; CSSプロパティ : 値 ; } IDを利用したセレクタ # ノードID{ CSSプロパティ : 値 ; CSSプロパティ : 値 ; } 26 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
Exercise 8.chart-bar { -fx-background-color: rgba(0,168,355,0.05);...}.data0.chart-bar { -fx-background-image: url("sedan-s.png"); }.data1.chart-bar { -fx-background-image: url("suv-s.png"); } JavaFX クラスと CSS スタイルクラスが対応 - 小文字 + ハイフンで指定 - 各クラス毎に整形用の擬似クラスが定義済み - チャート内の各シリーズはインデックスで指定 JavaFX 変数名と CSS プロパティ名が対応 - -fx- + 小文字 + ハイフンで指定 #recordsalesbutton:pressed { -fx-padding: 10 15 13 15; -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;} JavaFX インスタンス個別の装飾 - # でノード ID を指定 27 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
参考情報 JavaFX サンプル www.oracle.com/technetwork/java/javafx/downloads/ JavaFX ドキュメント download.oracle.com/javafx/ API ドキュメント download.oracle.com/javafx/2.0/api/ JavaFX フォーラム forums.oracle.com/forum.jspa?forumid=1385 Ensemble で JavaFX の部品エフェクト アニメーション Web ブラウザを体験 28 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
29 Copyright 2012, Oracle and/or its affiliates. All rights reserved.
30 Copyright 2012, Oracle and/or its affiliates. All rights reserved.