第14回目 ユーザインタフェースの初歩

GUI実現 = イベント駆動型プログラミング
• システムは何かイベントが起きるのを待つ
第14回
ユーザインタフェースの初歩
イベント駆動型プログラミング
GUIウィジェット
オブジェクト指向プログラミング
– 何かイベントが起きると
– イベントの同定、操作の特定、操作の実行
– またイベントが起きるまで待つのループ
• イベントとは
– ユーザのアクション
• マウス動作、タップ動作
– システム側のイベント
• 処理の完了 ー アラートボックス
• タイマー関連イベント ー プログレスバー
• ユーザの意図を確認 ー ダイアログボックス
GUIパーツ = Widget
• ボタン、ウィンドウ、メニューなどGUIを構成する
パーツはWidget(ウィジェット)と呼ばれる
• Widgetはイベント駆動型プログラミングを採用
– 1. Widgetを生成
Widgetの例
ボタン
チェックボックス
ラジオボタン
• 形や大きさ、画面上の配置場所も指定
– 2. Widgetに生じうるイベントに対する処理を指定
スクロールバー
• ボタンが押されたら何をするか
– 3. Widgetがイベントを待つように指定
ポップアップメニュー
• ボタンが表示され押せるようになる
1
Widgetプログラミングは
オブジェクト指向プログラミング
Widgetプログラミング
•
•
•
•
• C言語の構造体(struct)を拡張した考え方
ウィンドウを生成して表示する
ボタンを生成する
ボタンに押されたときの動作を登録する
ボタンをウィンドウ内に表示する
– structではなくclassと呼ぶ
– classの変数(の値)をインスタンスと呼ぶ
• データ以外に関数もメンバにできる
• 以後、ボタンが押されると登録された動作が
起きる
– 関数メンバをメソッドと呼ぶ
• メソッドは構造体変数の読み書きのように呼び
出す
– C言語では: 構造体変数.メンバ名;
– メソッド呼出は: インスタンス変数.メソッド名(引数);
Widgetプログラミングは
オブジェクト指向プログラミング
構造体 vs クラス
C言語の構造体と関数
struct yyy {
…
データメン
バ
…
}
struct xxx {
…
データメン
バ
…
}
関数A () {
…
}
関数B () {
…
}
…
◯
◯
Java言語のクラス(データメンバ)とメソッド
class xxx {
…
…
…データメンバ
…
…
…
…メソッドメンバ
…
…
}
class yyy {
…
…
…データメンバ
…
…
…
…メソッドメンバ
…
…
}
×
◯×
◯
• 基本的にデータメンバの読み書きは関数メンバ
(自分のメソッド)にしかできなくする
– データを正しい操作でしか変更できないようにできる
– 例えば代入値のエラーチェックができる
◯
• 新しいclassは既存のclassに差分のみ付け足して
定義できる
– 差分プログラミング
– フレームclassにタイトルバーを足してウィンドウclassを
定義する
– さらにスクロールバーを足してスクロールバー付き
ウィンドウclassを定義する
2
差分プログラミング
class 既存のクラス {
…
…
…データメンバ
…
…
…
…メソッドメンバ
…
…
}
class 新しいクラス extends 既存のクラス {
…
…
……
データメンバ ← 記述しなくてよい
…
……
データメンバ ← 追加の分のみ記述
…
…
メソッドメンバ ← 記述しなくてよい
……
…
……
← 追加の分のみ記述
メソッドメンバ
…
…
…
}
ボタンを生成して押せるようにする
Java言語での記述
• Button b1 = new Button(“Push me”);
– ”Push me”のラベルのついたボタン(Buttonクラスのインスタン
ス)を生成し、それへのポインタをButtonクラスの変数b1に代入
– class名()はそのインスタンスを専用に生成する高機能malloc()
コンストラクタと呼ばれる
• ButtonPressedListner(Event e) {
Message m = new Message(“Hello”);
m.show();
}
– ボタンが押されたときに実行されるメソッドを定義
– このメソッドはコールバックとかリスナと呼ばれる
• b1.show();
– 生成したボタンを表示し押せるようにする
newとは?
• new + コンストラクタで使用する
• Button A;
A = new Button(“Push me”);
• これをC言語的に書くと以下のようになる
struct button *A;
A = (struct button *)malloc(sizeof(struct button);
A->label = “Push me”;
– 構造体へのポインタ変数Aを宣言
– button構造体ひとつ分のデータ領域を確保し、それへの
ポインタをAに代入
– Button構造体のlabelメンバに文字列”Push me”を代入
構造体変数とクラス変数
C言語:
struct XXX *aX;
aX = (struct XXX *)malloc(sizeof(struct XXX));
aX
Java言語:
class YYY aY;
aY = new YYY();
aY
3
まとめ
• イベント駆動型プログラミング
• GUIウィジェット
• オブジェクト指向プログラミング
4