hatsv80 04 2 appdevcust templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfibm...
TRANSCRIPT
![Page 1: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/1.jpg)
®
IBM Rational Host Access Transformation Services V8.0 ワークショップ
© 2011 IBM Corporation
テンプレートの変更とカスタマイズ- テンプレート、およびスタイル・シートについて -
![Page 2: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/2.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
2HATSアプリケーションのカスタマイズ
Note� ブランク・ページ
![Page 3: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/3.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
3HATSアプリケーションのカスタマイズ
テンプレートの変更とカスタマイズ
STEP 1. はじめにはじめにはじめにはじめに
STEP 2. HATSプロジェクトプロジェクトプロジェクトプロジェクトのののの作成作成作成作成
STEP 4. 本番環境本番環境本番環境本番環境へのへのへのへの配置配置配置配置
STEP 3. HATSアプリケーションアプリケーションアプリケーションアプリケーションののののカスタマイズカスタマイズカスタマイズカスタマイズ
3-1 アプリケーション全体の設定3-2 個別画面のカスタマイズ3-3 高度なカスタマイズ
![Page 4: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/4.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
4HATSアプリケーションのカスタマイズ
� デフォルト・テンプレートの変更
� テンプレートのカスタマイズ
�リンク先の変更
�配置、色、ロゴの変更
�ホスト・キーパッドの表示/非表示
� 新規テンプレート作成
テンプレートの変更手順
![Page 5: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/5.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
5HATSアプリケーションのカスタマイズ
デフォルト・テンプレートの変更
1.「プロジェクト設定」をダブルクリック
2.「テンプレート」タブを選択
3.任意のテンプレートを選択
![Page 6: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/6.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
6HATSアプリケーションのカスタマイズ
Note� HATSプロジェクトの作成後でも、デフォルト・テンプレートを別のテンプレートに変更することが可能です。
� 変更手順は、以下のようになります。
1. 「HATSプロジェクト表示」ビューから「<プロジェクト名>」 → 「プロジェクト設定」をダブルクリック
2. 「<プロジェクト名>設定」パネルから、「テンプレート」タブを選択
3. テンプレートの一覧から任意のテンプレートを選択
� HATSで提供されるテンプレートではなく、カスタム・テンプレートを作成し、使用することも可能です。詳細は、「ユーザーと管理者のガイド」 → 「テンプレートの使用」を参照してください。
![Page 7: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/7.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
7HATSアプリケーションのカスタマイズ
テンプレートのカスタマイズ (1/3)� テンプレート用の.jspファイルを開く
![Page 8: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/8.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
8HATSアプリケーションのカスタマイズ
Note� テンプレートのファイルを開いて基本的なカスタマイズをします。
� 以下のいずれかの方法で、カスタマイズ用のエディターを開始することができます。
� 「HATSへようこそ」ページから「テンプレートの変更」項目を展開し、「デフォルトのテンプレートをエディターで開くには、ここをクリックしてください。」というリンクをクリック
� 「プロジェクト設定」を開き、「概要」タブからテンプレート名をクリック
� 「HATSプロジェクト表示」パネルから該当プロジェクトの「Webコンテンツ」 → 「テンプレート」フォルダを展開し、カスタマイズしたいテンプレートを選択
![Page 9: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/9.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
9HATSアプリケーションのカスタマイズ
� テンプレートの変更
�会社名、項目名
�リンク、URL
�その他
テンプレートのカスタマイズ (2/3)
![Page 10: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/10.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
10HATSアプリケーションのカスタマイズ
Note� テンプレート(.jspファイル)を開き、必要な項目を変更してください。
�会社名、タイトル
�各リンク先アドレス
– デフォルト値: http://www.ibm.com
– リンクを選択後、「プロパティ」を開き、編集します。あるいは、ソースから直接編集します。
� テンプレートの配置、色、文字
�その他
![Page 11: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/11.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
11HATSアプリケーションのカスタマイズ
� ホスト・キーパッドの表示 / 非表示
�「プロジェクト設定」の「レンダリング」タブで設定
テンプレートのカスタマイズ (3/3)
①①①①
②②②②
③③③③
④④④④
⑤⑤⑤⑤
![Page 12: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/12.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
12HATSアプリケーションのカスタマイズ
Note� 以下の手順でホスト・キーパッドをブラウザーに表示させることができます。
1. 「プロジェクト設定」をダブルクリックし、プロジェクト設定ファイルを開く
2. 「レンダリング」タブを選択
3. 左側の項目の中から「ホスト・キーパッド」を選択
4. 「デフォルトのホスト・キーパッドの表示」にチェックを入れる
5. 「表示」プルダウンから表示形式を選択
– ボタン
– リンク
– ドロップダウン
� 「その他」タブ → 「キーボード・サポート」にある“キーボード・サポートを使用可能にする”にチェックを入れて
いる場合は、キーボードからの操作をすることもできますが、ホスト・キーパッドを画面に表示しユーザーにクリックさせることも可能です。
� 表示するキーを選択することもできます。表示したくないキーがある場合はチェックをはずしてください。ただし、「その他」タブ → 「キーボード・サポート」で「ホスト・キーパッドに表示されたホスト機能のみをサポート」を選択
している場合、チェックを外したキーに関してはホスト画面に対しての操作が無効になりますので注意が必要です。
![Page 13: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/13.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
13HATSアプリケーションのカスタマイズ
� 「テンプレートの作成」ウィザードを開始する
新規テンプレートの作成 (1/3)
右クリック右クリックいずれかをクリック
![Page 14: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/14.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
14HATSアプリケーションのカスタマイズ
新規テンプレートの作成 (2/3)� テンプレートの名前を入力
![Page 15: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/15.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
15HATSアプリケーションのカスタマイズ
� ブランク・テンプレートの作成
� 既存のプロジェクト・テンプレートから
テンプレートを事前設定
� 既存のWebページ(URLまたはファイル)からテンプレートを事前設定
�例) 既存のWebページからテンプレートを作成
新規テンプレートの作成 (3/3)
②②②②
③③③③
④④④④
①①①①
![Page 16: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/16.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
16HATSアプリケーションのカスタマイズ
Note� 新規テンプレートを作成する方法を以下の中から選択します。
� ブランク・テンプレートの作成
�既存のプロジェクト・テンプレートからテンプレートを事前設定
�既存のWebページ (URLまたはファイル)からテンプレートを事前設定
� 既存のWebページを使用してテンプレートを作成する場合は、以下の手順に従います。
1. 「既存のWebページ (URLまたはファイル)からテンプレートを事前設定」を選択
2. URLまたはファイルを指定
3. 「プレビュー」ボタンをクリック
4. 「終了」ボタンをクリック
![Page 17: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/17.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
17HATSアプリケーションのカスタマイズ
Webページをベースにした新規テンプレートの作成
� 指定したWebページの関連するファイルはすべてダウンロードされる�「common」フォルダーの下にサブフォルダーとしてコピーされる
� HATSは、<HATS:Transform>タグをそのページのBODYの最後に挿入
�変換のためのホスト画面のレンダリング
のためのエリアを提供する
�開発者は<HATS:Transform>の配置を移動してテンプレートを利用する
テンプレートテンプレート
ホスト画面ホスト画面
![Page 18: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/18.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
18HATSアプリケーションのカスタマイズ
新規テンプレート作成時の注意事項
� HATS Toolkit提供のウィザードとエディターを使用時に以下のものを自動的に追加�スタイルシート
�HATSのデフォルト・アプリケーション・キーパッド�変換により作成されたホスト画面用のエリア
� 必須タグ�<LINK rel=“stylesheet” href=“xxx”>
– ボタン、リンク、およびキーパッドの外観– テンプレートの背景色、およびウィジェット– テキストのフォントとサイズ�<HATS:Transform>
– テンプレートで囲むホスト画面の変換対象位置
� 制限事項�デフォルトはUTF-8でエンコーディングされる(作成後に変更は可能)�HATS、hats、Hatsで始まる名前のJSP変換、CSSクラス、HATSForm、またはそのオブジェクトを使用しない
�HATS_formというフォーム名を作成しない�<HATS:Transform>タグを囲むフォームを使用しない
![Page 19: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/19.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
19HATSアプリケーションのカスタマイズ
スタイル・シート
STEP 1. はじめにはじめにはじめにはじめに
STEP 2. HATSプロジェクトプロジェクトプロジェクトプロジェクトのののの作成作成作成作成
STEP 4. 本番環境本番環境本番環境本番環境へのへのへのへの配置配置配置配置
STEP 3. HATSアプリケーションアプリケーションアプリケーションアプリケーションののののカスタマイズカスタマイズカスタマイズカスタマイズ
3-1 アプリケーション全体の設定3-2 個別画面のカスタマイズ3-3 高度なカスタマイズ
![Page 20: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/20.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
20HATSアプリケーションのカスタマイズ
Note� ブランク・ページ
![Page 21: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/21.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
21HATSアプリケーションのカスタマイズ
� HATSはスタイルシート(CSS)でHTMLファイルの色やフォント・スタイルを指定
� HATSウィジェットはCSSクラスをテキストの出力に使用
� スタイルシートは色やフォント・スタイルにCSSクラスをマップ
� 各テンプレートはスタイルシートをヘッダーで指定
� いくつかのテンプレートでは、<style>タグでボタンやリンクの色を表現
スタイル・シート
![Page 22: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/22.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
22HATSアプリケーションのカスタマイズ
Note: HATS V8.0で提供されるスタイル・シート一覧
インライン・カレンダーのスタイルです。inlineCalendar
Industry.jspテンプレート用のスタイルシートです。industry
Finance.jspテンプレート用のスタイルシートです。finance
ブラウザー設定およびクラス関数に関連して生成されたすべての出力のフォント・サイズxsmallFont
ブラウザー設定およびクラス関数に関連して生成されたすべての出力のフォント・サイズxlargeFont
白の背景。前景色はホスト画面の色と一致します。whitetheme
黄褐色の背景。前景色はさまざまな色調のグレーと青です。tantheme
ブラウザー設定およびクラス関数に関連して生成されたすべての出力のフォント・サイズsmallFont
生成されたすべての出力のフォント・サイズはブラウザーに応じて調整されます。scaleableFont
whitetheme スタイル・シートの前景色と背景色を反転します。reverseVideoWhite
tantheme スタイル・シートの前景色と背景色を反転します。reverseVideoTan
monochromethemeスタイル・シートの前景色と背景色を反転します。reverseVideoMono
graytheme スタイル・シートの前景色と背景色を反転します。reverseVideoGray
blacktheme スタイル・シートの前景色と背景色を反転します。reverseVideoBlack
「印刷ジョブ」ウィンドウのスタイルです。PrintJobWindow
ブラウザー設定およびクラス関数に関連して生成されたすべての出力のフォント・サイズです。normalFont
白の背景。フォント・サイズはさまざまです。nonFixedFont
白の背景。前景色はさまざまな色調のグレー、リンクは青です。monochrometheme
ブラウザー設定およびクラス関数に関連して生成されたすべての出力のフォント・サイズです。largeFont
グレーの背景。前景色はさまざまな色調のグレーです。graytheme
すべてのスタイル・シートに共通の要素を定義します。メインスタイルシート (blacktheme、graytheme、monochrometheme、tantheme、 whitetheme) によりインポートされます。
commontheme
カレンダー・ポップアップのスタイルです。calendar
黒の背景。前景色はホスト画面の色と一致します。blacktheme
![Page 23: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/23.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
23HATSアプリケーションのカスタマイズ
(補足)テンプレートのテーブル・タグに注意
� テーブル・タグでホスト・コンポーネントの配置を指定するようなテンプレートの場合、テーブル・タグでも背景色を指定している場合があります。その場合は、テーブル・タグの背景色も変更してください。変更しない場合は、ホスト・コンポーネントの領域の背景色は変更されません。
![Page 24: HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM Rational Host Access Transformation Services V8.0 ワークショップ HATS アプリケーションのカスタマイズ](https://reader034.vdocuments.net/reader034/viewer/2022052013/602aa32afd36577e5c70c795/html5/thumbnails/24.jpg)
IBM Rational Host Access Transformation Services V8.0 ワークショップ
24HATSアプリケーションのカスタマイズ
備考: スタイル・シートからのカラーとフォントのマップ
� 色、フォント、paddingはCSS(Cascading Style Sheet)にマップされる
� ホストのフィールド属性はCSSクラスにマップされ、そこに色、フォント・サイズ、フォント・スタイル、空白などが定義されている
� ユーザーはRational SDPのスタイル・シート・エディターを使い、マップの変更が可能
� ひとつ以上のスタイル・シートまたは埋め込み型のスタイルを変更することで、表示が変更される(Cascading)
� 通常スタイル・シートは、スタイルはHTMLツリー構造の親の属性も引き継ぐ
� HATSでは、スタイル・シートを指定することが可能
� リンクを通じて外部のスタイル・シート
� テンプレートの中でスタイル・エレメント(<STYLE>)を使用�変換の中でスタイル・エレメント(<STYLE>)とリンクを使用
�ウィジェットにより生成された埋め込み
� 優先順位としては4が最も高く、1が最も低い
� ブラウザの設定を使い、スタイルをオーバーライドすることも可能
� IEの場合、「ツール」 → 「インターネット・オプション」 → 「全般」 → 「ユーザー補助」 → 「ユーザースタイルシート」
詳細は http://www.w3.org/Style/CSS を参照してください。