何をやっていこう - 気になるITまわり

前回の更新で、JavaFXの基本的な文法は全て抑えてしまっている

で、次から何をやっていこうかすごい悩んでいたんだけど・・・

ってか、まだ悩んでいるんだけど適当にいこう

悩んでいる間にJavaFXもちょくちょくアップデートされてるみたい

JavaFXでは基本的にStageというオブジェクトの中にUIの記述をしていく

import javafx.scene.Scene;
import javafx.stage.Stage;

Stage {
  width: 100
  height: 100
  scene: Scene {
  }
}

で、StageオブジェクトのsceneっていうのにUIの部品を足していく
widthとheight属性はそれぞれ、画面の横と縦の大きさ

import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

scene: Scene {
  content: [
    Rectangle {
      width: 20
      height: 20
    },
    Rectangle {
      x: 10
      y: 10
      width: 20
      height: 20
      fill: Color.RED
    }
  ]
}

2つの四角形を書いていて、2つ目のRectangleは縦と横にそれぞれ10ずつづらして、赤で塗りつぶすっていう記述が上のコード

1つ目と、2つ目のRectangleを入れ替えて以下のようにすると、黒い四角形が上になる

import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

scene: Scene {
  content: [
    Rectangle {
      x: 10
      y: 10
      width: 20
      height: 20
      fill: Color.RED
    },
    Rectangle {
      width: 20
      height: 20
    }
  ]
}

content属性の中で下のほうに記述がある方が、UIでは上にくる仕組みらしい

今回のソース、まとめ

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

Stage {
    width: 100
    height: 100
    scene: Scene {
        content: [
            Rectangle {
                width: 20
                height: 20
            },
            Rectangle {
                x: 10
                y: 10
                width: 20
                height: 20
                fill: Color.RED
            }
        ]
    }
}