GUI クラス

09/22/2004
応用プログラミング
GUI クラス
GUI：グラフィカルユーザーインターフェース（Graphical User Interface）の略
画像（アイコン，メニュー，ボタンなど）を利用して，操作性を高めたコンピュータとのインターフェース
機能．Windows，Mac OS など多くのパソコン OS で利用されている．
GUI を持つプログラムの特徴
・枠で囲まれたウインドウ上にボタンやテキスト入力域などの部分を表示する
・ユーザーがそれらにマウスやキーボードを使って働きかける
・ユーザーからの働きかけに応じてプログラムが動く
Java の場合
GUI を作成するための部品やプログラムがクラスとして存在する．
→ GUI クラス
（コンピュータ環境（プラットフォーム）に依存しないプログラムの作成が可能）
※ クラスを拡張して多数の類似するクラス(部品)を作成している
関連するクラスやインターフェースをグループごとにまとめている(パッケージ)
Java で利用される GUI パッケージ
・ AWT パッケージ(Abstract Windows Toolkit) → GUI の基本クラス群
・ Swing パッケージ → AWT を拡張して開発されたツールキット．利用時には Swing も必要
コンポーネントの種類
教科書図 10.2 Swing が提供するコンポーネントの階層図
（AWT のコンポーネントも含まれている）
Swing の全てのクラスは Container クラス(AWT コンポーネントのひとつ)のサブクラスである．
さらに，J で始まるほとんどのクラスは JComponent のサブクラスである．(例えば JComponent は
Container を継承して作られる )
コンポーネントは次の３つに分類される
・トップレベルコンテナ
画面上に表示するために必要となるコンポーネント．
GUI の内容を表示する領域(コンテントペイン)があり，ウィンドウや Web ブラウザ上に表されるコンポーネ
ントはコンテントペイン上に置くこととなる
･中間コンテナ
コンポーネントを実際に配置する(描画する)場所となるコンポーネント(下位レベルのコンポーネントは(通
常は)中間コンテナの中に配置する．一方、中間コンテナはトップレベルコンテナのコンテントペインにな
る．)
･アトミックコンポーネント
下位レベルのコンポーネント．ボタンやラベルなどの個々の GUI 部品
（直接，トップレベルコンテナに配置されることもある．特に，JApplet の場合）
−1−
09/22/2004
応用プログラミング
トップレベルコンテナ
(GUI を表示するための
場所．コンテントペイン)
アトミックコンポーネント中間コンテナ
(部品を置く場所)
(部品)<ボタン，文字>
Swing コンポーネントを利用する手順
サンプル 10.1 (Hello.java) について (教科書 p103)
１つのラベルと２つのボタンを作成する
(処理内容) main メソッド
①
②
③
③
④
⑤
Hello クラスのオブジェクト作成
Hello オブジェクトを表示するためのフレーム
トップレベルコンテナを作成する
そのコンテナに Hello オブジェクトを置く
フレームに対して pack メソッド
setVisible メソッドを実行し，見えるようにする
プログラム上の手順
(1) GUI パッケージをインポート
L20
L21
L22
L23
L24
L25
L1，2
* は全てのコンポーネントをあらわす
java.awt.* ：： java.awt パッケージに多くのクラスのファイルが存在し，それら全てを対象とする.
javax.swing.* ：： swing パッケージの組み込み
(2) コンテナを用意
L4
Hello クラス自身がコンテナとなる.
(Hello クラスは JPanel (中間コンテナ)のサブクラスなので Hello も中間コンテナと言える)
(3) コンポーネント(ラベルとボタン)を作成する
L9∼11
コンテナに配置するコンポーネントの(具体的な)オブジェクトを作成する(ボタン２つ，ラベル１つ)
(4) コンポーネントの配置方式の設定
レイアウトマネージャの機能に任せる場合が多い.(デフォルトに存在)
※はじめから配置方式(レイアウト)が用意されている
(ex) 配置方式の設定 → Container クラスの setLayout メソッドの利用
引数はレイアウトクラスのオブジェクトを指定 L13
※ レイアウトマネージャ＝レイアウトを自動的に設定し，コンポーネントを配置する管理機能
クラスとして存在し，そのクラスのオブジェクトを利用する
−2−
09/22/2004
応用プログラミング
(5) コンポーネントを配置＜コンストラクタ内で実行＞
コンテナにコンポーネントを置く
→ Container クラス(スーパークラス)の（継承された）add メソッドの利用 L14−16
（JPanel の add メソッドを利用する）
※ add メソッド(配置するコンポーネント，配置する領域)
(ex) add(b1, BorderLayout.CENTER)
→
b1(ボタン)を BorderLayout レイアウトの CENTER(中央)に置く
(6)トップレベルコンテナを用意 (main メソッド内で行う)
L21
中間コンテナを置くための“トップレベルコンテナ”を設定.メインウィンドウとなる Jframe クラスのオブジ
ェクトを作成.この上に中間コンテナ Hello オブジェクトを置く.
(7)トップレベルコンテナのコンテントペインを取得
L22
中間コンテナを置くための場所(コンテントペイン)を設定する
Jframe のコンテントペインは Jframe のオブジェクトメソッド getContentPane メソッドを利用し，そしてコン
テナ(Container クラス)のオブジェクトとする
(8)トップレベルコンテナのコンテントペインへのコンテナの配置
(Container クラスの add メソッドを利用)
<<教科書 P103 リスト 10.1>>
１：import java.awt.*;
２：import javax.swing.*;
３：
４：class Hello extends JPanel{
５：
JLabel label; //ラベル用の変数
６：
JButton b1, b2;//ボタン用の変数
７：
８：
Hello( ){
９：
label = new JLabel("こんにちは");
１０：
b1 = new JButton("ボタン１");
１１：
b2 = new JButton("ボタン２");
１２：
１３：
setLayout(new BorderLayout());
１４：
add(label, BorderLayout.NORT H);
１５：
add(b1, BorderLayout.CENT ER);
１６：
add(b2, BorderLayout.EAST);
１７：
}
１８：
１９：
public static void main(String args[]){
２０：
Hello h = new Hello();
２１：
JFrame frame = new JFrame("Hello");
２２：
Container c = frame.getContentPane();
２３：
c.add(h, BorderLayout.CENTER);
２４：
frame.pack();
２５：
frame.setVis ible(true);
２６：
}
２７：}
Hello コンストラクタ
(中間コンテナおよびその内部からなる
GUI の作成)
//JLabel オブジェクトの生成
//JButton オブジェクトの生成
//JButton オブジェクトの生成
//配置方式の設定
//ラベルを置く
//ボタンを置く
//ボタンを置く
//Hello のオブジェクトを生成
//JFrame オブジェクトを生成
//フレームの内容表示域を得る
//フレームに Hello オブジェクトを置く
//フレームを必要最小の大きさにする
//フレームを画面に見せる
−3−
09/22/2004
応用プログラミング
JPanel 中間コンテナ(部品を置く場所)
こんにちは
コンテントペイン c
add
c .add で配置
トップレベルコンテナの作
成(GUI を表示するための場
所．コンテントペイン)
アトミックコンポーネント
(部品)<ボタン，文字>
(2)∼(6)
こんにちは
(8)
(7)
プログラム内の処理の流れ
レイアウト方式
①レイアウトの方法
プログラム(クラス)で自動的にレイアウトを設定する機能（レイアウトマネージャ）
→ レイアウトマネージャ(コンテナ内のコンポーネント(部品)の相対位置を決める.大きさ，位置を制御
する)
→ （マウスによって）ウィンドウの大きさを変えても自動的に大きさを変えてくれる
②レイアウトマネージャの設定
コンテナにはデフォルトのレイアウトマネージャが設定されている..
自分で設定するには， Container クラスの setLayout メソッドを利用する
(引数はレイアウトクラスのオブジェクト)
Container c = getContentPane( )；
c.setLayout(newFlowLayout( ));
L13 (Hello.java)
③コンポーネントの大きさをの決定
(通常)コンポーネントの大きさはレイアウトマネージャが調整して決定する
コンポーネントは予め，最大サイズ(Maximun Size)，望むサイズ(Preferred Size)，最小サイズ(Minimum
Size)の情報をもつ
自分でこれらの大きさを設定したい場合
[方法１] Jcompont クラスの set***Size メソッドを利用する
(ex) JPanel p= new JPanel( );
p.setMinimumSize(new Dimension(150, 100)); → 最小サイズを設定
Dimension クラス＝コンポーネントの幅，高さを扱う
[方法２] JComponent のメソッド get***Size( ) をオーバーライド
(ex) Dimension getMinimumSize( ){
// 最小値を返す
return new Dimension(150, 100);
}
レイアウト方式の種類 (後に具体的な処理例)
(1) FlowLayout
コンポーネントを PreferredSize 内で横一行に配置する.１行に入らなかった場合は複数行に渡って配置
する.
→ 少数のコンポーネントの配置向き
コンポーネントの入れ方
add(comp)
→ (comp はコンポーネントのオブジェクト)
add(comp, 2) → (comp はコンポーネントのオブジェクト，2 は配置する位置)
−4−
09/22/2004
応用プログラミング
(ex)
setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20));
※ 上の add(comp) は
レイアウトの対象となるパネル（張り付く） .add( 張り付く部品
で表示する
)
(2)BorderLayout
コンテナを５つの領域(上部，下部，右，左，中央)に分けて，そのどこかにコンポーネントを配置する.
コンポーネントの配置には
add(comp , BorderLayout.NORTH)
上は
add( 配置するコンポーネント , 位置 )
(3)GridLayout
コンポーネントを同じ大きさの格子状に縦横に配置する.
格子高さは一番大きな Preferred height に，幅は一番大きな Preferred witdh となる.
（ex）コンポーネントを n 行で配置した場合
setLayout(new GridLayout(n, 0))
( * , * ) は片方しか有効でない（行優先）
行数が 0 でない
列数＝（コンポーネント数＋行数―１）／行数
行数が 0
行数＝（コンポーネント数＋列数―１）／列数
コンポーネント数が 10 の場合
(10,3) の場合
列＝（10+10−1）/10=1
(0,5)
の場合
行= (10+5−1)/5=2.8=2
(4)BoxLayout
コンポーネントを上から下へ，あるいは左から右への配置.
コンストラクタで並べる方向を指定.
個々のコンポーネントの大きさが優先される → 各コンポーネントの大きさが異なる
※ ①高さ： preferred height で高さを自動的にあわせる
②幅：一番大きな preferred width にそろえる.ただし，Maximum Size 以上にはならない.
③コンポーネントの揃え：
JComponent クラスの setAlignmentX メソッドを実行する . 引数は
JComponent.LEFT_ALIGNMENT などを設定.
④並べる方向：
BoxLayout の第２引数（BoxLayout.Y_AXIS: 縦方向， BoxLayout.X_AXIS: 横方向）
(ex) setLayout(new BoxLayout(this, BoxLayout.Y_ AXIS));
(5) CardLayout
コンテナに複数のコンポーネントを重ねて置き，順次(上から)コンポーネントを表示するレイアウトマネー
ジャ.
複数のコンポーネントに名前をつけて，順番にコンテナを入れておく.
CardLayout のコンテナにコンポーネントを入れる方法
aadd(comp, name)
aadd(comp, name, index)
comp= コンポーネント，
name=コンポーネントを識別する名前，
index= コンポーネントの山のどこに入れるかの番号
大きさでは最大の preferred height と preferred weigh にあわせる.
(ex) SLIDE1∼5 までの文字列を貼り付けた５個のラベルを CardLayout パネルに配置する
−5−
09/22/2004
応用プログラミング
JPanel p= new JPanel( );
CardLayout layout= new CardLayout( );
p.setLayout(layout);
for(int i=1; i<=5; i++){
p.add(new Jlabel(“SLIDE”+ i), “SLIDE”+i);
}
次のラベルを表示する場合：： layout.next(p);
アイコンイメージの表示
アイコンの貼り付け
アイコン＝固定サイズの“絵”（GIF あるいは JPEG 形式） → ファイルとして存在する
JButton ，JLabel にアイコンを貼り付けられる
貼り付ける方法
①イメージファイルを指定して ImageIcon のオブジェクトを作成
②JButton のコンストラクタに渡す.
ImageIcon icon = new ImageIcon(“dance.gif“);
// “dance.gif“ がアイコン
JButton b= new JButton(icon);
( あるいは JButton b = new JButton(stringtext, Icon icon ); など)
JLabel l1= new JLabel(icon);
// 教科書 P115
JLabel l2= new JLabel(“文字”, icon, SwingContents.Center);
Swing コンポーネントの種類
ラベル
JLabel ：文字列とアイコン(固定サイズの絵)を表示するための領域(入力は受け付けない)
ボタン
(1)Abstract Button クラス
「押す」などの操作により処理が行われる道具として以下のクラス(Abstract Button クラスのサブクラ
ス)がある
JButton, JcheckBox, JradioButton, JtoggleButton など
教科書 p101 図 10.2 参照のこと
具体的なサブクラスの例(通常，これらを利用)
(2)JButton
文字列とアイコンイメージを貼り付けられる四角のボタン
(3)JCheckBox
選択されている(true)か，いないか(false)の２つの状態を持つボタン.小さな四角でボタンを選択すると
チェックマークがつく
JPanel クラス
コンポーネントを入れるためにコンテナパネル.
いくつかのコンポーネントをまとめてパネルに配置することにより、グループとして扱える.
※ JPanel の中にコンポーネントを入れるためには Container クラスから継承した add メソッドを使う (デフ
ォルトのレイアウトマネージャは FlowLayout)
−6−
09/22/2004
応用プログラミング
JFrame クラス
JFrame のオブジェクトはウィンドウ(フレーム)である.
ウィンドウは境界線，タイトルやボタンを持った画面枠
→ このクラスによって画面上に表示するための場(Window)を作成する
(デフォルトのレイアウトマネージャは BorderLayout)
◎JFrame はトップレベルコンテナに相当する
→ JFrame 上のコンテントペインの上にコンポーネントを置く
(1) JFrame 上のコンテントペイン上にコンポーネントを置くには
Container c= frame.getContent( );
// コンテントペインの取得
c.add(comp, Border….)
// comp は貼り付けるコンポーネント
(2) JFrame のインスタンスは作っただけでは見えないので setVisible メソッドで可視化する
(3) pack メソッド → フレームの大きさをコンポーネントの望むタイプを表示するための最小限の大きさに
する.
コンポーネントの色とフォントの設定
１．色の設定
(教科書 p123)
(1) 背景色(Background)
(2) 描画色(Foreground)
背景色： JComponent の setBackground (color c)
描画色： JComponent の setForeground (color c)
具体的な色を指定する場合は Color クラスのオブジェクトを利用する
setForeground (Color,green)
setForeground ( new Color(0, 255, 0))
※ (**, **, **) は左から R(赤)，G(緑)，B(青) の輝度を 0∼255
の値で色を設定する
(0,0,0) 黒， (255,255,255) 白
２．フォントの指定
文字フォントは JComponent の setFont メソッドを利用する
(ex)
comp.setFont(new Font(“Serif”, Font.PLAIN, 32);
Layout マネージャーの実行例
プログラムは教科書リスト 10.1 Hello.java を利用
/* BorderLayout */
setLayout(new BorderLayout( )); //配置方式の設定
add(label, BorderLayout.NORTH); //ラベルを置く
add(b1, BorderLayout.CENTER);
//ボタンを置く
add(b2, BorderLayout.EAST);
//ボタンを置く
−7−
09/22/2004
応用プログラミング
/* FlowLayout */
setLayout(new FlowLayout(FlowLayout.LEFT, 10, 2));
//配置方式の設定(左寄せ，部品間の水平方向の隙間 10，垂直方向の隙間 2)
add(label);
// label の配置
add(b1,0);
// b1 を先頭に配置
add(b2);
// b2 の配置
/* GridLayout */
setLayout(new GridLayout(2, 0));
//配置方式の設定 (２行の表示(列は部品数で決定するため任意の数で可能)
add(label);
add(b1);
add(b2);
/* BoxLayout */
setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
add(label);
add(b1);
add(b2);
//配置方式の設定(Y方向に表示)
/* CardLayout */
//-- フィールドに以下を追加
static CardLayout layout;
//-- Hello( ) 内で以下を記述
layout= new CardLayout();
setLayout(layout);
//配置方式の設定
add(label, "No.1"); // 引数第２項によりコンポーネントの名前を設定
add(b1, "No.2");
add(b2, "No.3");
//-- main( )内で以下を記述
for(int i=0;i<2;i++){
try{
Thread.sleep(2000);
layout.next(h);
}catch(Exception e){
}
}
２秒後
２秒後
−8−

Download Report