【DO!BOOK・ページリンク】
2009_migaro_techreport_001   46 / 80

BOOKをみる

10秒後にBOOKのページに移動します


44 イベントは通常のOnClick イベントと OnAsyncClick イベントの2 種類があ る。これら2 つのイベントはボタンを押 下時に呼び出されるイベントである。  まずOnClick イベントでは、押下時 にデータをサーバーに通知して、処理結 果を得た後にページ全体をロードする (Submit を行う)というイベントになっ ている。  一方、OnAsyncClick イベントは、 指定したURL からXML ドキュメント を読み込む機能を使い、ユーザーの操作 や画面描画等と並行するAjax のような イベントになる。  そのため、画面上のみで制御を行う場 合はOnAsyncClick にイベントを記述 するほうがよいが、逆のパターンでは OnClick イベントに記述するほうがよ い。また、OnAsyncClick イベントでは、 Submit が行われないためコンポーネン トの画面表示切替処理などの制御が行え ない制約がつく。 明細部への画像表示  また、今回は明細部の中に画像を表示 する仕様にする。画像ファイルはサー バー側の特定のフォルダに保存されてい ることを前提に、IBM i のデータベー スにはそのパスを保持するようにする。  画像を特定のパスで読み込むために は、前述したTIWImageFile を使用す る。このコンポーネントをプログラム内 部で生成するようにし、URL プロパティ に画像を保存しているパスを指定するこ とで、明細部の中に画像の表示を行うこ とができる。 DLLの作成  一通りの制御開発が終了した時点で、 [プロジェクト]→[再構築]を選択し、 プログラムのDLL を作成する。[プロ ジェクト]→[コンパイル]を選択して も問題はないが、再構築を行うことで中 間ファイル等を再生成してくれるため、 再構築を勧める。  この作成したDLL を外部からアクセ スできるWeb サーバーに設置し(それ に関連する画像とのファイルも設置す る)、ブラウザのURL にDLL が保管さ れているパスを指定する。  すると、Web アプリケーションが起 動する。【図5】 VCL for the Web で の応用開発  さらに、一歩進んだことを行ってみよ う。よく他のサイトをみるとクリックし た画像が大きく表示されたり、文字の フォントを統一していたりするサイトが 多く目立つ。IntraWeb でもJavaScript やスタイルシートが利用できる。  今回の開発では、明細に表示した画像 をクリックすることで新しい画面を作 り、画像を表示するJavaScript と、明 細に表示する画像の大きさを統一するス タイルシートを組み込むことにする。 スタイルシートとの連携  スタイルシートとはWeb ページのレ イアウトを定義する技術であり、一般的 にスタイルシートと言われると、スタイ ルシート言語の1 つであるCSS を指す。 本文でもスタイルシートのことをCSS として明記する。  HTML を少しでも知っている方は、 CSS を読み込む際に、その記述を HTML のヘッダにすることをご存知だ ろう。IntraWeb では、Form のプロパ ティにExtraHeader というのがある。 ここにCSS を読み込む処理を記述する か、プログラム内部で記述するかの2 種 類の方法がある。今回の開発では、動的 に使用できるようにプログラム内部に記 述する。【ソース2】  次に、CSS を利用するコンポーネン トに設定を行う。CSS の設定できるコ ンポーネントには、プロパティにCSS というのがある。ここに、CSS に記述 されているセレクタを記述すれば、その コンポーネントはスタイルシートに従っ た表記になる。【ソース3】 JavaScriptとの連携  JavaScript とはWeb ページに動きを 追加する簡易言語のことで、画像をク リックした時に新しいページを表示させ たり、TAB の移動といった制御等を行 うことができる。  通常のWeb 開発では、HEAD タグ内 にJavaScript を記述する。IntraWeb でも同様にHEAD タグ内にJavaScript の記述が行えるが、今回は明細の画像を クリックすることで詳細な画像を表示さ せる仕様にすることから、コンポーネン トにJavaScript を記述する方針をとる。  コンポーネントにJavaScript を記述 するには、プロパティのScriptEvents に記述するか、プログラム内部で記述す るかの2 種類がある。静的なコンポーネ ントであればScriptEvents に記述する ほうがよいが、今回は動的に画像ファイ ルを作成しているので、プログラム内部 でJavaScript を記述する。【ソース3】  ソース3 のように記述を行えば、実行 し、画像をクリックした時に仕様どおり の動きを行うことができる。他にも JavaScript を駆使すれば、Enter キー でフォーカスの移動が行えたり、コン ポーネントのイベントと連携を行ったり することが可能になる。 開発端末でのWeb サーバー環境構築  ここまではWeb アプリケーション作 成を説明してきたが、作成したアプリ ケーションをWeb サーバー上で動作検 証するためのテクニックを説明する。  ここでは開発端末にWeb サーバーを 構築し、作成したDLL が正常に動作す るか検証を行えるようにする。  今回の動作環境は、Windows XP の IIS( バージョン5.1) を使用する。 Windows のコントロールパネルの中に [管理ツール]→[インターネットイン フォメーションサービス](以下IIS) というのがある。(ない場合は[プログ ラムの追加と削除]→[Windows コン ポーネントの追加と削除]からインス トールが可能)。このIIS は、Microsoft 社のインターネットサーバーソフトウェ アで、このIIS を構築することでWeb サーバーを作ることができる。  構築するやり方として、IIS を起動す ると、Web サイトという項目の下に既 存のWeb サイトという項目がある。こ この項目に指定したフォルダがWeb サーバーの仮想ディレクトリとなり、外 部からのアクセスが可能となる。既存の Web サイトの項目で、右クリックを行 うと[新規作成]という項目がある。こ この項目を選択し、ウィザードに従って 仮想ディレクトリを作成する。  ここで注意しなければならないのが、 DLL を実行するためのアクセス許可で あり、ISAPI アプリケーションやCGI