表示オプション

コンポーネントの表示オプションは、所定のコンポーネント・インスタンスの表示関連の動作を幅広く制御します。通常、表示オプションの設定はコンポーネントのコンテンツを囲む表示要素(つまり、そのクロム)に影響を与えます。クロムには、ヘッダー、「アクション」メニュー、「展開」および「縮小」アイコンなどが含まれます。たとえば、タスク・フロー・コンポーネントの表示オプションを使用して、ヘッダーの表示または非表示を指定したり、ヘッダーのメニューや他のオプションを有効または無効にします。

ページ・エディタではわかりにくいですが、通常、showDetailFrameコンポーネントはタスク・フローをラップします。したがって、タスク・フローの「表示オプション」ダイアログおよびshowDetailFrameにラップされているその他のコンポーネントは、同じ「表示オプション」プロパティを共有します。

一部のコンポーネントの「表示オプション」ダイアログは、「基本」「詳細設定」の2つのタブに分割されています。これにより、表示オプションの長いリストを、より管理しやすく関連性のあるグループに分割できます。

注意:

表示オプションがすべてのコンポーネントで使用可能な場合、設定が一部のコンポーネントに影響しない場合があります。

次の表は、通常、ほとんどのコンポーネントに適用される「表示オプション」のプロパティをリストして説明しています。バリエーションがある場合は、特定のコンポーネントについて説明する表に記載されています。

表6-3 表示オプション・プロパティ

プロパティ 説明

最小化の許可

コンポーネント・ヘッダーの最小化アクション(つまり、コンポーネント・クロムの「縮小」アイコン)を表示するかどうかを選択します。

  • チェック・ボックスを選択すると「縮小」アイコンが表示されます。

  • チェック・ボックスを選択解除すると「縮小」アイコンが非表示になります。

最小化アイコンでは、ブラインドを巻き上げるようにコンポーネントを縮小し、ビューにそのヘッダーのみを表示します。

縮小されたタスク・フロー

コンポーネントを最小化すると、アイコンが「展開」アイコンに切り替わります。このアイコンを使用すると、表示するコンポーネント全体をリストアできます。

移動の許可

ユーザーによるページ上のコンポーネントの移動を可能にするかどうかを選択します。次のいずれかを選択します。

  • 有効: コンポーネントの「アクション」メニューの「移動」オプション(「上へ移動」「下へ移動」「左へ移動」および「右へ移動」)を使用してコンポーネントを移動できます。

    表示される「移動」オプションは、親コンテナの向き(水平または垂直)によって異なります。「移動」オプションは状況に依存します。たとえば、垂直方向の親コンテナで、現在のタスク・フロー上にコンポーネントがない場合は、「アクション」メニューに「上へ移動」オプションが表示されません。

  • ドラッグ・アンド・ドロップのみ: ドラッグ・アンド・ドロップのみを使用してコンポーネントを移動できます。

  • 無効: コンポーネントは移動できません。

削除の許可

ページがビュー・モードのときに、コンポーネント・ヘッダー(つまり、コンポーネント・クロム)に「削除」アイコンを表示するかどうかを選択します。次のいずれかを選択します。

  • チェック・ボックスを選択すると、ビュー・モードのコンポーネント・ヘッダーに「削除」アイコンが表示されます。

  • チェック・ボックスを選択解除すると、ビュー・モードで「削除」アイコンは表示されません。

「削除」アイコン

ページ・ビュー・モードでこの方法によるコンポーネントの削除を選択した場合は、ページを編集して別のコンポーネント・インスタンスを追加すること以外にコンポーネントのリストア方法がないことに注意してください。ページ作成者は、エンド・ユーザーに、ページの表示時にコンポーネントを削除することを許可したくない場合があります。ページの編集権限があるユーザーは、ページ・エディタでコンポーネントを削除できます。

サイズ変更の許可

コンポーネント・インスタンスにウィンドウ・リサイザを表示するかどうかを選択します。このウィンドウ・リサイザにより、コンポーネントの高さを増やすことができます。

  • チェック・ボックスを選択すると、コンポーネントに「サイズ変更」オプションが表示されます。

  • チェック・ボックスを選択解除すると、「サイズ変更」オプションが非表示になります。

ウィンドウのサイズ変更

注意: このプロパティを選択すると、showDetailFrameコンポーネントの高さが固定されるため、コンテンツでは、サイズ変更されたshowDetailFrameコンポーネントよりコンテンツが大きいか小さいかに基づいて、スクロールバーまたは領域を満たすための空白が表示されます。コンテンツ・フローを許可するにはAllow Resizeを選択解除することをお薦めします。これによって、コンテンツが追加された場合に、showDetailFrameコンポーネントが大きくなります。

クロム・スタイル

コンポーネントの背景の濃淡を選択して指定します。

次のように入力します。

  • light: 淡色は透過で、優先される背景色が透けて表示されます。

  • medium: 中間では、ヘッダー領域の下に淡色の線が引かれます。

  • dark: 濃淡のある影がヘッダー領域の下部からコンポーネントの上部にかけて透過から濃色に段階的に移り変わります。

  • coreDefault: 濃色よりやや淡い、濃淡のある影。

ヘッダーの表示

このチェック・ボックスを選択すると、コンポーネント・インスタンスにヘッダーが表示されます。

タスク・フロー・ヘッダー

シャドウの表示

コンポーネント・インスタンスの背後にシャドウを選択してレンダリングします。

フォント

コンポーネント・ヘッダーに表示されるテキストに使用するフォントを指定します。

1つまたは複数のフォントを入力します。arial,helvetica,sans serifなど、複数の値をカンマ(,)で区切ります。'Times New Roman'など、空白を含むフォント名は一重引用符で囲みます。ブラウザでは、最初の値の使用を試み、ローカル・システムで使用可能なフォントに応じて、順に他の値を使用します。

フォントの色

コンポーネント・ヘッダーに表示されるテキストの色を選択します。

次のいずれかの手法を使用して色を選択します。

  • 色をクリックして選択します。

  • 色のRGBに相当する値を「フォントの色」フィールドに入力します。RGB値は、RRGGBB#RRGGBBまたはr,g,bの形式で入力します。

  • カスタム色を作成するには、ピッカーで「カスタム色」をクリックし、提供されているセレクタおよびスライダを使用して色および彩度のレベルを選択します。

フォント・サイズ

コンポーネント・ヘッダーに表示されるテキストのサイズを指定します。

次のいずれかのタイプの値を使用して値を入力します。

  • length: フォント・サイズを固定サイズに設定します。たとえば、14px1.5emなどと入力します。

  • xx-smallx-smallまたはsmall

  • medium: デフォルトです

  • largex-largeまたはxx-large

  • smaller: フォント・サイズを親要素より小さなサイズに設定します。

  • larger: フォント・サイズを親要素より大きなサイズに設定します。

  • %: 現在のフォント・サイズを親要素のフォント・サイズの指定の割合に設定します。たとえば、75%と入力します。

フォント・スタイル

フォント・スタイルをコンポーネント・ヘッダーのテキストに適用するオプションを選択します。次のいずれかを選択します。

  • 太字

  • 斜体

  • 下線

  • 取消し線

概略

コンポーネント・インスタンスのツールチップ・テキストを入力します。コンポーネント・インスタンス上にマウス・ポインタを置くと、ここで入力するテキストがポップアップで表示されます。

アクションの表示

ユーザーによるページ上のコンポーネントの移動を可能にするかどうかを選択します。次のいずれかを選択します。

  • マウスのホバー時: ユーザーがコンポーネント・ヘッダーにマウス・ポインタを置いたときのみ、アクションが表示されます。

  • 常時(デフォルト): コンポーネント・ヘッダーに常にアクションを表示します。

  • なし: コンポーネント・ヘッダーにアクションを表示しません。

コンテンツのストレッチ

コンポーネントのコンテンツをストレッチするかどうかを選択します。

  • auto (デフォルト): コンテンツはコンテナ全体を占めるようにストレッチします

  • true: コンテナに同時に1つのコンポーネントのみが表示されるように、コンテナ全体を占めるようにコンテンツをストレッチします

  • false: コンテンツをストレッチしません

テキスト

コンポーネント・ヘッダーに表示するテキストを入力します。ヘッダーを選択して非表示にすると、ここで入力する値は無視されます。

ページ上のコンポーネントの表示オプションを設定するには、次の手順を実行します。

  1. 「基本」および「詳細設定」タブで表示オプションの値を入力するか、フィールドの横にある「式エディタ」アイコンアイコンをクリックし、式言語(EL)エディタを選択して開きます。このエディタでは、テキスト文字列などのカスタム値および式言語(EL)の式を入力できます。

    注意:

    汎用の「表示オプション」ダイアログにELを入力すると、入力内容が自動的に検証されます。EL構文が無効な場合、エラーが表示され、その値は適用も保存もされません。

    ELの検証は、汎用ではない表示オプションに対しては実行されません。

    表示オプションの説明は、前述の表を参照するか、コンポーネント固有の表示オプションを参照してください。

  2. 変更を保存します。