第8週： GUI

8.1 ユーザインターフェース

コンピュータでプログラムが動いているとき、それが人間に対してどのように見えるかということをユーザインターフェース(user interface)と呼びます。例えば、ウィンドウを表示してマウスでクリックできるようにするのも一つのユーザインターフェースですし、結果を標準出力に出すだけでも一つのユーザインターフェースです。

キーボードから命令をタイプするのではなく、ウィンドウとマウスを使った直感的に分かりやすいユーザインターフェースのことをグラフィカルユーザインターフェース(graphical user interface)、略して GUI と呼びます。Java には、GUI を作るための機能が標準で備わっています。

GUI にはよく使われる部品があります。例えば、メニューやボタンやテキスト入力フィールドなどです。こういった部品を組み合わせることによって、あるプログラムの GUI を作ります。組み合わせて使えるようにできている部品セットのことをツールキット(toolkit)と呼びます。

8.3 練習問題

それぞれの部品には、大きさや色や表示する文字列など、いろいろな属性があります。インスタンスを作ったときには、デフォールト(省略時設定)の属性になっていますが、部品のメソッドを呼び出すことによって変更することができます。

    部品のインスタンス.set属性(必要なデータ)

SfcTemplate3.java では、描画領域の大きさを横400、縦300に、背景色を白に設定しています。

26 27 28

public void init() { c1.setSize(400, 300); c1.setBackground(Color.white);

• 第10週で詳しく説明しますが、init というメソッドは、プログラムを起動したときに呼び出されるメソッドです。ですから、ここで部品のいろいろな属性を設定しておきます。public と前に付いているのは、とりあえず気にしないでください。
• c1 は、Canvas クラスのインスタンスを記憶している変数です。
• c1.setSize(400, 300);
  • c1 が記憶しているインスタンスに対して、setSizeというメソッドを呼び出します。
  • 引数は、横方向と縦方向のピクセル数です。
• c1.setBackground(Color.white);
  • c1 が記憶しているインスタンスに対して、setBackgroundというメソッドを呼び出します。
  • 引数は、色を表すオブジェクトです。

8.5 練習問題

ラベルやボタンに表示される文字列が小さくて見栄えがしないので、もっときれいに表示しましょう。

文字のデザインに関するデータをフォント(font)と呼びます。フォントデータは、それぞれのコンピュータに格納されているので、表示するコンピュータによって使用できるフォントの種類が違います。

Java では、次のフォント名を指定すると、そのコンピュータで使用できるフォントの中から適当なものを選んでくれます。

• "Dialog"
• "DialogInput"
• "Monospaced"
• "Serif"
• "SansSerif"
• "Symbol"

• Font.PLAIN
• Font.BOLD
• Font.ITALIC
• Font.BOLD | Font.ITALIC

例えば、SansSerif のボールド体の24ポイントのフォントを使いたければ、次のようにして Font クラスのインスタンスを作ります。

    new Font("SansSerif", Font.BOLD, 24)

    部品のインスタンス.setFont(フォントのインスタンス)

8.7 練習問題

MovingBall.java を変更し、ラベルとボタンの文字が SansSerif のボールド体の24ポイントのフォントで表示されるようにしなさい。

init メソッドの中でフォントを設定しましょう。

1. Font のインスタンスを作り、Font 型の変数f に記憶させます。
2. Label 型の変数 l1 が記憶しているインスタンスに対して、f が記憶しているフォントのインスタンスを設定します。
3. Button 型の変数 b1 が記憶しているインスタンスに対して、f が記憶しているフォントのインスタンスを設定します。

8.8 レイアウト

部品をいくつか並べるときは、自動的に大きさや位置を調整して配置してくれる機能があります。SfcTemplate3.java では、BorederLayout というクラスのインスタンスを使用しています。

29 30 31 32

setLayout(new BorderLayout()); add(l1, BorderLayout.NORTH); add(c1, BorderLayout.CENTER); add(b1, BorderLayout.SOUTH);

• setLayout(new BorderLayout());
  • BorderLayout クラスのインスタンスを作ります。
  • setLayout メソッドは、どのような種類の配置の仕方をするかを指定するメソッドです。ここでは、BorderLayout クラスの規則に従って配置することを指定しています。
  • BorderLayout クラスは、5個以下の部品を、以下のような形に配置することができます。
    
• add(l1, BorderLayout.NORTH);
  • add メソッドは、部品を配置するためのメソッドです。ここでは、変数 l1 が記憶している Label クラスのインスタンスを、NORTH の位置に配置します。
  • 配置された部品は、ウィンドウに隙間無くピッタリ納まるように大きさが調整されます。

BorderLayout クラスによる大きさの調整方法を調べてみましょう。

1. MovingBall.html を appletviewer で表示し、そのウィンドウの大きさをマウスで変更してみなさい。キャンバスやボタンの大きさはどう変わりますか？
2. MovingBall.java を書き換えて、ボタンが CENTERで、キャンバスが SOUTH に配置されるようにしなさい。
3. もう一度 appletviewer で表示し、ウィンドウの大きさをマウスで変更してみなさい。今度はキャンバスやボタンの大きさはどう変わりますか？
4. 大きさの変化が確認できたら、配置を元に戻しておきましょう。

8.10 パネル

BorderLayout では、5個所のそれぞれに1個ずつしか部品を配置できません。もっと複雑な配置をするためには、Panel クラスを使用します。

Panel クラスも部品の一種ですが、それ自体には機能がなく、他の部品を配置するための土台として使われます。

SfcTemplate1.java で Panel クラスをどのように使っているか見てみましょう。

11	Panel p1 = new Panel(), p2 = new Panel();

• Panel クラスのインスタンスを二つ作って、Panel型の変数 p1 と p2 に記憶させています。

20
21
22
23

	p1.add(l1);
	p1.add(t1);
	p2.add(l2);
	p2.add(t2);

• p1 が記憶しているパネルには、l1 が記憶しているラベル("Input:" と表示)と、t1 が記憶しているテキストフィールド(文字を入力するための部品)を配置します。
• パネルに対しても、setLayout メソッドで、パネル内部の部品の配置方法を指定できますが、ここでは何も指定していません。何も指定しないと FlowLayout クラスが使われて、左から右へ順に配置されていきます。

24
25
26
27

	setLayout(new BorderLayout());
	add(p1, BorderLayout.NORTH);
	add(b1, BorderLayout.CENTER);
	add(p2, BorderLayout.SOUTH);

• p1 が記憶しているパネルを NORTH の位置に、p2 が記憶しているパネルを SOUTH の位置に配置します。
• BorderLayout は、NORTH の位置にパネルという部品一つだけを配置しますが、パネルの内部にはラベルなど複数の部品が配置されています。パネルの中にさらにパネルを配置することもできますから、これを繰り返すと、いくらでも複雑な配置をすることができます。

8.11 テキストフィールド

文字を入力するためには、TextField クラスを使います。

SfcTemplate1.java で TextField クラスをどのように使っているか見てみましょう。

13	TextField t1 = new TextField(), t2 = new TextField();

• TextField クラスのインスタンスを二つ作って、TextField型の変数 t1 と t2 に記憶させています。

17
18
19

	t1.setColumns(20);
	t2.setColumns(20);
	t2.setEditable(false);

• setColumns メソッドは、テキストフィールドの横幅を指定します。ここでは、20文字分にしています。
• setEditable メソッドは、引数が true なら入力・編集可能、false なら入力・編集不可能にします。ここでは、t2 に記憶されている実行結果表示用のテキストフィールドを入力・編集不可能にしています。
• t1 に対しては、setEditable メソッドを呼び出していませんが、デフォールト(省略時設定)で可能になっています。

35
36
37
38
39
40
41

    String sfcInput () {
	return t1.getText();
    }

    void sfcOutput (String s) {
	t2.setText(s);
    }

• 今まで sfcInput, sfcOutput というメソッドを使っていましたが、これは t1, t2 が記憶しているテキストフィールドに対して、getText, setText というメソッドを実行するだけです。
• getText は、テキストフィールドに表示されている文字列を返すメソッドです。
• setText は、テキストフィールドに文字列を表示するメソッドです。引数は、表示する文字列です。

8.12 練習問題

8.13 宿題