このサンプル実装を参考にしながら、 以下をお読み下さい。
注: フロントエンドを実装するとき、バックエンドの API を適切に利用していれば、 必ずしもサンプル実装の構成に従う必要はありません。 サンプル実装はカスタマイズの出発点の一つとして利用して下さい。
フロントエンドのサンプル実装は、以下のようなファイルから構成されています。
| ファイル名 | 説明 |
|---|---|
| HSBGrad.html | メインページのサンプル |
| ColorTest.html | 同じくメインページのサンプル |
| HSBGrad2.html | Session/Runサーブレットのinputパラメーターを用いるサンプル |
| outerapplet.html | バックエンドを起動する HTMLファイル |
| Common/common.js | エディター部とコンソール部で共通に使用されるスクリプト |
| Common/commonUI.js | GUIに依存するスクリプト |
| Common/console.js | コンソール部で使用されるスクリプト |
| Common/consoleUI.js | コンソール部で使用されるスクリプトのうち、 GUIに依存する部分 |
| Common/editor.js | エディター部で使用されるスクリプト |
| Common/editorUI.js | エディター部で使用されるスクリプトのうち、 GUIに依存する部分 |
この中でパラメーターを設定する部分は、主にメインページです。
Adobe FlexBuilder用の参照フロントエンド もあります。
バックエンドのベースURLを Query Stringとして受け取ることができます。 バックエンドのベースURLを Query Stringとして受け取らなかった場合は、 クッキーを使って、他のページからバックエンドが既に起動されている場合は、 それを再利用するようになっています。 また、バックエンドが起動していないときは、 リンクを明示的にクリックして、別ウインドウで outerapplet.htmlを開くようになっています。
outerapplet.htmlや editor.js, console.jsから呼び出されるコールバック関数をここに定義します。 これらのコールバック関数には、 このページで表示されるソースプログラム固有の設定情報を記述します。
バックエンドを起動するためのパラメーター (JARファイルや WARファイルなど)はここに記述します。
バックエンドURLに関するスクリプトです。通常、変更する必要はありません。
バックエンドURLに関するスクリプトのうち、GUIに依存する部分です。
コンソールフレームで使用されるスクリプトです。 ブラウザーが WebSocket をサポートしている場合は WebSocketを、 サポートしていないときは Cometを用いてバックエンドと通信します。
コンソールフレームで使用されるスクリプトのうち、GUIに依存する部分です。
エディター部で使用されるスクリプトです。 キーワードのハイライトなどには CodeMirror を使用しています。
エディター部で使用されるスクリプトのうち、GUIに依存する部分です。
フロントエンドは、バックエンドのベース URL （例えば、http://localhost:12345/WappenLite/） を、起動時などに JavaScriptの location.searchパラメーターや serverURLというパラメーター、あるいは LiveConnect経由で受け取ります。 バックエンドにアクセスするためには、 このベース URLの後に以下に示す各サーブレットのパスとパラメーターを付加します。
フロントエンドは、次の表に示すサーブレットと通信します
| パス | 説明 |
|---|---|
| Session/Configure | コンテキストのパラメーターの変更 |
| Session/Load | エディターの初期コンテンツ |
| Session/Save | エディター編集内容の保存 |
| Session/Status | プログラム処理系のステータス情報（コンテキスト依存） |
| Session/Run | プログラムの実行 |
| Session/Exec | プログラムの実行とWebSocketによる接続 |
| Session/Write | プログラムの標準入力へ書込み |
| Session/Read | プログラムの標準出力の読込み |
| Session/Connect | WebSocketによる接続 |
| Session/View | プログラムの出力ファイルなどの閲覧 |
| Session/Upload | ToDo |
バックエンドの設定パラメーターを変更します。
パラメーター configに、JSON形式のバックエンド設定ファイル（後述）の URLを指定します。または、パラメーター jsonに、 JSON形式のパラメーターを直接指定します。
エディターに表示するソースコードをダウンロードするために使用します。 ページのリロードのときに、以前にセーブした内容を再表示するために必要になります。
パラメーターなしで呼び出します。 結果はソースのパスをキー、内容を値とするJSON形式です。
エディターで変更された内容を保存するために使用します。
ソースのパスに edit:を前に付加したものをパラメーター名として使用し、 ソースの内容がその値となります。
saveというパラメーター名で、 ソースのパスをキー、内容を値とする JSON形式をパラメーターとして、 受け取ることも可能です。
コンパイラのエラーメッセージがあれば返します。 （コンパイラのメッセージはSesion/Readからもアクセスできます。）
コンテキストや言語処理系のステータス情報を得ます。 パラメーターなしで呼び出します。 結果はステータス名をキー、内容を値とする JSON形式です。 どのようなステータスが用意されるかはコンテキスト依存ですが、 runningという現在プログラムやインタプリターが実行中かどうかを示すフィールドは、 すべてのコンテキストがサポートするようにしています。
コンパイラー方式の処理系では、プログラムを実行します。 （インタプリター方式の処理系では、通常このサーブレットは使用しませんが、 一旦終了したインタプリターを別パラメーターで起動するときに使用できます。）
パラメーター argsで、コマンドライン引数を空白区切りで渡します。
プログラムは通常、非同期で実行されます。 （つまり、Runサーブレットはプログラムの終了を待ちません。） そのため、このサーブレットは意味のある出力は返しません。
ただし、プログラムの標準入力に渡す文字列を引数 inputとして渡すと、 同期モードで実行し（つまり、プログラム実行の終了を待ち）、 標準出力に出力された文字列を返します。
コンパイラー方式の処理系では、プログラムを実行します。 （インタプリター方式の処理系では、通常このサーブレットは使用しませんが、 処理系によっては “main”を起動するなどの 使い方も可能です。）
パラメーター argsで、コマンドライン引数を空白区切りで渡します。
Session/Runと異なり、 プログラムの標準入力と標準出力（+標準エラー出力）に WebSocketによって接続します。 このときの標準出力（+標準エラー出力）はSession/Readや Session/Connectのほうには出力されません。
パラメーター messageで、 実行中のプログラムの標準入力に文字列を渡します。
また パラメーター eof を true にすると、 実行中のプログラムにEOFを渡します。
実行中のプログラムの標準出力を得ます。
パラメーター indexで、受け取る文字列の最初の添字を指定します。 indexを省略すると、前回受け取った出力の続きになります。
パラメーター forceを指定しない、またはfalseのときは、 index以降の文字列がまだ出力されていなければ待機します。 （Comet方式の通信で使用します。） trueのときは、index以降の文字列がまだ出力されていなくても、 すぐに空文字列を返します。
WebSocketによって接続します。 WebSocketをサポートしているブラウザで、Session/Readの代わりに使用します。
バックエンドから送られるメッセージは JSON形式で、 statusというフィールドに、Session/Statusの出力と同じ情報が、 outputというフィールドに、Session/Readの出力と同じ情報が、 格納されています。
逆にバックエンド側に JSON形式でメッセージを送ることもできます。 write#messageというフィールドに、Session/Writeのパラメーターと 同じ情報を記述します。
プログラムが生成したファイルなどを閲覧します。
パラメーターpathで、ファイルのパスを指定します。