イベント-状態駆動GUI出力制御機構の設計と応用

「マルチメディア通信と分散処理ワークショップJ 平成14年JO月

イベントー状態駆動

GUI

出力制御機構の設計と応用

程

Aiguo He

t

1

子 学 ↑

3

張

国 珍

t

2

小 山 明 夫

t

4

仕様変更に柔軟に対応できるアプリケーションプログラムの GUI出力制御の設計と実装は経験の 少ないプログラマにとって困難である.本論文が提案する GUI出力制御機構はアプ Pケーションの 仕様変更に対する柔軟性を持ち，且つ簡単に実現できる特徴を有する.提案した方法は筆者らの遠隔 教育支援システムの設計に応用され，システム開発効率の向上に寄与した.

The Design and Application of the Event

圃

Condition

Driven GUI Output Control Mechanism

AIGUO H E

，

t1 _{GUOZHEN ZHANG}

，

_t2 _{ZIXUE CHENGt3}

and

AKIO KOYAMA t4

For experienceless programmers比isdifficult to design and develop the GUI output control which can wel1copes with the change of the sp町 泊cationof the application program. This paper proposes a G UI output control m配hanismwhich can efficiently cope with the sp配

-ification chang笛 andcan be achieved easily. The proposed mechanism was applied to the

design of authors' distance education support system and contributed to the improvement of the system development efficiency.

1

.

は じ め に

コンビュータハードウェアの高性能化に従い， Javaり などのオプ‘ジェクト指向プログラミング言語によりイ ベント駆動モデルに基づいた複雑なグラフイカノレユー ザインタフェース (GUI)を有するソフトウェアシス テムの開発が可能となった.またGUIの操作性向上 を図るために， GUI出力の自動制御が一般的になって きている.GUI出力の自動制御とは，アプリケーショ ンシステムの状態に応じて， GUI項目(ボタン，入 力フィールド，文字列など)の属性(操作と入力の可 能・不可能，表示される文字列の内容，色など)を自 動的に制御することである. GUIの自動制御が行われているシステムでは，例 t1会樟大学先端技術研究センタ Core and Informa色ionTechnology Center

，

University of Aizu

t

2

会樟大学コンビュータ理工学研究科 Graduate School of Computer Science and Engineering

，

University of Aizu

t

3

会棒大学コンピュータ理工学部 Departmer比ofComputer Software， University of Aizu H山形大学工学部情報科学科 Departmen色ofInformatic8F

、

cultyof Engineering

，

Ya -magata University えばある機能を起動するボタンに対して常に可能の限 りその機能が実行可能の状態にあるか否かをチェッタ し，チェックの結果に従ってそのボタンの操作可能か 否かの属性を設定する.これにより利用者の無駄の操 作を避けることができる.Microso此社の

08

ソフト ウェアWindows2)はこのようなGUI出カ自動制御が 成功しているソフトウェアシステムである. GUIの入力(操作)とシステム機能との関係はイ ベント駆動モデルで単純に表現でき， GUIの開発に も専用ツール3)や仕様記述からの作成手段4)などがあ るが， GUIの出力制御はアプリケ}ションロジックの 一部であり，一般化するのが困難である.また， GUI 出力制御は一般的にイベント処理の中で行うが 1つ のイベントの中で複数のGUI項目を制御することや， 1つのGUI項目が複数のイベントの中で制御される ことが必要である. このためGUI出カ処理はアプリケ}ションの住様 変更に弱く，また経験の少ないプログラマによる開発 ではソースプログラムの可読性や悪く，パグの発生可 能性が高くなる. アプリケーションの仕様変更に対する柔軟性を図る ため， GUI部とアプリケーションロジック部の分離方 式的が提案されているが，アプリケーションロジック

Mediator: App踊ωtion eomponent(APC) Colleague: GUI componea旬 (GUIC) Events rrom others Events from GlJlCs Property control 国1 イベント駆動 GUI制御モデル Fig.l Event driven GUI control model

中のGUI制御部分の仕様変更に対する考慮、はなされ ていない. 本論文はGUI出力制御の仕様変更に対する柔軟性 を向上するための「イベント・状態駆動 GUI制御機 構jを提案する.この手法では， GUI出力制御の条 件となる状態を定義し，ユースケースで規定された制 御内容から，イベントと状態との関係および状態と制 御対象GUI項目の関係を抽出し，さらに状態に従っ たGUI項目の制御を共通機能として実現する.これ によりアプリケーションの中では個々のイベントの中 でのGUI出力制御処理は制御条件の元となる状態の 抽出に単純化することができる. 提案する手法は筆者の大学で開発されている遠隔教 育支援システムRIDEE6)の設計に応用され，システ ム仕様変更に対する柔軟性やシステム開発の効率向上 における有効性が確認された. 以下，第2章ではイベント・状態駆動GUI制御機構 について述べ，第

3

章ではJavaによる実装とRlDEE システムの設計での応用を実例で述べる.第4章では 考察を行う.

2

.

イベント・状態駆動

GUI

制御線機 ここでは従来のイベント駆動型GUI出力制御方式 に触れ，イベント・状態駆動GUI制御モデ、ルについ て述べる. 2.1 従来のイベント駆動GUI制御 従来のイベント駆動GUI制御では，アプリケーショ ンコンポーネントとその配下のGUI項目との関係は 図1のように書くことが出来る. アプリケーションコンポーネント配下のGUI項目 は，それらの制御に関わる処理が実行されるまでに 存在しなければならない.またアプリケーションコン ポ}ネントが受けとるイベントには，ユ}ザのGUI 操作で引き起こされるものと，それ以外のもの(例え ば他のコンポーネントやプロセスからのメッセージ) がある.これらのイベントを受ける後のGUI出力制 Mediat制・ Colleague:

ApplicatioD GUI GUI compODen旬

c~~ponent(APC) cont~oller (Gmc) Events

1

"

Eve目白 from 111from

。

tbers m GUICs F Current State P_cr_ooo_tp_re_or_lty 国2 イベント・状態駆動GUI制御モデル Fig.2 Event-condition driven GUI control model 御は以下のように抽象化することができる. 制御条件の判断 GUI出力制御の条件が成立する か否かを判断する.一般的に1つのGUI属性の制御 にはこれまでに受信した複数のイベントの影響を考慮、 する必要がある.この条件判断を実現する処理プログ ラムは一般的に過去のイベントの処理結果を参照する 複数の条件判断文から構成される. GUI属性制御の実織制御条件判断の結果に基づ きJ GUI項目の属性値を変更する.一般的に1つの 条件が成立した場合複数のGUI項目属性を同時に変 更する. 2.2 イベント・状態駆動GUI制御 一方，イベント駆動モデルのアプリケーションコン ポーネントの振る舞いは有限個数の状態の聞で遷移す るものと考えることができる.また個々のGUI制御 対象 (GUI項目の属性)の値をこの状態の関数として 定義することができる. 状態は複数の状態変敏から構成され，またそれぞれ の状態変数は二つ以上の状態値を持つ. 状態値はアプリケーションコンポーネントのイベン ト処理により更新される.即ちイベントの発生は状態 の遷移を引き起こし，さらにGUI項目の属性変更処 理にタイミングを与える. このため，まずアプリケーションコンポーネントの 状態を状態変数および各状態変数の状態値で定義し， さらに各状態における制御対象GUI項目属性の取る べき値を GUI出力制御を行うための制御情報として 抽象化すれば， GUI項目属性の制御は共通ロジックと してアプリケーションロジックから分離することがで きる.即ち，図 1のGUI出力制御のモデノレは図2に 書き換えることができる. アプリケーションコンポーネントはまず上記の制御 情報と各状鶴変数の初期状態値(即ちコンポーネント の初期状態)をGUI制御コンポーネントに渡してお き，さらにイベントを受けたたびに，そのイベントに 基づき状態値を調整し新しい状態値をGUI制御コン

Condi泊on Table (KXM) lObj州 Table(lXN)I Parameter Table (KXN) 国3 GUI制御用情報 Fig..3 Information for GUI control ポーネントに通知する. 一方GUI制御コンポーネントはアプリケーション コンポーネントから各状態変数の状態値を受け取り， この状態値と制御情報から状態を特定し，それに基づ き各GUI項目の属性を変更する. 2.3 GUI 制御情報 GUI 制御コンポ}ネントにはI GUI出力制御を遂 行するために図8に示す制御情報が必要である. 2.3.1 Condition Table Condition Tableは制御のベースとなる状態を表す K行M列の配列である. Mは状態変数の数であり， Kは状態の数である.Condition Table中の個々の行

α(i

=

1

，

K)

は，各々の状態での状態変数値を示す. 状態には状態変数中の一部にのみ依存するものがあ る.即ちそれらの状態では一部分の状態変数のみが有効 であり，そのほかの状態変数は状態の成立と無関係であ る.これを表現するためにConditionTableの要素に 無効という値を定義する.即ちCij(i

=

1， K;j

=

1， M) の値が無効であることはI i番目の状態で j番目の状 態変数の状態健を問わないことを意味する. Condition Tableはアプリケーションコンポーネン トから渡される各状態変数の状態値からそれの状態 を特定するために利用される.どんな状態値の組み合 わせでも一義的に状態を特定するためにはI Condi -tion Tableの各行はユニークである必要がある.即 ちどの二つの行

C

aと

G"

の間でもその各要素Cajと Cbj

(

j

=

1，

M)

は以下のような関係にあってはいけ ない.

• c

a.j

=

Cbj • CajまたはCbjが無効である 2.3.2 Object Table Object Tableは1行N列の配列であり，それの各 要素は以下の制御対象情報を持つ. ・制御対象GUI項目のオプ、ジェクトへの参照 ・制御対象GUI項目属性の情報 同一GUI項目の異なる属性は ObjectTableでは 別々の要素として扱う.但し同一 GUI項目の同一属 性はObjectTableに2回以上表れてはいけない. 2.3.3 Parameter 宜able Parameter TableはK行N

9

1

J

の配列である.この 配列の要素Pijは，アプリケーションコンポーネント の状態がConditionTable中の d番目状態に合致した ときにI Objec色Tableの j番目の要素にあるGI江項 目属性の持つべき値である. Parameter Tableの要素聞は次のような関係にあっ てはならない. • Plj

=

P2j =，…・・・ =PKj{j

=

1，

N}.

これは状 態と無関係にObjectTable中のj番目のGUI項目属 性が常に同一であることを意味する. • Paj

=

Pbj{i

=

1，

N}

になるような2つの行九 と九が存在する.これはConditionTable中の2つ の異なる状態でGUIが同一であること，即ち無駄な 状態が存在することを意味する.

3

.

実装と応用

以下にはJavaによるイベント・状態駆動制御機構 の実装および実際のシステム開発での応用について述 べる. 3.1 GUI制御コンポーネントの綾計 制御コンポ}ネントはJavaでguiControllぽクラ スとして実装した.コンストラクタを含めI guiCon -色ro

I

l

erは以下のメYッドを提供する. 3.1.1 コンストラクタ

public guiCon:色roll町〈

Str

i

D

g

O

口

ct. / / Condition Table g且iObject[] ot

，

/

1

Object Table

S七r

iDg口口

pt

/

1

Parameter Table

コンストラクタでGUI制御用の制御情報をgui

Co

n -trollerに登録する. 可読性と汎用性を図るためにConditionTableの各 状態値は文字列で定義する.但し，無効という状態値 は空文字列で表現する. Obj前七Tableの要素はguiObj配色型のオブジェク トであり， guiObjectは以下のように定義される.

public class guiObject{

JComponent object

，

1

1

G

U

I

object String proper乞yCode

1

1

Proper句

但しguiObjectのpropertyCodeは，以下の何れの 値であり，制御対象のGUIの属性名を定義する.

-5-visible GUI項目の表示可否の設定

text GUI項目上に表示される文字列の設定 foreground GUI項目の文字色の設定 background GUI項目の背景色の設定 Parameter Tableの各要素 (GUI項目の属性値)も 同様文字列で定義する.guiControllerはObjec色Ta -ble中の制御情報に従いこれらの文字列を適宜に変換 する.表1は上記propertyCodeの値と GUI項目の 属性値との関係を示す. 3.1.2 GUI制御の実施

public void guiControl(

S七rit唱[] conditionValues condition Valuesにはアプリケ}ションコンポ}ネ ントが管理している各状態変数の状態値が格納されて いる.guiControllぽはこれらの状態値を用いて Con-dition Tableから状態を特定し，さらに Parameter Tableの値を用いてObjectTableの各GUI属性を制 御する. 3.1.3 診断制御画面の表示

public void showDiagnosisCOD也rol1erO; showDiagnω包Controllぽは図4に示す画面を表示 し下記の機能を提供する. • rCheck Tabl伺Jボタンをクリックすると guiControllerのコンストラクタで渡された制御情報 の整合性がチェックされ，その結果は別画面で表示さ れる， ・画面上のConditionTable中の行をクリックす ると，その行で表わされる状態でのGUI制御をテス トすることができる. ・画面上ConditionTableの下側の状態変数値を 変更すると，個別の状態値の組み合わせでGUI制御 をテストすることができる. 3.2 応 用 提案した方法は筆者の大学の遠隔教育支援システ ムRIDEEの設計と開発に利用されている.以下には RIDEEのFloorControl機能を実装したParticipant A路面tant(PA)7)画面のGUI制御を例にしてその応 用手順について述べる. 襲1 GUl項目の属性値

Table 1 The properety value of GUI items No propertyCode 属性値 説明 1 visible true

I

fa.lse 2 enabled true/false 3 text (文字列そのもの} 4 foreground rrggbb R

，

G

，

Bの値: background (16進数) 園4. g凶ControHerの診断テスト支援画面 Fig.4 The Diagnosis Controller of guiCon色roller

国5 PAの画面 Fig.5 GUlofぬePar色icipantAssistant RIDEEは遠隔教育活動の参加者(教師と学生)全員 が持つコンビユ}タで構成される分散協調処理システ ムである.これらのコンピュータの中では， 1台が司会 者コンピュ}タであり，その他は参加者コンピュータ である.PAは各参加者コンピュータに表示され，コン ピユ}タのRlDEEへの加入や，参加者がコンピユ} タを利用して発表または討論を行うときの発表権およ び質問権制御の支援を行う.図

3

はPAの画面を示す. 3.2.1 Object

Ta

bleの構成 guiControlIerの制御対象となるGUI項目は以下の 通りである. RIDEEの状態 (図3の項目①)参加者にRJDEE 現在の状態を知らせる文字列. LoginポタンおよびLogoutボタン

RlD

EEシ ステムへの LoginおよびLogo叫に使用される. Exitポタン 自プロセスの終了に使用される.

Ask the ftoorおrpr回 entationボ タ ン 発 表 要

求を司会者へ送る

発奮可否の状態 (図

3

の項目②)PAの利用者に 発言可能か否かを知らせる文字列.

Ask the floorボタン 質問権を持っていない場合 は，このボタンで質問要求を司会者へ送る.質問権を 取得した場合は，このボタンで質問完了・取り下げ通 知を司会者に送る. 上記GUI項目で構成される ObjectTableは表 2 に示す. 3.2.2 Condition

Ta

bleの構成 表2のGUI項目の制御に影響を与える状態変数は 以下の通りである. 接続状況 コンピュ}タがRIDEEに接続している か否かを示す.

r

来接続Jと『接続済みjの何れの値を 持つ. RIDEEの状態司会者の制御下にある RIDEE システムの WorkingMode7_{)である. rFreeJ(司} 会者の制御なし) ， rOpenFloorJ(発表者待ち) ， rp悶 entationJ(発表中)および rD町 田sionJ(討論 中)の何れの値を持つ. 発表権の有無 このPAを持つコンピュ}タが発表 を行うことがでるか否かを示す.

r

発表権取得済みJと 「発表権無しJの何れの値を持つ. 質問権状況質問者が存在するか否か，またはこの コンピユ}タが質問発言権を取得したか否かを示す. 「質問者がいないJ，

r

質問者がいるが自分でないJお よび「自分が質問権を持つ」の何れの値を持つ. 上記状態変数で構成されるConditionTable表8に 示す. 3.2.3 1?~eter 宝able の構成 表2と表3が決まれば， PAの外部仕様から Param-eter Tableの各要素を決めることができる.表4は PAのPar制 e色町Table構成である. 3.2.4 1?Aのイベント処理 PAが受け付けるイベントには，以下のものがGUI 制御用状態変数の状態値に影響を与える. 接続状況変更 RIDEEの通信制御プラットフォー ム6)からのイベントであり，コンピュータのRIDEE 褒2 PAのObject'D弘ble

τ

'able 2 The object table of PA No 制御対象GU1項目と属性 propertyCode 1 .R1DEE状態の文字列 七exも 2 Lo副nボタンの操作可否 enabled 3 Logoutボタンの操作可否 ena.bled 4 Exitボタンの換作可否 enabled 5 Aek the flOOI・forpresen主ation enabled ボタンの操作可否 6 発百可否状態の文字列 七ext 7 Ask the floorボタンの操作可否 ena.bled 8 Ask the floorボタン上の文字列 色ext への接続状況が変わったことを知らせる. RIDEE状態変更 司会者のコンピュータからの通 知であり， RlDEEのWorkingModeが変わったこと を知らせる. 発表者情報 司会者コンピュータからの通知で，発 表権を取得した参加者コンピュ}タの情報を通知する. 質問者情報 司会者のコンピュータからの通知であ り，質問権を取得したまたは質問が完了・取り下げた 参加者コンピュータの情報を通知する. PAは以下のように， condition Valuesに各状態変 数の状態値を設定し， guiControllerのgui

Co

ntrolメ ソッドを呼び出す. ・初期化処理では， condition Valu四 の 4つの要 素に {offiine，free， no， none}を設定する. ・接続状況変更イベントを受信したら， Login成 功の場合はconditionValues[O]にonlineを，それ以 外の場合はconditionValues[OJにo

f

H

ineを設定する. • RIDEE状態変更の通知を受信したときは，通 知中のRIDEE最新状態に従い， condition Valu田[1] にfree，openFloor， pr偲ent抗ion，またはdiscu凶on の何れを設定する. ・発表者情報の通知を受信したときは，通知中の 情報で自分が発表者であるか否かを判断し，∞ndition -Values[2}にyesまたはnoを設定する. ・質問者情報の通知を受信したときは，通知中の 情報で質問者の有無と所在を判断し， condition Val -ues[3]にnone，otherまたはmyselfを設定する.

4

.

考 察

イベント・状態駆動GUI出力制御機構ではtGUI制 御コンポーネントの導入により GUI出力制御の処理 をアプリケーションの処理から分離し， GUI制御情報 (Condition Table， Object Tableおよび Parameter Table)の抽象化により GUI出力制御処理のロジック に関するプログラムを集中的に記述することができた. 聾3 PAの ConditionTable 官、ble3 The condition主a.bleof PA No 接続状況 RIDEE状態 発表植有無 質問権状況 l ofHine 2 online free 3 online openFloor 4 online presenta.tion yes 5 online presen色ation no 6 online discussion yes 7 online discussion no none 8 online diecussion no 。もher 9 online discussion no myself

-7-密4 PAの Parametertable

τ

、

ble4 The par回ne色ertable of PA Condition No. 1 2 3 4 5 l offiine true false true false 2 online false 色rue false true 3 openFloor f叫se false false true 4 presenta色ion false false false false 5 presen色ation false false falae fa.lse 6 discussion false false f叫se false 7 discussion fa1se fa.lse false false 8 discussion false false false false 9 discussion false false fal自e fa.lse またこれらの制御情報は

GUI

の詳細設計段階で作 成可能であり，制御情報の各要素が分かりやすい文字 列表現で記述することができるため，設計者と実装者 双方で理解でき，実際ではより精確な

GUI

機能定義 として仕様書の一部とすることができる. Condition Tableでは 1つの状態変数が複数のイベ ントの影響を受ける可能性があるが 1つのイベント の処理中では複数の状態変数に亘るような処理が少な い.またアプリケーションコンポーネント内でのイベ ント処理は，イベント情報から状態値への変換だけと なる.このため，

GUI

出力制御の仕様変更が発生し た場合，大部分の対応作業は制御情報の変更に抑え， アプリケーションコンポーネント側のロジック変更を 最小限にすることができる. 例えば状蟻変数や状態値の変更を伴わない仕様変更 が生じた場合は， Param錦 町 Tableの修正で対応で きる.また制御対象

GUI

項目に変更が生じた場合は， Object Table中の要素とそれに対応する Pぽ ameter Tableの列の修正で対応できる.さらに状態変数や状 態値に変更が生じた場合はI Condition TableとP

a

-rameter Tableの修正が必要でるが，アプリケーショ ンコンポーネントでは，変更対象となる状態変数に関 わるイベント処理のみの変更となる.

GUI

制御コンポ}ネントが提供した診断制御画面 では制御情報の整合

t

.

生チェックを行うことができるほ か，状態値の個別変更を通して

GUI

制御ロジックの 単体テストを行うことができる.このため以下の問題 は単体テスト段階で検出できる. ・制御情報要素(文字列)中のスペリングエラー ・来対応

G

U

I

項目の指定 ・未対応

GUI

属性の指定

GUI

制御コンポーネントは制御対象

GUI

項目同士 聞の参照が必要となる処理や， Parameter Table内の 要素(属性値)が動的変わるような処理を対応対象外 Object No・ 6 7 8 false Ask the ftoor false Ask the ft∞r Ready to凶kftoor for presentation false Ask the ftoor

Ready自ospea.k false Ask the ftoor Unable to speak false Ask the ftoor Ready to speak fa1ae Ask the floor Ready to むrue Ask the ftoor

Unable to false Ask the floor Rea.dy to spea.k true Stop speak

としている.このような処理を対応するのに新たにプ ロトコルの定義が必要となり，かえって提案手法が利 用しにくくなるからである.

5

.

お わ り に

GUI

出力制御処理が簡単に実現できる手法として fイベント・状態駆動

GUI

制御機構jを提案した.ま たこの制御手法の有効性は筆者のソフトウェアシステ ム開発中で確認された.今後は本提案と従来方法の比 較を行い，また

GUI

制御自動設計支援機能(制御情 報の可視化と専用エディタなど)や本モデルの

GUI

制御それ以外への適用について検討する予定である. また現在の実装では状態数が多くなると状態特定のた めの検索負担が大きくなる.この問題の対策を講じる 予定である. 参 考 文 献 1) Java home page: http://developer.java.sun.com/ 2) http://www.micfiα誠.∞m/ japan/windows/ defa曲 .ωP 3) JBuilder home page: http://www.borland.co

必

/jbuild

ぽ/

4

)

満田ほか:操作情報を中心としたユーザインタ フエ}スの設計法，電子情報通信学会ソフトウェ アサイエンス研究会報告8899・，45(1999).

5

)

鷲崎ほか:モデル/ピュー分離ア}キテクチャ BeaMの機構とその評価，情報処理学会論文誌 Vo

1

.

41

，

No.10

，

pp.245

4

-

2465 (Oct.2001). 6) Aiguo Heほか:リアルタイム遠隔教育環境の通 信制御プラットフォームの設計，マルチメディア 通信と分散処理ワークショップ論文集， Vo

1

.

2001， No.13

，

pp.231・218(2001).

7) A.He

，

et al: A Working Model for

Rea

l-time

I

n

teractive Distance Education Support 8ys -tems， IJCPOL， vol.15 no. 2， June 2002.