Graphics and Image Manipulations

GUIコンポーネント関するイベント処理
Event Handling
• What are events and event handling?
• ActionEvent - ActionListener - actionPerformed(ActionEvent e)
• ItemEvent - ItemListener - itemStateChanged(ItemEvent e)
• TextEvent - TextListener - textValueChanged(TextEvent e)
• AdjustmentEvent - adjustmentListener
- adjustmentValueChanged(AdjustmentEvent e)
• WindowEvent - WindowListener - windowClosing(WindowEvent e)
• MouseEvent - MouseListener - 5 methods (mousePressed(MouseEvent e))
- MouseMotionListener – mouseMoved(MouseEvent e)
ユーザ ー> インタフェース
ー>
ー> アクション
GUI
GUI
コンポーネントに
イベントリスナー
コンポーネント
ユーザ操作
イベントリスナー
actionPerformed()
{……}
TextField object(s)
ActionListener
Button object(s)
ItemListener
itemStateChanged()
{……}
Choice object(s)
TextListener
textValueChanged()
{……}
Checkbox object(s)
AdjustmentListener
List object(s)
WindowListener
TextArea object(s)
Scrollbar object(s)
…
ユーザインタフェース
adjustmentValueChanged()
{……}
…
MouseListener
イベント
KeyListener
アクション
…
イベントリスナー
発生したイベントに対するアクション
java.awt.event class package
event class hierarchy
ContainerEvent
java.lang.Object
ActionEvent
FocusEvent
java.util.EventObject
AdjustmentEvent
PaintEvent
ItemEvent
java.awt.AWTEvent
ComponentEvent
WindowEvent
TextEvent
InputEvent
java.lang.Object
|
+--java.util.EventObject
KeyEvent
MouseEvent
|
+--java.awt.AWTEvent
|
+--java.awt.event.ActionEvent
AWT event class
次に説明します
java.awt.event interface package
interface hierarchy
java.lang.Object
ActionListener
public void actionPerformed(ActionEvent e)
ItemListener
public void itemStateChanged(ItemEvent e)
TextListener
public void textValueChanged(TextEvent e)
java.util.EventListener
WindowListenert
AdjustmentListener
public void windowClosing(WindowEvent e)
public void adjustmentValueChanged(AdjustmentEvent e)
public void keyTyped(KeyEvent e)
KeyListener
public void keyPressed(KeyEvent e)
public void keyReleased(KeyEvent e)
AWT event interface
public void mouseClicked(MouseEvent e)
MouseListener
public void mousePressed(MouseEvent e)
public void mouseReleased(MouseEvent e)
public void mouseEntered(MouseEvent e)
public void mouseExited(MouseEvent e)
次に説明します
MouseMotionListener
……
public void mouseDragged(MouseEvent e)
public void mouseMoved(MouseEvent e)
イベントの処理
event handling
ソース
イベント処理なし
GUIコンポーネント(TextField, Button, …)オブジェクトを生成して、
アプレットに追加します。
例: field = new TextField(10);
add(field);
=>GUIコンポーネントにイベントリスナーオブジェクトを登録します。
例: field.addActionListener(this);
=>ユーザが何かアクションをすると、アクションイベントが発生します。
例: Enterキーを押し、ボタンをクリックすること
=>イベントリスナー関するインタフェースメソッドが自動的に呼び出されて、
発生したイベントを捕らえるようにする。
例: public void actionPerformed(ActionEvent e){
showStatus(“ユーザから入力したテキストは: ”, e.getActionCommand());
}
イベントリスナー関する
インタフェースメソッドを
呼び出す。
イベントメソッ
ドを呼び出す。
ActionEvent
関するGUIコンポーネントオブジェクト
ソース
Actionイベント
public class testApplet extends Applet
implements ActionListener{
(TextField ,Button)
TextFiled password; Button button;
=>GUIコンポーネントにイベントリスナーオブジェクト
public void init() {
(addActionListener(this))
password = new TextField(20);
=>ユーザのアクション (Enterキーを押しすること,
password.setEchoChar('*');
ボタンをクリックすること)
password.addActionListener(this);
add(password);
=>イベントリスナー関するインタフェースメソッド
button = new Button("addition");
(public void actionPerformed(ActionEvent e){} )
button.addActionListener(this);
add(button);
ActionEvent メソッド
}
public String getActionCommand()
TextFieldから入
力したテキストを
返す
public void actionPerformed(ActionEvent e){
Returns the command string associated with this action.
Returns:
the string identifying the command for this event
if (e.getSource()==password){
showStatus(e.getActionCommand());
}
public Object getSource()
if(e.getSource() == button){
The object on which the Event initially occurred.
int result; result = 10 + 5;
Returns:
the object on which the Event initially occurred.
showStatus(result));
}
……
}
}
イベントが発生さ
れたオブジェクト
名を返す。
ItemEvent (Choice)
関するGUIコンポーネントオブジェクト
(addItemListener(this))
Itemイベント
public class testApplet extends Applet
(Choice)
=>GUIコンポーネントにイベントリスナーオブジェクト
ソース
implements ItemListener{
TextField textField; Choice choice;
public void init() {
=>ユーザのアクション (項目をクリックすること)
textField = new TextField("TextField Demo", 30);
=>イベントリスナー関するインタフェースメソッド
textField.setEditable(false);
textField.addActionListener(this);
(public void itemStateChange(ItemEvent e){} )
add(textField);
choice = new Choice();
choice.add("English");
ItemEvent メソッド
choice.add("日本語");
choice.addItemListener(this);
public String getItem()
add(choice);
Returns the command string associated with this action.
Returns:
the string identifying the command for this event
public Object getItemSelectable()
choice.insert(“中国語”, 1);
Choice メソッド
選択した項目のイン
デックスを返す
}
public void itemStateChanged(ItemEvent e){
Choice whichChoice = (Choice) e.getItemSelectable();
The object on which the Event initially occurred.
Returns:
the object on which the Event initially occurred.
textField.setText("Index: " + whichChoice.getSelectedIndex()
+ ", “ + "Language: " + e.getItem());
……
}
}
ItemEvent(Checkbox)
関するGUIコンポーネントオブジェクト
ソース
Itemイベント
public class testApplet extends Applet
implements ItemListener {
(Checkbox)
TextField textField; Checkbox fontBold, fontItalic;
=>GUIコンポーネントにイベントリスナーオブジェクト
public void init() {
(addItemListener(this))
textField = new TextField("TextField Demo", 30);
=>ユーザのアクション (項目をクリックすること)
textField.setEditable(false);
=>イベントリスナー関するインタフェースメソッド
textField.addActionListener(this);
add(textField);
(public void itemStateChange(ItemEvent e){} )
fontBold = new Checkbox("Bold");
fontBold.addItemListener(this);
add(fontBold);
Checkbox メソッド
fontItalic = new Checkbox("Italic");
fontItalic.addItemListener(this);
public boolean getState()
Determines whether this check box is in the "on" or "off" state.
Returns:
the state of this check box, as a boolean value.
……
add(fontItalic);
}
public void itemStateChanged(ItemEvent e){
int valBold = (fontBold.getState() ? Font.BOLD : Font.PLAIN);
int valItalic = (fontItalic.getState() ? Font.ITALIC :Font.PLAIN);
TextField メソッド
textField.setFont(new Font("Serif", valBold + valItalic, 14));
テキストフォントの設定
}
}
ItemEvent(Radio Button)
関するGUIコンポーネントオブジェクト
ソース
Itemイベント
public class testApplet extends Applet
implements ItemListener{
(Checkbox, Checkbox Group)
Checkbox colorRed, colorBlue;
=>GUIコンポーネントにイベントリスナーオブジェクト
CheckboxGroup color;
(addItemListener(this))
public void init() {
color = new CheckboxGroup();
=>ユーザのアクション (項目をクリックすること)
colorRed = new Checkbox("red", color, true);
=>イベントリスナー関するインタフェースメソッド
colorRed.addItemListener(this);
(public void itemStateChange(ItemEvent e){} )
add(colorRed);
colorBlue = new Checkbox("blue", color, false);
ItemEvent メソッド
colorBlue.addItemListener(this);
add(colorBlue);
public Object getSource()
}
The object on which the Event initially occurred.
Returns:
the object on which the Event initially occurred.
public void itemStateChanged(ItemEvent e){
if(e.getSource() == colorRed)
……
{ setBackground(Color.red);
repaint(); }
else if (e.getSource() == colorBlue)
{ setBackground(Color.blue);
}
Applet メソッド
アプレット背景色の設定
}
repaint(); }
ItemEvent(List)
ソース
関するGUIコンポーネントオブジェクト
Itemイベント
public class testApplet extends Applet
implements ItemListener{
(List)
List colorlist;
=>GUIコンポーネントにイベントリスナーオブジェク
public void init() {
(addItemListener(this))
colorlist = new List(4, false);
=>ユーザのアクション (項目をクリックすること)
colorlist.addItemListener(this);
=>イベントリスナー関するインタフェースメソッド
colorlist.add(“yellow");
(public void itemStateChange(ItemEvent e){} )
colorlist.add("green");
colorlist.add(“cyan");
colorlist.add(“pink”);
add(colorlist);
List メソッド
}
public String getSelectedItem()
public void itemStateChanged(ItemEvent e){
gets the index of the selected item on the list
showStatus("Color selected is: " +colorlist.getSelectedItem()
+ ", index is: “ + colorlist.getSelectedIndex() );
public int getSelectedIndex()
get the selected item on this scrolling list.
}
}
TextEvent
ソース
関するGUIコンポーネントオブジェクト
textイベント
public class testApplet extends Applet
(TextArea)
implements ActionListener, TextListener{
=>GUIコンポーネントにイベントリスナーオブジェクト
TextArea area, copyarea;
(addTextListener(this))
public void init() {
area = new TextArea("Hello!", 10, 30);
=>ユーザのアクション (ユーザがテキストエリアで
area.addTextListener(this);
テキストを変更すること)
area.setEditable(true); add(area);
=>イベントリスナー関するインタフェースメソッド
area.append("This is a demo." +"\n");
(public void textValueChanged(TextEvent e){} )
copyarea = new TextArea(10, 30);
add(copyarea);
TextEvent メソッド
}
public Object getSource()
public void textValueChanged(TextEvent e){
// TextComponent source = (TextComponent) e.getSource();
The object on which the Event initially occurred.
TextArea source = (TextArea) e.getSource();
Returns:
the object on which the Event initially occurred.
copyarea.setText(source.getText());
……
}
}
getText()メソッドを使ってイベントの
発生源(area)にStringオブジェクトを
取り出し、それをsetText()メソッドに
輪出してテキストエリア(copyarea)に
表示します。
TextEventメソッドを使っ
てイベントの発生源を取
得し、それをTextAreaク
ラス型にキャストします。
AdjustmentEvent
ソース
関するGUIコンポーネントオブジェクト
(Scollbar)
nnpublic class ScrollbarDemo extends Applet implements AdjustmentListener{
=>GUIコンポーネントにイベントリスナーオブジェクト
private Scrollbar scrollHeight, scrollWidth;
private ovalDrawFrame myFrame;
(addAdjusttmentListener(this))
public void init()
{ setSize(200,200);
=>ユーザのアクション (ユーザがmouseをつかって、
myFrame = new ovalDrawFrame("Draw an oval");
スクロールバーを操作すること)
myFrame.setSize(300, 300);
=>イベントリスナー関するインタフェースメソッド
(public void adjustmentValueChanged(AdjustmentEvent
adjustmentイベント
e){}
myFrame.setBackground( Color.yellow );
scrollHeight = new Scrollbar( Scrollbar.VERTICAL, 100, 1, 0, 200 );
)
scrollHeight.addAdjustmentListener(this);
AdjustmentEventメソッド
scrollWidth = new Scrollbar( Scrollbar.HORIZONTAL, 100, 1, 0, 200 );
public Object getSource()
myFrame.setLayout( null ); // No layout
scrollWidth.addAdjustmentListener(this);
The object on which the Event initially occurred.
public int getValue()
myFrame.add( scrollHeight );
scrollHeight.setBounds( 225, 0, 10, 225 );
myFrame.add( scrollWidth );
scrollWidth.setBounds( 0, 225, 225, 10 );
myFrame.setVisible(true);
Return: scrollbar’s value
myFrame.setLocation( 100, 100 );
……
}
public void adjustmentValueChanged( AdjustmentEvent e )
public Scrollbar(
int orientation, //横または縦
int initialValue, // スクロールバーの初期値
int visibleArea, // 可視領域比
int minimumValue, // スクロールバーの最小値
int maximumValue) // スクロールバーの最大値
{
if ( e.getSource() == scrollWidth)
myFrame.setOvalWidth( e.getValue() );
else if ( e.getSource() == scrollHeight )
Scrollbarオブ
ジェクトを返す。
myFrame.setOvalHeight( e.getValue() );
}
}
setOvalHeight()とsetOvalWidth)が
ovalDrawFrameクラスに定義されます。
WindowEvent
frame
CLoseWindow
import java.awt.event.*;
関するGUIコンポーネントオブジェクト
import java.awt.*;
(Frame )
public class CloseWindow extends WindowAdapter {
public void windowClosing( WindowEvent e )
=>GUIコンポーネントにイベントリスナーオブジェクト
{
(addWindowListener(this))
=>ユーザのアクション (Windowをcloseとexitする)
e.getWindow().setVisible(false); }
}
public class ovalDrawFrame extends Frame {
=>イベントリスナー関するインタフェースメソッド
private int ovalWidth, ovalHeight;
CloseWindowオブ
ジェクトをウィンドイ
public ovalDrawFrame(String s)
ベントリスナーとして
{ super(s);
登録します
addWindowListener(new CloseWindow());
(public void WindowClosing(WindowEvent
e){} )
WindowEvent メソッド
setOvalWidth(100);
setOvalHeight(100);
}
public Object getWindow()
getWindow()メソッド
を使ってイベントの発
生源を取得し、
setVisible()メソッドを
つかってウィンドを表
示します。
public void paint( Graphics g )
The object on which the Event initially occurred.
{
Returns:
the object on which the Event initially occurred.
g.drawOval( 5, 25, ovalWidth, ovalHeight ); }
public void setOvalWidth( int w )
{
……
ovalWidth = w;
repaint(); }
public void setOvalHeight( int h )
{
}
ovalHeight = h;
repaint(); }
MouseEvent
Demo
public class MouseTracker extends Applet
implements MouseListener, MouseMotionListener {
関す
private int xPos, yPos = -10;
(Any GUI component)
private String s = "";
=>Mouseイベントリスナーオブジェクト
public void init()
(addMouseListener(this)
{ addMouseListener(this);
addMouseMotionListener(this); }
public void paint(Graphics g)
addMouseMotionListener(this))
{ g.drawString(s + "@[" + xPos + ", " + yPos + "]", xPos, yPos); }
=>ユーザのアクション (Mouseを使っている)
private void setValues(String event, int x, int y)
=>イベントリスナー関するインタフェースメソッド
{ s = event;
xPos = x;
yPos = y;
repaint(); }
public void mouseClicked(MouseEvent e)
(5 for MouseListener, 2 for MouseMotionListener)
{ setValues("Clicked", e.getX(), e.getY()); }
public void mousePressed(MouseEvent e)
{ setValues("Pressed", e.getX(), e.getY()); }
public void mouseClicked(MouseEvent e)
public void mouseReleased(MouseEvent e)
public void mousePressed(MouseEvent e)
{ setValues("Released", e.getX(), e.getY()); }
public void mouseReleased(MouseEvent e)
public void mouseEntered(MouseEvent e)
{ showStatus("Mouse in applet area"); }
public void mouseEntered(MouseEvent e)
public void mouseExited(MouseEvent e)
public void mouseExited(MouseEvent e)
{ showStatus("Mouse outside applet area"); }
public void mouseDragged(MouseEvent e)
{ setValues("Dragging", e.getX(), e.getY()); }
public void mouseDragged(MouseEvent e)
public void mouseMoved(MouseEvent e)
public void mouseMoved(MouseEvent e)
{ setValues("Moving", e.getX(), e.getY()); }
}
Free Drawing
Demo
public class Draw extends Applet implements MouseMotionListener{
private int xValue = -10, yValue = -10;
public void init()
MouseMotionイベント
に関するインタフェース
{
MouseMotionイベント
リスナーオブジェクトを
登録します
addMouseMotionListener(this);
}
public void paint( Graphics g)
{
Updateはrepaint()が呼び
出されたときにアプレットの
背景をクリアしないよう再
定義します。デフォルトの
updateでは現在の背景色
でアプレットの背景を塗り
替えたあと、paint()を呼び
出しますが、こうすることで
塗りかえることなくpaint()メ
ソッドを呼び出せます。
g.drawString("Drag the mouse to draw", 10,60);
g.fillOval(xValue, yValue, 4,4);
}
public void update(Graphics g)
{
paint(g);
}
イベント処理時、このメ
ソッドが呼ばれます。
public void setCoordinates(int x, int y)
{
xValue = x; yValue = y;
repaint();
}
public void mouseMoved(MouseEvent e){
Mouse Dragging イベン
ト処理
public void mouseDragged(MouseEvent e)
{
setCoordinates(e.getX(), e.getY());
}
}
}
課題
• 1.電卓のGUIを作成せよ。 ex1
lastWeekEx1
ソース
作成したGUIには機能を持たせるようにプログラムを作成せよ。
(2 one-digital integers’s addition, subtraction, multiplication, division functions)
1.1 ボタンをクリックすると、ボタンのラベルを TextFieldに表示するようにします。
1.2 演算子ボタンをクリックした時、showStatus()メソッドを使って、ボタンのラベル
を表示させます。 数字ボタンをクリックした時、ボタンのラベルをTextFieldに
表示させます。 小数点ボタンをクリックしても、アクションはしない。=ボタンを
クリックすると、メッセージ(“Output result”) をTextFieldに表示させます。
1.3 電卓のように二つの一位整数の加算の機能を追加します。
入力には、以下の順にします。
number1 + number2 = result
他の順にする場合は、 showStatus()メソッドを使って、注意メッセージを表示させます。
1.4 (optional)電卓のように二つの一位整数の加、減、乗、除算の機能を追加します。
• 2. (optional)印刷機のGUIを作成せよ。
ユーザはOK button を押すと、TextField, Checkbox, Radio button, List に入
力したテキストと選択項目内容をTextAreaに出力させます。
ex2 lastWeekEx2
ソース