この製品の WebSphere® Development Studio Client for iSeries® のバージョン 7.0 までは、CODE Designer のインストールはオプションです。IBM® WebFacing Tool のバージョン 7.1 以降には、CODE Designer には存在しない「Web 設定」オプションが含まれています。Web 設定のカスタマイズには、IBM WebFacing Tool の「Web 設定」ビューを使用することを強くお勧めします。詳しくは、DDS ソースでの Web 設定の使用を参照してください。
アプリケーションのカスタマイズには、Web 設定で DDS ソースを使用することをお勧めします。CODE Designer の「Web 設定」タブを使用して、Web ブラウザーを通じてアクセスした時のプログラムの外観および機能をカスタマイズすることができます。 DDS ソースを使用して 5250 表示装置を記述するプログラムは、その DDS ソースが WebFacing Tool を使用して変換された後に、Web ブラウザーによってアクセスすることができます。 個々の画面および画面内の個々のフィールドの Web 表示を取り扱うには、「Web 設定」を使用してください。 複数画面または WebFacing プロジェクト全体の Web 表示を変更したい場合には、Style プロパティーを使用します。 CODE Designer のインストールはオプションです。
CODE Designer には、WebSphere Development Studio Client for iSeries の Windows®「スタート」メニューからアクセスするか、IBM WebFacing Tool からアクセスすることができます。IBM WebFacing Tool 内から CODE Designer の DDS ソースをロードするには、次のようにします。
DDS ソース・メンバーが CODE Designer にロードされた後は、CODE Designer の DDS ツリーにあるアイコンをクリックすることによって「Web 設定」にアクセスすることができます。DDS ツリーは、CODE Designer ウィンドウの左サイドにあります。「Web 設定」には、CODE Designer の「詳細」および「SCREEN」タブ内から DDS オブジェクトを選択することによってもアクセス可能です。選択されたオブジェクトについて「Web 設定」が使用可能であれば、CODE Designer の下方ペインに「Web 設定」タブが表示されます。
CODE Designer によって、DDS 画面をグラフィカルに設計することができます。 CODE Designer では、各 DDS オブジェクトがアイコンまたはプッシュボタンによって表されます。 例えば、DDS 画面で名前付きフィールドまたはテキスト定数を簡単に作成するためのプッシュボタンがあります。 それぞれの DDS オブジェクトに使用できる「Web 設定」は、処理しているオブジェクトによって異なります。 以下のテーブルは、それぞれの DDS オブジェクトに使用できる「Web 設定」をリストしています。 各設定の詳細については、この文書の「Web 設定の説明」セクションを参照してください。 オブジェクトに「Web 設定」を使用した場合には、後で WebFacing 変換により処理される DDS ソースに特殊なコメントが追加されます。 「Web 設定」のコメントは、文字 *%%WB で始まっています。
DDS オブジェクト | CODE Designer のグラフィック | 使用可能な Web 設定 |
---|---|---|
標準レコード | ![]() |
|
サブファイル制御レコード | ![]() |
|
日付フィールド | ![]() |
|
時刻フィールド | ![]() |
|
タイム・スタンプ・フィールド | ![]() |
|
メッセージ定数 | ![]() |
|
日付定数 | ![]() |
|
時刻定数 | ![]() |
|
ユーザー定数 | ![]() |
|
システム定数 | ![]() |
|
名前付きフィールド (入力可能) | ![]() |
|
継続フィールド (入力可能) | ![]() |
|
ソース参照フィールド (入力可能) | ![]() |
|
データベース参照フィールド (入力可能) | ![]() |
|
選択別のデータベース参照フィールド (入力可能) | ![]() |
|
名前付きフィールド (出力) | ![]() |
|
継続フィールド (出力) | ![]() |
|
ソース参照フィールド (出力) | ![]() |
|
データベース参照フィールド (出力) | ![]() |
|
選択別のデータベース参照フィールド (出力) | ![]() |
|
テキスト定数 | ![]() |
|
日付フィールド (隠蔽) | ![]() |
|
時刻フィールド (隠蔽) | ![]() |
|
名前付きフィールド (隠蔽) | ![]() |
|
継続フィールド (隠蔽) | ![]() |
|
ソース参照フィールド (隠蔽) | ![]() |
|
データベース参照フィールド (隠蔽) | ![]() |
|
選択別のデータベース参照フィールド (隠蔽) | ![]() |
DDS ソース内の機能またはコマンド・キーについては、Web ページでキーを表すために使用するテキスト・ラベルを指定することができます。ラベルを変更するには、「すでに定義済みのラベル」リストからラベルを選択し、そのキーに使用したいテキストを「新規ラベル」フィールドに入力して、「変更」をクリックしてください。定義したラベルを除去するには、「Web 設定のラベルの変更」リストからラベルを選択し、「除去」をクリックしてください。
DDS ソース内の機能またはコマンド・キーについては、Web ページでキーを可視状態にするかどうか、およびキーが表示される順序を指定することができます。この設定を処理するには、「コマンド・キーの順序および可視性を変更する」チェック・ボックスを選択します。キーを可視状態にするには、「隠蔽」リストからキーを選択し、矢印ボタンをクリックしてそれを「表示順序」リストに移動します。キーを隠すには、「表示順序」リストからキーを選択し、矢印をクリックしてそれを「隠蔽」リストに移動します。「表示順序」リスト中で複数のキーが使用可能になっている場合には、キーを選択し、「上へ」または「下へ」ボタンをクリックすることによって、それが表示される順序を変更できます。「コマンド・キーの順序および可視性を変更する」チェック・ボックスが選択されない場合には、定義されたキーは数字順に表示されることになります。
画面サイズ設定は、ディスプレイ・ファイル用に 2 次画面サイズが選択されている場合に使用可能になります。2 次画面サイズは、DDS ツリーの中のファイル・ノード・アイコン の「プロパティー」ダイアログを使用して設定することができます。「画面サイズ Web 設定」は、アプリケーションをブラウザーで表示するために使用される HTML テーブルのサイズを変更するために使用します。
可視性設定に使用できるオプションは、「フィールドの隠蔽」または「フィールドの表示」です。「フィールドの表示」が選択されると、フィールドが Web ページ上に表示されます。
位置設定に使用できるオプションは、「スパンの変更」および「位置の変更」です。 DDS ソースが WebFacing Tool によって変換された後に、アプリケーションは、HTML テーブルを使用して Web ページ上で位置決めされます。 HTML テーブルには、DDS 画面と同じ数 (24 x 80 または 27 x 132) の行と桁があります。 位置設定を使用すれば、ソースの変換後の HTML テーブルでのフィールドの位置決め方法を変更することができます。
CODE Designer の画面ビューには、DDS ソースのための行と桁のレイアウトが表示されます。「スパンの変更」および「位置の変更」によって変更を行う場合は、このビューを使用して、フィールドの相互の相対位置がどのようになるかを確認してください。
このフィールドによって戻された値がページで使用したい HTML マークアップである場合には、プログラム定義の HTML 設定を使用して、「フィールド値を HTML として使用する」ボックスにチェックマークを付けます。
ユーザー定義 HTML によって、フィールドの値と一緒にか、あるいはそれの代わりに表示できる HTML テキストまたはタグを指定できます。この設定を処理するには、「HTML の指定」チェック・ボックスを選択してください。使用したい HTML タグを入力エリアに入力してください。フィールドの値を HTML のパーツとして使用したい場合には、「挿入フィールド値」ボタンをクリックします。この設定を使用できる 1 つの例は、フィールドの値を太字体フォントで表示したい場合です。これを実行するには、<BOLD> タグを &{FIELD.value} テキストと一緒に使用します。 この例では、入力域を編集して <BOLD>&{FIELD.value}</BOLD> が表示されるようにします。 &{FIELD.value} のコードがデフォルトでそこにない場合には、「フィールド値を挿入」ボタンをクリックして追加できます。
外観およびテキスト設定に使用可能なオプションは、「スタイル・クラスの変更」、「フィールド値のオーバーライド」、 「定数テキストのオーバーライド」、および「文字を隠す」 です。
「HTML の挿入」設定は、追加の HTML を付け加えることによってフィールドをカスタマイズする方法を提供します。HTML は、フィールド用に自動的に生成される HTML タグの前、中、および後にオプションで追加することができます。例として、社員番号の入力フィールドがあり、会社のすべての社員番号には 64- の接頭部が付けられるものとします。このフィールドは、以下のようなある種の HTML を追加することによって、より簡単に作成することができます。
この例では、フィールドの前の HTML は、そのフィールドに関する 情報を提供するもので、情報が太字フォントで強調されるように <strong> タグが使用されています。 変換によって生成された HTML では、入力フィールドに <input> タグが使用されるので、<input> タグの中に HTML 属性 value="64-" を追加できます。これにより、社員番号の接頭部が事前に取り込まれ、ユーザーはそれを入力する必要がなくなります。フィールドの後は、ユーザーがフィールドの詳細を表示するためにクリックすることができるリンクに関する HTML です。
「HTML の挿入」設定で変更しているページをすべてテストしてください。行った変更が、WebFacing 変換によって生成された HTML と矛盾する可能性があります。これを解決する 1 つの方法は、「Web 設定」を使用しないでプログラムを変換し、生成された .html または .jsp ソースを調べて「Web 設定」によって無難に行える変更は何かを理解して、「Web 設定」を適用し、その後で再変換する方法です。
VALUES のオプション設定は、VALUES キーワードによって指定された入力フィールドに使用できます。VALUES キーワードによって指定されたフィールドは、Web ページ上では単一選択ボックスとして表示されます。この選択ボックスに表示されるオプションは、DDS ソース内で VALUES キーワードに対するパラメーターとして指定された値です。
VALUES のオプション Web 設定によって、ユーザーに対して表示されるラベルまたはテキストを変更することができます。例えば、プログラムで予期されている VALUES パラメーターの 1 つが "item8" である場合に、ブラウザーに表示されるテキストを "8 gauge wire" のようにより説明用のものに変更できます。ユーザーに対して表示されるテキストは "8 gauge wire"であっても、プログラムに戻される値は、そのプログラムが予想しているものと同じ "item8" になります。
この「Web 設定」を使用するには、「VALUES キーワードのオプション・テキスト」チェック・ボックスを選択してください。VALUES パラメーターに新規ラベルを設定するには、値を選択し、そのラベルに必要なテキストを「新規ラベル」フィールドに入力してください。
グラフィックの作成設定は、フィールドの代わりにイメージを表示したい場合に使用します。この設定の使用例として、在庫品目のイメージを含む製品データベースがあります。
「ファイル名」フィールドにワークステーション上のイメージ・ファイルへの完全パスまたはイメージ・ファイルへの完全 URL (例えば、http://www.ibm.com/image.gif) を取り込んでください。「ファイル名」フィールドには、値を直接入力するか、あるいは「ブラウズ」ボタンを使用してローカル・ファイルを探して取り込むことができます。指定したローカル・イメージが、WebFacing 変換中に WebFacing プロジェクトの ..¥Web Content¥images¥generated¥ ディレクトリーにコピーされます。このディレクトリー中のイメージは、「エクスポート」ウィザードを使用してプロジェクトを 配置した時に、後からサーバーに公開されます。
イメージの大きさが分かっている場合には、「ピクセル数による幅」および「ピクセル数による高さ」を使用できます。幅および高さ情報を追加しておくことで、イメージを含む Web ページを表現するために必要な時間を短縮できる場合があります。
プログラム内に、イメージ・ファイル名のパーツまたはイメージ・ファイルへの完全 URL として使用できる値を戻すフィールドがある場合には、「フィールドの選択」リストからフィールドを選択し、「挿入フィールド値」をクリックすることによって、それらの値を「ファイル名」フィールドに追加できます。例えば、値 bicycle1 を戻す &{FIELD1.value} があれば、ワークステーション上で処理するグラフィックの bicycle1.gif を容易に参照できます。この例では、「ファイル名」フィールドを「フィールドの選択」リストから取り込んでから、.gif 拡張子を追加します。「フィールドの選択」リストを使用して識別したファイルは、手動で ..¥Web Content¥images¥generated¥ ディレクトリーにコピーする必要があります。
ハイパーリンクの作成設定は、フィールドがハイパーリンクとして表示されるように使用します。 ハイパーリンクを作成するために使用可能な異なる方法が 3 つあります。 それらの方法は: 「静的 URL を指定する」、「JavaScript ハイパーリンク」、および 「アクション・ハイパーリンク」です。 ハイパーリンクの外観に関するブラウザーの設定を指定変更したい場合は、 「ブラウザーのハイパーリンクの外観を DDS 外観によって指定変更する」 チェック・ボックスを選択してください。 「ハイパーリンクの作成」設定を「グラフィックの作成」設定と一緒に使用する場合は、そのフィールドをハイパーリンクとしても機能するグラフィックとして表示できます。
ほとんどのブラウザーには、Web ページ上のハイパーリンクのカラーと外観の規則に従うか、あるいはユーザーが変更できる ハイパーリンクの外観に対する設定があります。 例えば、未訪問リンクは青のテキストで表示でき、訪問済みリンクは紫のテキストで表示できます。ブラウザーがハイパーリンクを DDS 中のフィールドに使用されるのと同じ外観で表示されるようにしたい場合は、「ブラウザーのハイパーリンクの外観を DDS 外観によって指定変更する」チェック・ボックスを選択してください。
あるフィールドに表示されるようにしたい特定の URL がある場合は、「静的 URL を指定する」を選択してください。 フィールドの出力値が、ハイパーリンクとして表示されるテキストになります。 ユーザーがリンクをクリックするとブラウザーがロードする位置は、URL フィールドに入力される値です。 リンクをクリックすると別のブラウザー・ウィンドウが起動するようにしたい場合は、そのウィンドウの名前を「ターゲット」フィールドに入力してください。 「ターゲット」フィールドをブランクのままにするか、あるいは *SAME を入力した場合は、現行のブラウザー・ウィンドウでリンクが開きます。
WebFacing ポートレット・ プロジェクトを処理する場合には、「ターゲット」フィールドに *PORTLET を指定してポートレット内でリンクを開くことができます。
リンクをクリックすると呼び出されるようにしたい JavaScript 関数の名前を入力してください。 例えば、myFunction() と入力してください。 この関数は、「スクリプトに挿入」 Web 設定を使用して入力された関数、外部 JavaScript ファイルで定義した関数、または WebFacing に組み込まれている、ファイル webface.js 内の関数とすることができます。 ユーザー独自の外部 JavaScript ファイルを作成する場合は、それらを WebFacing プロジェクトの usr ディレクトリーに入れてください。 このディレクトリーは、パス <project name>¥WebContent¥ClientScript¥usr にあります。 このディレクトリーに入れられるスクリプトはどれも、実行時に WebFacing アプリケーションに対して使用可能です。 簡単なインライン JavaScript 関数がある場合は、その関数全体を「JavaScript ハイパーリンク」フィールドに入力することもできます。
「カーソルをフィールドに配置」の項目は、次の形式にすることができます。
データを入力フィールドの項目は、次の形式にすることができます。
また、データの入力フィールドに値を手動入力することもできます。
「実行依頼」チェック・ボックスを選択すると、「ファンクション・キー」または「JavaScript 関数呼び出し」実行依頼アクションをハイパーリンクに選択できます。 例えば、「ファンクション・キー」ドロップダウン・リストから、ENTER、LOGOFF、または DDS で定義済みのファンクション・キーを選択できます。 使用したいファンクション・キーが別の DDS レコードにある場合は、そのファンクション・キーの値を手動で入力してください。 ユーザーがそのファンクション・キー用に作成済みのリンクをクリックすると、プログラムはその関数を実行することになります。 「JavaScript 関数呼び出し」フィールドには、リンクをクリックすると呼び出されるようにしたい JavaScript 関数の名前を入力してください。 この関数は、「スクリプトに挿入」 Web 設定を使用して入力された関数、外部 JavaScript ファイルで定義した関数、または WebFacing に組み込まれている、ファイル webface.js 内の関数とすることができます。 ユーザー独自の外部 JavaScript ファイルを作成する場合は、それらを WebFacing プロジェクトの usr ディレクトリーに入れてください。 このディレクトリーは、パス <project name>¥WebContent¥ClientScript¥usr にあります。 このディレクトリーに入れられるスクリプトはどれも、実行時に WebFacing アプリケーションに対して使用可能です。
「カーソルをフィールドに配置」オプションは「実行依頼」オプションと組み合わせることができます。 特定のフィールドの値を設定して、その値をプログラムに戻すように実行依頼したい場合に行います。これを実行するには、 「カーソルをフィールドに配置」チェック・ボックスを選択し、ドロップダウン・リストからフィールドを選択 (またはフィールドを入力) し、「データの入力」 フィールドで {FIELD.value} を入力 (または特定の値を入力) して、「実行依頼」チェック・ボックスを選択し、 「ファンクション・キー」ラジオ・ボタンを選択して、「ファンクション・キー」 ドロップダウン・メニューから 「ENTER」 を選択します。 「カーソルをフィールドに配置」および「データの入力」フィールドに 使用する入力フォーマットについては、この資料の「カーソルをフィールドに配置」セクションを参照してください。
if(&{CID}.value="") { &{CID}.value="0001"; }この例では、コード &{CID} は 「フィールド名の挿入」ボタンを使用して選択したフィールドを参照します。 「フィールド名の挿入」ボタンの下のフィールドはアンパーサンドと 2 個の大括弧で囲まれています。例えば、&{FIELDNAME}。 その他の例は、WebFacing ユーザーの IP アドレスを判別する JSP コード、またはユーザーのシステムの時刻を表示する JavaScript です。 「スクリプトに挿入」は、「ブラウザーに送信」設定と一緒に使用できます。 例えば、スクリプトで決定された値を使用して、「ブラウザーに送信」設定で設定した 隠しフィールドを取り込むことができます。 スクリプトの一部として使用したい既存のフィールドが DDS 中にある場合は、そのフィールドを「フィールド名の挿入」ボタンを使用してスクリプトに追加してください。例えば、H または隠しフィールドを選択し、値をそのフィールドに割り当てられるようにそのフィールドをスクリプトで使用できます。
「ブラウザーに送信」設定は H または非表示 DDS フィールドに使用できます。この設定は、生成された JSP ファイルをレコード用に変更します。例えば、LISTCTL と呼ばれるレコードに H フィールドがある場合にこの設定が使用されると、HTML 隠し入力フォーム・エレメントが JSP ファイル LISTCTL.jsp に生成されます。隠し入力フォーム・エレメントは HTML コード <INPUT TYPE="hidden" で始まります。「ブラウザーに送信」を使用すると、H フィールドがブラウザー環境の一部となり、値がその環境に基づいてそのフィールドに割り当てられるようにできます。例えば、「スクリプトに挿入」設定を使用して追加したスクリプトによって判別されるユーザーの IP アドレスなど。
「ダイナミック・キー・ラベル」設定は、実行時にコマンド・キーのテキスト・ラベルを決定するために使用することができます。 この設定は、出力フィールドにのみ使用できます。 この設定では、コマンド・キーが出力フィールドと関連付けられ、コマンド・キーのテキストがフィールドの実行時値によって決定されます。 使用例として、アプリケーションが複数の言語をサポートしていて、コマンド・キー・テキストをユーザーのネイティブ言語で 表示したい場合があげられます。 これを行う方法の 1 つに、アプリケーションが使用するテキスト・ストリングを含む言語ごとに 1 つの MSGF を用意して、 各 MSGF を言語特定ライブラリーに書き込む方法があります。 出力フィールドの値が MSGF から読み取られる場合、フィールドに表示されるテキストの言語は、ユーザーの言語用 MSGF を含む ライブラリーをユーザー・プロファイルのライブラリー・リストの上位に入れることによって変更できます。 これで、コマンド・キー・ラベルはその言語で表示されます。
接頭部 | 区切り記号 |
---|---|
F | = |
FP | = |
CF | = |
CA | = |
PF | = |