PowerPoint Presentation

Size: px

Start display at page:

Download "PowerPoint Presentation"

いとはかなり
7 years ago
Views:

1 ハンズオン 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.

3 以下の事項は弊社の一般的な製品の方向性に関する概要を説明するものですまた情報提供を唯一の目的とするものでありいかなる契約にも組み込むことはできません以下の事項はマテリアルやコード機能を提供することをコミットメント ( 確約 ) するものではないため購買決定を行う際の判断材料になさらないで下さいオラクル製品に関して記載されている機能の開発リリースおよび時期については弊社の裁量により決定されます 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

4 このハンズオンのアジェンダ開発するアプリケーション 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.

5 開発するアプリケーション JavaFX 2.0 を使った自動車販売アプリケーション DB から読み込んだ売上実績データをテーブルとグラフチャートで表示新規の売上データをフォームから登録し DB へ反映学べる事 NetBeans での JavaFX プロジェクト開発 JavaFX のテーブルチャートレイアウトアニメーション等の標準部品 FXML を利用した UI 開発 CSS を利用した UI スタイリング ( バックグラウンドタスクによる非同期処理 ) 5 Copyright 2012, Oracle and/or its affiliates. All rights reserved.

8 このハンズオンのアジェンダ開発するアプリケーション 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.

10 このハンズオンのアジェンダ開発するアプリケーション 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.

11 Exercise 2 Add a Table ダッシュボード上にテーブルコントロールを配置 Dashboard.fxml を編集 <TableView fx:id="salestable" xmlns:fx=" fx:controller="henleyclient.dashboard" /> Dashboard.java から Dashboard.fxml を読み込み 11 Copyright 2012, Oracle and/or its affiliates. All rights reserved.

12 このハンズオンのアジェンダ開発するアプリケーション 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.

13 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.

14 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

Exercise 3 -JavaFX インスタンス定義 FXML はインスタンス作成の Dependency Injection 大文字エレメントはインスタンス生成小文字エレメントとアトリビュートはフィールド代入 Builder を使った Java プログラムに対応 <TableView fx:id="salestable" > <columns> <TableColumn

property="productid"/> </cellvaluefactory> </TableColumn> </TableView> FXML と等価な Java ソース TableView salestable = TableViewBuilder.<DailySales>create().columns( TableColumnBuilder.

16 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.

17 このハンズオンのアジェンダ開発するアプリケーション 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.

Exercise 5 -JavaFX インスタンス定義 FXML はインスタンス作成の Dependency Injection 大文字エレメントはインスタンス生成小文字エレメントとアトリビュートはフィールド代入 Builder を使った Java プログラムに対応 <BarChart fx:id="saleschart" legendvisible="false"> <xaxis>

19 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.

20 Exercise 5 ー注意点 salesservice.getresults() を sales 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); 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.

21 このハンズオンのアジェンダ開発するアプリケーション 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.

22 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.

23 Exercise 7 - マウスイベントハンドラの実装 <GridPane xmlns:fx=" 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 private void cancelaction(actionevent event) { private void saveaction(final ActionEvent event) { returntodashboard(event);} 23 Copyright 2012, Oracle and/or its affiliates. All rights reserved.

24 このハンズオンのアジェンダ開発するアプリケーション 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.

25 Exercise 8 Style the Application CSS ファイルを定義全体の余白背景画像背景色影バーの背景テキストサイズバーチャートの色境界色位置背景画像バーチャートのデータシリーズ毎の背景画像ボタンアクションに応じたボタンスタイル設定ロゴ画像 25 Copyright 2012, Oracle and/or its affiliates. All rights reserved.

Exercise 8 JavaFX CSS について JavaFX シーングラフノードのスタイルをカスタマイズするスタイルシート W3C

1 ベースの HTML 向け CSS と同様の形式で定義 JavaFX Scene Builder でもセット可能 JavaFX クラスと

スタイルクラス { CSSプロパティ : 値 ; CSSプロパティ : 値 ; } 擬似クラスを利用したセレクタ.

26 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.

27 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: ; -fx-background-insets: , , , ;} 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.

28 参考情報 JavaFX サンプル 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.

目次はじめに... 2 無料トライアルのサインアップ方法... 3 トライアル環境へのアクセス参考情報

目次はじめに... 2 無料トライアルのサインアップ方法... 3 トライアル環境へのアクセス参考情報 2018 年 11 月日本オラクル株式会社目次はじめに... 2 無料トライアルのサインアップ方法... 3 トライアル環境へのアクセス... 11 参考情報... 14 1 はじめにこのガイドは Oracle Cloud の無料トライアルを利用登録 ( サインアップ ) するための手順書です本お申込みでご利用いただけるサービスについては以下サイトの [ ご利用可能な Oracle サービス