POPUPウィンドウの技術解説

見出しのアイコン

IBM i は親プログラムの中で、サブ・プログラムやプローシージャーを呼び出して POPUPウィンドウを
表示するという方法が一般的です。
しかし、この手法は Web には向いていません。
どこかのサイトを表示していて、ボタンやリンクなどによる SUBMIT動作では、前に表示されていた画面が
消滅してから次の画面が表示されるというのが HTTP の仕様であるからです。
つまり、Web ではページの移動は、表示が消滅して次の新しいページを表示するというのが仕様だからです。
しかし、Webサイトで POPUP表示はいくらでも見かけます。
これらの多くは JavaScript の window.open という命令によって表示されているだけです。
EnterpriseServer でも TONAKAI による Web移行も JavaScript による POPUPウィンドウのオープンが
必要でした。

しかし Ver5.0 の AutoWeb では、この問題も Web2.0 Ajax によって解決されました。
AutoWeb は仮想端末ジョブでオープンされている DSPF の状況とタイプをつねに把握しています。
*WINDOW というタイプの表示レコードがオープンされると、それは POPUPウィンドウであると検出されます。
(逆に言えば、5250ストリームの POPUP は必ず WINDOW でなければなりません。)
このとき AutoWeb は POPUPウィンドウをオープンする JavaScript を含む HTMLテンプレートを
ブラウザへ送出します。
ブラウザは空の POPUPウィンドウを表示するだけですが、中身については Ajax で サーバーリクエストされます。
サーバーはこの Ajax のリクエストに基づいて POPUPウィンドウ内部の HTMLオブジェクトを XML として
ブラウザに戻します。
ブラウザはこのようにして、あたかも 5250エミュレータ画面と同じように POPUPウィンドウを表示することが
できます。

POPUP ウィンドウとして表示されるためには ?

基本的に CALL や CALLB によって呼び出される表示画面が 5250 ストリームにおいて
*WINDOW として見なされるためには DDS キー・ワードとして DDS で定義されていることが
必要です。
しかし 5250 エミュレータの開発歴史の中では POPUP を 5250 ストリームの中で擬似的に
作り出す手法もありました。
AutoWeb は DDS の WINDOW キー・ワードだけでなく次のような指定のある表示画面レコードを
POPUP ウィンドウと見なします。

次は WINDOW キー・ワードによる POPUP ウィンドウの例です。

A*%%TS  SD  19990421  134240  QTR         REL-V2R3M0  5738-PW1
A*%%EC
A                                      DSPSIZ(24 80 *DS3)
A          R WINDOW
A*%%TS  SD  19990421  134240  QTR         REL-V2R3M0  5738-PW1
A                                      WINDOW(&WNDL &WNDP 13 48)
A                                      TEXT(' ウィンドゥ ')
A                                      OVERLAY
A                                      PROTECT
A                                      CLRL(*NO)
A                                      BLINK
A                                      CF11(11 'BACK')
A                                      CF12(12 ' 前画面 ')
A                                      ROLLUP(14 ' 次頁 ')
A                                      ROLLDOWN(15 ' 前頁 ')
A            WNDL           2S 0P
A            WNDP           2S 0P
A                                  1 14' 商品コード照会 '
A                                      DSPATR(HI)
A                                      TEXT(' 見出し ')
A                                  3  2' オプションを入力して,実
A                                       押してくだ '
A                                  4  2' さい。 '
A                                  5  4'1= 選択 '
A                                  1  1'ANS005'
A                                  6  1'OPT'
A                                      DSPATR(HI)
A                                  6  6' 商品 テーn゙'
A                                      DSPATR(HI)
A                                  6 21' 商品名 '
A                                      DSPATR(HI)
A            OPT001         1A  B  7  2
A            OPT002         1A  B  8  2
A            OPT003         1A  B  9  2
A            OPT004         1A  B 10  2
A            OPT005         1A  B 11  2
A            CDR001        10A  O  7  5
A            CDR002        10A  O  8  5
A            CDR003        10A  O  9  5
A            CDR004        10A  O 10  5
A            CDR005        10A  O 11  5
A            NMR001        24A  O  7 16
A            NMR002        24A  O  8 16
A            NMR003        24A  O  9 16
A            NMR004        24A  O 10 16
A            NMR005        24A  O 11 16
A                                 12 33'F12= 前画面 '
A          R #DUMMY                    ASSUME
A                                      FRCDTA
A                                      PUTOVR
A            DMY            2   O  1  2DSPATR(ND)

次は、この DDS によって表示された POPUPウィンドウの画面です。


POPUP が表示されるまでの仕組み

クライアントが機能キーを押して POPUP を要求する

AutoWeb が仮想端末ジョブにユーザーが操作した機能キーを伝える

仮想端末ジョブは機能キーを実行して POPUP を作成する

仮想端末ジョブが AutoWeb に表示タイプ : *WINDOW のストリームを送信する

AutoWeb は *WINDOW によって POPUP と判断する

AutoWeb は onLoad に window.open を組み込んだ親HTML をクライアントに送信する

ブラウザは POPUP を表示するとともに POPUP の中身を Ajax によってサーバーへ要求する

サーバーは POPUP の中身を XML としてクライアントへ送信する

クライアントは、XML を受け取って POPUP の内容が表示される


POPUP からの戻り値の更新

POPUP上でコード等を選択して親画面に戻ると同時に、親画面では選択コードや名称が表示されるように
なっている適用業務は多く見受けられます。
このようなときには更新された親画面の結果は Ajax によってサーバーへ要求され、親画面の項目が
サーバーから XML で戻されます。
Ajax によって親画面を更新することによって、画面は JavaScript で更新されたかのようにちらつきも
無く良好なパフォーマンスで書き換えられます。
このように画面の素早い更新が Web2.0 Ajax によって可能となっています。


POPUP はモーダル・ウィンドウである

Windows やブラウザでの POPUPウィンドウは「モーダル・ウィンドウ」と「モードレス・ウィンドウ」
という表示形式上での種別があります。
モーダル・ウィンドウとは Focus が、そのウィンドウにしか認められないという表示形式です。
つまり、POPUPウィンドウがモーダル・ウィンドウとして表示されているときは操作員は背景の
親ウィンドウをクリックして Focus を親ウィンドウに移すことはできません。
これに対してモードレス・ウィンドウの場合は、操作員の判断に応じて、親・子のどちらのウィンドウにでも
Focus を任意に移して操作を継続することができます。
AutoWebで表示される POPUPウィンドウは、プログラム内では CALL または CALLB で呼び出されている
はずですから親ウィンドウへの Focus を認めてしまうと、画面遷移の不一致を生じることになります。
したがって、AutoWeb では 表示される POPUPウィンドウはすべてモーダル・ウィンドウとして
表示されます。