CDプレーヤー

CDプレーヤーの振る舞いは複雑ではありませんが、状態に応じてボタンの有効・無効や表示内容を制御する多数のルールがあります。

このサンプルのCDプレーヤーは次のような機能があるとします。

ボタン - CDの挿入・再生・一時停止・停止・前の曲・次の曲・CDを取り出す
表示 - トラックの総数・再生しているトラック番号・曲の長さ・再生中の位置

CDプレーヤーの状態マシン

CDPlayerクラスには2つの属性があります。

CDプレーヤーの状態マシンは次のような内容です。

この内容について、外部実行の状態マシン要素を作成し、シミュレーションを通して動作が適切かどうか確認します。

上位のレベルとして、状態マシンには2つの状態 CD UnLoaded と CD Loaded があります。
CD Loaded は3つの状態 CD Stopped, CD Playing, CD Paused が含まれます。
トリガ Load, Eject, Play, Pause, Stop, Previous, Next に対応する遷移があります。
状態の振る舞いと遷移の効果には、CDPlayer で定義された属性を変更する処理が含まれています。例えば、Previousのイベントは自己遷移を引き起こし、その処理としてトラック番号を1つ減らすか、最後のトラックに移動する処理を行います。

外部実行のステートマシン要素を作成し、 CDPlayer型のプロパティを配置します。シミュレーションを実行してトリガを発行し、設計内容が正しいかどうか確認します。

生成されたコードの概要

Enterprise Architectは、次のようなコードを自動生成します。

裏での処理のためのコード: CDPlayer.js, ContextManager.js, EventProxy.js
クライアントのコード: ManagerWorker
フロントエンドのコード: statemachineGUI.js, index.html
その他: SimulationManager.js

項目	説明
/CDPlayer.js	このファイルには、CDPlayerクラスの定義・属性・メソッドが含まれます。また、状態遷移に関係するStateMachinesクラスも定義されています。
/ContextManager.js	このファイルには状態に応じた管理を行うための処理が含まれます。シミュレーションでは、複数の状態を取ることができます。例えば、テニスの試合であればUmpireクラスとPlayerクラスの2つのプレーヤーplayerA・playerBがあるとすれば、それぞれのクラスごとに状態遷移が定義され、インスタンスごとに独自の状態を持ちます。
/EventProxy.js	シミュレーションで利用するイベントやシグナルを定義しています。引数のあるイベントを発行した場合にはSignalクラスと結びつくシグナルイベントをモデルで定義します。そして、Signalクラスに属性を追加します。Signalクラスのインスタンスには、属性に対応した実行時の値を持たせます。
/SimulationManager.js	シミュレーション時にEnterprise Architectとのやりとりを行うためのファイルです。
/html/ManagerWorker.js	ユーザーが操作する画面とバックエンドとの間のやりとりを行います。画面からは ManagerWorker から情報を取得するためのメッセージが送信されます。 ManagerWorkerはContextManagerを継承していますので、現在アクティブな状態の取得や実行時の変数の値などを取得できます。 ManagerWorkerはバックエンドから取得した情報を返すために画面にメッセージを送信します。
/html/statemachineGUI.js	ユーザーが操作する画面とManagerWorkerの間のやりとりを定義します。関数startStateMachineWebWorker と stopStateMachineWebWorkerが含まれます。関数onActiveStateResonse と onRuntimeValueResponse については、以下のようなコメントが記載されます。 //to do: write user's logic このコメントの内容を削除し、実際の処理を記述します。詳細は後述します。
/html/index.html	ボタンなどのHTMLでの画面が定義されてます。CSSやJavaScriptを利用できます。

index.html と statemachineGUI.js への追記

自動生成されるファイルに以下の追記を行います。

ボタンを作成し、表示するようにする
表示内容についてのスタイルシート(CSS)を定義する
1秒ごとに表示内容を更新するように、ElapseTimeWorker.jsを構築する
TimeElapsed関数を定義し、トラックの再生が終わったら次のトラックに進むようにする
ボタンのonClickでJavaScriptが動作するようにする
イベントが発生したら、現在の状態を確認し変数の値を更新する
初期化時に、実行状態を確認する

statemachineGUI.jsにはメソッドonActiveStateResonse_cdPlayer が含まれます。

CDPlayer_StateMachine_CDUnLoaded では、すべてのボタンを無効化しbtnLoadのみを有効にします。
CDPlayer_StateMachine_CDLoaded_CDStopped では、すべてのボタンを無効化し、btnEjectとbtnPlayを有効にします。
DPlayer_StateMachine_CDLoaded_CDPlaying では、すべてのボタンを有効化し、btnEjectとbtnPlayを無効にします。
CDPlayer_StateMachine_CDLoaded_CDPaused では、すべてのボタンを有効化し、btnLoadを無効にします。

statemachineGUI.jsには関数onRuntimeValueResponseがあります。

cdPlayer.currentTrackで、表示されているトラック番号と再生位置を更新します。

動作するサンプル

このサンプルの動作するものは、以下のURLから確認できます。

CD Player Simulation（https://sparxsystems.com/resources/examples/cd_player/html/index.html）

Load Random CDボタンを押すとCDを挿入し、再生などの操作を行うことができます。