日記#744#745

#744 8月13日

今回はドラッグアンドドロップを自分の対象でやってみた。
結果はすごく簡単だったので、またあとでまとめておきたい。

以下、本日の作業結果やその詳細を記載していく。

結果

ドラッグアンドドロップした画像のID

Init Complete
ImageView[id=Image_01, styleClass=image-view]
Image_01
DragDetected
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドロップ完了
ドラッグアンドドロップ完了

今度は任意の対象からドラッグアンドドロップができるようにしてみた。
結果はできた。

2回目にドラッグアンドドロップした画像のID

ドラッグアンドドロップの処理結果全文

Init Complete
Button[id=preButton_ImageSource_01, styleClass=button]''
Button[id=preButton_ImageSource_01, styleClass=button]''
ImageView[id=Image_01, styleClass=image-view]
Image_01
Button[id=preButton_ImageSource_02, styleClass=button]''
Button[id=preButton_ImageSource_02, styleClass=button]''
ImageView[id=Image_02, styleClass=image-view]
Image_02
Button[id=preButton_ImageSource_01, styleClass=button]''
Button[id=preButton_ImageSource_01, styleClass=button]''
ImageView[id=Image_01, styleClass=image-view]
Image_01
DragDetected
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドロップ完了
ドラッグアンドドロップ完了
Button[id=preButton_ImageSource_02, styleClass=button]''
Button[id=preButton_ImageSource_02, styleClass=button]''
ImageView[id=Image_02, styleClass=image-view]
Image_02
DragDetected
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドロップ完了
ドラッグアンドドロップ完了

下記で処理結果を分けて説明する

初期設定完了処理結果

Init Complete

1つ目のドラッグアンドドロップ可能対象の情報取得結果(クリックのみ)

Button[id=preButton_ImageSource_01, styleClass=button]''
Button[id=preButton_ImageSource_01, styleClass=button]''
ImageView[id=Image_01, styleClass=image-view]
Image_01

2つ目のドラッグアンドドロップ可能対象の情報取得結果(クリックのみ)

Button[id=preButton_ImageSource_02, styleClass=button]''
Button[id=preButton_ImageSource_02, styleClass=button]''
ImageView[id=Image_02, styleClass=image-view]
Image_02

1つ目のドラッグアンドドロップ実行結果

Button[id=preButton_ImageSource_01, styleClass=button]''
Button[id=preButton_ImageSource_01, styleClass=button]''
ImageView[id=Image_01, styleClass=image-view]
Image_01
DragDetected
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドロップ完了
ドラッグアンドドロップ完了

2つ目のドラッグアンドドロップ実行結果

Button[id=preButton_ImageSource_02, styleClass=button]''
Button[id=preButton_ImageSource_02, styleClass=button]''
ImageView[id=Image_02, styleClass=image-view]
Image_02
DragDetected
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドラッグ中
ドロップ完了
ドラッグアンドドロップ完了

型変換を行ったことで上手く処理が動くようにできた。

getparent = (Parent) event.getSource();

詳細：
event.getSource()の型はObject、getparentの型はParent
Parentでないと配下のオブジェクトを取得できない
ParentにObjectは代入できないので(Parent)を付与することで型を統一している

次はドラッグアンドドロップが完了したときにGridPane(表)の列を増やしその中に様々なオブジェクトを入れるようにしてみた。
今はがたがただが、下の結果のようにドラッグアンドドロップが完了した際に表の列を増やすことはできた。
ドラッグアンドドロップによるテキスト入力も上手くできているので、修正あるのみだ。

#745 8月14日

今日はGridPane(表)をの行を増やす方法について理解を深めた。
今回は//でコメントを記載しておく
各行のSystem.out.println()はコマンドプロンプトなどのターミナル(PCにプログラムを命令する画面)に表示させるための処理なので合ってもなくてもよい。

//表に追加するオブジェクトを用意する。今回はボタン
Button anc_0 = new Button();
Button anc_1 = new Button();
Button anc_2 = new Button();

//先に用意していた表(target)の列の数を数える
//GridPaneは0番から始まるのでこのカウントはそのまま使用する(できる)
int gridpane_rowc = target.getRowCount();
System.out.println(gridpane_rowc);

//各オブジェクトの置く場所を決める(あくまでここでは設定しているだけ)
//GridPane.setConstraints(<オブジェクト>, <列の番号>, <行の番号>);
GridPane.setConstraints(anc_0, 0, gridpane_rowc);
GridPane.setConstraints(anc_1, 1, gridpane_rowc);
GridPane.setConstraints(anc_2, 2, gridpane_rowc);

//設定したオブジェクトを実際に表に落とし込む
//公式文書でも忘れるなと記載されている
gridpane.getChildren().addAll(anc_0, anc_1, anc_2);
System.out.println(gridpane);

結果画面

参考(GridPaneの公式文書)：

GridPane (JavaFX 8)

今回の注意点は

GridPane.setConstraints(<オブジェクト>, <列の番号>, <行の番号>);
は同じオブジェクトで実施すると上書きしてしまうので注意

ということである。

この注意点を実際にやってみた結果がこちら。

Button anc = new Button();
GridPane.setConstraints(anc, 0, gridpane_rowc);
GridPane.setConstraints(anc, 1, gridpane_rowc);
GridPane.setConstraints(anc, 2, gridpane_rowc);

gridpane.getChildren().addAll(anc);
System.out.println(gridpane);

結果：GridPaneの(1, 2)の位置にボタンが設置される

理由：ancの設定は1つしか設定できないので最後の1行の設定のみ適用されてしまった。

そのため、同じ要素(ボタンなど)を持つオブジェクトを増やす場合は別なオブジェクトになるように変数を用意すると良い。
1番楽なのは配列やリストと呼ばれる複数要素をまとめて管理するできるような物を使用すると良いかも。
※配列やリストはインデックス(または要素)と呼ばれる[]内の数字を変えることで同じ物でも全く別の物として認識させることができる。
加えて、[]内の数字は変数で自由に操れるので、ループ文を使用して短く簡単に多くの変数を作成することができる。

おまけ
同じ変数に別な設定を入れた(私の目線)場合に、同じ変数で3個分設定を適用してみる

Button anc = new Button();
GridPane.setConstraints(anc, 0, gridpane_rowc);
GridPane.setConstraints(anc, 1, gridpane_rowc);
GridPane.setConstraints(anc, 2, gridpane_rowc);

gridpane.getChildren().addAll(anc, anc, anc);
System.out.println(gridpane);

結果：
エラー吐いて終了

理由：
ancは1つしか設定されていないので3つも設定できない。
当たり前。

公式文書ないでも示してある.addを使用した方法も試してみたが、こちらは1行の1マス分の設定したらその先でエラー吐いてしまったので、複数のオブジェクトを複数マスに当てはめる際は

GridPane.setConstraints(<入れたいオブジェクト>, <行の番号>, <列の番号>);
<変数>.getChildren().addAll(<入れたいオブジェクト>);

でとりあえずは良いと思う。

次回は毎回つぶれてしまう(短くなってしまう)1行目の大きさを整えて追加行の大きさを整えられるようにしたい。

ちなみに今回のテストでは元々あった表の大きさを半分にして行が追加されている。

GridPaneとは少しずつ仲良くなってこれていると感じ出ているが、JavaFXとは仲良くなれる日はまだまだ遠そうだ。

追記の小言
実はこの日記はもう2年以上続いているみたいだった。
※#730で2年目経過
今日知った。

2年。早い。
だが、私よ。
今のお前には何ができる。

まだ、なにも変わっていないぞ。
なにも変われていないぞ。

ということで、ちゃんと気を引き締めて生きていきたい。