Graphics/2019/ex10

グラフィックス基礎及び実習 2019年度 第10回 †[edit]

注意 †[edit]

アイコン用画像 †[edit]

今日の実習では，アイコン用にいくつか画像を用いる． 以下のものをクラスファイルと同じ場所に保存しておくこと．

• pochittona.png
• blackuni.jpg
• whiteuni.jpg

それぞれどんな画像かは，ImageMagickのdisplayコマンドを用いて確認できる．

$ display pochittona.png &

実行例の見た目について †[edit]

この科目のページに示されたプログラムの実行例は，Mac OS X / macOS 上でのデフォルトの Look&Feel にそった見た目になっている． 実行環境が異なれば見た目も異なる場合があるので注意． それから，ウィンドウをキャプチャした画像をはり付けてあるだけなので，ボタンを押しても反応してくれません

課題A(self) 完成目標: 今回の実習終了まで †[edit]

1. 講義資料 1/6 と 2/6 の上の方をよく読んでから，右のリンク先のPDFファイルを閲覧し，手書きの部分を講義資料に書き写しなさい．資料（学内アクセス限定）
   • (?_?) なところがいっぱいあるかもしれませんが，後の講義でじっくり説明します
2. 講義資料 6/6 の Hello クラスを作って動かしてみよう

課題B(self) 完成目標: 今回の実習終了まで †[edit]

問1,2を全てやりなさい

問1 ぽちっとな †[edit]

Helloクラスを元にして，上のような見た目の得られるクラスを作りなさい．

• クラス名は G10Pochi とすること．
• 「「ねこボタン」ってなんやねん」の部分は，「ラベル」である．

次の指示に従って段階的に作っていこう．(?_?) なところがいっぱいあるかもしれませんが，想像力と探究心を発揮して考えながら取り組んでみよう．後の講義でも説明します．

1. まずは Hello を元にして，文字だけのボタンとラベルが上記のように配置されるようにしよう．そのため，p.180 の BorderPane クラスの説明を理解しよう．
2. p.173,174の「画像の表示」のところを読んで，アイコン画像を設定しよう．ただし，
   • p.174 には次の誤植があるかも: (x) JButton → (o) Button
   • ImageView オブジェクトを生成するところは，次のように書くことにしよう

     	Image pochi = new Image("pochittona.png");  // パスを指定して Image オブジェクトを生成
     	ImageView iv1 = new ImageView(pochi);  // Image オブジェクトから ImageView オブジェクトを生成
     	ImageView iv2 = new ImageView(new Image("blackuni.jpg"));  // 上記の2段階をまとめて
     

   • p.175 の ImageView クラスのAPI仕様の右上には「javafx.scene.image パッケージ」と書いてある．これは，このクラスを使用する際はこのパッケージから import する必要があることを意味している．適切な import 文を書こう．

問2 プロパティをいじる †[edit]

1. 講義資料 2/6 をよく読んでから，右のリンク先のPDFファイルを閲覧し，手書きの部分を講義資料に書き写しなさい．資料（学内アクセス限定）
2. 上述の ImageView iv2 = ... の行の直後に次の2行を追加し，動作を確認しよう．

   	System.out.println("fitWidthプロパティの値は" + iv2.getFitWidth());
   	System.out.println("preserveRatioプロパティの値は" + iv2.isPreserveRatio())
   

3. その直後に「iv2の fitWidth プロパティの値を 500 にする」を追加し，動作を確認しよう．
4. その直後に次の行を追加し，動作を確認しよう．

   	iv2.setPreserveRatio(true);
   

5. その直後に 2. と同じ2行を再度追加し，動作確認しよう．

課題C(TA) 締切: 次回実習開始直後 †[edit]

左上図のような表示をするプログラムを作成しなさい． 次のことに注意．

• クラス名は G10RadioCombo とすること．
• 左側には RadioButton のコンポーネントが2つ縦にならんでいる．2つの画像はそれぞれのコンポーネントにつけられたものである．右側のコンポーネントは，ComboBox クラスのものである．
• このようなコンポーネント配置を実現するには，次のようにしたらよい．これらの説明から分かるように，レイアウトコンテナを入れ子にしたシーングラフを作ることで，複雑なコンポーネント配置を柔軟に実現することができる． （右上図参照）
  1. 2つのRadioButton オブジェクトを生成（変数名 rb1, rb2 とする）
  2. それらを VBox のコンテナ（変数名 vbox とする）に入れる

     VBox vbox = new VBox(rb1, rb2);
     

  3. vbox と ComboBox オブジェクト（変数名 cb とする）を BorderPane のコンテナ（変数名 root とする）に入れる

     BorderPane root = new BorderPane();
     root.setLeft(vbox);
     root.setCenter(cb);
     

     left, center プロパティのかわりに center, right プロパティを使ってもよい．
  4. root をシーングラフのルートノードとして Scene オブジェクトを生成

     Scene scene = new Scene(root);
     

• RadioButton はデフォルトで上の方のものが選択された状態にすること．
• 2つの RadioButton を同じ ToggleGroup に入れるのを忘れずに
• ComboBox のメニュー項目は自分で適当なものを考えればよい．

課題S(omake) †[edit]

p.201 の Chart の節にあるように，JavaFX の Chart クラスのサブクラスに，PieChart という円グラフを描くためのクラスがある．このクラスの使い方について調べ， https://sentan.rikou.ryukoku.ac.jp/about/career/ にある数理の2018年度卒業生の就職状況データの円グラフを描こう．

        ObservableList<PieChart.Data> pieChartData =
	    FXCollections.observableArrayList(
                new PieChart.Data("教育", 31.3),
                new PieChart.Data("情報通信業", 27.7),
                  :

• クラス名は G10PieChart とすること．
• 円グラフのパイ（スライス）は12時から時計回りにすること．
• 円グラフのタイトルを「数理情報学科就職状況（2018年度卒業生）」とすること．
• このデータの「教育」には，各種学校の常勤・非常勤講師，塾講師，教育産業，等も含まれている．中学校や高等学校の教諭として就職した者は決して多くないことに注意．