第14回　GUIの構成とイベント･ドリブン ～GUIを使ったプログラム(Ⅰ)～.

Presentation on theme: "第14回　GUIの構成とイベント･ドリブン ～GUIを使ったプログラム(Ⅰ)～."— Presentation transcript:

1 第14回　GUIの構成とイベント･ドリブン ～GUIを使ったプログラム(Ⅰ)～

2 学習目標 イベント･ドリブンプログラミングの利点を説明できる Swingを利用して簡単なGUIプログラムが書ける
簡単なカスタムウインドウを表示できる イベントハンドラの生成･登録ができる ModelとViewを分離する設計について議論できる

3 GUIアプリケーション 今回はいよいよGraphical User Interfaceに挑戦します 管理画面 購入画面

4 14.1 SwingAPIを使う Swing概要 Swingを使ってみよう

5 14.1.1 Swing概要 JavaでGUIのプログラムを書くためのAPI ①ウインドウを出す ②カスタムウインドウを作る
GUIに関するクラス･ライブラリ群は「Swing」と呼ばれている ①ウインドウを出す ②カスタムウインドウを作る

6 Swing概要 すべてがオブジェクト 「コンポーネント」という JFrame JLabel JTextField JButton

7 14.1.2 Swingを使ってみよう ①ウインドウを出す 例題14-1 (Example14_1.java)
import javax.swing.*;//swingクラスライブラリの利用を宣言する import java.awt.*;//swingクラスライブラリの利用を宣言する //ウインドウを表示する public class Example14_1 { //プログラム･メイン //フレームを起動する public static void main(String args[]){ JFrame frame = new JFrame();//Swingで提供されるJFrameオブジェクト生成 frame.setTitle("初めてのウインドウ");//タイトル設定 frame.setSize(200,200);//大きさ設定 frame.setLocation(50,50);//位置設定 frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);//ウインドウが閉じたときに プログラムが終了するように設定 frame.setVisible(true);//表示する }

8 実行結果 次はこのウインドウにボタンを 乗せてみましょう！

9 ②カスタムウインドウを作る ウインドウにボタンを乗せる JFrameを継承して、カスタムウインドウを作ります Swing プログラム
表示する() 再描画()など Swing プログラム

10 ButtonFrameのリスト 例題14-2 (ButtonFrame.java)
import javax.swing.*;//swingクラスライブラリの利用を宣言する import java.awt.*;//swingクラスライブラリの利用を宣言する //JFrameクラスを継承したカスタムフレーム（ウインドウ）クラス //ボタンが一つ乗せられている public class ButtonFrame extends JFrame{ //コンストラクタ public ButtonFrame(){ getContentPane().setLayout(null);//ウインドウに載せられるすべてのオブジェクトの位置 を自分で設定できるようにする。 //ボタンを設定する JButton button = new JButton();//ボタンをインスタンス化 button.setText("初めてのボタン");//ボタンのラベル名設定 button.setSize(150,20);//ボタンの大きさ設定 button.setLocation(20,50);//ボタンの位置設定(ウインドウからの相対位置) //ボタンをウインドウに乗せる getContentPane().add(button); }

11 ButtonFrameを表示するMain
例題14-2 (Example14_2.java) //ウインドウにボタンを乗せる //カスタムフレーム(ウインドウ)の作成 public class Example14_2 { //プログラム･メイン //フレームを起動する public static void main(String args[]){ JFrame frame = new ButtonFrame();//カスタムフレームオブジェクト生成 frame.setTitle("初めてのウインドウ");//タイトル設定 frame.setSize(200,200);//大きさ設定 frame.setLocation(50,50);//位置設定 frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);//ウインドウが閉じたときに プログラムが終了するように設定 frame.setVisible(true);//表示する }

12 実行結果 ボタンが乗せられました。 しかし、押しても何も起こりません。 次は、ボタンが押されたとき、プログラムを 終了するようにしましょう！

13 14.2 イベント･ドリブンプログラミング 14.2.1 ボタンが押された時の処理を考える
Javaによるイベント･ドリブンプログラミング

14 ボタンが 押された時の処理を考える ①原始的な方法 ポーリング 一定期間ごとにハードウエアの状態を調べる

15 ハードウエアの状態を調べる 何処にいる？ プログラム 動いてないよ！ 押されてる？ プログラム “a”が押されてます

16 ハードウエアを調べるプログラム 下記のメソッドを一定期間ごとに動かす //Javaではない仮想言語
public void ボタンが押されたかどうかを調べて、押されていたら終了する（）{ 　マウスの位置を調べる(); if(マウスの位置がButtonの中にある){ マウスの状態を調べる(); if(マウスが押されている){ if(押されているのは、マウスの左ボタンである){ プログラムを終了する }

17 ポーリングの問題点 考えてみよう

18 ポーリングの問題点 効率が悪い（CPUに負担をかける） プログラミングが大変 動いていないかもしれないのに調べる必要がある
マウスの正確な動きを捉えるには、相当細かい期間ごとに調べなければならない プログラミングが大変 ややこしいメソッドを用意する必要がある ボタンがたくさんあったら大変

19 ②イベント･ドリブン プログラミング イベント･ドリブン ポーリングの問題点を解決するためのプログラミングスタイル
処理をイベント毎に分割して記述して、 必要に応じて呼びだされ, 処理される

20 イベント・ドリブンの考え方 ハードウエアを 常に見張っている 唯一のプログラム 押されたよ！ プログラム プログラム 常に見張っている

21 イベント･ドリブンの用語 イベント・ディスパッチャー イベント イベント・ハンドラ ハードウエアを 常に見張っている 唯一のプログラム
押されたよ！ プログラム

22 イベント・ドリブンプログラミング イベントドリブン型プログラムを作る時は、ただひたすら、イベントハンドラをどう書くかに集中すれば良い
public void ボタンが押されたときの処理（）{ System.exit(0); } これだけのメソッドを書けばよくなる

23 14.2.2 Javaによる イベント･ドリブンプログラミング
②イベントハンドラの作成 ③イベントハンドラの登録 Javaテクニック ④インナークラス ⑤テキストフィールドと連動するプログラム

24 ①Javaによるイベント･ドリブン JavaのSwingフレームワークはこの機能を標準で持っている
JavaではイベントハンドラのことをEventListenerと呼び、オブジェクトとして表現 Javaではイベントもオブジェクトとして扱う(EventObject)

25 Javaによるイベント･ドリブン（2） イベント・ディスパッチャー イベント イベント・ハンドラ Swingが提供 EventObject
ハードウエアを 常に見張っている 唯一のプログラム EventListener 押されたよ プログラム

26 (ExitButtonListener.java)
②イベントハンドラの作成 例題14-3 (ExitButtonListener.java) import java.awt.event.*;//eventクラスライブラリの利用を宣言する //ボタンを押したときのイベントハンドラ クラス public class ExitButtonListener implements ActionListener{ //ボタンが押されたときのイベントハンドラ public void actionPerformed(ActionEvent e){ System.exit(0);//プログラムを終了する } ActionListenerはEventListenerの サブインターフェイス メソッド名はインターフェイスが 決めているので間違えないように ActionEventはEventObjectの サブクラスで、イベントを表すクラス

27 ③イベントハンドラの登録 イベントハンドラを生成し、 addActionListener()メソッドを使って 登録する 例題14-3
//JFrameクラスを継承したカスタムフレーム（ウインドウ）クラス public class ButtonFrame extends JFrame{ //コンストラクタ public ButtonFrame(){ getContentPane().setLayout(null); //ボタンを設定する JButton button = new JButton(); button.setText("初めてのボタン"); button.setSize(150,20); button.setLocation(20,50); //イベントハンドラを設定する ExitButtonListener listener = new ExitButtonListener();//イベントハンドラをインスタンス化 button.addActionListener(listener);//イベントハンドラを受信者として登録する //ボタンをウインドウに乗せる getContentPane().add(button); } 例題14-3 (ButtonFrame.java) イベントハンドラを生成し、 addActionListener()メソッドを使って 登録する

28 実行してみましょう！ ボタンを押すと、ウインドウが 閉じて終了するはずです

29 (Javaテクニック) ④インナークラス 例題14-4 (ButtonFrame.java)
//JFrameクラスを継承したカスタムフレーム（ウインドウ）クラス public class ButtonFrame extends JFrame{ //コンストラクタ public ButtonFrame(){ 　　//ボタンを設定する //途中割愛 //イベントハンドラを設定する ExitButtonListener listener = new ExitButtonListener();//イベントハンドラをインスタンス化 button.addActionListener(listener);//イベントハンドラを受信者として登録する //ボタンをウインドウに乗せる getContentPane().add(button); } //ボタンを押したときのイベントハンドラ インナークラス class ExitButtonListener implements ActionListener{ //ボタンが押されたときのイベントハンドラ public void actionPerformed(ActionEvent e){ System.exit(0);//プログラムを終了する 例題14-4 (ButtonFrame.java)

30 インナークラス クラスの中にクラスを書くことができる Javaの便利な仕組み インナークラスを使う利点は何でしょうか？

31 ⑤テキストフィールド と連動するプログラム
ボタンが押された時、テキストフィールドの内容を変更するプログラム ボタンが押された

32 テキストフィールド と連動するプログラムのリスト
//JFrameクラスを継承したカスタムフレーム（ウインドウ）クラス public class ButtonFrame extends JFrame{ private JTextField textField = new JTextField();//テキストフィールド //コンストラクタ public ButtonFrame(){ //ボタンを設定する(割愛) //イベントハンドラを設定する(割愛) //ボタンをウインドウに乗せる(割愛) //テキストフィールドを設定する textField.setText("ボタンは押されていません"); textField.setBounds(20,100,150,20);//位置、大きさ設定(x,y,width,height) 　　getContentPane().add(textField);//テキストフィールドをウインドウに載せる } //ボタンを押したときのイベントハンドラ インナークラス public class TextFieldChangeButtonListener implements ActionListener{ //ボタンが押されたときのイベントハンドラ public void actionPerformed(ActionEvent e){ textField.setText("ボタンが押されました"); テキストフィールドを 生成する テキストフィールドの 内容を変更する

33 インナークラスの利点 簡単に他のコンポーネントと連動できるようになる
もちろん、イベントハンドラに参照を渡すようにして、プログラムを分割してもできる プログラムを分割する必要がある場合はそうする

34 14.3 GUI自動販売機の構成 14.3.1 GUI自動販売機概要 14.3.2 ModelとViewの分離

35 14.3.1 GUI自動販売機概要 自動販売機用コンポーネントを利用する 基本構造 管理者用ウインドウ(AdminFrameクラス)
CUI版CUIAdminAppの機能を備えている ユーザ用ウインドウ(UserFrameクラス) CUI版CUIUserAppの機能を備えている

36 基本構造 ユーザウインドウ 管理者ウインドウ

37 14.3.2 ModelとViewの分離 ①CUI自動販売機の再利用 ②ModelとViewの分離 ③現状のModelの問題点
④display()メソッドの廃止

38 ①CUI自動販売機の再利用 CUIアプリケーションのオブジェクトは再利用できるものがある 再利用可能

39 GUI自動販売機の構成 GUIになっても構造は変わらない

40 ②ModelとViewの分離 再利用できるものとできないものの違いを考える

41 ModelとView 再利用できるもの 再利用できないもの 自動販売機における実体や概念の構造に関わる部分→Model
（アプリケーションロジックに関わる部分）

42 ModelとViewの分離 ModelとViewを分離しておくことによって、表示の変更が容易になる
分離していなかったらGUIは始めから作り直し Viewクラス群 表示役 Modelクラス群 実体や概念

43 ③現状のModelの問題点 ItemTypeListクラスのdisplay()メソッドは、CUI専用のコードになっている
例題11-1 (ItemTypeList.java) #display() //商品種類を表示する public void display(){ for(int i=0;i<size;i++){ //商品種類を表示 System.out.println(itemTypeArray[i].getId()+":"+itemTypeArray[i].getName()+":" +itemTypeArray[i].getPrice()+"円"); } ※ItemStockクラスも同様

44 display()メソッド CUIとGUIでは異なる表示にしたい 現状のdisplay()メソッドではGUIに対応できない
Modelは構造だけに責任をもつ 1001:cola:120円 1002:soda:120円 CUI商品種類表示 GUI商品種類表示

45 ④display()メソッドの廃止 表示の責任はViewが持つべきだから、display()メソッドは廃止する
変わりにCUI、GUIがそれぞれの表示をできるようにメソッドを追加する int size() 要素数を取得する ItemType get(int index) index番目の商品種類を取得する

46 display()はViewに任せる size()メソッドと get(index)メソッド があれば、表示可能 例題11-2
(CUIAdminApp.java) # showItemTypeList() //商品種類リストを閲覧する public void showItemTypeList(){ itemTypeList.display(); } //商品種類リストを閲覧する public void showItemTypeList(){ int len = itemTypeList.size(); for(int i=0;i<len;i++){ ItemType itemType = itemTypeList.get(i); System.out.println(itemType.getId()+":" +itemType.getName()+":" +itemType.getPrice()+"円"); } size()メソッドと get(index)メソッド があれば、表示可能

47 Model-View分離 ModelとViewで責任を分離したプログラムの利点 表示の変更が容易に行える
様々な表示（CUI,GUI）に対応したModelプログラムが書ける 重複コードがなくなる

48 14.3.3 GUI自動販売機プログラミング ①自動販売機用コンポーネント ②GUI自動販売機の起動 ③UserFrame解説
④100円投入ボタンを追加する

49 ① 自動販売機用コンポーネント(1) 代表的なクラス BackgroundPanelクラス 背景用のコンポーネントです。
この上に他の自販機コンポーネントを乗せる ことができます。 ItemImagePanelクラス 商品種類を表示するための コンポーネントです。

50 ① 自動販売機用コンポーネント(2) BuyButtonクラス 購入ボタンです ProductOutletクラス 商品取り出し口です
CoinDepositクラス 投入金額を表示します

51 ②GUI自動販売機の起動 itemTypeListと Accountを生成して 2つのウインドウに渡している 例題14-6
(Example14_6.java) //GUI自動販売機を起動するためのメイン･クラス public class Example14_6 { /** * プログラム･メイン * 操作するための2つのウインドウ（管理ウインドウ,購入ウインドウ） * を生成、表示する */ public static void main(String args[]){ ItemTypeList itemTypeList = new ItemTypeList(); //商品種類リストを生成 Account account = new Account(); //投入金勘定を生成 //管理ウインドウを生成して表示する AdminFrame adminFrame = new AdminFrame(itemTypeList,account);//生成 adminFrame.setVisible(true);//表示 //購入ウインドウを生成して表示する UserFrame userFrame = new UserFrame(itemTypeList,account);//生成 userFrame.setVisible(true);//表示 } itemTypeListと Accountを生成して 2つのウインドウに渡している

52 ③UserFrame解説 コンストラクタ 更新メソッド(3種類) イベント･ハンドラ 各種コンポーネントを生成して、ウインドウに貼り付ける
例題14-6 (UserFeame.java) コンストラクタ 各種コンポーネントを生成して、ウインドウに貼り付ける 更新メソッド(3種類) Modelの状態を反映して、表示を更新するために使う イベント･ハンドラ ボタンが押された時のイベントハンドラを記述

53 ④100円投入ボタンを追加する 100円投入できるようにする ボタンが押されたら

54 100円投入ボタンを追加する ボタン生成 ボタン設定 イベント･ハンドラ 例題14-7 (UserFeame.java)
//ユーザフレーム（商品購入メインウインドウ）クラス //説明に不要な部分を割愛してある public class UserFrame extends JFrame{ public JButton button100 = new JButton();//100円ボタン //コンストラクタ public UserFrame(ItemTypeList newItemTypeList,Account newAccount){ //100円投入ボタン設定 button100.setText("100円"); button100.setBounds(new Rectangle(385, 240, 79, 27)); button100.addActionListener(new Button100_ActionListener()); background.add(button100, null); } //100円投入ボタン･イベントハンドラ class Button100_ActionListener implements java.awt.event.ActionListener{ public void actionPerformed(ActionEvent e) { account.insert(new Money(100));//100円投入する stateUpdate();//状態を更新する ボタン生成 ボタン設定 イベント･ハンドラ

55 イベント･ハンドラ解説 投入金勘定への金の追加 stateUpdate()を呼ぶ CUIと同様
//100円投入ボタン･イベントハンドラ class Button100_ActionListener implements java.awt.event.ActionListener{ public void actionPerformed(ActionEvent e) { account.insert(new Money(100));//100円投入する stateUpdate();//状態を更新する }

56 課題ヒント 課題14-3:購入ボタンのイベント･ハンドラを実装せよ 購入ボタン用のイベントハンドラが用意されている
//ユーザフレーム（商品購入メインウインドウ）クラス //購入ボタンのイベントハンドラ以外は割愛 public class ShoppingFrame extends JFrame{ //購入ボタン･イベントハンドラ //押されたボタンと、そのボタンが対象とする商品の種類が引数 public void buyButton_pressed(BuyButton buyButton,ItemType itemType){ } 購入ボタン用のイベントハンドラが用意されている

57 購入イベント･ハンドラの実装 取り出し口に出すプログラム itemは取り出した商品 構造が変化したら、状態を更新する
プログラムの目的（コメント）は、CUIプログラムと同様になる コメントに合わせてプログラムを書く //購入ボタン･イベントハンドラ //押されたボタンと、そのボタンが対象とする商品の種類が引数 public void buyButton_pressed(BuyButton buyButton,ItemType itemType){ //買えるかどうか確認する //在庫の確認をする //投入されている金が価格より高いか確認をする //購入する 　 //保管庫から商品を取り出す productOutlet.addItem(item); //取り出し口に出す //おつりをだす System.out.println("おつりは～～円です"); //おつりの表示 //投入金勘定をリセットする stateUpdate();//状態を更新する } 取り出し口に出すプログラム itemは取り出した商品 構造が変化したら、状態を更新する