Graphics/2021/ex13 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Graphics/2021/ex13 へ行く。
• Graphics/2021/ex13 の差分を削除

#author("2021-07-12T11:13:49+09:00","default:takataka","takataka")
#author("2021-07-12T11:14:01+09:00","default:takataka","takataka")
*グラフィックス基礎及び実習 2021年度 第13回 実習と宿題 [#e9701092]

#contents

//&color(#ff0000){''工事中''};　
//**注意 [#notice]


**課題A,Cのための準備 [#o0bcb890]

+ Graphics チームから以下の２つのクラスファイルをダウンロードして，自分の Graphics20XY フォルダに置く．ファイルの配布場所については，Graphics チームの「ch05. 全般的な質問用」チャネルの「実習用のファイル等の配布場所」という記事を参照してください．
-- HW3Sample.class
-- HW3PaneSample.class
-- hw3pane.css
+ 以下のプログラムを作って，HW3Sample クラスの動作確認をしよう．
#pre{{
public class Test4HW3Sample {
     public static void main(String[] args){

        HW3Sample p1 = new HW3Sample();
        System.out.println("名前: " + p1.getName());
        System.out.println("身長(cm): " + p1.getHeight());
        System.out.println("体重(kg): "+p1.getWeight());
        System.out.println("BMI: " + String.format("%.2f", p1.calcBMI()));
        System.out.println("判定: " + HW3Sample.getMessage(p1.calcBMI()));
        System.out.println();

        HW3Sample p2 = new HW3Sample("ふがよ", 234.5, 50.0);
        System.out.println("名前: " + p2.getName());
        System.out.println("身長(cm): " + p2.getHeight());
        System.out.println("体重(kg): "+p2.getWeight());
        System.out.println("BMI: " + String.format("%.2f", p2.calcBMI()));
        System.out.println("判定: " + HW3Sample.getMessage(p2.calcBMI()));
        System.out.println();

        HW3Sample.setBorder1(5.0);
        HW3Sample.setBorder2(8.0);
        System.out.println("判定: " + HW3Sample.getMessage(p2.calcBMI()));

    }
}
}}
+ 以下のプログラムを作って，HW3PaneSample の動作確認をしよう
#pre{{
import javafx.application.Application;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;

public class G14HW3 extends Application {
    @Override
    public void start(Stage pstage) {
	HW3PaneSample hw3pane1 = new HW3PaneSample();
	HW3PaneSample hw3pane2 = new HW3PaneSample();
	HBox root = new HBox(hw3pane1, hw3pane2);
	root.getStyleClass().add("myPane");
	Scene scene = new Scene(root);
	scene.getStylesheets().add("hw3pane.css");
	pstage.setScene(scene);
	pstage.setTitle("G14HW3");
	pstage.sizeToScene();
	pstage.show();
    }
    public static void main(String[] args) {
	launch(args);
    }
}
}}
+ G14HW3 を実行してみましょう．テキストフィールドに適当な文字・数字を入力して動作確認しよう．

ちなみに，3つのクラスの関係は下図のようになってます（Sampleのついてないクラス名で説明しています）．

&ref(https://www-tlab.math.ryukoku.ac.jp/~takataka/course/Graphics/G14HW3.png,nolink);



**実習課題A 締切: 当日13:30 [#kadaiA]

&color(#00a000){''以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください．''}; ファイル名の間違いに注意

以下のAPI仕様を満たす HW3 クラスを作ろう
- 以前に類似のクラス（HWやHW2）を作っているが，それらとは別に（拡張するのではなく）新規に作成すればよい．
- ''練習のため，HW2.java などを見ないで一から作ってみることをおすすめします．''
- 動作確認のための手続きは，main メソッドに適当に書くか，Test4HW3Sample を書き換えて使ったらよい（Test4HW3Sample ではすべてのメソッドの動作確認ができているわけではないことに注意）．

***HW3 クラスのAPI仕様 [#gd341f70]

- ''コンストラクタ'' 
>
:HW3()| 名前 "ほげお"，身長 170.0[cm]，体重 62.0[kg]のインスタンスを生成．
:HW3(String n, double h, double w)| 名前 n，身長 h[cm]，体重 w[kg]のインスタンスを生成．
<
- ''メソッド''  
>
:void setName(String n)| このインスタンスの名前を n にする．
:void setHeight(double h)| このインスタンスの身長を h にする．
:void setWeight(double w)| このインスタンスの体重を w にする．
:String getName()| このインスタンスの名前の値を返す．
:double getHeight()| このインスタンスの身長の値を返す．
:double getWeight()| このインスタンスの体重の値を返す．
:double calcBMI()| このインスタンスのBMIを計算して返す． &mathjax{ \textrm{BMI} = (\mbox{体重[kg]}) / (\mbox{身長[cm]}/100)^2};
:static String getMessage(double bmi)| bmi が「境界値その1」 未満，「境界値その1」 以上 「その2」 未満，「境界値その2」 以上の三つの場合に応じた文字列を返す．戻り値は，順に "やせてんなぁ"，"ふつー"，"太ってる…かな？"． （※注意: 以前の課題と違い，返す文字列にはBMIの値は含みません）
:static void setBorder1(double val)| このクラスのBMIの「境界値その1」の値を val にする．（※注意: このメソッドを呼ぶことで代入される境界値の大小が逆になることもありえるが，それをチェックしたりはしなくてよい）
:static void setBorder2(double val)| このクラスのBMIの「境界値その2」の値を val にする．（注意： 上に同じ）
:static double getBorder1()| このクラスのBMIの「境界値その1」の値を返す．
:static double getBorder2()| このクラスのBMIの「境界値その2」の値を返す．
<
- ''注意''  
-- フィールド欄はありません.ということは...
-- BMIの「境界値その1」の初期値は 20.0，「その2」の初期値は 25.0 にしてください．



**実習課題B 締切: 当日16:00 [#kadaiB]

&color(#00a000){''以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください．''}; ファイル名の間違いに注意．

*** 悪い教員に唆されて青春の無駄遣いをしてしまった先輩がた [#g45441d3]

の成果を，Graphicsチームの方で紹介してます（[[Doraる？>https://teams.microsoft.com/l/message/19:40a62eec9dc24f7cacd430b514b5bb0c@thread.tacv2/1625059466556?tenantId=23b65fdf-a4e3-4a19-b03d-12b1d57ad76e&groupId=0f35e9cd-13b7-4af0-81f8-d2d09ce36557&parentMessageId=1625059466556&teamName=%E7%A7%91%E7%9B%AE%20%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E5%9F%BA%E7%A4%8E%E5%8F%8A%E3%81%B3%E5%AE%9F%E7%BF%92%20%20%E9%AB%98%E6%A9%8B%E9%9A%86%E5%8F%B2&channelName=ch05.%20%E5%85%A8%E8%88%AC%E7%9A%84%E3%81%AA%E8%B3%AA%E5%95%8F%E7%94%A8&createdTime=1625059466556]]）．大学院楽しいよ


***Step1 真っ白なキャンバス [#g9529a1f]

+ 次の内容のソースファイル DoraPane.java を作ろう．
#pre{{
import javafx.scene.layout.*;
import javafx.scene.canvas.*;
import javafx.scene.paint.*;

public class DoraPane extends Pane{

    public DoraPane(){
	Canvas canvas = new Canvas(300, 300);
	this.getChildren().add(canvas);
        this.setStyle("-fx-background-color: white;");
	this.draw(canvas);
    }

    private void draw(Canvas c){
        // 今はまだ空っぽ
    }
}
}}
+ 次の内容のソースファイル G13Dora.java を作ろう．
#pre{{
import javafx.application.Application;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;

public class G13Dora extends Application {
    @Override
    public void start(Stage pstage) {
	DoraPane dora = new DoraPane();
	BorderPane root = new BorderPane();
	root.setCenter(dora);
	Scene scene = new Scene(root);
	pstage.setScene(scene);
	pstage.setTitle("G13Dora");
	pstage.sizeToScene();
	pstage.show();
    }
    public static void main(String[] args) {
	launch(args);
    }
}
}}
+ G13Dora.java をコンパイルして G13Dora を実行しよう．この時点では 300x300 の真っ白なキャンバスが描かれるはずである．

*** Step2 Dora を描く [#n517f7d5]

draw メソッドの中身を書いて，Doraを描こう．ただし，
- ソースには，どこがどの部分を描いているのか分かるように，コメントをたくさんつけること．
- ''Dora は DoraPaneSample のものより簡略化しないこと．頭部は角が丸い矩形として描くこと．''これらの条件を守れば好きにカスタマイズしてよい．口やらひげやら描くとか，妹の方にするとか，[[きれいなジャイアン>https://www.google.co.jp/search?q=%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AA%E3%82%B8%E3%83%A3%E3%82%A4%E3%82%A2%E3%83%B3&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwj9_dugtILcAhWBvrwKHTflDY8QsAQIJg&biw=1595&bih=1755]] にするとか． 
- ''顔の部品を描く順序に注意しよう．特に，目の部分''

*** Step3 仕上げよう [#v3a4aee7]

+ [[ex12課題BのDoraPaneSampleのAPI>../ex12#DoraPaneSample]] を参考に，DoraPane.java に必要なものを追加しよう．
-- onNose メソッドは，自分の Dora の鼻の位置に合わせるようにしよう．
-- メソッド名や変数名などは変えてはいけませんが，mEntered などの変数の値は，自分の Dora らしくしたらよいです
+ G12Dora で DoraPaneSample を使っているところを DoraPane に変更して，ちゃんと動くことを確認しよう．

*** Step4 提出しよう [#de6d5ee5]

提出するのは，DoraPane.java のみです．

**実習課題C 締切: 来週13:30 [#kadaiC]

&color(#00a000){''以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください．''}; ファイル名の間違いに注意．


次のことをやりましょう．
+ HW3PaneSample と同様の動作をするプログラムを作る．クラス名は HW3Pane とする
+ G14HW3 で HW3PaneSample を使っているところを HW3Pane に書き換えて動作確認する
+ 完成した HW3Pane.java を提出する

次のことに注意
- サンプルのようなレイアウトは，GridPane を使えば実現できる．
-- HW3Pane は Pane のサブクラス...DoraPane と同じですね．
DoraPane の場合は，コンストラクタ中で
 this.getChildren().add(canvas);
して，これ（DoraPaneのインスタンス）に canvas を載せてました（cf. [[#kadaiB]]）．HW3Pane の場合は，canvas のかわりに GridPane のインスタンスを載せる，そしてその GridPane のインスタンスには Label とか TextField とか載せる，と考えたらよいでしょう
- 身長／体重のテキストフィールドのイベント処理では，double 型と解釈できない文字列が入力された場合の例外処理を行う必要がある．サンプルの動作を確認しよう．[[Graphics/2021/ex11#kadaiA]] で作った CounterApp2 が参考になるかも．
- BMI のところは小数点以下2桁で値が表示されている．これを実現するためには，String クラスの format というクラスメソッドを使い，
 String.format("%.2f", double型の値)
とすればよい．このメソッドの戻り値は String である．
- イベント処理の際にテキストフィールドやラベルに setText することになるが，身長フィールドの処理と体重フィールドの処理等重複する部分が大きいので，その部分を定義したメソッドを作って，それを呼ぶ形にするとすっきりするかも．
- イベント処理の際にテキストフィールドやラベルに setText することになるが，身長フィールドの処理と体重フィールドの処理等重複するところが大きいので，その部分を定義したメソッドを作って，それを呼ぶ形にするとすっきりするかも．

**宿題 [#hw]
&color(#00a000){''次回授業までに必ずやっておくこと''};

次回の授業の資料（PDFや動画）等は [[こちら>../../2021#ex14]] からどうぞ．

+ 講義資料を入手．紙でほしい方は各自で印刷してください．
>
キャンパス内各所に設置されたプリンタで印刷することもできます．くわしくは「ポータル > 情報環境 > マニュアル > [[印刷利用マニュアル>https://www.media.ryukoku.ac.jp/local/manual/printsystem_manual.pdf]]」参照．
<
+ 授業動画を視聴する
>
学内の実習室等に設置の PC ではスピーカから音が出ませんので，イヤフォン/ヘッドフォンを用意する必要あり
<
+ 講義資料・授業動画に出てくるプログラムを実際に作って実行してみる

**実習課題S(omake) 締切:  [#kadaiS]

&color(#00a000){''これはおまけ課題です．やらなくても減点になりません．やったら加点かも''}; 

（moodle の「おまけ課題」のところに，「自由課題」というのを書いときました．よかったら見てね）

//&color(#ff0000){''工事中''};　

今回出題のおまけ課題はありません．[[../ex14#kadaiS]] をどうぞ．