HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM...

®

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

© 2011 IBM Corporation

テンプレートの変更とカスタマイズ－テンプレート、およびスタイル・シートについて－


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

Note� ブランク・ページ



テンプレートの変更とカスタマイズ

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

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

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

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

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



� デフォルト・テンプレートの変更

� テンプレートのカスタマイズ

�リンク先の変更

�配置、色、ロゴの変更

�ホスト・キーパッドの表示/非表示

� 新規テンプレート作成

テンプレートの変更手順



デフォルト・テンプレートの変更

1．「プロジェクト設定」をダブルクリック

2．「テンプレート」タブを選択

3．任意のテンプレートを選択



Note� HATSプロジェクトの作成後でも、デフォルト・テンプレートを別のテンプレートに変更することが可能です。

� 変更手順は、以下のようになります。

1. 「HATSプロジェクト表示」ビューから「<プロジェクト名>」 → 「プロジェクト設定」をダブルクリック

2. 「<プロジェクト名>設定」パネルから、「テンプレート」タブを選択

3. テンプレートの一覧から任意のテンプレートを選択

� HATSで提供されるテンプレートではなく、カスタム・テンプレートを作成し、使用することも可能です。詳細は、「ユーザーと管理者のガイド」 → 「テンプレートの使用」を参照してください。



テンプレートのカスタマイズ（1/3）� テンプレート用の.jspファイルを開く



Note� テンプレートのファイルを開いて基本的なカスタマイズをします。

� 以下のいずれかの方法で、カスタマイズ用のエディターを開始することができます。

� 「HATSへようこそ」ページから「テンプレートの変更」項目を展開し、「デフォルトのテンプレートをエディターで開くには、ここをクリックしてください。」というリンクをクリック

� 「プロジェクト設定」を開き、「概要」タブからテンプレート名をクリック

� 「HATSプロジェクト表示」パネルから該当プロジェクトの「Webコンテンツ」 → 「テンプレート」フォルダを展開し、カスタマイズしたいテンプレートを選択



� テンプレートの変更

�会社名、項目名

�リンク、URL

�その他

テンプレートのカスタマイズ（2/3）



Note� テンプレート（.jspファイル）を開き、必要な項目を変更してください。

�会社名、タイトル

�各リンク先アドレス

– デフォルト値： http://www.ibm.com

– リンクを選択後、「プロパティ」を開き、編集します。あるいは、ソースから直接編集します。

� テンプレートの配置、色、文字

�その他



� ホスト・キーパッドの表示 / 非表示

�「プロジェクト設定」の「レンダリング」タブで設定

テンプレートのカスタマイズ（3/3）

①①①①

②②②②

③③③③

④④④④

⑤⑤⑤⑤



Note� 以下の手順でホスト・キーパッドをブラウザーに表示させることができます。

1. 「プロジェクト設定」をダブルクリックし、プロジェクト設定ファイルを開く

2. 「レンダリング」タブを選択

3. 左側の項目の中から「ホスト・キーパッド」を選択

4. 「デフォルトのホスト・キーパッドの表示」にチェックを入れる

5. 「表示」プルダウンから表示形式を選択

– ボタン

– リンク

– ドロップダウン

� 「その他」タブ → 「キーボード・サポート」にある“キーボード・サポートを使用可能にする”にチェックを入れて

いる場合は、キーボードからの操作をすることもできますが、ホスト・キーパッドを画面に表示しユーザーにクリックさせることも可能です。

� 表示するキーを選択することもできます。表示したくないキーがある場合はチェックをはずしてください。ただし、「その他」タブ → 「キーボード・サポート」で「ホスト･キーパッドに表示されたホスト機能のみをサポート」を選択

している場合、チェックを外したキーに関してはホスト画面に対しての操作が無効になりますので注意が必要です。



� 「テンプレートの作成」ウィザードを開始する

新規テンプレートの作成（1/3）

右クリック右クリックいずれかをクリック



新規テンプレートの作成（2/3）� テンプレートの名前を入力



� ブランク・テンプレートの作成

� 既存のプロジェクト・テンプレートから

テンプレートを事前設定

� 既存のWebページ（URLまたはファイル）からテンプレートを事前設定

�例）既存のWebページからテンプレートを作成

新規テンプレートの作成（3/3）

②②②②

③③③③

④④④④

①①①①



Note� 新規テンプレートを作成する方法を以下の中から選択します。

� ブランク・テンプレートの作成

�既存のプロジェクト・テンプレートからテンプレートを事前設定

�既存のWebページ（URLまたはファイル）からテンプレートを事前設定

� 既存のWebページを使用してテンプレートを作成する場合は、以下の手順に従います。

1. 「既存のWebページ（URLまたはファイル）からテンプレートを事前設定」を選択

2. URLまたはファイルを指定

3. 「プレビュー」ボタンをクリック

4. 「終了」ボタンをクリック



Webページをベースにした新規テンプレートの作成

� 指定したWebページの関連するファイルはすべてダウンロードされる�「common」フォルダーの下にサブフォルダーとしてコピーされる

� HATSは、<HATS:Transform>タグをそのページのBODYの最後に挿入

�変換のためのホスト画面のレンダリング

のためのエリアを提供する

�開発者は<HATS:Transform>の配置を移動してテンプレートを利用する

テンプレートテンプレート

ホスト画面ホスト画面



新規テンプレート作成時の注意事項

� HATS Toolkit提供のウィザードとエディターを使用時に以下のものを自動的に追加�スタイルシート

�HATSのデフォルト・アプリケーション・キーパッド�変換により作成されたホスト画面用のエリア

� 必須タグ�<LINK rel=“stylesheet” href=“xxx”>

– ボタン、リンク、およびキーパッドの外観– テンプレートの背景色、およびウィジェット– テキストのフォントとサイズ�<HATS:Transform>

– テンプレートで囲むホスト画面の変換対象位置

� 制限事項�デフォルトはUTF-8でエンコーディングされる（作成後に変更は可能）�HATS、hats、Hatsで始まる名前のJSP変換、CSSクラス、HATSForm、またはそのオブジェクトを使用しない

�HATS_formというフォーム名を作成しない�<HATS:Transform>タグを囲むフォームを使用しない



スタイル・シート

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

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

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

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

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



Note� ブランク・ページ



� HATSはスタイルシート（CSS）でHTMLファイルの色やフォント・スタイルを指定

� HATSウィジェットはCSSクラスをテキストの出力に使用

� スタイルシートは色やフォント・スタイルにCSSクラスをマップ

� 各テンプレートはスタイルシートをヘッダーで指定

� いくつかのテンプレートでは、<style>タグでボタンやリンクの色を表現

スタイル・シート



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



（補足）テンプレートのテーブル・タグに注意

� テーブル・タグでホスト・コンポーネントの配置を指定するようなテンプレートの場合、テーブル・タグでも背景色を指定している場合があります。その場合は、テーブル・タグの背景色も変更してください。変更しない場合は、ホスト・コンポーネントの領域の背景色は変更されません。



備考：スタイル・シートからのカラーとフォントのマップ

� 色、フォント、paddingはCSS（Cascading Style Sheet）にマップされる

� ホストのフィールド属性はCSSクラスにマップされ、そこに色、フォント・サイズ、フォント・スタイル、空白などが定義されている

� ユーザーはRational SDPのスタイル・シート・エディターを使い、マップの変更が可能

� ひとつ以上のスタイル・シートまたは埋め込み型のスタイルを変更することで、表示が変更される（Cascading）

� 通常スタイル・シートは、スタイルはHTMLツリー構造の親の属性も引き継ぐ

� HATSでは、スタイル・シートを指定することが可能

� リンクを通じて外部のスタイル・シート

� テンプレートの中でスタイル・エレメント（<STYLE>）を使用�変換の中でスタイル・エレメント（<STYLE>）とリンクを使用

�ウィジェットにより生成された埋め込み

� 優先順位としては4が最も高く、1が最も低い

� ブラウザの設定を使い、スタイルをオーバーライドすることも可能

� IEの場合、「ツール」 → 「インターネット･オプション」 → 「全般」 → 「ユーザー補助」 → 「ユーザースタイルシート」

詳細は http://www.w3.org/Style/CSS を参照してください。

HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM...

Documents

Transcript of HATSV80 04 2 AppDevCust Templatepublic.dhe.ibm.com/.../hatsv80_04_2_appdevcust_template.pdfIBM...