10 ページでのリソース・カタログ・コンポーネントの使用

リソース・カタログからリソースを選択し、ポータル・ページ、ページ・テンプレート、ページ・スタイルまたはタスク・フローに追加します。

権限:

この章のタスクを実行するには、ポータル・マネージャであるか、ポータル・レベルのBasic Services: Edit Page Access, Structure, and Content (標準権限)またはPages: Edit Pages (アドバンスト権限)のいずれかの権限を持つポータル・メンバーであることが必要です。

「ポータルのロールと権限について」を参照してください。

リソース・カタログについて

「アセット」および「共有アセット」ページには、WebCenter Portalの3つの組込みリソース・カタログが表示されます。

  • デフォルト・ポータル・カタログ: デフォルトでポータル・ページに割り当てられ、ポータルのページおよびタスク・フロー・アセットに追加するリソースが含まれています。

  • デフォルトのホーム・ポータル・カタログ: デフォルトでホーム・ポータルのページに割り当てられ、個人用ページまたはビジネス・ロール・ページに追加するリソースが含まれています。

  • デフォルトのページ・テンプレート・カタログ: デフォルトでページ・テンプレートおよびページ・スタイルに割り当てられ、ナビゲーション・フォルダおよびポータルコンポーネント・フォルダが含まれ、これにより、ページ・テンプレートおよびページ・スタイルで明示的に使用されるリソースにアクセスできます。ポータルのすべてのページは同じページ・テンプレートを使用しますが、ポータル・アセットとして使用できるいくつかのページ・テンプレートが存在することがあります。

また、ポータル設計者がカスタム・リソース・カタログを開発することもできます。ポータル内では、新しいリソース・カタログを最初から作成するか、既存のリソース・カタログを新しいリソース・カタログにコピーできます。リソース・カタログが共有アセット(すべてのポータルで使用可能)の場合、すべてのポータルの「アセット」ページにポータル固有のリソース・カタログとともに表示されます。

リソース・カタログは、ポータルに追加できるコンポーネントや接続を公開するポータル・アセットです。リソース・カタログを使用して、ページ、ページ・テンプレート、ページ・スタイルおよびタスク・フローを移入できます。リソース・カタログにリストされたアイテムは、総称してリソースと呼ばれます。

ページ、ページ・テンプレート、ページ・スタイルまたはタスク・フローの編集時に使用できるリソース・カタログは、ポータル管理設定によって作成され、組込みリソース・カタログまたはカスタム・リソース・カタログを使用できます。

リソース・カタログの表示および使用方法

ページ、ページ・テンプレート、ページ・スタイルまたはタスク・フローを編集するとき、任意のリージョンで「コンテンツの追加」をクリックするか、「カタログの表示」アイコンをクリックすると、リソース・カタログが表示されます。リソース・カタログは、リソースを分類するフォルダおよびサブフォルダで編成されます。フォルダをクリックしてリソース・カテゴリを展開し、追加するリソースを選択できます。

リソース・カタログ・メニュー・バーのアイコンを使用して、リソース・カタログの階層を上へ戻ることもできます。リソースを名前や説明から探すには、「検索」フィールドを使用します。リソース・カタログを更新して新しく追加したリソースを含めるには、「リフレッシュ」アイコンをクリックします。

図10-1は、デフォルト・ポータル・カタログ(「組込みリソース・カタログについて」で説明している組込みリソース・カタログの一種)を示しています。

図10-1 デフォルト・ポータル・カタログ

デフォルト・ポータル・リソース・カタログ

ページへのコンポーネントの追加

ページにコンポーネントを追加する方法は、リソース・カタログの各コリソースについて同一です。

ノート:

  • ページにコンポーネントを追加するときは、追加のアクションを行う前にアプリケーションのステータス・インジケータでの処理が終了するのを待つ必要があります。

  • リソース・カタログのコンテンツは、ポータルに統合されているサービス、カタログを開いている場所および管理者が提供するリソースによって異なります。たとえば、カタログに表示されるコンポーネントは、ホーム・ポータルから開いた場合とポータルから開いた場合では異なります。

  • WebCenter Portalで使用できるすべてのコンポーネントの完全なリストは、リソース・レジストリで確認できます。ポータル・ページに割り当てられているリソース・カタログに、必要なコンポーネントが存在しない場合は、それの追加が必要なことがあります。

コンポーネントをページに追加するには:

  1. ページ・エディタでページを開きます。

    図10-2 ページ・エディタ

    図10-2の説明が続きます
    「図10-2 ページ・エディタ」の説明
  2. (オプション)リソース・カタログを表示するには、ページの任意の領域で「コンテンツの追加」をクリックするか「カタログの表示」アイコンをクリックします。もう一度アイコンをクリックすると、リソース・カタログは非表示になります。

    図10-3 リソース・カタログの表示と非表示

    図10-3の説明が続きます
    「図10-3 リソース・カタログの表示と非表示」の説明
  3. リソース・カタログで、フォルダをクリックして関連コンポーネントにドリルダウンするか、検索することによって、ページに追加するコンポーネントに移動します。

    ページに追加する必要があるコンポーネントが、ページで使用されているリソース・カタログに含まれていない場合、必要なコンポーネントが含まれる新規バージョンのリソース・カタログを作成して、そのリソース・カタログをページに割り当てることができます。

    1つの例として、次の図は、リソース・カタログの「Web開発」フォルダからアクセスできるコンポーネントを示しています。

    図10-4 リソース・カタログのWeb開発コンポーネント

    図10-4の説明が続きます
    「図10-4 リソース・カタログのWeb開発コンポーネント」の説明
  4. 次の方法でページに新しいコンポーネントを追加します。
    • リソース・カタログのコンポーネントをクリックして、「コンテンツの追加」をクリックして領域にそれを追加します。

    • コンポーネントをリソース・カタログからページ上のターゲットの場所にドラッグします。

  5. ページ上でコンポーネントを移動するには、コンポーネント・ツールバーの「移動」アイコンをクリックしてコンポーネントを新しい位置にドラッグするか、「アクション・メニューの表示」をクリックして、「上へ移動」または「下へ移動」を選択します。

    図10-5 コンポーネント・ツールバー: 「移動」アイコン

    コンポーネント・ツールバー: 「移動」アイコン

    図10-6 コンポーネント・ツールバー: アクション・メニューの表示

    コンポーネント・ツールバー: 「アクション」メニュー
  6. 保存」をクリックして変更を保存します。

コンポーネントに対するアクションの実行

ページを編集するときに、任意のコンポーネント上で使用可能なアクションを表示および実行できます。

ページ上のコンポーネントでアクションを表示して実行するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーで、「アクション・メニューの表示」をクリックして使用可能なアクションを表示します。

    使用可能なアクションには、開発者が追加したカスタム・アクションが含まれる場合があります。組込みのコンポーネント・アクションを次に示します。

    図10-7 コンポーネントの「アクション」メニュー

    図10-7の説明が続きます
    「図10-7 コンポーネントの「アクション」メニュー」の説明
  3. 適切なアクションを選択します。
    • パラメータアクセス、表示オプションスタイルおよびコンテンツ・スタイル: コンポーネントの関連プロパティ・ダイアログを開きます。

    • 上へ移動および下へ移動: ページ上のコンポーネントの位置を変更します。

    • カタログに追加: コンポーネントを新規カスタム・コンポーネントとしてリソース・カタログに追加して、他のポータル・ページで再利用できるようにします。

    • 削除: コンポーネントをページから削除します。

カスタマイズしたタスク・フローのリソース・カタログへの保存

ノート:

共有リソース・カタログでこのタスクを実行するには、アプリケーション・レベルのCreate, Edit, and Delete Resource Catalogs権限が必要です。Application Specialistロールを持つユーザーには、この権限がデフォルトで付与されます。

ポータル・レベルのリソース・カタログでこのタスクを実行するには、ポータル・レベルの権限Create, Edit, and Delete Assets (標準権限)またはCreate, Edit, and Delete Resource Catalogs (アドバンスト権限)が必要です。

ポータル内のページに割り当てられたリソース・カタログには、ページに追加可能な多くのタスク・フロー(分析、ドキュメントなど、すべてのツールやサービス向けのタスク・フローなど)が含まれます。

ノート:

WebCenter Portalで使用できるすべてのタスクの完全なリストは、リソース・レジストリの「タスク・フロー」フォルダで参照できます。ポータル・ページに割り当てられているリソース・カタログに存在しないタスク・フローを使用する場合は、そのタスク・フローが含まれるカスタム・リソース・カタログを作成して、そのリソース・カタログをポータルのページに割り当てることができます。

タスク・フローをページに追加した後、タスク・フローのプロパティを変更し、それらのカスタマイズを伴うタスク・フローを新規タスク・フローとしてリソース・カタログに保存できます。これは、各インスタンスのプロパティ設定を変更することなく、カスタマイズしたタスク・フローをポータルの他の場所で再利用できることを意味します。これにより、時間が節約され、一貫性が確保されます。

たとえば、ページにRSSタスク・フローを追加して、ニュース・フィードをポイントするようにRSSプロパティを変更し、タイトルを「News」に設定できます。このカスタマイズしたタスク・フローを「News」としてリソース・カタログに保存すると、他のユーザーは単にそれをリソース・カタログから選択してページに追加できます。タスク・フローのプロパティへの変更のみが、リソース・カタログに追加される新規タスク・フローに保存される点に注意してください。タスク・フローの内容の変更は、タスク・フロー・インスタンス特有のものとなり、新規タスク・フローとしてリソース・カタログに追加する際に含まれません。

タスク・フローは、リソース・カタログに追加されると、ポータル内のページの編集権限を持つすべてのユーザーがリソース・カタログ内で選択できるようになります。

ポータル内のページに割り当てられたリソース・カタログにタスク・フローを追加するには:

  1. ページ・エディタでタスク・フローを含むページを開きます。
  2. オプションで、タスク・フローのプロパティを編集し、必要に応じてパラメータと表示オプションを変更します。「保存」をクリックします。
  3. タスク・フロー・コンポーネントのツールバーで「アクション」メニューをクリックして、「カタログに追加」を選択します。

    ノート:

    「カタログに追加」アクションは、リソース・カタログを作成する権限を持っている場合のみ使用できます。既存のデフォルト・リソース・カタログが新規の編集可能リソース・カタログにコピーされ、これがポータル内のページのデフォルト・リソース・カタログとして設定されます。

    図10-8 タスク・フローの「アクション」メニュー

    図10-8の説明が続きます
    「図10-8 タスク・フローの「アクション」メニュー」の説明
  4. 「カタログに追加」ダイアログで次の操作を実行します。
    1. リソース・カタログにカスタム・タスク・フローの名前を入力します。既存のタスク・フロー名と重複する名前を使用可能です。

    2. 必要に応じて説明も入力します。

    3. 「フォルダ」リストで、リソース・カタログでカスタム・タスク・フローが表示されるフォルダを選択します。

    4. 「カタログに追加」をクリックします。

    図10-9 「カタログに追加」ダイアログ

    図10-9の説明が続きます
    「図10-9 「カタログに追加」ダイアログの」説明
  5. 「保存」をクリックします。

    ノート:

    タスク・フローのプロパティへの変更のみが、リソース・カタログに追加される新規タスク・フローに保存されます。タスク・フローの内容の変更は、タスク・フロー・インスタンス特有のものとなり、新規タスク・フローとしてリソース・カタログに追加する際に含まれません。

  6. リソース・カタログをチェックして、タスク・フローがリソース・カタログ内の選択したフォルダに表示されていることを確認します。新規タスク・フローが表示されていない場合は、リソース・カタログで「リフレッシュ」アイコンをクリックしてみてください。

    ノート:

    (編集不可の)「デフォルト・ポータル・カタログ」などの組込みリソース・カタログがポータル・ページに割り当てられている場合にタスク・フローをリソース・カタログに追加すると、編集可能バージョンの新規リソース・カタログが自動的に作成され、ポータルのデフォルト・リソース・カタログとして設定されます。編集可能な新規リソース・カタログは、ポータルの「アセット」ページに元のリソース・カタログのコピーとして表示されます。必要に応じて、新規リソース・カタログをさらに編集および管理できます。

  7. 現在のページにタスク・フローを追加してテストを実行し、カスタマイズが含まれていることを確認します。

    このリソース・カタログが割り当てられているポータル内のページの編集権限を持つすべてのユーザーが、リソース・カタログ内でタスク・フローを選択できます。

コンポーネント・プロパティの変更

リソース・カタログからページに追加可能なコンポーネントには、コンポーネントの外観および動作を制御する構成可能なプロパティがあります。使用可能なプロパティは、コンポーネントによって異なります。

この項では、ページ・コンポーネントでコンポーネント・アクセスなどのプロパティをカスタマイズおよび設定する方法について説明します。

コンポーネントのプロパティについて

コンポーネント・プロパティを使用して、コンポーネント・インスタンスの外観および動作を調整したり、コンポーネントを相互に結び付けたり、ページ・パラメータおよびページ定義変数に結び付けたりできます。

コンポーネントのプロパティは、次のダイアログで設定します。

ノート:

値を手入力できるプロパティでは、入力した値の検証は行われません。このようなプロパティに無効な値を入力した場合、コンポーネントではプロパティの設定が無視されます。
  • パラメータ—コンポーネント・タイプに固有で、コンポーネント・コンテンツのソースなどを制御できる設定。

  • アクセス—特定のロール、ユーザーまたはグループに対するコンポーネントの表示/非表示のセキュリティ設定。

  • 表示オプション—コンテンツの方向の決定、ヘッダーの非表示および表示、アクション・メニューの表示方法の選択などの設定。

  • スタイル—親コンポーネント、ページおよびアプリケーションの値をオーバーライドする、コンポーネントのフォント、色およびディメンションの設定。「スタイル」の値は、コンポーネントのコンテンツおよびそのコンテンツを取り巻く要素に影響を与えます。ただし、この値は、コンポーネントの要素(スキンなど)がこれらの設定の変更をサポートするかどうかにより、公開される場合と公開されない場合があります。

  • コンテンツ・スタイル—コンポーネントのコンテンツで、「スタイル」に指定された値をオーバーライドするフォント、色およびディメンションの設定。これらの設定は、コンポーネントの要素(スキンなど)がこれらの設定の変更をサポートするかどうかによって、公開される場合と公開されない場合があります。

コンポーネントのプロパティの設定

この項では、任意のページ・コンポーネントでプロパティを設定する場合の一般的なステップの概要を示します。

関連項目:

特定のコンポーネントに関連付けられたプロパティの詳細は、該当するコンポーネントについて説明する項を参照してください。

ノート:

  • プロパティのダイアログにプロパティ値を入力して「適用」をクリックすると、ほとんどのタイプのプロパティ値では、ダイアログが開いたままになります。予測した値タイプ以外の値の場合は、ダイアログが閉じて、新しい値を反映するためにページがリフレッシュされます。たとえば、コンポーネントがjava.awt.Colorクラスのjava.util.ArrayListを取る場合、その値の追加後にプロパティのダイアログが閉じて、新しいプロパティでページがリフレッシュされます。

  • リテラル・テキスト(value)の入力に加えて、式言語(EL)式(#{value})も入力できます。ELのサポートが必要な場合は、アプリケーション開発者がEL式を指定できます。Oracle WebCenter Portalの開発「式言語式」を参照してください。

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

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

ページ上のコンポーネントのプロパティを設定するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーで、「アクション・メニューの表示」をクリックして編集するプロパティを選択します。

    図10-10 コンポーネントの編集アクション

    図10-10の説明が続きます
    「図10-10 コンポーネントの編集アクション」の説明
  3. プロパティのダイアログでコンポーネントのプロパティを編集します。

    ヒント:

    プロパティのダイアログの「ヘルプ」アイコンをクリックすると、現在のコンポーネントのプロパティの説明に移動できます。

  4. 「OK」をクリックしてプロパティ・ダイアログを閉じます。

コンポーネントのパラメータの設定

コンポーネント・パラメータは、コンポーネントごとに異なります。たとえば、一部のコンポーネントでは、タスク・フロー・コンテンツのソースおよび範囲を指定できるようになり、他のコンポーネントでは、タスク・フロー・インスタンスとそのカスタマイズとの関連付けの維持に使用される、アプリケーションで生成された読取り専用の識別子が提供されます。

ページにプロデューサ・コンポーネントが存在しない場合、「パラメータ」ダイアログにはパラメータ名と値のみが表示されます。ページに少なくとも1つのプロデューサ・コンポーネントが存在し、現在のコンポーネントがコンシューマ・コンポーネントである場合、パラメータは指定値またはイベントのいずれかにバインドできます。イベントにバインドする場合、イベントの詳細を指定するための追加の設定が必要です。

図10-11 コンシューマ・コンポーネントのパラメータ・ダイアログ

コンシューマ・コンポーネントのパラメータ・ダイアログ
詳細は、イベントのコンポーネント・パラメータへの結付けを参照してください。

ページ上のコンポーネントのパラメータを設定するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーで、「アクション・メニューの表示」をクリックし、「パラメータ」を選択して「パラメータ」ダイアログを開きます。

    図10-12 「パラメータ」ダイアログ: ポータル・ブラウザ・タスク・フロー

    図10-12の説明が続きます
    「図10-12 「パラメータ」ダイアログ: ポータル・ブラウザ・タスク・フロー」の説明
  3. パラメータ値を入力するか、パラメータ・フィールドの横にある式エディタのアイコンアイコンをクリックし、式言語(EL)エディタを選択して開きます。このエディタでは、あるパラメータ値を現在のユーザー名または現在のアプリケーション・スキン名にする場合など、ある値が検出はできるものの不明な場合に式を入力する手段を提供します。

    ELのサポートが必要な場合は、アプリケーション開発者がEL式を指定できます。Oracle WebCenter Portalの開発「式言語式」を参照してください。

    パラメータの詳細は、編集中のタスク・フローまたはコンポーネントの次のリンクをクリックしてください。

  4. 変更を保存します。

コンポーネント・アクセスの設定

デフォルトでは、ポータルで作成したページは、すべてのポータル・メンバーに表示されます。ホーム・ポータルでは、作成した個人用ページには、本人およびシステム管理者のみがアクセスできます。ポータルまたは個人用ページのアクセスを変更できます。

多数のユーザーに公開するページがあるものの、ページ上の特定のコンポーネントは、選択した一部のユーザーにのみ、または1人のユーザーにのみ表示したい場合があります。たとえば、すべての営業担当者向けのポータルを作成したとします。このポータルのホーム・ページには、2つのイベント・タスク・フローのインスタンスがあります。1つは全営業担当者用、もう1つは営業マネージャ専用です。カスタム・ロールのsales_managerが割り当てられたユーザーにのみ表示されるように、2つ目のイベント・インスタンスを保護できます。

デフォルトでは、ポータル・ページ上のコンポーネントはこのページにアクセスできるすべてのユーザーに表示されます。コンポーネントの「アクセス」プロパティを設定して、コンポーネントの表示または非表示を切り替えたり、ロールやユーザー別またはEL式を使用して、より詳細な可視性を指定できます。

関連する「アクセス」プロパティを持つすべてのコンポーネントは、この方法で保護できます。関連する「アクセス」プロパティを持たないコンポーネントは、このプロパティを持つコンポーネント(ボックス・コンポーネントなど)の内部に置いて、この方法で保護できます。

関連項目:

アセット・マネージャでインポートしたカスタム・コンポーネントにも、セキュリティを設定できます。詳細は、「アセットのセキュリティの設定」を参照してください。

ページ上のコンポーネントのアクセス(可視性)を設定するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーで、「アクション・メニューの表示」をクリックし、「アクセス」を選択して「アクセス」ダイアログを開きます。

    図10-13 「コンポーネント・アクセス」ダイアログ

    図10-13の説明が続きます
    「図10-13 「コンポーネント・アクセス」ダイアログ」の説明
  3. 「可視性」オプションを選択します。
    • コンポーネントの表示: (デフォルト)コンポーネントをすべてのユーザーに常に表示するように指定します。

    • コンポーネントの非表示: ページの表示時にコンポーネントを表示しないように指定します。ただし、ポータル・エディタでページを編集する際にコンポーネントは表示されるため、「アクセス」設定を変更できます。

    • ロールまたはユーザーによるカスタマイズ: コンポーネントにアクセスできる特定のロールおよびユーザーを選択します。このオプションが選択されている場合、デフォルトでコンポーネントへの表示アクセス権が現在のユーザーに付与されます。

      ステップ4を参照してください。

    • ELを使用したカスタマイズ: コンポーネントを表示するにはtrueに評価される必要のある式言語(EL)を入力します。

      ステップ5を参照してください

  4. 「ロールまたはユーザーによるカスタマイズ」を選択した場合、「アクセス権限の追加」をクリックし、次の操作を実行します。
    • アイデンティティ・ストアで使用可能な個々のユーザーまたはユーザー・グループを検索して選択するには、「ユーザーの追加」または「グループの追加」を選択します。

      ヒント:

      ユーザーやグループを検索する場合のヒントは、「アイデンティティ・ストアでのユーザーまたはグループの検索」を参照してください。

    • 「ロールの追加」を選択し、定義済のロールを検索して選択します。

    • すべての認証済ユーザー(つまり、WebCenter Portalにログインしているすべてのユーザー)に対してコンポーネント・アクセスを変更するには、「認証ロールの追加」を選択します。

      これを選択すると、デフォルトでコンポーネントへのアクセス権を持つロールauthenticated-role「ロールまたはユーザー」の下に追加されます。

    • すべてのパブリック・ユーザー(つまり、WebCenter Portalにログインしていないユーザー)に対してコンポーネント・アクセスを変更するには、匿名の追加を選択します。

      これを選択すると、デフォルトでコンポーネントへのアクセス権を持つロールanonymous-role「ロールまたはユーザー」の下に追加されます。

      ノート:

      anonymous-roleにコンポーネント・アクセスを付与する(つまり、ログインしていないユーザーをポータルにアクセスできるようにする)には、ポータルをパブリックにする必要があります。そのポータルは、プライベートまたは非表示にすることはできません。

    • コンポーネントの可視性を削除するには、「ロールまたはユーザー」リストでユーザー、グループ、またはロールを選択して、「アクセス権限の削除」をクリックします。

      図10-14 コンポーネント・アクセスの設定

      図10-14の説明が続きます
      「図10-14 コンポーネント・アクセスの設定」の説明
  5. ELを使用したカスタマイズを選択した場合、コンポーネントが表示されるためにはtrueに評価される必要のある式言語(EL)を入力します。

    ノート:

    ELのサポートが必要な場合は、アプリケーション開発者がEL式を指定できます。Oracle WebCenter Portalの開発「式言語式」を参照してください。

    たとえば:

    • 特定のスコープ内の特定のロールが割り当てられている、そのスコープのメンバーにのみコンポーネントを公開するには、次のように入力します。

      #{WCSecurityContext.userInScopedRole['role']}
      

      ここでroleは、sales_managerなどのロールの名前です。

      スコープは、暗黙的に現在のスコープに解決されます。

      • このELをホーム・ポータルで使用すると、ホーム・ポータルのGUIDとアプリケーション・レベルで定義されたロールに解決されます。

      • このELをポータルのスコープで使用すると、そのポータルに対して定義されたロールに解決されます。

    • グループのメンバーにのみコンポーネントを公開するには、次のように入力します。

      #{WCSecurityContext.userInGroup['group_name']}
      
    • 特定のユーザーにのみコンポーネントを公開するには、次のように入力します。

      #{WCSecurityContext.currentUser['user_name']}
      
  6. 変更を保存します。

コンポーネントの表示オプション・プロパティの設定

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

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

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

ノート:

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

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

表10-1 表示オプション・プロパティ

プロパティ 説明

Allow Minimize

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

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

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

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

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

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

Allow Move

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

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

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

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

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

Allow Remove

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

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

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

「削除」アイコン

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

Allow Resize

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

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

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

ウィンドウ・リサイザ

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

Chrome Style

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

次を入力します。

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

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

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

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

Display Header

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

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

Display Shadow

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

Font

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

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

Font Color

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

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

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

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

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

Font Size

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

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

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

  • xx-smallx-smallまたはsmall

  • medium–デフォルト

  • largex-largeまたはxx-large

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

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

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

Font Style

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

  • 太字

  • イタリック

  • 下線

  • 取消線

Short Desc

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

Show Actions

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

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

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

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

Stretch Content

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

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

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

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

Text

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

ページ上のコンポーネントの表示オプションを設定するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーで、「アクション・メニューの表示」をクリックし、「表示オプション」を選択して「表示オプション」ダイアログを開きます。

    図10-15 コンポーネントの「表示オプション」: 「基本」プロパティ

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

    ノート:

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

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

    ELのサポートが必要な場合は、アプリケーション開発者がEL式を指定できます。Oracle WebCenter Portalの開発「式言語式」を参照してください。

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

  4. 変更を保存します。

スタイル・プロパティおよびコンテンツ・スタイル・プロパティの設定

「スタイル」および「コンテンツ・スタイル」のプロパティを使用して、ポータルのルック・アンド・フィールをコンポーネント・レベルで微調整できます。

  • スタイル・プロパティは、コンポーネント・インスタンスの「showDetailFrame」コンテナに適用され、コンポーネントの親コンテナ、ページおよびアプリケーションによってコンポーネントに指定されたスタイルをオーバーライドします。

  • コンテンツ・スタイル・プロパティは、コンポーネント・インスタンスの「showDetailFrame」コンテナ内のコンテンツに適用され、スタイル・プロパティ、ページおよびアプリケーションに指定されたスタイルをオーバーライドします。

たとえば、移動可能ボックス・コンポーネントでは、「スタイル」設定によって移動可能ボックスのルック・アンド・フィールが制御され、「コンテンツ・スタイル」設定によって移動可能ボックス内に含まれるコンポーネントのルック・アンド・フィールが制御されます。このルック・アンド・フィールは、個々のコンポーネントに設定されているスタイル設定によってオーバーライドされる場合もあります。

ただし、コンテナ内のコンポーネントがそのコンポーネント独自のコンテンツ・スタイル・プロパティ以外の手段でコンテナのコンテンツ・スタイル・プロパティをオーバーライドした場合は、移動可能ボックスなどのコンテナに設定されているコンテンツ・スタイル・プロパティが有効にならない場合があることに注意してください。たとえば、タスク・フローの背景色が設計時にコンテナから継承するように設定されずに、ハードコードされた値で設定された場合には、タスク・フローを含む移動可能ボックスに設定されている背景色が有効にならない可能性があります。

また、「スタイル」設定および「コンテンツ・スタイル」設定は、コンポーネントの要素(スキンなど)がこれらの設定の変更をサポートするかどうかによって、公開される場合と公開されない場合があります。このため、コンポーネントのスタイルおよびコンテンツ・スタイル・プロパティを設定できますが、これらの設定は、コンポーネントに適用される他の設定が原因で有効にならない場合があります。

表10-2 スタイル・プロパティおよびコンテンツ・スタイル・プロパティ

プロパティ 説明

Background Color

コンポーネントの背景色を選択します。

「コンテンツ・スタイル」の背景色を指定した場合は、「スタイル」プロパティに指定した背景色は適用されません。

Background Image

コンポーネントの背景にレンダリングするイメージのURLを入力します。標準のCSS構文を使用します。たとえば:

url(http://www.abc.com/image.jpg)

Color

コンポーネント・インスタンスに含まれる任意のテキストのデフォルトの色を選択します。たとえば、テキスト・コンポーネントをボックス・コンポーネントに追加したとします。ボックスの「スタイル」プロパティを設定すると、テキスト・コンポーネントの「色」の値を定義しないかぎり、ボックスに適用するデフォルトのテキストの色もテキスト・コンポーネントに自動的に適用されます。

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

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

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

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

Font

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

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

Font Size

ブラウザのデフォルトのフォント・サイズまたは親要素のフォント・サイズのいずれかに相対するコンポーネント・テキストのサイズを入力します。次のいずれかのタイプの値を入力します。

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

  • xx-smallx-smallまたはsmall

  • medium–デフォルト

  • largex-largeまたはxx-large

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

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

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

Font Style

コンポーネント・フォントのスタイルを選択します。次の中から選択します。

  • 太字

  • イタリック

  • 下線

  • 取消線

ここで選択するフォント・スタイルは、コンポーネント内の任意のテキストに適用されます。

Height

コンポーネント・コンテンツの高さを指定します。

コンポーネント・コンテンツの固定の高さを設定します。任意の標準的なCSS測定単位(ptpxpcliなど)を使用できます。

Heightの値を割合で表示しないでください。ブラウザ間およびレイアウト・コンテナ間で違いがあるため、割合が予測したとおりに機能しません。たとえば、%値を使用してイメージのサイズを変更すると、その親コンテナのサイズが変更され、イメージ自体は変更されません。コンポーネントでページの100%を占有する必要がある場合は、ストレッチ・ページ・スタイルを使用してページを作成し、コンポーネントをそのページに追加することを検討してください。

Heightプロパティは、「表示オプション」ダイアログで使用可能なStretch Contentプロパティと連携します。Stretch Contentにより、コンテナではそのコンテンツを指定した高さにストレッチできます。

Margin

コンポーネントの周囲に引く空白の境界を指定します。次のいずれかのタイプの値を入力します。

  • 絶対値。任意の単位を含めます。

    たとえば:

    2px

    標準のCSSでサポートされる測定単位(ptpxpcliなど)のみを使用してください。

  • 親コンポーネントの余白の割合(10%のように、値にパーセント記号を付けます)。

  • auto: ブラウザのデフォルト値に応じて自動的に値が設定されます。

Other CSS

コンポーネントの追加のCSSを指定します。

他の「スタイル」プロパティまたは「コンテンツ・スタイル」プロパティで扱われない必要なその他のCSSエンコーディングを追加します。この値を有効にするには、標準CSS構文を使用する必要があります。

たとえば、padding:0を設定すると、ボックス・コンポーネントのすべてのパディングが削除されます。これは、ボックス内にボックスをネストするときに役に立ちます。

Style Class

CSSスタイル・クラスをこのコンポーネントに使用するように指定します。たとえば、このプロパティを使用して、個々のボックス・コンポーネントの特定のスキン設定をターゲット指定できます。

スタイル・クラスは、JSF (.jspx)またはスキニングCSSファイルで定義されます。

ノート: スタイル・クラスは、スタイルをまとめたセットで、名前が指定されています。これに対し、Other CSSに入力された値は個別のスタイルです。Style Classの値は、コンポーネントのstyleClass属性に追加されます。Other CSSの値は、コンポーネントのinlineStyle属性に追加されます。

このプロパティは、「スタイル」ダイアログにのみ表示されます。

Width

コンポーネント・コンテンツの幅を指定します。

コンポーネント・コンテンツの固定の幅を設定します。任意の標準的なCSS測定単位(ptpxpcli%など)を使用できます。

Widthの値を割合で表示しないでください。ブラウザ間およびレイアウト・コンテナ間で違いがあるため、割合が予測したとおりに機能しません。たとえば、%値を使用してイメージのサイズを変更すると、その親コンテナのサイズが変更され、イメージ自体は変更されません。コンポーネントでページの100%を占有する必要がある場合は、ストレッチ・ページ・スタイルを使用してページを作成し、コンポーネントをそのページに追加することを検討してください。

ページ上のコンポーネントの「スタイル」および「コンテンツ・スタイル」のプロパティを設定するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーの「アクション・メニューの表示」をクリックし、「スタイル」または「コンテンツ・スタイル」を選択して関連するダイアログを開きます。

    図10-16 「スタイル」ダイアログ

    図10-16の説明が続きます
    「図10-16 「スタイル」ダイアログ」の説明

    図10-17 「コンテンツ・スタイル」ダイアログ

    図10-17の説明が続きます
    「図10-17 「コンテンツ・スタイル」ダイアログ」の説明
  3. 「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティの値を入力するか、両方のタブに表示されている「その他のCSS」プロパティを使用して独自の値を指定します。
    「Other CSSプロパティ: 使用と例」)を参照してください。
  4. 変更を保存します。
Other CSSプロパティ: 使用と例

Other CSSプロパティを使用すると、その他のプロパティではカバーされないCSSスタイルを適用できます。複数エントリをセミコロン(;)で区切る標準CSS構文を使用します。コンポーネントに使用するCSSスタイル・クラスを指定するには、「スタイル・クラス」プロパティを使用します。

http://www.w3.org/TR/CSS2/propidx.htmlを参照してください。

たとえば:

background: #00FF00 url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat fixed top; font-size: xx-small

ノート:

一部のCSSスタイルは、一般的なブラウザでサポートされていません。さらに、一部のスタイルは、1つのブラウザに固有であり、別のブラウザでは適切に動作しない可能性があります。

Other CSSプロパティの適用の一例として、タスク・フロー、ポートレットおよび一部のWeb開発コンポーネントへの様々な枠線の提供があります。

タスク・フローの周りに枠線を作成するには、そのプロパティにアクセスして、「スタイル」ダイアログの「その他のCSS」フィールドでCSSエンコーディングを追加します。

図10-18 コンポーネントへのCSSエンコーディングの追加

図10-18の説明が続きます
「図10-18 コンポーネントへのCSSエンコーディングの追加」の説明

図10-19 Other CSSプロパティで作成した枠線

図10-19の説明が続きます
「図10-19 Other CSSプロパティで作成した枠線」の説明

この表に、Other CSSプロパティの設定で使用できるCSSの例を示します。

説明および例

font-size

ブラウザのデフォルトのフォント・サイズまたは親要素のフォント・サイズのいずれかに相対するコンポーネント・テキストのサイズ。

構文:

font-size:value

ここで、valueは次のいずれかです。

  • length—固定フォント・サイズ。たとえば: font-size: 14px

  • xx-small

  • x-small

  • small

  • medium—default.

  • large

  • x-large

  • xx-large

  • smaller—親要素より小さいサイズのフォント。

  • larger—親要素より大きいサイズのフォント。

  • x%—親要素のフォント・サイズに対する割合。たとえば: font-size: 75%

background-position

背景イメージの開始位置。

構文:

background-position:value1 value2

.

通常、2つの値を入力します。特に記述がなければ、1つの値のみを指定すると、2番目の値はcenterと解釈されます。

value1 value2は、次のいずれかの組合せの水平位置と垂直位置を表します。

  • top left

  • top center

  • top right

  • center left

  • center center

  • center right

  • bottom left

  • bottom center

  • bottom right

  • x% y%—割合で表した水平位置(x)および垂直位置(y)。左上隅は 0% 0%です。右下隅は100% 100%です。1つの値のみを指定すると、もう1つの値は50%と解釈されます。割合(%)と位置は混在させることもできます。

  • x y—測定単位で表した水平位置(x)および垂直位置(y)。左上隅は0 0です。単位としてピクセル(0px 0px)またはその他のCSS単位を使用できます。1つの値のみを指定すると、もう1つの値は50%と解釈されます。割合(%)と位置は混在させることもできます。

たとえば:

background-position: top left

background-repeat

背景イメージの繰返し値。

構文:

background-repeat:value

ここで、valueは次のいずれかです。

  • no-repeat—イメージを繰り返しません。

  • repeat—コンテナを埋めるようにイメージを繰り返します。

  • repeat-x—イメージを垂直方向ではなく水平方向に繰り返します。

  • repeat-y—イメージを水平方向ではなく垂直方向に繰り返します。

padding

コンポーネントの周りの空白(または空きスペース)。

最大で4つの値を入力できます。任意の標準のCSS測定単位(ptpxpcli%など)を使用して、特定の長さまたは最も近い要素の割合で値を表します。

  • 4つのすべてのサイドのパディングを1つの値で設定します。たとえば、padding: 10pxとします。

  • 上/下および左/右のパディングを2つの値で設定します。たとえば、padding: 10px 15pxとします。

  • 上、左/右および下のパディングを3つの値で設定します。たとえば、padding: 10px 5% 10pxとします。

  • 上、右、下、左の順にパディングを4つの値で設定します。たとえば、padding: 5px 10px 15px 20pxとします。

padding-bottom

要素の下の空白(または空きスペース)。

特定の長さまたは最も近い要素の割合で値を表します。

たとえば、padding-bottom: 10pxとします。

padding-left

要素の左側の空白(または空きスペース)。

特定の長さまたは最も近い要素の割合で値を表します。

たとえば、padding-left: 2%とします

padding-right

要素の右側の空白(または空きスペース)。

特定の長さまたは最も近い要素の割合で値を表します。

たとえば、padding-right: 1pcとします。

padding-top

要素の上の空白(または空きスペース)。

特定の長さまたは最も近い要素の割合で値を表します。

たとえば、padding-top: 16ptとします。

ページからのコンポーネントの削除

ページからコンポーネントを削除するには:

  1. ページ・エディタでページを開きます。
  2. コンポーネント・ツールバーで、「アクション」メニューをクリックし、component nameの削除」を選択します

    図10-20 コンポーネントの削除アクション

    図10-20の説明が続きます
    「図10-20 コンポーネントの削除アクション」の説明
  3. 確認ダイアログで、「削除」をクリックします。

    ページからコンポーネントが完全に削除されます。コンポーネントに子コンポーネントが含まれていた場合は、その子コンポーネントも削除されます。

  4. 保存」をクリックして変更を保存します。