イントロダクション
以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思い、今回の「チュートリアルをやってみよう」となりました。
結論から言うと「書いて」「動かして」「ソースを理解」すればそれでOKです。「忘れた」とか「覚えていない」と言うのは「どこにやり方があったか?」を覚えておけば、やり方を引き出す方法が分かっていればOK!そう言う意味でJavaDocは最良の資料と言えると思います。
ところで、Oracleのチュートリアルでは、下のような木琴を使ったデモアプリがありますのでそれを動かしてみるのも面白いと思います。
JavaFXチュートリアル
ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。下のチュートリアル(OracleDoc)をやって行きます。
<チュートリアル>
- ラベル
- ボタン
- ラジオ・ボタン
- トグル・ボタン
- チェック・ボックス
- 選択ボックス
- テキスト・フィールド
- パスワード・フィールド
- スクロール・バー
- スクロール・ペイン
- リスト・ビュー
- 表ビュー
- ツリー・ビュー
- ツリー表ビュー
- コンボ・ボックス
- セパレータ
- スライダ
- 進行状況バーと進行状況インジケータ
- ハイパーリンク
- ツールチップ
- HTMLエディタ
- タイトル付きペインとアコーディオン
- メニュー
- カラー・ピッカー
- 日付ピッカー
- ページ区切りコントロール
- ファイル・チューザ
- UIコントロールのカスタマイズ
- 埋込みプラットフォームのUIコントロール
Lv1. ラベル(JavaFXの書き方)
ラベル表示は初めの HelloWorldでやったのですが、ちょいと、やり直します。
基本のコード
<ソースコード>
/** * OracleのJavaFXチュートリアル。 * Labelクラスで「Hello World」 * JavaDocです。このクラスは「@see」に記載しているサイトの * チュートリアルをやります。このクラスではLabelクラスの使用法を実行します。 * * @author takunoji * @see https://docs.oracle.com/javase/jp/8/javafx/user-interface-tutorial/label.htm#CIHHFIBJ * 2019/03/03 */ public class Lv1_Label extends Application { /** * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品) * のメソッドをオーバーライドする。 * {@link Application#launch(String...)}から呼び出される。 */ @Override public void start(Stage primaryStage) throws Exception { // チュートリアルには省略されている部分 Group group = new Group(); // この部分がチュートリアルに記載されている。 Label label1 = new Label(); Label label2 = new Label(); Image image = new Image(this.getClass().getResourceAsStream("woodTile.png")); Label label3 = new Label("Search", new ImageView(image)); // 上のコンポーネント(Labelとか、イメージとか) group.getChildren().addAll(label1, label2, label3); // チュートリアルでは省略されている Scene scene = new Scene(group, 300, 300); primaryStage.setScene(scene); primaryStage.setTitle("チュートリアル1"); primaryStage.show(); } /** * メインメソッド。 * Apllicationクラスのlaunchメソッドを呼び出す。 * * @param args プログラム引数 */ public static void main(String[] args) { launch(args); } }
とりあえずコードを眺めたと思うのですが、理解しなくておっけ〜です。
ただ、Javaってやつは、とりあえず、メインメソッドが、はじめに動くという事を覚えてください。
上のコードは以下の様な処理をしています。
<処理内容>
- メインメソッドからApplicarionクラスの「launch()」を呼び出します。
- 「launch()」が起動したら「start()」が呼び出されます。
- 画面に表示するためのレイアウトクラス(Groupクラス)をインスタンス化
- コンポーネント(ラベル)を作成し、レイアウトクラス(Group)に追加
- レイアウトクラスをSceneクラスに設定(追加と同義)
- SceneをStageクラス(primaryStage)に追加
- Stage#show()を呼び出す。
Java Fxでは、画面(シーン(scene))にレイアウト(GroupやBorderPaneなど)を配置してコンポーネント(ラベルやボタンなど)を追加します。
- bodyタグがStage(ステージ)
- divタグ(一番外側)がシーン
- 内側にあるdiv(右寄せとか)はレイアウト
- labelやinputなどはコンポーネント
上記のプログラムも同様に
- ステージ(Stage)にシーンを追加、
- シーンへレイアウト(Group)を追加
- レイアウトにコンポーネントを追加
という様な事をやっています。
ちょいと長くなってしまいましたが、コーディングの動画も作成してみました。this.getClass().getResourcesAsStream()のところでちょいとつまづきました。これはこのクラスがあるディレクトリを基準にファイルなどの参照を取得します。
Lv2.ラベルにFontを設定
<Lv1の「start()」を修正しました。>※赤い字が修正ポイントです。
@Override public void start(Stage primaryStage) throws Exception { // チュートリアルには省略されている部分 Group group = new Group(); // この部分がチュートリアルに記載されている。 // Fontを使用する方法 Label label1 = new Label(); label1.setFont(new Font("Aeial", 30)); Label label2 = new Label(); label2.setFont(new Font("Cambria", 32)); Image image = new Image(this.getClass().getResourceAsStream("woodTile.png")); Label label3 = new Label("Search", new ImageView(image)); // 上のコンポーネント(Labelとか、イメージとか) group.getChildren().addAll(label1, label2, label3); // チュートリアルでは省略されている Scene scene = new Scene(group, 300, 300); primaryStage.setScene(scene); primaryStage.setTitle("チュートリアル1"); primaryStage.show(); }
表示結果が変わりません。。。これは、3つ目のラベルが初めのラベルの上にあるためです。
<ラベルを表示しない版。>
一部修正してこんな感じにします。
// 上のコンポーネント(Labelとか、イメージとか) group.getChildren().addAll(label1, label2/*, label3 */);
「//」が書かれた1行は「コメント」と解釈されます。
同様に「/*」「*/」で挟まれている部分もソースコードとして解釈されません。今回は後者を使いました。
ちなみにコードを実行する形にするのは「コンパイラ」の役目です。JavaのコンパイラはJDKの中に入っています。JDKはJavaを起動する為のフォルダなんだな!と理解してもらえればOK!
とりあえずは、コードを写経して、実行して「動いた!」と言う感動を味わっていただきたく思います。
でわでわ。。。
[次へ >>>](https://zenryokuservice.com/wp/2019/03/04/javafx-%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%80%9c%e4%bb%8a%e5%ba%a6%e3%81%93%e3%81%9d%e3%80%81%e5%88%9d%e3%82%81%e3%81%a6%e3%81%a7%e3%82%82%e5%a4%a7%e4%b8%88%e5%a4%ab2/)