フィールド

フィールド・ウィジェットは、フィールド・コンポーネントによって認識される入力フィールドとテキストのレンダリングを担当します。

注: このウィジェットを使用する際の DBCS に関する考慮事項については、SBCS での最大長の除去を参照してください。
次の図に、変換においてフィールド・コンポーネントの例のデータを入力として使用するフィールド・ウィジェットの表示例を示します。
図 1. フィールド・ウィジェットの例
フィールド・ウィジェットの例
  1. 保護テキスト

フィールド・ウィジェットのテーブル・レイアウトの主要な目標は、GUI でホスト画面をレンダリングするときに、元のホスト画面のレイアウトを維持することです。デフォルト・レンダリングでは、テーブルを使用して画面のレイアウトが維持されます。このテーブルは通常、80 列および 24 行で構成されます。フィールド・ウィジェットの各種位置合わせ設定 (「通常」「文字ごと (Web のみ)、および「ワードごと」) により、このテーブルのテーブル・セルの作成方法が変更されます。

通常の位置合わせでは、各ホスト・フィールドはテーブル内のテーブル・セルにより表わされます。セルが 1 つ以上の列を使用することがあります。詳細については、「colspan」HTML 属性を参照してください。ホスト画面上で列 10 から開始するフィールドは、テーブル内の列 10 に位置付けられます。通常の位置合わせでは、各フィールドが正しい列位置から開始されることが保証されます。

グローバル規則では一般に、変換元のフィールドよりも多くのページ・スペースが使用されるため、グローバル規則がページの位置合わせに影響することがあります。例えば、長さ 5 文字の入力フィールドがあるとします。デフォルト・レンダリングでは、このフィールドに対しテーブル内で 5 列が割り振られます。6 文字以上のスペースを使用するグローバル規則によりこのフィールドがレンダリングされると、このフィールドが位置するテーブル・セルが強制的に拡張されます。つまり、セルの幅が増加します。列全体が影響を受けるため、これはテーブル全体に影響します。一般に、どの行においても、フィールドの右側のセルは右側に移動します。これは、変換されたフィールドが含まれている列の幅が大きくなったためです。したがって、行 5 の列 60 から始まるフィールドは常に、行 20 の列 60 から開始されるフィールドに位置合わせされます。

文字ごとの位置合わせは、ZIETrans Web プロジェクトでのみサポートされています。この位置合わせオプションを選択すると、入力フィールド以外のフィールドの各文字が、それぞれ個別のテーブル・セルの中でレンダリングされます。このオプションを使用すると、画面上のすべての文字が正しい開始位置に合わせられますが、生成されるページのサイズが非常に大きくなります

ワードごとの位置合わせでは、画面上の各ワードがそれぞれ個別のテーブル・セルの中でレンダリングされます。つまり、複数のワードからなる単一フィールドは、複数のテーブル・セルでレンダリングされます。これにより、画面上のすべてのワードが正しい位置でレンダリングされます。このオプションは一般に、ホスト画面全体でさまざまな入力フィールドが分散している場合に使用します。入力フィールドでは通常のテキストよりも多くのページ・スペースが使用されるため、入力フィールドが原因でページが不適切に位置合わせされることがあります。

次の例に、デフォルト・レンダリングでの各種位置合わせオプションによるフィールドおよび文字のテーブル・セルへのマッピングを示します。実際のデフォルト・レンダリングでは、テーブル・セルは不可視です。

図 2. フィールド・ウィジェットの位置合わせの例
フィールド・ウィジェットの位置合わせオプションの例
以下の設定が、このウィジェットに対して構成できます。
読み取り専用
これを選択した場合、入力フィールドはレンダリングされません。入力フィールドにテキストが含まれている (かつパスワード保護されていない) 場合、代りにそのテキストが表示されます。この設定は、ページの情報を表示するが編集させたくない場合に便利です。
レイアウト

この設定を使用して、このウィジェットによりレンダリングされる出力のレイアウトを指定します。元のホスト画面のレイアウトを保存するために、「テーブル」を選択して、テーブルの出力をレンダリングします。モバイル装置用に最適化されていない Web アプリケーションの場合、これがデフォルトです。HTML の量とブランク・スペースを削減するために、「分離」を選択し、インライン・スパン・タグを使用して出力をレンダリングし、フィールドを区別します。これは、モバイル装置に対して最適化されている Web アプリケーションのデフォルトです。

位置合わせ
テーブル・レイアウトを使用する場合、位置合わせを改善するため、ZIETrans でのテキスト文字をテーブル・セルへマップする方法 (「通常」「文字ごと (Web のみ)「ワードごと」) を指定します。
テーブルのスタイル・クラス (Web のみ)
オプション。生成されるテーブルに関連する CSS スタイル・クラスです。HTML テーブル・タグの class 属性の値には、この値がセットされます。デフォルト値は HATSFIELDTABLE です。詳しくは、スタイル・シートの使用を参照してください。
nowrap (Web のみ)

位置合わせ設定として「ワードごと」を指定すると、変換時に複数フィールドがワード単位で位置合わせされます。ただし、別のウィジェットによる出力が原因で、デフォルト・レンダリング・テーブルのセルが圧縮され、テキストが折り返すことがあります。テキストが折り返さないようにするため、ワードごとの位置合わせを使用する場合は nowrap フラグが HTML 出力に自動的に追加されます。HTML 出力への nowrap フラグの自動追加を無効にするには、この nowrap 設定を使用します。

位置合わせ設定をどの値に設定する場合でも、nowrapfalse に設定すると、フィールド・ウィジェットの HTML 出力に nowrap フラグが追加されず、セル内のテキストが折り返し可能になります。ワードごとの位置合わせを使用し、継続的に位置合わせの問題が発生する場合にのみ、nowrapfalse に設定します。

デフォルト・レンダリングでは、テーブル・セルが折り返すと、垂直位置合わせおよび水平位置合わせの両方に悪影響が及び、不適切な出力が作成される原因となります。

位置合わせ設定をどの値に設定する場合でも、nowraptrue に設定すると、テーブル・セル内でテキストが次の行に折り返すことがありません。

注: GUI では nowrap 設定は構成可能な設定として示されません。これは application.hap ファイルのソースで設定する必要があります。例えば、nowrapfalse に設定するには、「ZIETrans プロジェクト」ビューのプロジェクト・フォルダーの「プロジェクト設定」ファイルをダブルクリックし、application.hap ファイルのエディターを起動します。「ソース」タブで、<classSettings> タグの中のクラス name="com.ibm.hats.transform.widgets.FieldWidget" を見つけ、次の設定を追加します。
<setting name="nowrap" value="false"/>
保護フィールド上でのカーソルの位置決めを許可します
これを選択した場合、保護フィールドの 1 つをクリックすると、ホスト・カーソルがその特定の位置に設定されます。この設定は、ホスト・アプリケーションがカーソル位置に依存し、ホスト・アプリケーションでカーソルを保護フィールド上に配置する必要がある場合に便利です。

Web アプリケーションの場合は、カーソル位置設定の精度は、「位置合わせ」設定 (「通常」「文字ごと (Web のみ)、または「ワードごと」) によって決まります。

ブラウザーでの実行時に、これらのフィールドの 1 つがクリックされると、ZIETrans に対してその旨が通知されます。ZIETrans はカーソル位置を内部で更新し、ユーザーに対して新しいカーソル位置を視覚的に示します。デフォルトでは、テキストの背景色を黄色に設定することで視覚的に示します。Web アプリケーションの場合は、開発者が CSS スタイル HCURSORINDICATOR を使用して視覚的な表示を制御できます。詳しくは、スタイル・シートの使用を参照してください。この設定を使用可能にした場合は、以下の機能を使用できます。
  • 保護フィールドの領域をクリックしてカーソルの位置を決めることができる。
  • カーソルが無保護フィールド内にない場合でも、ページの読み込み時にカーソルの初期位置を確認できる。
注: フィールド・ウィジェットを使用して画面上の同一領域が複数回レンダリングされる場合は、この設定のみでは正しく機能しません。例えば、タブ付きフォルダーの複数のタブで画面上の同一領域がレンダリングされる場合は、さらに、ユーザーが画面上のその領域にカーソルの位置を設定できるようにするため、保護フィールドをリンクとしてレンダリングする必要があります (以下の「リンクを使用するタブ操作を許可」を参照)。
リンクを使用するタブ操作を許可 (Web のみ)
これを選択した場合、各保護フィールドは HTML リンクとしてレンダリングされます。これにより、保護フィールド間でのタブ操作が可能になります。カーソル位置は下線付き文字として表示されます。
注: このオプションを選択すると、ページの各保護フィールドに対して HTML アンカー <A> タグが生成されます。このため、Web ページのサイズが大きくなります。

生成される Web ページのサイズが不必要に大きくなることを防ぐため、デフォルトではこのオプションは選択されていません。

リンクのスタイル・クラス (Web のみ)
生成される各リンクに関連する CSS スタイル・クラスです。HTML リンク・タグの class 属性の値には、この値がセットされます。デフォルト値は HATSPROTLINK です。詳しくは、スタイル・シートの使用を参照してください。
アクション・キー
オプション。保護フィールドの選択時、ホストに送信されるホスト AID キー・ニーモニックを指定します。例:[enter] はカーソルを指定の位置に設定し、enter を送信します。また、[pf1] はカーソルを指定の位置に設定し、pf1 を送信します。
リンクのスペースをトリム (Trim spaces on links)
これを選択した場合、保護フィールド・リンクの両端から空白 (余分なスペース) が除去されます。この設定は、リンクとしてレンダリングされるテキストの容量を減少する場合に便利です。
入力フィールドのカーソル位置オプションを使用可能にする (Web のみ)
ユーザーが入力フィールドについて、データ入力モードからカーソル位置決めモードへ切り替えることができるようにするには、このボックスを選択します。データ入力モードでは、ユーザーは入力フィールドにデータを入力できます。カーソル位置決めモードでは、ユーザーはタブまたはその他の方法により、入力フィールド内の任意の文字上にカーソルを置くことができます。この設定は、他のカーソル位置決め機能がないモバイル装置用に最適化された Web プロジェクトを使用する場合に役立ちます。ZIETrans Toolkit GUI に表示されないこのオプションの他の設定について詳しくは、モバイル装置に関する考慮事項および制限を参照してください。
前景色を有効にする
これを選択した場合、ホスト画面の前景色がレンダリングされます。
Web アプリケーションの場合は、前景色はその色を表す CSS スタイルシート・クラスにマップされます。例えば、ホスト画面フィールドが RED とマークされている場合、フィールド・ウィジェットは、そのフィールド用に生成された HTML を、クラス名属性が HRED に設定されているタグで囲みます。この処理によって、ユーザーは、生成される Web ページ上にホスト画面の色を再マップすることができます。
注: blacktheme.css は、ホスト画面フィールドの前景色を直接マップします (例えば、ホスト画面上の赤色のテキストは、生成された Web ページ上で赤色のテキストとして表示されます)。ただし、monochrome.css などの他のスタイルシート・ファイルは、フィールドの色を別の方法でマップし、一貫性のある、最新のスタイルを作成しようとします。
フィールドのスタイル・クラス (Web のみ)
オプション。生成されたフィールドに関連する CSS スタイル・クラスです。HTML タグの class 属性の値には、この値がセットされます。デフォルト値は HATSFIELD です。詳しくは、スタイル・シートの使用を参照してください。
拡張属性を使用可能にする
これを選択した場合、拡張フィールド属性 (明滅 (Web のみ)、反転表示、下線、および列分離子) がレンダリングされます。また、3270 Web アプリケーションの場合、拡張フィールドの色もマップされます (詳細については、「前景色を有効にする」の設定を参照してください)。
明滅スタイル (Web のみ)
ホスト画面における明滅テキストのレンダリングに使用する CSS スタイル設定。
反転表示スタイル (Web のみ)
ホスト画面における反転表示テキストのレンダリングに使用する CSS スタイル設定。
[下線の種類] (Web のみ)
ホスト画面における下線付きテキストのレンダリングに使用する CSS スタイル設定。
列分離子スタイル (Web のみ)
ホスト画面における列分離子のレンダリングに使用する CSS スタイル設定。
詳しくは、スタイル・シートの使用を参照してください。
モノスペース・フォントを使用してレンダリング
選択されている場合、フィールドはモノスペース・フォントを使用してレンダリングされます。選択しないと、ロケール環境のデフォルト・フォントを使用してレンダリングされます。
3270 数値ロックを有効にする
選択されている場合、ユーザーは、0 から 9 までの数字、正符号、負符号、ピリオド、コンマ、およびヒンディ数字のみを、3270 数値フィールドに入力できます。クリアされている場合、任意の文字を入力できます。デフォルトはクリアされます。
注: Web アプリケーションの場合、必要に応じて lxgwfunctions.js ファイルの allowNumLockOnly() 関数および allowNumLockOnlyForIEMobile() 関数で文字コード値を使用して、受け入れられるキーのリストをカスタマイズできます。
入力フィールドの下線文字を除去
テキストをレンダリングするときにテキストから下線文字を除去する場合は、このボックスを選択します。
入力フィールドのスペースをトリム
入力フィールドから先行および後続のスペースをトリムする場合は、このボックスを選択します。
Style (Web のみ)
オプション。スタイル・プロパティー・ダイアログを表示するには、このフィールドの横にあるランチャー・ボタンを使用します。このダイアログでは、CSS の知識がなくてもウィジェットのフォント、色、またはその他のスタイル設定を変更することができます。詳しくは、『スタイル・シートの使用』を参照してください。
注: このウィジェットによって多数のタグが生成されるため、この設定に値を指定すると、ページのダウンロード時間が大幅に増加する場合があります。囲んでいる変換または組み込みスタイルシート・ファイルにスタイル・オーバーライドを指定します。