IBM Rational Host Access Transformation Services V8.0

IBM Rational
Host Access Transformation Services
V8.0
Dojo ウィジェットを使用した UI 開発
チュートリアル
第 1 回 Dojo サポートを有効化した HATS プロジェクト
の作成
日本 IBM システムズ・エンジニアリング(ISE) 株式会社
2012 年 1 月
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
目次
目次 ...................................................................................................................................... 2
0.
1.
2.
はじめに ........................................................................................................................ 3
0.1.
当資料について ...................................................................................................... 3
0.2.
対象読者 ................................................................................................................. 3
0.3.
前提環境 ................................................................................................................. 3
概要 ...............................................................................................................................5
1.1.
学習目標 ................................................................................................................. 5
1.2.
所要時間 ................................................................................................................. 5
Dojo サポートを有効化した HATS プロジェクトの作成 .............................................. 6
2/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
0. はじめに
0.1. 当資料について
当資料では、IBM Rational Host Access Transformation Services（以下、HATS）におい
て、HATS V8.0 の新機能である Dojo ウィジェットを使用したユーザー・インターフェー
スの開発方法について説明します。HATS アプリケーション開発者はこのチュートリアル
を通して、スムーズに HATS Dojo アプリケーションの開発スキルを身に付けることができ
ます。
チュートリアルでは、受発注業務を行うための IBM i のホスト・アプリケーションを例に
とり、Dojo を使用した HATS アプリケーション開発の手順を説明いたします。当資料の読
者とはホスト・アプリケーションの環境が異なる場合もあると思いますが、適宜、読者の
環境に当てはめて読み進めていってください。
当資料に含まれる情報は可能な限り正確を期しておりますが、IBM / ISE の正式なレビュー
を受けておらず、当資料に記載された内容に関して何ら保証するものではありません。当
ガイドでの記載内容はあくまでも支援情報であり、読者の責任において取り扱われるもの
とし、当資料の内容によって受けたいかなる損害に関しても一切の保証をするものではあ
りません。
0.2. 対象読者
ホスト・アプリケーションの Web 化を検討されている方
HATS において Dojo の使用を検討されている方
HATS アプリケーション開発者
0.3. 前提環境
HATS Toolkit V8.0 以降が前提となります。また、HATS V8.0 において Dojo サポートを使
用するための前提要件があります。
HATS Toolkit V8.0 の前提要件の最新情報は下記リンク先よりご確認いただけます。
http://www-01.ibm.com/support/docview.wss?uid=swg27019102
■開発環境およびランタイム環境
通常の HATS 前提要件と同様です。HATS Toolkit の要件を満たす Rational Software
Delivery Platform (以下、Rational SDP)製品、WAS のテスト環境および HATS Toolkit
V8.0 以降をインストールしてください。
なお、WAS V8 上で HATS Dojo サポートを使用する場合は、RAD V8.0.3 以降が必要です。
3/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
■サポートされる Web ブラウザー
•
Firefox V3, V3.6, V4（将来の修正モジュールおよび Fix Pack を含む）
•
Internet Explorer V8, V9（将来の修正モジュールおよび Fix Pack を含む）
•
Safari V4, V5（将来の修正モジュールおよび Fix Pack を含む）
■サポートされる Dojo のバージョン
•
前提となる Rational SDP 製品に含まれる Dojo 1.4.1 および 1.5.0
Rational SDP および HATS のインストール手順についてはそれぞれ以下をご参照ください。
「RAD V8 インストール手順」（動画デモ）
http://www.youtube.com/watch?v=61WzijNdML8&lr=1
「IBM Rational Host Access Transformation Services V7.5.1 開発ガイド －初心者のた
めのはじめの一歩－」の「1. はじめての HATS」
http://www.ibm.com/developerworks/jp/rational/library/em/cms/hats751_developmentgu
ide/
※HATS V7.5.1 の資料になりますが、基本的なインストール手順は V8.0 でも同様です。
なお、このチュートリアルでは Web ブラウザーとして Firefox を使用することを前提とし
ています。Dojo のデバッグをするために「Firebug」という Firefox のアドオンとして無償
で提供されるデバッグ・ツールを使用します。Firebug は以下のサイトからダウンロードし
てインストールしてください。
https://addons.mozilla.org/ja/firefox/addon/firebug/
4/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
1. 概要
1.1. 学習目標
このチュートリアルでは、Dojo ウィジェットを使用した HATS アプリケーションの画面カ
スタマイズの方法について学習します。1st ステップとして、まず Dojo サポートを有効化
した HATS プロジェクトを作成します。そして、HATS Toolkit が提供する GUI を使用し
て Dojo ウィジェットを使用した変換ファイルの作成を行います。2nd ステップでは、Dojo
ウィジェットをソース・レベルで編集する方法について学習します。ソースを編集するこ
とで、HATS Toolkit が提供する GUI では設定できない付加機能を追加でき、より使い勝
手の良いユーザー・インターフェースを作成することができます。
(1st ステップ)
•
Dojo サポートを有効化した HATS アプリケーションの作成
•
画面カスタマイズの作成
•
Dojo ウィジェットを使用した変換ファイルの作成
¾
検証テキスト・ボックス
¾
拡張グリッド
(2nd ステップ)
•
Dojo ウィジェットの編集
¾
拡張グリッドのカスタマイズ
1.2. 所要時間
このチュートリアルを終了するには、約 90 分かかります。このチュートリアルに関連した
その他の概念や機能について調べる場合は、終了までにさらに時間がかかります。
5/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
2. Dojo サポートを有効化した HATS プロジェクトの作成
ここでは、Dojo サポートを有効化した HATS プロジェクトを作成する方法について学習し
ます。Dojo のサポートは、新規 HATS プロジェクト作成時に有効化する必要があります。
1)
HATS Toolkit より、「プロジェクトを作成」ウィザードの起動
HATS Toolkit を起動し、メニュー・バーより「ファイル」→「新規」→「HATS プロジェ
クト」を選択し、ウィザードを起動します。
2)
HATS プロジェクトの基本情報の入力
「HATS プロジェクト」画面では、プロジェクト名、ターゲット・サーバー、EAR 名など
プロジェクトの基本情報を入力します。ここで、
「Dojo テクノロジーを使用」にチェックを
入れることで、Dojo を使用するために必要なファイルを含むプロジェクトが生成されます。
6/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
•
名前：任意のプロジェクト名（ここでは「HATSDojoSample」）を入力します。
•
「ターゲット・サーバー」：使用する WAS のバージョン（ここでは「WebSphere
Application Server V8.0」）を選択します。
•
エンタープライズ・アプリケーション・プロジェクト：任意の名前（ここでは
「HATSDojoSample_EAR8」）を入力します。
•
Dojo テクノロジーを使用：チェックを入れます。
•
管理コンソール・サポートを追加：チェックが入っていることを確認します。
上記を入力し、「次へ」をクリックします。
3)
ホスト接続情報の入力
「接続設定」画面では、接続する宛先ホストの情報を入力します。
7/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
•
ホスト名：Telnet サーバーのアドレス、もしくはホスト名を入力します。
•
タイプ：接続のタイプを選択します。
•
ポート：Telnet サーバーのポートを入力します。
•
コード・ページ：ホスト・アプリケーションのコード・ページを選択します。
•
画面サイズ：ホスト・アプリケーションの画面サイズを選択します。
上記を設定し、「次へ」をクリックします。
4)
テーマの選択
「プロジェクト・テーマ」画面では、見映えと操作性に関わる設定をします。
8/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
任意のテーマ（ここでは「標準」）を選択し、「次へ」をクリックします。
5)
Dojo プロジェクトのセットアップ
プロジェクトが使用する Dojo Toolkit のロケーションを指定します。デフォルトでは、RAD
などの Rational SDP が提供する Dojo Toolkit を HATS プロジェクトにコピーして使用し
ます。なお、HATS V8.0 は Rational SDP が提供する Dojo 1.4.1 および 1.5.0 をサポート
します。
9/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
「これらのセットアップ・オプションを変更」をクリックします。
「Dojo プロジェクト・セ
ットアップのオプション」ウィザードが開きます。
「Dojo プロジェクト・セットアップのオプション」ウィザード
このウィザードでは、HATS Web プロジェクトでの Dojo Toolkit の使用方法
を指定します。
プロジェクトでの Dojo のセットアップには、以下の 3 つのオプションがあり
ます。
z
Dojo をこのプロジェクトにコピーし、そのプロジェクトからデプロイする
Dojo Toolkit を HATS プロジェクト内に含めます。HATS プロジェクトにおける
10/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
Dojo フォルダーの名前を指定できます。また、Rational SDP に付属の Dojo ディ
ストリビューションを使用するか、それともご使用のワークスペースまたはファイ
ル・システム内の Dojo ディストリビューションを使用するかを指定できます。
z
Dojo はワークスペース内のプロジェクトにあり、そのプロジェクトからデプ
ロイする
ワークスペース内の別のプロジェクトにある Dojo のルート・フォルダーを参照で
きます。 Dojo Toolkit はご使用のプロジェクトにコピーされないことに注意してく
ださい。これは、Dojo Toolkit を含むプロジェクトからデプロイされます。
11/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
z Dojo をリモート側でデプロイするか、Dojo は公開 CDN 上にある
リモート・ロケーションにある Dojo Toolkit を選択できます。Dojo Toolkit ソ
ースのリモート・ロケーションを以下のように指定できます。
* 公開 CDN: 一般に公開されているコンテンツ・デリバリー・ネットワー
クの URL を入力できます。コンテンツ・デリバリー・ネットワークは、
オープン・ソース JavaScript ライブラリーに、地理的に分散されたホステ
ィングを提供します。ブラウザーは、Web アプリケーションで URL を解
決すると、最も近くにある使用可能なサーバーから自動的にファイルをダウ
ンロードします。
* リモート URI: Dojo のルート・フォルダーを参照するリモート・ロケーショ
ンの URL を入力できます。
「対応する Dojo」セクションでは、ご使用のリモート Dojo Toolkit に最適の
Dojo ソース・ディストリビューションを選択できます。これにより、コンテン
ツ・アシストといった Rational SDP のツールが提供されます。Rational SDP
に付属の Dojo Toolkit SDK 1.4.1、1.5.0 を選択するか、ご使用のワークスペー
スまたはファイル・システムにある Dojo フォルダーを参照できます。
12/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
なお、HATS V8.0 は Rational SDP が提供する Dojo Toolkit 1.4.1 および 1.5.0
をサポートします。CDN 上に公開されている Dojo Toolkit の使用はサポート対
象外ですのでご注意ください。
HATS がサポートする Dojo についての最新情報は下記リンク先よりご確認く
ださい。
https://www-304.ibm.com/support/docview.wss?uid=swg27019102
このチュートリアルでは、Rational SDP が提供する Dojo Toolkit 1.5.0 を HATS プロジェ
クト内にコピーして使用します。
•
「Dojo をこのプロジェクトにコピーし、そのプロジェクトからデプロイする」を選択
し、「次へ」をクリックします。
•
「Dojo」セクションの「提供済み」リストで「Dojo Toolkit SDK 1.5.0」を選択し、
「終
了」をクリックして「Dojo プロジェクト・セットアップのオプション」ウィザードを
終了します。
13/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
Dojo プロジェクトのセットアップが完了したら、「次へ」をクリックします。
6)
テンプレートの選択
「デフォルト・テンプレート」画面では、HATS プロジェクトで使用するテンプレートを
14/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
選択します。
任意のテンプレート（ここでは、「Finance.jsp」
）を選択し、
「終了」をクリックします。
7)
Dojo ウィジェットが使用可能な HATS プロジェクトの作成完了
「プロジェクトの作成」ウィザードが終了してしばらくすると、HATS プロジェクトの作
成が完了します。Dojo ウィジェットを使用するための JavaScript ファイルを含む HATS
プロジェクトが生成されます。
15/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
HATS Dojo ウィジェット
HATS で使用可能な Dojo ウィジェットは以下の 6 つです。
z コンボ・ボックス
z テキスト・ボックス
z フィルター操作選択
z 拡張グリッド
z 検証テキスト・ボックス
z 日付テキスト・ボックス
※各ウィジェットの詳細については、下記資料をご参照ください。
「HATS V8.0 新機能ガイド」の「9. 画面変換における Dojo ウィジェットのサ
ポート」
http://www.ibm.com/developerworks/jp/rational/library/em/cms/hats80guide/
プロジェクト設定ファイル（application.hap）の「レンダリング」タブの「ウ
ィジェット（Dojo）」にてプロジェクトで使用する Dojo ウィジェットのデフォ
ルト設定を設定することができます。
16/17
© 2011 IBM Corporation
『HATS V8.0 Dojo ウィジェットを使用した UI 開発』
なお、Dojo ウィジェットは以下で使用することはできません。
•
デフォルト・レンダリング
•
代替レンダリング
•
グローバル規則
•
画面組み合わせ
•
HATS タブ付きフォルダー
その他、Dojo ウィジェットの考慮事項については、下記リンク先よりご確認くださ
い。
http://www-01.ibm.com/support/docview.wss?rs=3441&uid=swg27021723#hatsdojo
Dojo サポートを有効化した HATS プロジェクトを作成する方法について学習しました。
Dojo サポートは新規 HATS プロジェクト作成時に有効化する必要があることにご注意くだ
さい。また、HATS プロジェクトで使用する Dojo Toolkit は HATS がサポートする Dojo
のバージョンを使用してください。
17/17
© 2011 IBM Corporation