JavaFXの「Hello World」サンプル

JavaのGUIはSwingなどを利用して作成されてきました。このSwingによるGUI作成にはいろいろと問題がありました。まず、「非常に面倒である」という点。Swingは、正直、ちょっとしたものを作るには複雑すぎるのです。JavaFXは、非常にシンプルなスクリプト言語の形をしています。

Swingと同等レベルのGUIを構築できながら、しかも扱いは非常に単純です。また、JavaFXによるGUIの作成は、手続き方式ではなく「宣言」式に行うことができます。GUIを構造的に記述し作成できるのです。これは、非常に分かりやすいです。

では、JavaFXを使って簡単な「Hello World」サンプルを作ってみましょう。

1)、JavaのCanvas/Panelみたいなシーン(Scene)を追加する


import javafx.stage.Stage;
import javafx.scene.Scene; // added Scene fucntionality
import javafx.scene.paint.Color; // added colors

2)、Stageを追加する


Stage {
title: “Hello World” // Changed title to “Hello World”
visible: true
scene: Scene {
width: 250 // Scene width instead of Stage width
height: 80 // Scene height instead of Stage
fill: Color.BLACK // Color is Black
}

3)、実行してみよう

HWScene

4)、全部黒だったら見た目は悪いですね。次は文字を表示用長方形を追加する


import javafx.scene.shape.Rectangle; // For drawing Rectangles

下記のソースも追加する


scene: Scene {
width: 250
height: 80
fill: Color.BLACK
content: Rectangle { // add an array of contents, here just one element
x: 10 // x position for the rectangle
y: 10 // y position for the rectangle
width: 230 // width of rectangle starting at ‘x’
height: 60 // height of rectangle starting at ‘y’
fill: Color.BLUE // Fill rectangle with BLUE color
}
}

5)、もう一回動かしてみよう

HWRect

6)、最後は、表示文字ソースを追加する


import javafx.scene.text.Text;
import javafx.scene.text.Font;

下記のソースも追加する

fill: Color.BLACK
content: [ // Note that contents is now an array instead
Rectangle { // this code remains the same as above except that the corners are round now
x: 10 y: 10
width: 230 height: 60
arcWidth: 20 arcHeight: 20
fill: Color.BLUE
}
Text { // This is the new code I added for adding text lables
x: 40 y: 50
font: Font { size: 20 }
fill: Color.WHITE
content: “Hello JavaFX World!”
}
]

7)、最終の結果:

HWButton

Leave a Reply

Your email address will not be published. Required fields are marked *