イントロダクション

以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思い、今回の「チュートリアルをやってみよう」となりました。

結論から言うと「書いて」「動かして」「ソースを理解」すればそれでOKです。「忘れた」とか「覚えていない」と言うのは「どこにやり方があったか？」を覚えておけば、やり方を引き出す方法が分かっていればOK!そう言う意味でJavaDocは最良の資料と言えると思います。

ところで、Oracleのチュートリアルでは、下のような木琴を使ったデモアプリがありますのでそれを動かしてみるのも面白いと思います。

JavaFXチュートリアル

ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。下のチュートリアル(OracleDoc)をやって行きます。

＜チュートリアル＞

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("チュートリアル１");
          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("チュートリアル１");
    primaryStage.show();
}

表示結果が変わりません。。。これは、３つ目のラベルが初めのラベルの上にあるためです。

＜ラベルを表示しない版。＞

一部修正してこんな感じにします。

// 上のコンポーネント(Labelとか、イメージとか)
group.getChildren().addAll(label1, label2/*, label3 */);

「//」が書かれた１行は「コメント」と解釈されます。

同様に「/*」「*/」で挟まれている部分もソースコードとして解釈されません。今回は後者を使いました。

ちなみにコードを実行する形にするのは「コンパイラ」の役目です。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/)

JavaFX チュートリアル〜今度こそ、初めてでも大丈夫:Label〜

イントロダクション

JavaFXチュートリアル

Lv1. ラベル(JavaFXの書き方)

基本のコード

Lv2.ラベルにFontを設定

投稿者:

takunoji

コメントを残すコメントをキャンセル

イントロダクション

JavaFXチュートリアル

Lv1. ラベル(JavaFXの書き方)

基本のコード

Lv2.ラベルにFontを設定

投稿者:

takunoji

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル