2002
-0822 ver 1.00　発行
-0830 ver 1.01　サンプルの名称の整理，誤字の修正等

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃.&&&&　****　%%%%.　　JavaScript&Javaで目指そう！基本情報技術者試験　 ┃
┃&&&&&&******%%%%%%　　執筆＆編集　斎藤末広   suehiro@he.mirai.ne.jp 　┃
┃'&┃&''*┃*''%┃%'　　発行　　　　江口昌宏   jmaga@yscon.co.jp　　　　┃
┗━┻━━┻━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

★解除・登録　広告募集:http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

　第２４号　2002/08/22

　GUI 部品　Label(ラベル)

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

　プログラムを作成する上での注意事項：
　Windows98SE, SDK(JDK) 1.3.1，IE 5.5 を前提としています。
　拡張子を表示するに設定してください。

------------------------------------------------------------------------
▼GUI部品

　最近のパソコンは，パソコンの画面にボタンとか入力枠を表示して，それをマ
ウスで選んだり，キーボードから文字を入力したりして操作をします。こういっ
た操作方法を，Grafic User Interface(グラフィック・ユーザ・インターフェー
ス)と言っています。省略して，GUI(ジーユアイ) です。この GUI の画面に表示
される，ボタン，入力枠などを GUI部品ということにします。

------------------------------------------------------------------------
▼GUI部品の代表　ボタン

　GUI 部品の代表は，ボタンです。ボタンを使ったサンプルは，すでに勉強して
います。このサンプルを元に，他の GUI 部品を組み込んでいくことにします。
　まず，ボタンのプログラムをみましょう。動作もさせて，動きも確認してみて
ください。

xSmpGUI03.java
ソース　http://www.yscon.co.jp/j/java/jmaga/j22/xSmpGUI03.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j22/xSmpGUI03.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3: import java.awt.Image;
  4: import java.awt.event.ActionListener;   // ボタン係
  5: import java.awt.Button;                 // ボタン(表ボタン,見た目を作る)
  6: import java.awt.event.ActionEvent;      // ボタンセンサ（裏ボタン，黒子)
  7:
  8: public class xSmpGUI03 extends Applet{
  9:
 10:     Image ximg;
 11:     int x, y;
 12:
 13:     Button xbt01 = new Button("←"); // 表ボタン生成
 14:     Button xbt02 = new Button("→");
 15:
 16:     class xButtonAdapter implements ActionListener{
 17:         public void actionPerformed(ActionEvent xbs){
 18:             if (xbs.getSource() == xbt01){
 19:                 x = x - 10; //ボタン係01のやる仕事
 20:             }
 21:             if (xbs.getSource() == xbt02){
 22:                 x = x + 10; //ボタン係02のやる仕事
 23:             }
 24:             repaint();
 25:         }
 26:     }
 27:
 28:     xButtonAdapter xia01 = new xButtonAdapter(); //ボタン係01生成
 29:     xButtonAdapter xia02 = new xButtonAdapter(); //ボタン係02生成
 30:
 31:     public void init(){
 32:         ximg = getImage(getDocumentBase(),"img01.gif");
 33:         x = 0; y = 0;
 34:
 35:         add(xbt01); //表ボタンを本体プログラムの画面に貼付
 36:         add(xbt02);
 37:
 38:         xbt01.addActionListener(xia01);
 39:                                     // 表ボタンが自分のボタン係任命
 40:         xbt02.addActionListener(xia02);
 41:     }
 42:
 43:     public void paint(Graphics xg){
 44:         xg.drawImage(ximg, x, y, this); //画面を表示
 45:     }
 46: }

　ボタンが押されて動作するには，

    1 まず，ボタンの見た目を作るもの(Buttonクラス)
    2 そのボタンの動きを感じもの(ActionEventクラス)
    3 ボタンが押されたときに仕事をするもの(ActionListenerクラス)

の３つのクラスで分業していました。

　このうち，３番目のクラスは，このクラスやこのクラスの分身(インスタンス）
が動作するのでは無く，一度，子供を作って（継承），その子供に，仕事を
覚えさせる必要がありました。xSmpGUI03 のプログラムで言えば，16 〜 26 行目
にあたるところです。

------------------------------------------------------------------------
▼GUI部品　ラベルの利用

　xsmpGUI03.java は，ボタンによって画像を横に移動するプログラムでした。
これを，ボタンを押したら，文字を表示するプログラムに変えてみましょう。
　文字を表示するには，ラベルと呼ばれる GUI 部分を使い，そこに表示します。

　"行ってらっしゃい"と"お帰りなさい"をボタンに従って表示するプログラムにし
ます。

j24-01 xSmpGUI04.java GUI部品 Label(ラベル)表示
ソース　http://www.yscon.co.jp/j/java/jmaga/j24/xSmpGUI04.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j24/xSmpGUI04.htm

  1: import java.applet.Applet;
  2: // import java.awt.Graphics;
  3: // import java.awt.Image;
  4: import java.awt.Button;                 // 1)ボタンの見た目を作る
  5: import java.awt.event.ActionEvent;      // 2)ボタンの動きを感じる
  6: import java.awt.event.ActionListener;   // 3)押されたときに仕事をする
  7: import java.awt.Label;
  8:
  9: public class xSmpGUI04 extends Applet{
 10:
 11: //    Image ximg;
 12: //    int x, y;
 13:
 14:     Button xbt01 = new Button("行きの挨拶"); // 表ボタン生成
 15:     Button xbt02 = new Button("帰りの挨拶");
 16:
 17:     Label xlbl = new Label("漢２３４５６７");
 18:
 19:     class xButtonAdapter implements ActionListener{
 20:         public void actionPerformed(ActionEvent xbs){
 21:             if (xbs.getSource() == xbt01){
 22:                 xlbl.setText("行ってらっしゃい"); //ボタン01の仕事
 23:             }
 24:             if (xbs.getSource() == xbt02){
 25:                 xlbl.setText("お帰りなさい");   //ボタン02の仕事
 26:             }
 27:             //repaint();
 28:         }
 29:     }
 30:
 31:     xButtonAdapter xia01 = new xButtonAdapter(); //ボタン係01生成
 32:     xButtonAdapter xia02 = new xButtonAdapter(); //ボタン係02生成
 33:
 34:     public void init(){
 35: //        ximg = getImage(getDocumentBase(),"img01.gif");
 36: //        x = 0; y = 0;
 37:
 38:         add(xbt01); //表ボタンを本体プログラムの画面に貼付
 39:         add(xbt02);
 40:
 41:         xbt01.addActionListener(xia01);
 42:                                     // 表ボタンが自分のボタン係任命
 43:         xbt02.addActionListener(xia02);
 44:         add(xlbl);
 45:     }
 46:
 47: //    public void paint(Graphics xg){
 48: //        xg.drawImage(ximg, x, y, this); //画面を表示
 49: //    }
 50: }

------------------------------------------------------------------------
▼GUI部品 Label の表示

　xSmpGUI04.java では，必要のないところをコメントしました。// で始まると
コメントとなり，プログラム上は意味がなくなります。次は，余分なところをとっ
て，プログラムを見やすくしましょう。
　また，xSmpGUI03.java のサンプル作成のときには，気づいていませんでしたが，
ボタンが押されたときに仕事をするボタン係は，それぞれのボタン用に用意する
必要は無く，一人のボタン係が処理することができます。よって，ボタン係を
xia01とxia02と二人用意していましたが，xia だけにします。

例 j24-02 xSmpGUI041.java　Label(ラベル)表示
ソース　http://www.yscon.co.jp/j/java/jmaga/j24/xSmpGUI041.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j24/xSmpGUI041.htm

  1: import java.applet.Applet;
  2: import java.awt.Button;                 // 1)ボタンの見た目を作る
  3: import java.awt.event.ActionEvent;      // 2)ボタンの動きを感じる
  4: import java.awt.event.ActionListener;   // 3)押されたときに仕事をする
  5: import java.awt.Label;
  6:
  7: public class xSmpGUI041 extends Applet{
  8:
  9:     Button xbt01 = new Button("行きの挨拶"); // 表ボタン生成
 10:     Button xbt02 = new Button("帰りの挨拶");
 11:
 12:     Label xlbl = new Label("漢２３４５６７");
 13:
 14:     class xButtonAdapter implements ActionListener{
 15:         public void actionPerformed(ActionEvent xbs){
 16:             if (xbs.getSource() == xbt01){
 17:                 xlbl.setText("行ってらっしゃい"); //ボタン01の仕事
 18:             }
 19:             if (xbs.getSource() == xbt02){
 20:                 xlbl.setText("お帰りなさい");   //ボタン02の仕事
 21:             }
 22:         }
 23:     }
 24:
 25:     xButtonAdapter xia = new xButtonAdapter(); //ボタン係生成
 26:
 27:     public void init(){
 28:
 29:         add(xbt01); //表ボタンを本体プログラムの画面に貼付
 30:         add(xbt02);
 31:
 32:         xbt01.addActionListener(xia);
 33:         xbt02.addActionListener(xia);
 34:
 35:         add(xlbl);
 36:     }
 37: }

　Label(ラベル)を利用するには

1) 生成

　Label xlbl = new Label("漢２３４５６７");
　　部品クラス名　インスタンス名　= new 部品クラス名(引数);

2) 表示

　init() 内で，
　add(xlbl);
　で表示することができ，必要に応じて，

3) 変更

　xlbl.setText("お帰りなさい");
　で表示内容を変更することができます。

　生成，表示，変更という手順で Label(ラベル)を使えます。生成するときに，
文字を指定できますので，変更する必要がないときは，生成，表示のみでいいで
す。

------------------------------------------------------------------------
▼ Label での表示とdrawStringの違い

　アプレットでの文字の表示は drawStringメソッドを利用しても可能でした。

xHelloApplet.java
ソース　http://www.yscon.co.jp/j/java/jmaga/j15/xHelloApplet.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j15/xHello.htm

  1: import java.applet.Applet;
  2: import java.awt.Graphics;
  3:
  4: public class xHelloApplet extends Applet {
  5:     public void paint(Graphics xg){
  6:         xg.drawString("Hello, World",100, 120);
  7:     }
  8: }

　このプログラムと同等の仕事をする，Label を利用したプログラムは，以下の
ようになります。

xHelloLabel.java
ソース　http://www.yscon.co.jp/j/java/jmaga/j24/xHelloLabel.java
動作　　http://www.yscon.co.jp/j/java/jmaga/j24/xHelloLabel.htm

  1: import java.applet.Applet;
  2: import java.awt.Label;
  3:
  4: public class xHelloLabel extends Applet {
  5:
  6:     Label xlbl = new Label("Hello, World");
  7:
  8:     public void init(){
  9:         add(xlbl);
 10:     }
 11: }

　このプログラムは，生成と表示のみで，変更はありません。

　drawStirng を利用した場合は，paint()メソッド内で，Graphics クラスの力を
使って表示しました。Label を使った場合と対比しましょう。

                drawString              Label
----------------------------------------------------------
使用するクラス  Graphics                Label
使用メソッド  　drawString()            add()，setText()
文字を変更      repaint()して，         setText()
                再度drawString()

----------------------------------------------------------

　Label を利用するメリットは，表示文字列の変更が簡単なることです。

------------------------------------------------------------------------
▼ 練習問題

練習１

　xSmpGUI041.javaを変形します。ボタンを３つにして，朝の挨拶，昼の挨拶，
夜の挨拶を表示するプログラムにしなさい。

練習２

　xSmpGUI041.java を変形します。Label(ラベル)を追加して，表示するときに，
　○○さん，いってらしゃい。という風にしなさい。"○○さん，"は，最初から
表示しておきます。

------------------------------------------------------------------------
▼ 次号の予定
　この号で，予告では，レイアウト，パネル，キャンパスと扱う予定でしたが，
その表示部品である，GUI 部品をしばらく順番に扱う予定に変更しました。

　次号は，TextField(テキストフィールド，テキスト枠)を扱います。

　感想は，斎藤まで，suehiro@he.mirai.ne.jp
　広告等のお問い合わせ：jmaga@yscon.co.jp

------------------------------------------------------------------------
▼ 誤字・脱字等の修正，プログラムの修正など，以下の場所で確認できます。

Jmaga情報
　http://www.yscon.co.jp/j/java/jmaga/
登録・削除および広告の案内
　http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html

------------------------------------------------------------------------
▼ 著作権について

　このメールマガジンで公開しているプログラムソースは，著作権を当方スタッ
フが所有しますが，商用を含めて，再利用，改変，発表を制限しません。
　本文に関しては，斎藤末広が著作権を所有します。再利用に関しては，承諾を
必要とします。
広告募集 http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html

------------------------------------------------------------------------
▼アンケート（以下を返信してください）

　この号のＪマガに対するご意見をお待ちしてます。ぜひ，ご返信下さい。

内容のレベルは

１　難しいのでもっと簡単にしてほしい
２　ちょうどよい
３　もっと難しくてもよい

その他ご要望