カレンダー (Web のみ)

カレンダー・ウィジェットは、関連のランチャー・ボタン、リンク、またはイメージを持つ入力フィールドのレンダリングを担当します。このランチャーでは、日付を選択するのに使用できるポップアップ・カレンダー日付ピッカーが開きます。選択された日付は、関連入力フィールドに挿入されます。

注:

Eclipse に組み込まれた Web ブラウザーを使用して WebSphere® テスト環境でプロジェクトをテストする場合は、予想よりも大きなブラウザー・ウィンドウ内にカレンダー・ウィジェットが表示され、追加の不要なコントロールが表示されることがあります。外部ブラウザーでアプリケーションを実行する場合またはデプロイ済みアプリケーションを実行する場合には、この問題は発生しません。
プロキシー・サーバーを介して ZIETrans アプリケーションがアクセスされたときにポップアップ・カレンダーとイメージ・ランチャーを表示するには、プロキシー・サーバーを使用するよう ZIETrans アプリケーションを構成する必要があります。手順については、プロキシー・サーバーを使用するための ZIETrans アプリケーションの構成を参照してください。
このウィジェットを使用する際の DBCS に関する考慮事項については、SBCS での最大長の除去を参照してください。

次の図は、「インライン・カレンダーを使用」設定が選択されているときに、変換でカレンダー・ウィジェットとその日付ピッカーがどのように表示されるかを示しています。

図 1. インライン日付ピッカーを使用したカレンダー・ウィジェットの例

次の図は、「インライン・カレンダーを使用」設定がクリアされているときに、変換でカレンダー・ウィジェットとその日付ピッカーがどのように表示されるかを示しています。

図 2. ウィンドウ日付ピッカーを使用したカレンダー・ウィジェットの例

1 行あたりの列数 (1)
表題 (コンポーネントから)
ランチャー・タイプ (イメージ)
注: これらの例では、ランチャーはイメージであるため、ランチャーに対する表題はありません。ランチャーがボタンまたはリンクである場合は、ランチャーの表題がボタンまたはリンクに表示されます。

以下の設定が、このウィジェットに対して構成できます。

パターン

必須。ユーザーがカレンダー・ウィジェットから日付を選択すると、選択された日付をホスト・アプリケーションの入力フィールドで予期されるフォーマットに正しくマップするようにフォーマット設定する必要があります。この設定は、選択された日付を正しくフォーマット設定するために ZIETrans が使用するパターンを指定します。

パターンを入力して保存すると、ZIETrans Toolkit は正しい記号が使用されていることを確認するために以下の変換を実行します。

大文字の D から小文字の d
大文字の Y から小文字の y
小文字の m から大文字の M
小文字の e から大文字の E

注: ZIETrans Toolkit は、常にパターンを大文字で表示します。パターン・シンボルの実際の大/小文字を参照するには、application.hap ファイルのソースで com.ibm.hats.transform.widgets.CalendarWidget クラスのパターン設定を参照してください。

パターン要素をチルド (~) で区切ることによって、選択されている日付を複数の連続ホスト入力フィールドに分散させることができます。例えば、ホスト画面上に以下の入力フィールドが存在するものとします。

月: [ ] 日: [ ] 年: [ ]

MM~DD~YYYY というパターンを指定すると、単一のランチャーが作成されます。ユーザーが日付を選択すると、日付は 3 つの入力フィールドに挿入されます。月 (2 桁) が最初の入力フィールド、日 (2 桁) が 2 番目の入力フィールド、年 (4 桁) が 3 番目の入力フィールドに挿入されます。

注: 複数のホスト入力フィールドにわたるパターンを指定する補助機能を使用するには、「ビルド」ボタンをクリックします。

パターン・ロケール

パターンのロケールを指定します。この設定は、曜日の名前 (例: 水曜日) を出力するパターン・セグメントを入力した場合に便利です。オプション:「サーバーのロケールを使用」または「ブラウザーのロケールを使用」または「指定のロケールを使用」。

ロケール: 「指定のロケールを使用」を指定した場合は、ユーザーによって指定された日付をフォーマット設定するロケールを選択します。

選択可能な最も古い日付を制限

これを選択した場合、指定される値は、ユーザーがポップアップ・カレンダーから選択可能な最も古い日付となります。

注:

すべてのロケールで、日付パターンは MM/DD/YYYY です。
この設定では、関連する入力フィールドにユーザーが古い日付を手動で直接入力する操作は防止されません。

選択可能な最も新しい日付を制限

これを選択した場合、指定される値は、ユーザーがポップアップ・カレンダーから選択可能な最新の日付となります。

注:

すべてのロケールで、日付パターンは MM/DD/YYYY です。
この設定では、関連する入力フィールドにユーザーが新しい日付を手動で直接入力する操作は防止されません。

デフォルト値

オプション。このフィールドの値は、ホスト・アプリケーションで関連の入力フィールドに、有効な日付 (指定された日付制限の間の日付) が事前に設定されなかった場合、ポップアップ・カレンダーで選択される初期日付です。また、ユーザーがポップアップ・カレンダー・コントロールを選択する前に入力した日付が誤っている場合 (範囲外の日付など) にも使用されます。このフィールドと関連するホスト入力フィールドとの間の相互作用は、次のように処理されます。

ホスト・アプリケーションにより入力フィールドにゼロまたは不適切な日付形式が事前に設定されると、このホスト・フィールドのデータはデフォルト値によって上書きされません。関連の入力フィールドを更新するには、ユーザーが手動で日付を入力するか、またはポップアップ・カレンダーから日付を選択する必要があります。
デフォルト値が指定されていないか、またはデフォルト値のフォーマットが誤っている場合、本日の日付が最初にポップアップ・カレンダーで選択されます。
関連の入力フィールドにデータを事前に設定するには、変換を適用する前に、画面カスタマイズ・イベントに「データを挿入」アクションを追加します。

注: すべてのロケールで、日付パターンは MM/DD/YYYY です。

表題のソース

生成される入力フィールドの表題を決定する方法を指定します。オプション:「コンポーネントから」 (コンポーネントから取り出した表題を使用) または「カスタム」 (指定された表題を使用)。

カスタム表題: オプション。入力フィールドの表題を指定します。
注: 入力フィールドの表題を生成しない場合は、この設定をブランクのままにしてください。

1 行あたりの列数

レンダリングした Web ページの各行に表示するこのウィジェットのインスタンスの数を指定します。

注:

この設定はデフォルト・レンダリングでは適用されません。
ウィジェットのプレビューが全ページのプレビューと一致しない場合があります。これは、ウィジェットのプレビューが単にコンポーネントの出力をレンダリングしていることによります。ウィジェットのプレビューは、全ページのプレビューで行われているように、レンダリングしたときに画面の配置を保存しようとはしません。

ランチャー・タイプ

ランチャーのスタイルを指定します。ランチャーを使用して、カレンダー日付ピッカーを開きます。オプション: 「ボタン」、「リンク」、または「イメージ」。

表題: ランチャー・ボタンまたはリンクの表題。

ボタンのスタイル・クラス: オプション。生成されるランチャー・ボタンに関連する CSS スタイル・クラスです。HTML ボタン・タグの class 属性の値には、この値がセットされます。デフォルト値は HATSBUTTON です。詳しくは、スタイル・シートの使用を参照してください。

リンクのスタイル・クラス: オプション。生成されるランチャー・リンクに関連する CSS スタイル・クラスです。HTML リンク・タグの class 属性の値には、この値がセットされます。デフォルト値は HATSLINK です。詳しくは、スタイル・シートの使用を参照してください。

注: Web ブラウザーに応じて、「リンク」スタイルまたは「イメージ」スタイルのいずれかが選択されている場合、タブ・キーを使用したこのランチャーへのタブ移動に制限が存在する可能性があります。

インライン・カレンダーを使用

選択されている場合、カレンダー日付ピッカーが起動され、現在の Web ページ内に表示されます。クリアされている場合、日付ピッカーは新規ブラウザー・ウィンドウに表示されます。新規に作成されるプロジェクトでは、デフォルトで選択されています。

注:

インライン・カレンダー日付ピッカーの使用は、ポップアップ・ブロッカーにより新規ブラウザー・ウィンドウで日付ピッカーを表示できない場合に役立ちます。
インライン・カレンダー日付ピッカーの使用は、モバイル装置用の ZIETrans アプリケーションの場合はサポートされません。

読み取り専用: これを選択した場合、レンダリングされた入力フィールドは読み取り専用になります。読み取り専用の入力フィールドは通常の入力フィールドのように表示されますが、ユーザーはこのフィールドの内容を変更できません。これは、無保護フィールドの内容をユーザーに対して表示するが、ユーザーがフィールドの内容を変更できないようにする場合に便利です。

入力フィールドの下線文字を除去: テキストをレンダリングするときにテキストから下線文字を除去する場合は、このボックスを選択します。

入力フィールドのスペースをトリム: 入力フィールドから先行および後続のスペースをトリムする場合は、このボックスを選択します。

前景色を有効にする: これを選択した場合、ホスト画面の前景色がレンダリングされます。
色はその色を表す CSS スタイルシート・クラスにマップされています。例えば、ホスト画面フィールドが RED とマークされている場合、フィールド・ウィジェットは、そのフィールド用に生成された HTML を、クラス名属性が HRED に設定されているタグで囲みます。この処理によって、ユーザーは、生成される Web ページ上にホスト画面の色を再マップすることができます。
注: blacktheme.css は、ホスト画面フィールドの前景色を直接マップします (例えば、ホスト画面上の赤色のテキストは、生成された Web ページ上で赤色のテキストとして表示されます)。ただし、monochrome.css などの他のスタイルシート・ファイルは、フィールドの色を別の方法でマップし、一貫性のある、最新のスタイルを作成しようとします。

拡張属性を使用可能にする

これを選択した場合、拡張フィールド属性 (明滅、反転表示、下線、および列分離子) が表示されます。また、3270 Web アプリケーションの場合、拡張フィールドの色もマップされます (詳細については、「前景色を有効にする」の設定を参照してください)。詳しくは、スタイル・シートの使用を参照してください。

明滅スタイル: ホスト画面における明滅テキストのレンダリングに使用する CSS スタイル設定。

反転表示スタイル: ホスト画面における反転表示テキストのレンダリングに使用する CSS スタイル設定。

[下線の種類]: ホスト画面における下線付きテキストのレンダリングに使用する CSS スタイル設定。

列分離子スタイル: ホスト画面における列分離子のレンダリングに使用する CSS スタイル設定。

入力フィールドのスタイル・クラス: オプション。生成される入力フィールドに関連する CSS スタイル・クラスです。HTML 入力タグの class 属性の値には、この値がセットされます。デフォルト値は HATSINPUT です。詳しくは、スタイル・シートの使用を参照してください。

表題のスタイル・クラス: オプション。生成される入力フィールドの表題に関連する CSS スタイル・クラスです。デフォルト値は HATSCAPTION です。詳しくは、スタイル・シートの使用を参照してください。

テーブルのスタイル・クラス: オプション。生成されるテーブルに関連する CSS スタイル・クラスです。入力フィールドの複数の集合がレンダリングされる場合、1 つの HTML テーブルが生成され、それらの入力フィールドを囲みます。HTML テーブル・タグの class 属性の値には、この値がセットされます。デフォルト値は HATSTABLE です。詳しくは、スタイル・シートの使用を参照してください。

Style: オプション。オーバーライドする任意の CSS プロパティー。例えばこのフィールドで、フォントの色を赤色、フォントサイズを18pt に指定して、このウィジェットのフォントの色とサイズを変更できます。入力したプロパティーは、このウィジェットの各エレメントに適用されます。スタイル・プロパティー・ダイアログを表示するには、このフィールドの横にあるランチャー・ボタンを使用します。このダイアログでは、CSS の知識がなくてもウィジェットのフォント、色、またはその他のスタイル設定を変更することができます。詳しくは、「スタイル・シートの使用」を参照してください。