PDF2

プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
スケジュール
第01
01回
回
第02
02回
回
第03
03回
回
第04
04回
回
第05
05回
回
第06
06回
回
第07
07回
回
第08
08回
回
第09
09回
回
第10
10回
回
第11
11回
回
第12
12回
回
第13
13回
回
第14
14回
回
第15
15回
回
プログラミング論II
第11回
言語
Java
GUI（３）- イベント処理
[email protected]
[email protected]
http://www.iis.it- hiroshima.ac.jp/~nagasaka
http://www.iis.ithiroshima.ac.jp/~nagasaka//
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
2
第10
10回の課題（
回の課題（
１）
目次
n
Java言語概論と開発環境
Java言語概論と開発環境
オブジェクト指向技術 (1) – 基礎
Java言語の基礎
Java
言語の基礎 (1) - 変数・
制御
Java言語の基礎
Java
言語の基礎 (2) - 制御・
配列
Java言語の基礎
Java
言語の基礎 (3) - クラス (1)
Java言語の基礎
Java
言語の基礎 (4) - クラス (2)
Java言語の基礎
Java
言語の基礎 (5) - クラス (3)
Java言語の基礎
Java
言語の基礎 (6) - 例外処理
Java言語を利用し
Java
言語を利用したGUI
たGUI (1) - ボタン・
テキスト処理
Java言語を利用し
Java
言語を利用したGUI
たGUI (2) - イベント処理
Java言語を利用し
Java
言語を利用したGUI
たGUI (3) - 図形処理 (1)
Java言語を利用し
Java
言語を利用したGUI
たGUI (4) - 図形処理 (2)
Java Applet (1) - テキスト処理
Java Applet (2) - 図形処理 (1)
Java Applet (2) - 図形処理 (2)
Java 言語 GUI（３）
n
– 図形処理（１）
図のようにN,S,E,Wのボタンを配置し、それら
のボタンを押した時に、それぞれ、その真中
に「北」
「南」
「東」「西」と表示されるプログラム
を作成せよ。
「E」を押した場合
「東」を表示
「N」
を押した場合
「北」を表示
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
3
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
4
第10
10回の課題（
回の課題（
２）
n
Java言語
- イベント処理 -
図のように入力した二つの整数の和、差、累
乗を表示するプログラムを作成しなさい。
初期状態
Java Language
- Event Handling -
2, 5 を入力した
結果
● レイアウトには BorderLayout ではなく、GridLayout を利用すると良い
(例) setLayout(new GridLayout(5,1));
* 5行1列のグリッド（格子）ができて、そこにコンポーネントを順次
配置していく
* 配置は add(label); などとし、場所の指定はしない（自動）
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
[email protected]
5
1
プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
イベント処理
n
イベント処理の流れ
Event Handling
n
– マウスやキーボードからの操作を取得する仕組み
– 発生したイベントに対する処理を行うこと
イベント処理の流れ
–
–
–
–
§ java.awt.event
java.awt.event.*
.* / java.swing.event
java.swing.event.*
.*
– イベント（
Event）
Event
）
マウスやキーボードの操作
イベントソース上でのイベントの発生
イベントリスナーへイベントオブジェクトの送信
イベントリスナーでの処理
§ マウスやキーボードの操作を行うと発生
§ イベントリスナー（
Event Listener）
Listener）
によって処理
n
マウス
操作
– イベントリスナークラスの定義
§ イベントメソッドの記述
イベントソース
（コンポーネント）
– イベントソースにイベントリスナーの登録
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
7
04.Dec.2002
イベントオ
ブジェクト
8
ActionListener
イベントクラス
– ActionEvent
キーボード
操作
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
イベントの種類
n
イベント
リスナー
イベント処理の準備
n
ActionEvent を取得するためのリスナーインターフェイス
n
メソッド
→ ActionListener
§ マウスのボタン操作やテキストフィールドでの改行
– ItemEvent
→ ItemListener
– actionPerformed(ActionEvent e)
§ 選択項目の選択、または、解除
– MouseEvent
§ アクションが発生すると呼び出される
→ MouseListener / MouseMotionListener
§ コンポーネント内でのマウス操作
– WindowEvent
→ WindowListener
§ ウィンドの状態変換
– KeyEvent
→ KeyListener
§ キーボードからの入力操作
– TextEvent
→ TextListener
§ テキストの変更
– ・・・
04.Dec.2002
[参照]
java.awt.evet
java.swing.event
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
9
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
ItemListener
n
ItemEventを取得するためのリスナーインタフェイス
ItemEvent
を取得するためのリスナーインタフェイス
n
メソッド
10
MouseListener
n
コンポーネント上の「
関連する」
MouseEvent を取得するため
のリスナーインタフェイス
– Event → プレス、リリース、クリック、コンポーネントへの出入り
– itemStateChanged(ItemEvent e)
n
§ ユーザによって項目が選択または選択解除された場合に呼び出される
メソッド
– mouseClicked(MouseEvent e)
§ コンポーネント上でマウスボタンをクリックした場合に呼び出される
– mouseEntered(MouseEvent e)
§ コンポーネントにマウスが入った場合に呼び出される
– mouseExited(MouseEvent e)
§ コンポーネントからマウスが出た場合に呼び出される
– mousePressed(MouseEvent e)
§ コンポーネント上でマウスボタンを押した場合に呼び出される
– mouseReleased(MouseEvent e)
§ コンポーネント上でマウスボタンを離した場合に呼び出される
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
[email protected]
11
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
12
2
プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
WindowListener
n
WindowEvent を取得するためのリスナーインタフェイス
n
メソッド
KeyListener
n
KeyEvent を取得するためのリスナーインタフェイス
– KeyEvent → キーストローク
– windowActivated(WindowEvent e )
§ Window がアクティブ Window に設定された場合に呼び出される
– windowClosed(WindowEvent e)
§ ウィンドウに対する dispose の呼び出しの結果として、
ウィンドウがクローズされた場合に呼
び出される
– windowClosing(WindowEvent e)
§ ユーザが、
ウィンドウのシステムメニューでウィンドウを閉じようとした場合に呼び出される
– windowDeactivated(WindowEvent e)
§ Window がアクティブ Window でなくなった場合に呼び出される
– windowDeiconified(WindowEvent e )
§ ウィンドウが最小化された状態から通常の状態に変更された場合に呼び出される
– windowIconified(WindowEvent e)
§ ウィンドウが通常の状態から最小化された状態に変更された場合に呼び出される
– windowOpened(WindowEvent e )
§ ウィンドウが最初に可視になった場合に呼び出される
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
13
n
メソッド
– keyPressed(KeyEvent e)
§ キーを押しているときに呼び出される
– keyReleased(KeyEvent e)
§ キーを離したときに呼び出される
– keyTyped(KeyEvent e)
§ キーをタイプすると呼び出される
04.Dec.2002
TextListener
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
14
イベント処理の例１（
１）
n
TextEvent を取得するためのリスナーインタフェイス
n
メソッド
n
例題
–「
表示」
と「
消去」
ボタンを作成し、
§「
表示」
をクリックしたら「
こんにちは」
を表示
§「
消去」
をクリックしたら表示した文字を消去
するプログラムの作成
– textValueChanged(TextEvent e)
§ テキストの値が変更された場合に呼び出される
「
表示」をクリック
「
消去」をクリック
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
15
04.Dec.2002
イベント処理の例１（
２）
class P1001 extends JPanel implements ActionListener {
JLabel label;
JButton b1, b2;
P1001() {
label = new JLabel(" ");
b1 = new JButton("表示" ) ;
b2 = new JButton("消去" ) ;
コンポーネント
の生成
コンポーネント
の配置
イベントリスナー
の登録
public void actionPerformed(ActionEvent e) {
if( e.getSource () == b1) {
label.setText("こんにちは");
}
else if ( e.getSource () == b2) {
label.setText( " " ) ;
}
}
b1.addActionListener(this);
b2.addActionListener(this);
}
setLayout(new BorderLayout());
add(label, BorderLayout.NORTH);
add(b1 , BorderLayout.WEST);
add(b2 , BorderLayout.EAST);
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
[email protected]
イベントの処理の
記述
actionPerformed
public static void main(String args[]) {
JFrame f = new JFrame("イベントテスト");
P1001 example = new P1001();
f.getContentPane().add(example, BorderLayout.CENTER) ;
f.pack( ) ;
f.setVisible(true);
}
04.Dec.2002
16
イベント処理の例１（
３）
actionListener
インターフェイスを
インプリメント
import java.awt. * ;
import javax.swing.*;
import java.awt.event .*;
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
17
}
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
18
3
プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
イベント処理の例２（
１）
n
イベント処理の例２（
２）
例題
– 二つの整数を入力し、その和を表示するプログラ
ムの作成
ラベル
初期状態
テキストフィールド１
class P1002 extends JPanel implements ActionListener {
JLabel label;
JTextField tf1, tf2;
Data data ;
04.Dec.2002
二つ目の数字が整数では
ないので0 として計算
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
19
イベント処理の例２（
３）
コンポーネント
の生成
04.Dec.2002
try {
b = Integer.valueOf(tf2.getText()).intValue();
} catch ( NumberFormatException err) {
// System.out.println("Error: b");
エラー処理
b = 0;
}
04.Dec.2002
}
setLayout(new BorderLayout());
add(label, BorderLayout.NORTH);
add(tf1, BorderLayout.CENTER);
add(tf2, BorderLayout.SOUTH);
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
20
イベント処理の例２（
４）
public void actionPerformed(ActionEvent e) {
int a, b;
int a d d ;
try {
a = Integer.valueOf( tf1.getText()).intValue();
} catch ( NumberFormatException err) {
// System.out.println("Error: a");
エラー処理
a = 0;
}
コンポーネント
の配置
イベントリスナー
の登録
tf1.addActionListener(this);
tf2.addActionListener(this);
P1002() {
label = new JLabel(" ");
tf1 = new JTextField();
tf2 = new JTextField();
data = new Data();
テキストフィールド１
12、33 を入力後、
改行
12、3.5 を入力後、
改行
actionListener
インターフェイスを
インプリメント
import java.awt. * ;
import javax.swing.*;
import java.awt.event. * ;
data.set(a, b);
add = data.add();
一つ目の数字の入力
＋
文字列から整数への
変換
}
//label.setText(Integer.toString(add));
label.setText(a+" + "+b+" = "+add);
public static void main(String args[]) {
JFrame f = new JFrame("イベントテスト2");
P1002 example = new P1002();
二つ目の数字の入力
＋
文字列から整数への
変換
}
f.getContentPane().add(example, BorderLayout.CENTER) ;
f.pack( ) ;
f.setVisible(true);
}
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
21
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
22
イベント処理の例２（
５）
Java言語
- GUI(3) -
class Data {
int x, y;
public void set(int xx, int yy) {
x = xx;
y = yy;
}
Data クラス
一つのクラスとして、
新しく作成
public int add() {
int a n s;
Java Language
- GUI(3) -
ans = x + y;
}
return ans ;
}
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
[email protected]
23
4
プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
Graphics
n
Graphics(2)
java.lang.Object
+- java.awt.Graphics
Graphics Class
n
– すべてのグラフィックコンテキストの抽象基底クラス
– グラフィックコンテキストによってコンポーネント上やオフスクリーンイ
メージ上に描画
n
– コンポーネントのサブクラスの定義
– paintComponent
paintComponentメ
メソッドを再定義
– paintComponent
paintComponent内に描画命令を記述
内に描画命令を記述
基本的な図形表示に必要な状態情報をカプセル化
§
§
§
§
§
§
§
レンダリング対象の Component オブジェクト
レンダリングのための変換の起点とクリッピング座標
現在のクリップ
現在の色
現在のフォント
現在の論理ピクセル操作機能 (XOR または Paint)
現在の XOR 変更色
04.Dec.2002
§ paintComponent メソッドの利用
– paintComponent(Graphics g) ← g がグラフィックスオブジェクト
– そのオブジェクトに対して描画
§ paintComponent 内に記述
– g.drawLine (… );
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
25
Graphics(3)
(0, 0)
class P1101 extends JPanel {
P1101() {
setBackground(Color.white );
setMinimumSize(new Dimension(200, 200));
setPreferredSize(new Dimension(200, 200));
}
X軸
– int getWidth
getWidth()
()
– int getHeight
getHeight()
()
Y軸
( 幅- 1, 高さ- 1)
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
27
public void paintComponent(Graphics g) {
super.paintComponent( g ) ;
g.setColor(Color.darkGray);
g.drawLine(50,50,150,150);
g.setColor(Color.red);
g.drawLine(10, 100, 150, 10);
}
04.Dec.2002
イベント処理の例（
２）
[email protected]
Graphics 領域の指定
1. 最小サイズ
(200, 200)
2. 希望サイズ
(200, 200)
背景色を反映させるた
めに必要
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
n
直線： drawLine
n
n
楕円弧： drawArc
drawArc,, fillArc
楕円： drawOval
drawOval,, fillOval
長方形： drawRect
drawRect,, fillRect
長方形（丸角）： drawRoundRect
drawRoundRect,, fillRoundRect
長方形（3D
3D影付き）
影付き）： draw3DRect, fill3DRect
ひし形： drawPolygon
drawPolygon,, fillPolygon
n
文字列： drawString
n
n
n
n
}
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
26
28
代表的な描画メソッド
public static void main(String args[]) {
JFrame f = new JFrame("描画試験窓");
P1101 example = new P1101();
f.getContentPane().add(example, BorderLayout.CENTER) ;
f.pack( ) ;
f.setVisible(true);
}
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
import java.awt. * ;
import javax.swing.*;
– コンポーネントごとに座標面の位置を指定
– 座標
正の整数で表現
X 軸：
水平軸、Y 軸：
垂直軸
左上の点（
原点）：(0,
：(0, 0)
右下の点：((幅-1, 高さ-1)
右下の点：
04.Dec.2002
図形処理の例（
１）
描画位置
§
§
§
§
実際の流れ
– 描画するグラフィックスオブジェクトの取得
n
– プロパティ
n
カスタムグラフィックスの描画
29
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
30
5
プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
drawLine
n
drawOval
public abstract void
drawLine(int
drawLine
(int x1, int y1, int x2, int y2)
n
public abstract void
drawOval(int
drawOval
(int x, int y, int width,int height)
– 座標点 (x1, y1) と点 (x2, y2) との間に現在の色を使っ
て線を描画
– 引数の x、y 、width
width、
、height で指定される矩形内に収ま
る円または楕円を描画。
– パラメータ:
– パラメータ:
§
§
§
§
x1
y1
x2
y2
-
最初の点の x
最初の点の y
2 番目の点の
2 番目の点の
04.Dec.2002
§
§
§
§
座標
座標
x 座標
y 座標
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
31
x - 描画される楕円の左上隅の x 座標
y - 描画される楕円の左上隅の y 座標
width - 描画される楕円の幅
height - 描画される楕円の高さ
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
drawRect
n
drawPolygon
public void
drawRect(int
drawRect
(int x, int y, int width, int height)
n
public abstract void
drawPolygon(int
drawPolygon
(int[]
[] xPoints,int
xPoints,int[]
[] yPoints,int nPoints
nPoints))
– 指定された矩形の描画。
– 矩形は、左端と右端がそれぞれ x と x + width 、上端と
下端がそれぞれ y とy + height で指定
– x 座標と
座標とyy 座標の配列で定義された閉じた多角形を描画
– パラメータ:
– パラメータ:
§
§
§
§
§ 座標 (x, y) の各ペアは点を定義します。
x - 描画される矩形の x 座標
y - 描画される矩形の y 座標
width - 描画される矩形の幅
height - 描画される矩形の高さ
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
§ xPoints - x 座標の配列
§ yPoints - y 座標の配列
§ nPoints - 点の総数
33
04.Dec.2002
drawString
n
32
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
34
課題（
１）
public abstract void
drawString(String
drawString
(String str,int x, int y)
n
例を参考にして以下のような図を描くプログラムを
作成せよ。
– 指定された文字列を位置座標（
x, y）
y ）に描画。
– パラメータ:
§ str - 描画される文字列
§ x - x 座標
§ y - y 座標
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
[email protected]
35
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
36
6
プログラミング論II - 11: Java言語 GUI(3)
04.Dec.2002
数学関数
Java言語
- 数学関数 -
n
Mathクラス
Math
クラス
– a の絶対値
§ static int abs(int a)
– a の sin, cos
cos,, tan
§ static double sin(double a)
§ static double cos(double a)
§ static double tan(double a)
Java Language
- Mathematic Function -
– a の平方根
§ static double sqrt(double a)
– aのb乗
§ static double pow(double a, b)
– 乱数（
0.0 ∼ 1.0
1.0）
）
§ static double random()
04.Dec.2002
数学関数（
2）
n
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
38
課題（
２）
利用法
n
– a の平方根を求め、b に代入
0から100の間の一様乱数を10個出力するプ
ログラムを作成せよ。
b = Math
Math..sqrt
sqrt(a
(a);
);
– Math.random() の利用
– double - > int 変換は C/C++
C/C++言語
言語
と同様
– 0.0 ∼ 1.0 の乱数を
の乱数を10
10個出力
個出力
for ( j=0; j<10; j++) {
ran = Math
Math..random
random();
();
System.out.println(ran);
System.out.println(ran
);
}
例：
以下のようにするとdouble
double型
型
の3.0
3.0が
がint 型に変換された後、
a に代入される
0:
0:
1:
1:
2:
2:
3:
3:
4:
4:
5:
5:
6:
6:
7:
7:
8:
8:
9:
9:
85
85
36
36
61
61
85
85
19
19
58
58
10
10
57
57
22
22
57
57
a = (int)(3.0);
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
39
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
40
課題（
３）
n
0から200までの乱数を発生させ、その乱数を
x座標、y座標とした半径0.5の円を1000個描
け。
– Math.random() の利用
–
drawOval(ｘ
drawOval(
座標,
座標
, ｙ
座標,, 幅, 高さ)を利用
座標
g.drawOval(x,, y, 1, 1);
g.drawOval(x
高さ
(x,y)
幅
04.Dec.2002
11: Java 言語 GUI(3) - [email protected] - hiroshima.ac.jp
[email protected]
41
7