IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―

第3回 画面カスタマイズ

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―

このシリーズの続きに乞うご期待。

3. 画面カスタマイズ

2章までは最小限のカスタマイズで、既存のホスト・アプリケーションをそのまま公開する方法を学びました。ここではホスト画面をHATS上でカスタマイズし、既存のホスト・アプリケーションをWeb用に使いやすいものにする方法を学びます。ここで学習する内容を用いることで、ホスト・アプリケーションを新規で扱う社員や、ホスト・アプリケーションを外部から使用するお客様に対し、既存のホスト・アプリケーションの利便性を向上させることができます。

3.1. メニュー画面のカスタマイズ

ここでは、メニュー画面のカスタマイズを通して、HATSによる画面カスタマイズの方法を学習します。

3.1.1. 画面キャプチャーの取得

画面カスタマイズの対象となるホスト画面の画面キャプチャーを取得します。「HATSプロジェクト」ビューから、HATSプロジェクトを右クリックし、「HATSホスト端末をオープン」→「main」を選択します。

※mainは接続ファイル名です。

ホスト端末が表示されます。

メニューが表示される画面までホスト端末を操作します。メニュー画面まで操作したら、ツールバーから「画面キャプチャーを作成」を選択します。

画面キャプチャーの名前を任意に入力し、「終了」を選択します。

アプリケーションからサインオフし、ホスト端末を閉じてください。その後、HATSプロジェクトに画面キャプチャーが追加されていることを確認します。「HATSプロジェクト」ビューから、「画面キャプチャー」を展開してください。

3.1.2. 画面カスタマイズの作成

作成した画面キャプチャー・ファイルを右クリックし、「新規HATS」→「画面カスタマイズ」を選択してください。

表示されたウィンドウで画面カスタマイズの設定を行っていきます。名前を英数字で記入し、「次へ」を選択してください。ここでは名前は「MainMenu」とします。

画面カスタマイズを行う画面を特定するため、画面認識基準を設定します。まず「拡張を表示」ボタンを選択してください。その後、この画面を一意に認識できる基準を設定します。ここでは、「メイン・メニュー」という文字列をドラッグして選択し、この文字列を画面認識基準とします。右側の表示を見ると、1行32桁~1行47桁に、ストリングとして「メイン・メニュー」があるかどうか、という認識基準であることがわかります。認識基準が設定できたら、「次へ」を選択します。

画面認識基準について

画面認識基準はとても重要です。画面カスタマイズの対象として一意に認識できる基準を確実に設定してください。同じ認識基準が他の画面でも適用されてしまうと、意図した画面カスタマイズができません。たとえば、「メニュー」というタイトルの画面が複数あった場合、「メニュー」という画面認識基準は適切でないと言えます。また、日付や時刻など、その時々で表示が変化するものも画面認識基準として適していません。

「変換を適用」にチェックがあることを確認します。「新規変換を作成」をチェックし、JSPファイルの名前を確認します。画面カスタマイズの名前を英数字にした場合、その名前がそのまま適用されています。「パターンを選択」から「ブランク」を選択し、「終了」を選択してください。

「パターンを選択」で「ブランク」を選んだ場合、続けて「ホスト・コンポーネントを挿入」というウィンドウが立ち上がります。カスタマイズ画面に表示するホスト画面を挿入するための設定になります。

3.1.3. ホスト・コンポーネントを挿入

前手順で起動したウィンドウから、メニュー部分をドラッグして囲み、「次へ」を選択します。

「コンポーネント」から「選択リスト」、「ウィジェット」から「ボタン」を選択します。

ボタンの表示を調整するため、「ウィジェット設定」のアイコンを選択します。

表示されるウィンドウから、「プロジェクトのデフォルトを使用」のチェックを外し、「1行あたりの列数」に「3」を入力します。スタイルの設定をするため、「CSS スタイル・プロパティー」を選択します。

表示されたウィンドウから、「レイアウト」を選択します。「幅」に「150」を入力し、「OK」を選択してください。

スタイルが設定されボタンの横幅が調整されたことを確認し、「OK」を選択します。

※必要に応じて、「スタイル」の「width: 150px;」の値を変更し、横幅を調整してください。

「終了」を選択します。

MainMenu.jspが表示されます。カーソルを太枠の中に持っていき、左クリックします。

HATSホスト・コンポーネントとソースが自動的に追加されます。

このままではメニュー・ボタンのみの表示となります。これにタイトルなどの表示を追加していきます。「デザイン」タブを選択し、HTMLタグを追加してください。フリーレイアウト・テーブルをクリックし、枠が黒色の状態にします。

※フリーレイアウト・テーブルとはHTMLタグなどを自由に配置するためのテーブルです。

上部のメニューから「挿入」→「段落」→「見出し2」を選択します。

見出しを挿入する箇所で、マウスをドラッグ&ドロップします。

ここでは見出しを「メイン・メニュー」とします。

「プレビュー」タブにて表示イメージをつかんでください。

更新内容を保存するため、JSPファイルを保存してください。ここでまでのカスタマイズを確認するため、HATSをサーバーでデバッグします。「HATSプロジェクト」ビューからHATSプロジェクトを右クリックし、「サーバーでデバッグ」を選択してください。「第1回 はじめてのHATS」の章の「1.3. HATSプロジェクトの実行」の手順に従い、HATSプロジェクトを実行し、メニュー画面のカスタマイズ結果を確認してください。

3.2. 入力画面のカスタマイズ

「3.1. メニュー画面のカスタマイズ」の手順に従い、入力画面のカスタマイズを行います。まず、ホスト端末から入力画面のキャプチャーを取得してください。

取得した画面キャプチャーを右クリックし、「新規HATS」→「画面カスタマイズ」を選択します。

英数字で画面カスタマイズ・ファイル名を入力し、「次へ」を選択します。ここでは「JuchuInput」と入力します。

画面認識基準を設定し、「次へ」を選択します。

今度は「フィールドを使用して事前設定」を選択し、「終了」を選択します。

今回は「ブランク」を選択していないため、「ホスト・コンポーネントを挿入」のウィンドウは表示されません。作成されたJSPを「プレビュー」タブで表示します。フィールド・ウィジェットを使用して、あらかじめカスタマイズ画面が作成されていることが分かります。

「分割」タブに切り替え、入力フィールドのカスタマイズを変更していきます。最下部のビューは「プロパティー」を選択しておきます。この状態でカスタマイズを行う入力フィールドを一度クリックします。

ソースの<HATS:Component ・・・>というタグにカーソルを合わせます。すると、プロパティー表示が変わり、HATSのコンポーネントとウィジェットを設定できるようになります。

「コンポーネント」から「入力フィールド」を選び、「コンポーネント設定」のアイコンを選択します。

表示されたウィンドウから、「プロジェクトのデフォルトを使用」のチェックを外し、「フィールドの表題を抽出」のチェックを外し、「OK」を選択します。

「ウィジェット」から「ドロップダウン(データ入力)」を選択し、「ウィジェット設定」を選択します。

表示されたウィンドウから、「プロジェクトのデフォルトを使用」のチェックを外します。「ストリングから設定」のところに「得意先1=H00001;得意先2=H00002;得意先3=H00003;得意先4=H00004;得意先5=H00005」と、ここでは入力します。この場合、たとえば「得意先1」がドロップダウンに表示され、「H00001」がホストに送られるデータになります。

続いて、日付を入力する入力フィールドをカスタマイズします。ここでは「希望納期」という入力フィールドをカスタマイズします。さきほどと同じ手順でソースの<HATS:Component ・・・>にカーソルを合わせ、「プロパティー」ビューのコンポーネントから「入力フィールド」を選択します。「コンポーネント設定」を選択し表示されるウィンドウで、「プロジェクトのデフォルトを使用」のチェックを外し、「フィールドの表題を抽出」のチェックを外し、「OK」を選択します。「ウィジェット」から今度は「カレンダー」を選択し、「ウィジェット設定」を選択します。

表示されたウィンドウから、「プロジェクトのデフォルトを使用」のチェックを外します。「パターン」から入力する日付のパターンを指定し、「OK」を選択します。ここでは、「YYYYMMDD」とし、たとえばカレンダーから2011年4月1日を選ぶと、「20110401」と入力されます。パターンの指定は「ビルド」ボタンから行うこともできます。

ここまでのカスタマイズのイメージを「プレビュー」タブから確認します。ここではドロップダウンで表示する入力フィールドをいくつか増やしています。

更新内容を保存するため、JSPファイルを保存してください。ここでまでのカスタマイズを確認するため、HATSをサーバーでデバッグします。「HATSプロジェクト」ビューからHATSプロジェクトを右クリックし、「サーバーでデバッグ」を選択してください。「第1回 はじめてのHATS」の章の「1.3. HATSプロジェクトの実行」の手順に従い、HATSプロジェクトを実行し、メニュー画面のカスタマイズ結果を確認してください。


ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Rational
ArticleID=661180
ArticleTitle=IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―: 第3回 画面カスタマイズ
publish-date=06032011