HATSV80 05 3 IndivisualCust...

24
® IBM Rational Host Access Transformation Services V8.0 ワークショップ © 2011 IBM Corporation 変換(.jsp

Transcript of HATSV80 05 3 IndivisualCust...

Page 1: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

®

IBM Rational Host Access Transformation Services V8.0 ワークショップ

© 2011 IBM Corporation

変換(.jsp)

Page 2: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

2個別画面のカスタマイズ

目次

� 変換とは

� 変換の作成と編集

Page 3: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

3個別画面のカスタマイズ

変換とは

STEP 1. はじめにはじめにはじめにはじめに

STEP 2. HATSプロジェクトプロジェクトプロジェクトプロジェクトのののの作成作成作成作成

STEP 4. 本番環境本番環境本番環境本番環境へのへのへのへの配置配置配置配置

STEP 3. HATSアプリケーションアプリケーションアプリケーションアプリケーションののののカスタマイズカスタマイズカスタマイズカスタマイズ

3-1 アプリケーション全体の設定3-2 個別画面のカスタマイズ3-3 高度なカスタマイズ

Page 4: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

4個別画面のカスタマイズ

変換とは

� 変換の目的

�ホスト画面情報の表示方法を変更

�エンド・ユーザーに表示したくない画面情報にフィルター

�Web表示でホスト・コンポーネントをウィジェットとして表示

� ホスト画面をWebページに変換する方法を定義

�ホスト画面の各パーツをどう処理するかを指定

�コンポーネントに変換したいウィジェットを結びつける

�画面カスタマイズとの関連付けが必要

� ソースはJSPファイルで定義

�同一ページ上で他のコンポーネントなどとの連携が可能

�UTF-8でエンコードされる

– 変換作成後の変更は可能

� 制限事項

�次のものはHATSの予約語として定義されているため、使用不可

– HATS、hats、またはHatsで始まるJSP変数、CSSクラス、HATSForm、またはその他のオブジェクト

Page 5: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

5個別画面のカスタマイズ

変換の作成と編集

STEP 1. はじめにはじめにはじめにはじめに

STEP 2. HATSプロジェクトプロジェクトプロジェクトプロジェクトのののの作成作成作成作成

STEP 4. 本番環境本番環境本番環境本番環境へのへのへのへの配置配置配置配置

STEP 3. HATSアプリケーションアプリケーションアプリケーションアプリケーションののののカスタマイズカスタマイズカスタマイズカスタマイズ

3-1 アプリケーション全体の設定3-2 個別画面のカスタマイズ3-3 高度なカスタマイズ

Page 6: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

6個別画面のカスタマイズ

変換の作成1. HATS Toolkitのツールバーから「HATS変換を作成」を選択

2. 画面キャプチャー・ファイルを開いた状態で、「HATS変換を作成」を選択

3. 「HATSプロジェクト表示」の上で右クリックをし、「新規HATS」 → 「変換」を選択

①①①①

②②②②

③③③③

いずれかを選択

Page 7: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

7個別画面のカスタマイズ

Page Designer (1/2)� Rational Studioの提供するエディター

�変換、テンプレートの編集に使用

� JSPファイルやHTMLファイルをダブルクリックすることでオープン可能

� スタイルの設定が反映されて、表示される

「デザイン」タブ「デザイン」タブ

「ソース」タブ「ソース」タブ

「分割」タブ「分割」タブ

「プレビュー」タブ「プレビュー」タブ

Page 8: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

8個別画面のカスタマイズ

Note� ブランク・ページ

Page 9: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

9個別画面のカスタマイズ

Page Designer (2/2)� パレットとプロパティー

�パレット・・・ホスト・コンポーネントの挿入に使用

�プロパティー・・・ホスト・コンポーネントの編集に使用

プロパティープロパティー

パレットパレット

Page 10: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

10個別画面のカスタマイズ

Note� Rational SDPではデフォルトがフリーレイアウト・モードになっています。

� フリーレイアウト・テーブルを含めたくない場合は、パースペクティブの設定から変更することができます。

� フリーレイアウト・モードを使用しない場合は、下図のように( )のアイコンをクリックし、「フリー・レイアウト・テーブル」のチェックを外してください。

� フリーレイアウト・モードについては、Rational SDPのヘルプ「開発」 → 「Webアプリケーションの開発」 →「Webページのコンテンツの作成」 → 「Webページのレイアウトをデザインする」のセクションを参照してください。

Page 11: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

11個別画面のカスタマイズ

ホスト・コンポーネントの挿入 (1/4)

� 注意:カーソルを<HATS:Form>タグの中の配置したい場所においておくこと

①①①①

①右クリック → 「HATSツール」 → 「ホスト・コンポー

ネントの挿入」をクリック②ツールバーから「ホスト・コンポーネントの挿入」アイコンをクリック

②②②②

Page 12: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

12個別画面のカスタマイズ

ホスト・コンポーネントの挿入 (2/4)

①挿入したいコンポーネントをクリック

①挿入したいコンポーネントをクリック

②挿入したい領域にドラッグ&ドロップ

②挿入したい領域にドラッグ&ドロップ

Page 13: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

13個別画面のカスタマイズ

ホスト・コンポーネントの挿入 (3/4)

� 画面領域

�ホスト・コンポーネントを抽出する画面を選択

– 「画面キャプチャー」の中から選択可能

�ホスト・コンポーネントを抽出したい画面領域

を選択

– この領域が変換ページに表示される

� フィールドを強調表示

�入力→青

�保護→褐色

�非表示→灰色

Page 14: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

14個別画面のカスタマイズ

ホスト・コンポーネントの挿入 (4/4)

� レンダリング・オプション

�コンポーネントとウィジェットの結びつけ

�プレビューも可能

コンポーネ

ント設定

コンポーネ

ント設定

テキスト置換テキスト置換

ウィジェット設定ウィジェット設定大きいウィンドウ

でプレビュー

大きいウィンドウ

でプレビュー

レンダリングの

拡張設定

レンダリングの

拡張設定

Page 15: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

15個別画面のカスタマイズ

ホスト・コンポーネントの編集

①①①①

①プロパティーから変更②右クリック → 「HATSツール」 → 「ホスト・コンポーネントの編集」

③ツールバーから「ホスト・コンポーネントの編集」アイコンをクリック

③③③③

②②②②

Page 16: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

16個別画面のカスタマイズ

プロパティーを使用した編集例

プロパティーからホスト・コンポーネントの編集が可能

プロパティーからホスト・コンポーネントの編集が可能

コンポーネント設定のアイコン

コンポーネント設定のアイコン

ウィジェット設定の

アイコン

ウィジェット設定の

アイコン

Page 17: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

17個別画面のカスタマイズ

マクロ・キーを挿入� 変換にマクロを開始するためのボタンやリンクなどを挿入

右クリック → 「HATSツール」 → 「マクロ・キーを挿入」

組み込みたいマクロを選択し、スタイル・オプションとして表示形式を選択

Page 18: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

18個別画面のカスタマイズ

Note� ブランク・ページ

Page 19: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

19個別画面のカスタマイズ

キーパッドの挿入� 画面上にキーパッドの挿入が可能

�ホスト・キーパッド

– デフォルト

– カスタム

– 個々のキー

�アプリケーション・キーパッド

– デフォルト

– カスタム

– 個々のキー

ホスト・キーパッド-個々のキー挿入パネル

アプリケーション・キーパッド-個々のキー挿入パネル

Page 20: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

20個別画面のカスタマイズ

Note� 「HATS ツール」メニューからキーパッドを挿入することができます。挿入したいキーもしくはキーパッドを選択すると、自動的にカーソルの位置にHTMLタグが挿入されます。

� ホスト・キーパッドを挿入� デフォルト・キーパッド

– 挿入されたホスト・キーパッドは、HATSアプリケーションにデフォルト・ホスト・キーパッドが表示されるようにプロジェクト設定で構成されている場合にのみ、「プレビュー」および「デザイン」ビューに表示されます。デフォルト・ホスト・キーパッドが表示されるようにプロジェクトを構成し、どのキーを含めるかを定義するには、「HATSプロジェクト表示」に移動し、ご使用のHATSプロジェクトの「プロジェクト設定」をダブルクリックします。次に、「レンダリング」タブを選択し、「ホスト・キーパッド」をクリックします。

� カスタム・キーパッド– カスタム・ホスト・キーパッドでは、デフォルト・ホスト・キーパッド設定で指定したものと同じキーが使用されます。これは、ご使用のHATSプロジェ

クトの「プロジェクト設定」に定義されています。カスタム・ホスト・キーパッドを使用すると、「デザイン」ビューでボタンやリンクを強調表示し、右マウス・ボタンでクリックして「プロパティー」を選択することにより、個々のキーパッド・ボタンやリンクの属性を編集できます。

� 個々のキー– 「ホスト・キーを挿入」パネル(前頁図参照)で、挿入するホスト・キーを選択し、これをボタンまたはリンクとして表示するかどうかを指定して、

「OK」をクリックします。挿入後、ボタンまたはリンクを強調表示し、右マウス・ボタンでクリックして「プロパティー」を選択することにより、これを編集できます。既存のホスト・キーパッドに個々のホスト・キーを追加できます。

� アプリケーション・キーパッドを挿入� デフォルト・キーパッド

– デフォルト・アプリケーション・キーパッドを構成し、表示するキーを定義するには、「HATSプロジェクト表示」に移動し、ご使用のHATSプロジェクトの「プロジェクト設定」をダブルクリックします。次に、「レンダリング」タブを選択し、「アプリケーション・キーパッド」をクリックします。

� カスタム・キーパッド– カスタム・アプリケーション・キーパッドでは、デフォルト・アプリケーション・キーパッド設定で指定したものと同じキーが使用されます。これは、ご

使用のHATSプロジェクトの「プロジェクト設定」に定義されています。カスタム・アプリケーション・キーパッドを使用すると、「デザイン」ビューでボタンやリンクを強調表示し、右マウス・ボタンでクリックして「プロパティー」を選択することにより、個々のキーパッド・ボタンやリンクの属性を編集できます。

� 個々のキー– 「アプリケーション・キーを挿入」パネル(前頁図参照)で、挿入するアプリケーション・キーを選択し、これをボタンまたはリンクとして表示するかど

うかを指定して、「OK」をクリックします。挿入後、ボタンまたはリンクを強調表示し、右マウス・ボタンでクリックして「プロパティー」を選択することにより、これを編集できます。既存のアプリケーション・キーパッドに個々のアプリケーション・キーを追加できます。

Page 21: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

21個別画面のカスタマイズ

すべてのホスト・コンポーネントを挿入� 指定可能なすべてのホスト・コンポーネントを変換に追加する

� 次の画面から選択可能

�画面キャプチャー

�カスタマイズした画面

Page 22: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

22個別画面のカスタマイズ

Note� 「HATS ツール」 → 「すべてのホスト・コンポーネントを挿入」メニューを選択することで、特定の画面キャプ

チャー、またはカスタマイズされた画面から、指定可能なすべてのホスト・コンポーネントを変換に追加することができます。

� 追加したホスト・コンポーネントでは、HATS「プロジェクト設定」の「レンダリング」タブの「レンダリング・セット」で指定したデフォルト・レンダリング・セットが使用されます。

Page 23: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

23個別画面のカスタマイズ

格納済み画面を挿入� 複数の画面を1つのWebページ上に表示可能

� マクロ、変換JSP、グローバル変数を使用可能

Page 24: HATSV80 05 3 IndivisualCust ScreenTransformationpublic.dhe.ibm.com/software/dw/jp/rational/library/em/...1. HATS Toolkit のツールバーから「HATS 変換を作成」を選択

IBM Rational Host Access Transformation Services V8.0 ワークショップ

24個別画面のカスタマイズ

Note� 「HATS ツール」 → 「格納済み画面を挿入」メニューを選択することで、格納済みの画面を挿入することができ

ます。

� 複数のホスト画面を結合して、1つのWebページ上に表示したい場合などに使用する機能です。

� この機能を使用するためには、あらかじめ「すべてのフィールドにプロンプト・アクションを追加」もしくは「すべてのフィールドに抽出アクションを追加」を含むマクロを記録しておくことが必要です。

� また格納済み画面内の保護フィールド上のデータが不定の場合は、「ホスト・テキスト(保護フィールド)のグローバル変数を挿入してください」にチェックを入れてください。

� 詳細は、「ユーザーと管理者のガイド」 → 「画面の結合」を参照してください。