スケジュール｜前のページ｜Javaの初歩１

JAVAの初歩２

WINDOWSやMacでは，プログラムが起動すると画面上に「窓」が現れ，そこに様々な表示がされるようになっています． JAVAでもこのようなプログラムを作ることができます．こういうタイプのプログラムは，GUI（Graphical User Interface）プログラムと呼ばれています．

JAVAにおけるGUIプログラムの作り方

「窓」のようなものを最初からプログラムするのはかなり大変なので，JAVAでは予め基本的なGUI部品のプログラムが用意されていて，それらを利用する形でGUIプログラムを作成します．

これらのGUI部品のセットにはいくつかの種類があり，今までは「AWT」や「SWING」と呼ばれるGUI部品とそれを操作するメソッドのパッケージを使用していましたが，最近では「JavaFX」と呼ばれるパッケージを利用することが多くなっているので，この授業では，「JavaFX」を使用します．

JavaFXの構造

JavaFXのプログラムは「Stage」，「Scene」，「Node」という３つの大きな構成要素から構成され，以下のような包含関係を持ちます．

StageJavaFXプログラムの基礎となる要素．窓そのものと考えてよい．
Scene窓に設置される画面．この上に以下の「Node」を使用して作成された「Scene Graph（表示される要素全体）」を表示する．
NodeRoot Node最上位の画像構成要素．内部に全ての要素を含むコンテナと呼ばれるノードで構成される
Branch Node内部に他の要素を持つことができるコンテナで構成される
Leaf Node最も基本的な画像構成要素．図形そのものやコントロールと呼ばれる操作できるノードで構成される
Stage Scene Root Node Branch Node Leaf Node Leaf Node Leaf Node

GUIプログラムの基本構造

以下に示したものが，JavaFXを使用するプログラムの基本的な構造です．クラス名は「FirstGui」にしています． 


import javafx.application.Application; 
import javafx.stage.Stage;  

public class FirstGui extends Application { 
   @Override     
   public void start(Stage stage) throws Exception {            
      //Stageの表示 
      stage.show(); 
   }    
   public static void main(String[] args){          
      launch(args);     
   }         
}

ここで，使用した命令について簡単に説明しておきます．

import文

プログラムの最初の次のような部分は「import文」と呼ばれています．

import javafx.application.Application;
import javafx.stage.Stage;
…
JAVAには，あらかじめ様々な処理をするクラスが用意されています．これらは，種類ごとにまとめられていて「パッ ケージ」と呼ばれています．パッケージの中のクラスを利用する場合は，プログラムの最初で「import文」を使って呼び出しておきます．

ここの例では，JavaFXの命令を使用するので，それが入っているパッケージ「javafx」を使用し，その中の必要なクラスを呼び出してます．呼び出し方は，「パッケージ名.分類名.クラス名」のように書きます．最初の行では，「javafx」パッケージの中の「application」に分類されている「Application」というクラスを呼び出しています．

クラスの継承

クラス名の部分では，JavaFXの基本となる「Applicationクラス」の継承を行っています． 

public class FirstGui extends Applocation{
	
}
クラスの継承と言うのは，既に存在しているクラスを基にして新しいクラスを作る時に用いる書き方です． 継承したクラスでは，何も書かなくても基にしたクラスのプログラムとして動きます．したがって，新しいクラスには，変更もしくは新たに付け加える処理につ いてだけプログラムします．

ここでは，あらかじめ用意されているクラス「Application」を継承して新しい「FirstGui」と言うクラスを作成しています．

メソッドのオーバーライド

継承したクラスのメソッドを書き換えることを「オーバーライド」と言います．大抵のJavaプログラムは元のメソッドを必要に応じて書き換えて作成します． 

@Override
public void start(Stage stage) throws Exception{

オーバーライドした場合は，書き換えるメソッドの前に「@Override」を記述します．ここでは，「start」メソッドをオーバーライドしています．

start メソッド

startメソッドは JavaFX Application が起動したときに自動的に実行され，内部には，窓を表示したり，Scene Graphを構成するなど基本的な命令を記述します. 

 public void start(Stage stage) throws Exception{


 }

ここでは，窓の土台となる「Stage」を「stage」という名前を付けて作成しています．

この Stage の上に，様々な Node を使用して構成した Scene Graph を表示する Scene を設置することによって，GUIプログラムを作成します．

mainメソッド

以前の説明どおり，実際に実行される処理を記述するメソッドです． 

 public static void main(String[] args){
    launch(args);
 }

ここでは，launchメソッドでJavaFXアプリケーションを起動しています．

最初のGUIプログラム

上で記述したプログラムは，窓の土台（窓枠）の部分だけなので，窓の内側の部分のプログラムを付け足して ディスプレイに「窓」を表示するプログラムを作ってみましょう．手順は以下のようにします．

1．クラスの作成

新しいファイル作成し，Javaモードにする．

上の説明に倣って，まず，import文とクラスを作成し，内部にstartメソッドを書きます． 

import javafx.application.Application; 
import javafx.stage.Stage;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{

	}
}

2．Scene Graphの作成

上の説明のプログラムでは，窓枠の中身（窓ガラスの部分）が何も無いので， startメソッドの中に，窓に表示される内容を表す，「Scene Graph」を用意します．

まず，画像構成要素（窓ガラスの上に表示するもの）の一番下の基礎となる「Root Node」を作ります．今回は，「Group」というコンテナ要素（入れ物）を使用し，「root」という名前で作成します．

具体的には，以下の命令をstartメソッドの中に書きます．

	Group root = new Group();
さらに，Groupという新しい要素を使用しているので，import文に以下のような行を追加します．
	import javafx.scene.Group;

全体は次のようになります． 

import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();

	}
}

3．Sceneの作成

Scene Graphを組み込んだ「Scene」（実際に窓に表示される画面）を横幅と高さを設定して作成します.

今回は「scene」という名前で，前述の「root」要素を組み込み，横幅 600，高さ 300で作成しています． 具体的には，前述の記述の後に次のように書きます．

	Scene scene = new Scene(root, 600, 300);
さらに，Sceneという新しい要素を使用しているので，import文に以下のように追加します． 
	import javafx.scene.Scene;
import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();
		Scene scene = new Scene(root, 600, 300);

	}
}

4．Stageの設定

窓の土台となるStageには，Stageを作成した後に以下のような記述をすることでタイトルを設定できます．タイトルはプログラムの窓枠に表示されます．

	stage.setTitle("First GUI Application");
import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();
		Scene scene = new Scene(root, 600, 300);
		
		stage.setTitle("First GUI Application");

	}
}

5．StageにSceneを設置

「stage」(Stage) に作成した「scene」(Scene) を設置して窓に表示される画面が完成します．

具体的には，次のように「setScene」を用います．

	stage.setScene(scene);
import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();
		Scene scene = new Scene(root, 600, 300);
		
		stage.setTitle("First GUI Application");
		stage.setScene(scene);

	}
}

6．Stageを表示する

完成した画面は，まだ窓上に表示されていません．従って，最後に窓を表示するよう命令します．

具体的には，次のように記述してstartメソッドを完成させます．startメソッドを閉じるのを忘れずに． 

	stage.show();
import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();
		Scene scene = new Scene(root, 600, 300);
		
		stage.setTitle("First GUI Application");
		stage.setScene(scene);
		
		stage.show();

	}
}

7．mainメソッドを書く

mainメソッドは無くても動きますが，一応プログラムの起動命令を書いておきます．

public static void main(String[] args){
    launch(args);
}
import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();
		Scene scene = new Scene(root, 600, 300);
		
		stage.setTitle("First GUI Application");
		stage.setScene(scene);
		
		stage.show();

	}
	
	public static void main(String[] args){
		launch(args);
	}

}

練習問題２ー1

窓を作るプログラムを作り，コンパイル，実行してみる． クラス名は「Ex02_1」としなさい．

コントロールの使用

JavaFXには予め「Scene Graph」を構成するための「Control」と呼ばれる様々な部品が用意されています．

ここでは，文字列を表示する為の「Label」というControlを使用してみます．

ラベルの作成

「root（Root Node）」を作成した後に記述します．

「Hello JavaFX!」と表示する「Label」を「label」という名前で作成するためには以下のように記述します． 

    Label label = new Label("Hello JavaFX!");

「Label」を使用する場合は，次のimport文を追加します． 

    import javafx.scene.control.Label;

ラベルの設置

「label」を作成した後に，次のようにして「label」を「root」（Root Node）に追加します． 

    root.getChildren().addAll(label);

これで，Root NodeにLabelというコントロールを設置したScene Graphが出来た事になります． 

import javafx.application.Application; 
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;

public class FirstGui extends Application { 
	@Override
	public void start(Stage stage) throws Exception{
	
		Group root = new Group();
		
		Label label = new Label("Hello JavaFX!");
		
		root.getChildren().addAll(label);
		
		Scene scene = new Scene(root, 600, 300);
		
		stage.setTitle("First GUI Application");
		stage.setScene(scene);
		
		stage.show();

	}

	public static void main(String[] args){
		launch(args);
	}

}

練習問題２ー２

窓に「こんにちは，JavaFXです！」と表示されるプログラムを作り，コンパイル，実行してみる． クラス名は「Ex02_2」としなさい．

参考：
同じようなプログラムを作る場合，ほとんど同じ内容を記述する部分が多くあります．これを毎回はじめから書くのは非効率なので，似た内容のプログラムを流用して必要な部分だけを書き直すのが便利です．
流用の仕方は，元にしたいソースファイルを開いておいて，「ファイル」メニューから「名前を付けて保存」を選び，新しいファイル名を設定すれば同じ内容の別ファイルになります．ファイル名はクラス名と同じにしなければならないことに注意しましょう．
元のファイルは元のファイル名のまま残っています．消えて無くなったりしないので安心して下さい．
流用したときは，クラス名を変更することを忘れないようにしましょう．

レイアウトペインの使用

今迄は，「Root Node」として「Group」という入れ物を用いてきましたが，Groupにはレイアウトが設定されていません．従って，内部に複数のNodeを組み込む時に，何も指定しないと重なって表示されてしまいます．このような場合に，内部のNodeを表示するときのレイアウトが予め設定されているNodeを使用すると便利です．

ここでは，縦方向のレイアウトを持つ「VBox」を使って，前述のようにして作成した複数のLabelを縦に並べて表示させてみましょう．

VBoxの作成

具体的には，「root」の作成のところを以下のように「Group」から「VBox」に書き換えます． 

    Group root = new Group();	->	VBox root = new VBox();

「VBox」を使用する場合は，Group の代わりに VBox のimport文を使用します． 

    import javafx.scene.Group;	->	import javafx.scene.layout.VBox;

Labelの作成と設置

前述の「Labelの作成」の書き方を繰り返して，複数のラベル「label1，label2，…」を作成します． 

    Label label1 = new Label("label1の内容");
    Label label2 = new Label("label2の内容");
    Label label3 = new Label("label3の内容");
    …

その後Labelを設置しますが，複数のLabelを設置する場合，root に Label を組み込む所「root.getChildren().addAll(ここ)」を次のように書き換えます． 

    root.getChildren().addAll(label1, label2, …);

レイアウトの設定

VBoxを使用するだけで，内部の Node は縦方向に配置されますが，Node を配置する間隔など細かいレイアウトの値を設定することも出来ます．

レイアウトの詳細は，今回のようにVBoxをrootとして作成した後，以下のようにして設定できます．カンマ「,」とコンマ「.」の違いに気をつけましょう． 

    root.setAlignment(Pos.CENTER);		//内部のノードの表示位置を「中央」にする
    root.setPadding(new Insets(10,10,10,10));	//外枠と内部のノードの上下左右の間隔
    root.setSpacing(2.0);			//内部のノード同志の垂直方向の間隔

これらの設定を使用するためには次の「import」を付け加えます． 

    import javafx.geometry.Pos;
    import javafx.geometry.Insets;
注意：
「//」から文末までの部分は「コメント」と言って，ソースファイルの中にメモや説明を書く時に使用します．この部分はコンパイルのときには無視されます．また，複数行に渡るコメントは，文頭に「/*」，文末に「*/」を使用して，その間に書くことができます．

Pos の値

AlignmentのPosは，以下の値が設定できます．（具体的にどうなるかは，実際に試してみましょう）

値意味値意味
BASELINE_CENTER垂直方向はベースライン，水平方向は中央CENTER垂直方向と水平方向の両方で中央
BASELINE_LEFT垂直方向はベースライン，水平方向は左側CENTER_LEFT垂直方向は中央，水平方向は左側
BASELINE_RIGHT垂直方向はベースライン，水平方向は右側CENTER_RIGHT垂直方向は中央，水平方向は右側
BOTTOM_CENTER垂直方向は下部，水平方向は中央TOP_CENTER垂直方向は上部，水平方向は中央
BOTTOM_LEFT垂直方向は下部，水平方向は左側TOP_LEFT垂直方向は上部，水平方向は左側
BOTTOM_RIGHT垂直方向は下部，水平方向は右側TOP_RIGHT垂直方向は上部，水平方向は右側

練習問題2ー３

上の説明を参考にして，レイアウトペインを使用して窓の中央に

私の所属は，（自分の学部学科）です．
私の名前は，（自分の名前）です．
私の年齢は，（自分の年齢）才です．

と表示されるようなプログラムを作りなさい．クラス名は「Ex02_3」としなさい．

スケジュール｜前のページ｜Javaの初歩１