| Oracle® Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド 11g リリース1(11.1.1.7.0) B72923-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド 11g リリース1(11.1.1.7.0) B72923-01 |
|
前 |
次 |
Spacesアプリケーションの最も強力な機能の1つに、アプリケーションの実行時にページ・コンテンツを追加および編集する機能があります。この機能は、スペース・ページの変更用に完全に統合されたページ・エディタであるコンポーザを使用して提供されます。
コンポーザを使用すると、ページ・レイアウトの変更や、ページへのタスク・フロー、ポートレット、ドキュメントその他のコンポーネントの追加、ページおよびページに含まれるオブジェクトに関連付けられたプロパティの値の指定、ページ、タスク・フローおよびポートレットの相互の結付けができます。
この章では、コンポーザの概要および基本的な編集タスクの実行方法を次の項で説明します。
|
関連項目: 次の章では、コンポーザでの追加タスクについて説明しています。 |
対象読者
この章は、Basic Services: Edit Page Access, Structure, and Contentというスペースレベルの権限を持つユーザーを対象としています。通常、この権限を持つユーザーには、ページの作成および編集、ページ・プロパティの変更、ページ・コンテンツの追加、およびスペースからのページの削除の各タスクが割り当てられます。
ページ編集モードを開始すると、ページ・エディタ(コンポーザ)にページが開きます。
コンポーザの開始および終了には、次のアクションのいずれかを実行します。
編集するページに移動して、[Ctrl]+[Shift]+[E]を押します(図18-1)。
ホーム・スペースの個人用ページに移動するには、次の手順を実行します。
http://host:port/webcenter/spaces/profile/userName/page/escapedPageDisplayName
|
ヒント:
|
スペースのページに移動するには、次の手順を実行します。
http://host:port/webcenter/spaces/spaceName/page/escapedPageDisplayName
「ページのパーソナライズ」ページまたはスペースの「ページ」ページで、ページを選択し、そのページの「アクション」メニューをクリックしてから、「ページの編集」を選択してコンポーザで開きます(図18-1)。
|
関連項目:
|
必要に応じてページを編集します。
「保存」をクリックして変更を保存します。
「閉じる」をクリックしてページ編集モードを終了します。
ユーザーはWebからSpacesアプリケーションにアクセスするため、複数のユーザーが同時に同じページを編集しようとする場合があります。このような場合は、各ユーザーに他のユーザーがいることを通知する同時アクセスの警告がコンポーザに表示されます(図18-2)。
ページの終了状態は、最後に保存するユーザーにより確定されます。つまり、他の同時ユーザーによる変更は、最後の変更の保存によって上書きされます。
|
ヒント: 最初またはその次の同時ユーザーがページ・カスタマイズを行った(未保存)場合にのみ、同時アクセスのメッセージに時間間隔が追加されます。 |
Spacesアプリケーションは、単一ユーザーの同時実行はサポートしていません。つまり、単一ユーザーは、複数のアプリケーション・セッションを同時に作成することはできません。
複数のユーザーによる同時ページ編集はサポートされていないため、あるユーザーにより、別のユーザーが編集しているページが削除される場合もあります。その場合は、編集を実行しているユーザーに、各アクションでのエラー・メッセージが表示されます。たとえば、ユーザーにページを編集する権限がないことを示すメッセージが表示されます。ユーザーが変更を保存しようとすると、「ページが見つかりません」というエラーが、ユーザーをホーム・ページにリダイレクトするリンクとともに表示されます。エラー・メッセージは、ユーザーがスペースまたはホーム・スペースのどちらでページを編集しているかによって異なる場合があります。
別のユーザーが編集しているページを表示する場合は、そのセッションで編集の結果がすぐに表示されない場合があります。変更をすべて確実に表示するには、他のユーザーが保存した後にページを表示します。
ページ・ビュー・モードでコンポーネントを変更している間に、別のユーザーがページ編集モードで同じコンポーネントを削除した場合は、エラー・ページが開きます。そのまま元のページに戻ります。削除されたコンポーネントは表示されなくなり、他のコンポーネントでの作業を継続できます。
コンポーザでは、デザイン・ビューおよびソース・ビューという、ページ・コンテンツを使用するための2つのビューが用意されています。これらのビューのいずれかを開いて、コンポーザを開始し、「表示」メニューから「ソース」または「デザイン」を選択します(図18-3)。
デザイン・ビューでは、ページおよびそのコンテンツのWYSIWYGレンダリングが提供され、各コンポーネントでコントロールを直接選択できます(図18-4)。
ソース・ビューでは、WYSIWYGレンダリングと階層レンダリングを組み合せてページ・コンポーネントが表示され、階層リストのヘッダーでコントロールを使用できます(図18-5)。
|
ヒント: ソース・ビューでは、個々のコンポーネントのコントロールが非アクティブになっていますが、個々のコンポーネントをクリックして選択が可能です。 |
「表示」メニューの「ソースの位置」オプションは、ページ・ソースの表示をページのWYSIWYG部分の上、下、左または右のいずれかに指定する場合に使用できます。ソース・ビューでページが開いているときは、「ソースの位置」オプションはアクティブになります(図18-6)。
また、ソース・ビューでは、他の方法ではページに公開されないページ・コンポーネントにアクセスできます(この例は、第20章「ページでのレイアウト・コンポーネントの使用」を参照してください)。ソース・ビューでは、このようなコンポーネントの選択および構成が可能です。コンポーネントを階層リストで選択すると、ページ上でもこれが選択されます。コンポーネントの選択はアウトラインで示されます。選択したコンポーネントのプロパティにアクセスするには、ソース・ビュー・ヘッダーで、「コンポーネント名のプロパティの表示」アイコンをクリックします(図18-7)。
ソース・ビューでコンポーネントを選択するには、ページ上で直接クリックする方法もあります。ソース・ビューで、選択可能なコンポーネントの上にマウス・カーソルを移動すると、マウス・カーソルが拡大鏡に変わります(図18-8)。
ページ・プロパティでは、ページ列の幅の制御、ページの背景色およびイメージの指定、およびページに追加のCSSエンコーディングの適用が可能です。また、ページ・プロパティでは、ページのセキュリティ設定や、ページをページ・コンポーネントに結び付ける際に使用可能なページ・パラメータにアクセスできます。
|
関連項目: ページのセキュリティ設定の詳細は、第26章「ページとコンポーネントの保護」を参照してください。ページの結付けの詳細は、第22章「ページ、タスク・フロー、ポートレットおよびUIコンポーネントの結付け」を参照してください。 |
ページのプロパティを編集するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
「ページ・プロパティ」ボタンをクリックします(図18-9)。
「ページ・プロパティ」ダイアログが開きます(図18-10)。
必要に応じて、「表示オプション」タブをクリックして前面に表示し、「背景色」の横のカラー・ピッカーを開いて、ページの背景色を次のいずれかの方法で選択します(図18-10)。
色をクリックして選択します。
色のRGBに相当する値を「背景色」フィールドに入力します。
|
ヒント: RGB値は、 |
カスタム色を作成するには、ピッカーで「カスタム色」をクリックし、提供されているセレクタおよびスライダを使用して色および彩度のレベルを選択します(図18-11)。
「OK」をクリックして、色の値を「背景色」フィールドに入力します。
「背景イメージ」フィールドに、完全なURLまたはアプリケーション・ルートを基準にした相対URLを入力します。
たとえば、次のように入力します。
http://www.abc.com/image.jpg
「その他のCSS」フィールドに、他のページ・プロパティで扱われない必要なその他のCSSエンコーディングを追加します。
たとえば、次のように入力します。
background-position:center;
この値を有効にするには、標準のCSS構文を使用する必要があります(「その他のCSS」の詳細は、第18.6.6.3項「その他のCSSの入力」を参照してください)。
「OK」をクリックして、変更を保存し、ページに適用します。
この項では、基礎となるページ列を調整し、タブおよびコンテンツ領域を追加することによってページ・レイアウトを変更する方法について説明します。この項の内容は次のとおりです。
ページ・レイアウトは、ページ上のコンテンツ・リージョンの数、配置および方向や、ページ列の幅によって定義します。ページの初期レイアウトは、ページの作成時に選択したページ・スタイルに基づきます。個々のページのレイアウトは変更できますが、同じページ・スタイルで構築されたすべてのページのページ・レイアウトを一括して変更することはできません。
ページでパラメータを使用してそのレイアウトを導出する場合は、そのページ・パラメータをレイアウトの変更に使用できます。ページにコンテンツ・リージョンを追加してページ・レイアウトを変更したり、タブを追加して階層化されたコンテンツ・リージョンを作成できます。
多くのシード済ページ・スタイルには、ページ・プロパティが関連付けられており、そのページ・プロパティを使用してページにヘッダーおよびフッターを追加できます。これらのスタイルには次が含まれています。
空白
ホームページ
左を狭く
右を狭く
3列
ページ・ヘッダーを追加すると、ページの上部にコンテンツ領域が追加されます。ページ・フッターを追加すると、ページの下部にコンテンツ領域が追加されます。この両方のコンテンツ領域は、ユーザー・カスタマイズに対応せず、新しい位置へのドラッグや、ページ・ビュー・モードでの他の変更もできません。図18-12および図18-13では、編集モードのデザイン・ビュー内のページについて、ヘッダーおよびフッターの追加前と追加後を示しています。
この項では、これらのいずれかのスタイルに基づいたページにヘッダーおよびフッターを追加するプロセスの手順を示します。
ページのヘッダーまたはフッターを追加するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
「ページ・プロパティ」(図18-14)をクリックして、「ページ・プロパティ」ダイアログを開きます。
「パラメータ」タブをクリックして前面に表示します。
ページ・ヘッダーを追加するには、showHeaderの値をtrueに変更し、ページ・フッターを追加するには、showFooterの値をtrueに変更します(図18-15)。
「OK」をクリックします。
必要に応じて、コンテンツをページ・ヘッダーおよびページ・フッターのレイアウト・ボックスに追加します(図18-16)。
|
関連項目: ページへのコンテンツの追加の詳細は、第18.5項「ページへのコンポーネントの追加」を参照してください。イメージ、テキスト、HTMLなどのコンポーネントのページへの追加の詳細は、第20章「ページでのレイアウト・コンポーネントの使用」を参照してください。 |
「保存」、「閉じる」の順にクリックして、Composerを終了します。
多くのシード済ページ・スタイルには、基礎となる各ページ列に割り当てられた幅の割合を制御するパラメータが用意されています(図18-17)。
指定のページ・スタイルに割り当てられたデフォルトの幅と同様に、入力した幅の値は固定値になります。つまり、それらは、指定された幅を超えるコンテンツを追加しても拡張されません。
列幅のパラメータを指定するシード済ページ・スタイルには次が含まれます。
空白
ブログ
ホームページ
左を狭く
右を狭く
3列
列幅のパラメータを指定しないシード済ページ・スタイルには次が含まれます。
Webページ
Wiki
これらのパラメータのデフォルト値を調整してページ・レイアウトの列幅を制御できます。
ページ列の幅を調整するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
「ページ・プロパティ」をクリックして、「コンポーネント・プロパティ」ダイアログを開きます(図18-18)。
leftWidth、centerWidthおよびrightWidthの各パラメータ値を必要な割合に調整します(図18-19)。
「OK」をクリックします。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
ページ上で既存のボックス・コンポーネントを分割することによって、コンテンツ・リージョンをページに追加できます。この項では、その方法について説明します。この項の内容は次のとおりです。
ボックスを複数のボックスに分割することによって、追加のコンテンツ・リージョンを作成できます。ボックスを分割するには、まず、ボックスを構成して分割できるようにする必要があります。
ページ上でボックスの分割を有効化するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
ボックス上の「編集」アイコンをクリックして、「コンポーネント・プロパティ」ダイアログを開きます。
「表示オプション」タブをクリックして、「分割アクションの表示」を選択します(図18-20)。
「OK」をクリックします。
ボックスのツールバーに、ボックスの追加アイコンが表示されます(図18-21)。
ページ上でボックス・コンポーネントを分割するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
分割するボックスに移動して、ボックスの追加アイコンをクリックすると、希望する方法でボックスが分割されます(図18-22)。
次のいずれかを選択します。
上にボックスを追加
下にボックスを追加
左にボックスを追加
右にボックスを追加
「保存」→「閉じる」をクリックします。
ページの実際の範囲が狭い場合は、タブを使用して階層化されたコンテンツ・リージョンを追加できます。タブは、それぞれ1つのタブを持ち、他のタブ付きコンテンツ・リージョンの上に表示されるコンテンツ・リージョンです(図18-23)。
名前の変更、再順序付けなど、タブで実行可能なアクションの多くはタブ・プロパティで使用できます。この項では、タブ付きコンテンツ・リージョンの追加方法およびタブ上でのタブ・プロパティを使用した様々なアクションの実行方法について説明します。
この項の内容は次のとおりです。
タブ付きコンテンツ・リージョンの作成は、最初にボックス・コンポーネントで実行されます。ボックスでタブを作成するには、まず、ボックスを構成してタブの作成を可能にする必要があります。
ボックスでタブの作成をサポートできるようにするには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
ボックス上の「編集」アイコンをクリックして、「コンポーネント・プロパティ」ダイアログを開きます。
「表示オプション」タブをクリックして、「タブ・アクションの表示」を選択します(図18-24)。
「OK」をクリックします。
ボックスのツールバーに、「タブ・セットまたはタブの追加」アイコンが表示されます(図18-25)。
ページに追加した各タブには、コンテンツの追加が可能な独自のリージョンが用意されています。ページ編集モードでは、タブに「コンテンツの追加」ボタンが表示されています。
|
注意: タブを追加するアイコンは、ボックスを構成してタブの作成が可能な場合にのみ、ボックス・コンポーネントに表示されます。詳細は、第18.4.5.1項「タブ付きコンテンツ・リージョンの追加の有効化」を参照してください。 |
ページでタブ付きコンテンツ・リージョンを追加するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
タブを追加するリージョン(ボックス・コンポーネント)で、「タブ・セットまたはタブの追加」アイコンをクリックします(図18-26)。
タブが作成されたレイアウト・リージョンに表示されるコンテンツを含むタブが表示されます(図18-27)。
必要に応じてタブの追加を続けます。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
タブの作成時に、1つのタブだけではなくタブ・セットを作成する場合もあります。これを迅速に実行するには、タブ・プロパティを使用します。
ページでタブ・セットを作成するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
タブ・セットに含めるタブ上で「編集」アイコンをクリックします(図18-28)。
表示される「コンポーネント・プロパティ」ダイアログの「タブ」タブで、「タブの追加」をクリックして、タブを「タブの順序変更」のリストに追加します(図18-29)。
必要なタブの数に達するまでこの方法で継続します。
「OK」をクリックして、変更内容を保存し、ダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
タブを作成すると、タブ・プロパティを使用して、そのデフォルト名の「新規タブ」を変更できます。また、ページ・プロパティを使用してタブの順序を変更することもできます。
ページ上でタブ名の変更およびタブの再順序付けを行うには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
名前の変更または再順序付けをするタブで「編集」アイコンをクリックします。
表示される「コンポーネント・プロパティ」ダイアログで、「タブ」タブを前面に表示し、「タブの順序変更」リストで名前変更または再順序付けをするタブを選択して、次のいずれかを実行します。
タブ名を変更するには、「テキスト」フィールドに新しい名前を入力します。
タブを再順序付けするには、「タブの順序変更」リストの右にある「移動」アイコンをクリックします。
「OK」をクリックして、変更内容を保存し、ダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
意味のわかりやすいアイコンをタブに追加して、その目的を知識が豊富なユーザーに明らかにすることもできます。追加されたアイコンは、タブの表示名の左側にレンダリングされます(図18-30)。
ページ上のタブにアイコンを追加するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
アイコンを追加するタブで「編集」アイコンをクリックします。
表示される「コンポーネント・プロパティ」ダイアログで、「タブ」タブを前面に表示し、「タブの順序変更」リスト内のタブを選択してから、「アイコンの位置」フィールドにイメージのURIを指定します。
このプロパティでは、次の様々なタイプのURIをサポートしています。
イメージへの絶対パス。例:
http://oracleimg.com/admin/images/ocom/hp/oralogo_small.gif
ソース・ページへの相対パス。例:
bullet.jpg
アプリケーションのコンテキスト・ルートとの相対パス。例:
/images/error.png
アプリケーション・サーバーとの相対パス。例:
//adf-richclient-demo-context-root/images/error.png
「OK」をクリックして、変更内容を保存し、ダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
タブ・プロパティを使用して、単一コンポーネントをタブの使用可能な表示領域に合せてストレッチできます。これを実行すると、タブに単一コンポーネントのみを表示できます。2番目のコンポーネントをタブ・リージョンに追加することはできません。
ページでタブ・コンテンツをストレッチするには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
ストレッチするコンポーネントを含むタブで「編集」アイコンをクリックします。
表示される「コンポーネント・プロパティ」ダイアログの「タブ」タブで、「コンテンツのストレッチ」チェック・ボックスをクリックします。
「OK」をクリックして、変更内容を保存し、ダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
タブを非表示にすることで、アクションからタブを除外できます。タブは、削除するよりは非表示にすることをお薦めします。タブを非表示にすれば、タブをビューに戻すことも可能なためです。非表示のタブは、タブ・プロパティにリストされるため、いつでもアクセスできます。
|
ヒント: タブ・セット内のすべてのタブを非表示にする場合は、ページ編集モードのソース・ビューでそれらのプロパティにアクセスできます(第18.2項「デザイン・ビューおよびソース・ビューの概要」を参照)。ソース・ビューで、タブの親要素の |
ページでタブを非表示または表示するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
対象のタブ・セット内のタブで「編集」アイコンをクリックします。
表示される「コンポーネント・プロパティ」ダイアログで、「タブ」タブを前面に表示し、「タブの順序変更」で関連するタブを選択してから、次のいずれかを実行します。
「このタブを非表示」チェック・ボックスを選択して、タブを非表示にします。
チェック・ボックスを選択解除して、非表示のタブを表示します。
「OK」をクリックして、変更内容を保存し、ダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
タブまたはタブ・セットを削除するには、いくつかのオプションがあります。ページ編集モードのソース・ビューやデザイン・ビュー、またはタブ・プロパティを使用するか、タブ自体でも実行できます。タブを削除すると、タブのコンテンツも削除されます。
|
注意: タブの削除が可能かどうかや、削除可能なタブの数は、
|
ページでタブまたはタブ・セットを削除するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
次のいずれかを実行して、関連するタブまたはタブ・セットを削除します。
タブ・セットを削除するには、ページ編集モードのソース・ビューに移動して、関連するpanelTabbed要素を選択し、「削除」をクリックします(図18-31)。
確認ダイアログで「削除」をクリックします。
1つまたは複数のタブを削除するには、ページ編集モードのデザイン・ビューに移動して、対象のタブ・セット内のいずれかのタブで「編集」アイコンをクリックし、「タブ」タブを前面に表示してから、「タブの順序変更」で削除するタブを選択して、「タブの削除」ボタンをクリックします(図18-32)。
確認ダイアログで「削除」をクリックします。
|
ヒント: ページ編集モードのソース・ビューで |
ページへのコンポーネントの追加方法は、リソース・カタログのすべてのコンポーネントに対する方法と同じです。ページ編集モードの次のいずれかのビューでページにコンポーネントを追加できます。
|
注意:
|
ページ編集モードのデザイン・ビューでリソース・カタログのコンポーネントを追加するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
ターゲット・リージョンで「コンテンツの追加」ボタン(図18-33)をクリックして、リソース・カタログを開きます。
追加するコンポーネントに移動して、その横にある「追加」リンクをクリックします(図18-34)。
コンテンツの追加を継続するか、「閉じる」をクリックしてカタログを終了します。
必要に応じて、新しく追加したコンポーネントをページの必要な場所にドラッグ・アンド・ドロップするか、コンポーネント上の「移動」アイコンを使用して再配置します。
|
ヒント: コンポーネントの周囲をドラッグすると、目的のドロップ位置が濃いボックスでマークされます。 |
「保存」→「閉じる」をクリックして、ページ編集モードを終了します。
ページ編集モードのソース・ビューでリソース・カタログのコンポーネントを追加するには、次の手順を実行します。
編集モードでページを開きます(第18.1項「コンポーザの開始および終了」を参照)。
「表示」メニューで、「ソース」を選択します。
ページ・コンポーネントのリストから、コンテンツを配置するコンポーネントを選択します。
|
ヒント: コンポーネントは、ページのWYSIWYGセクションでクリックして選択することもできます。選択したコンポーネントはアウトラインが青色で表示されます。 |
「コンテンツの追加」ボタンをクリックして、リソース・カタログを開きます(図18-35)。
追加するコンポーネントに移動して、その横にある「追加」リンクをクリックします(図18-36)。
コンテンツの追加を継続するか、「閉じる」をクリックしてカタログを終了します。
必要に応じて、新しく追加したコンポーネントをページの必要な場所にドラッグ・アンド・ドロップするか、コンポーネント上の「移動」アイコンを使用して再配置します。
|
ヒント: コンポーネントの周囲をドラッグすると、目的のドロップ位置が濃いボックスでマークされます。 |
リソース・カタログからページに追加可能なコンポーネントには、コンポーネントの外観および動作を制御する構成可能なプロパティがあります。使用可能なプロパティは、コンポーネントによって異なります。
この項では、ページ・コンポーネントでプロパティをカスタマイズおよび設定する方法について説明します。
コンポーネント・プロパティを使用して、コンポーネント・インスタンスの外観および動作を調整したり、コンポーネントを相互に結び付けたり、ページ・パラメータおよびページ定義変数に結び付けたりすることができます。
コンポーネントの「コンポーネント・プロパティ」ダイアログは次の複数のタブに分割されています。
パラメータ: コンポーネント・タイプに固有で、コンポーネント・コンテンツのソースなどを制御できる設定。第18.6.3項「コンポーネント・パラメータの使用」を参照してください。
表示オプション: コンテンツの方向の決定、ヘッダーの非表示および表示、アクション・メニューの表示方法の選択などの設定。第18.6.4項「コンポーネントの表示オプションの使用」を参照してください。
子コンポーネント: 親コンポーネントに含まれるすべてのコンポーネントのリスト。第18.6.5項「子コンポーネントの使用」を参照してください。
スタイル: 親コンポーネント、ページおよびアプリケーションの値をオーバーライドする、コンポーネントのフォント、色およびディメンションの設定。「スタイル」の値は、コンポーネントのコンテンツおよびそのコンテンツを取りまく要素に影響を与えます。ただし、この値は、コンポーネントの要素(スキンなど)がこれらの設定の変更をサポートするかどうかにより、公開される場合と公開されない場合があります。第18.6.6項「スタイル・プロパティおよびコンテンツ・スタイル・プロパティの使用」を参照してください。
コンテンツ・スタイル: コンポーネントのコンテンツで、「スタイル」に指定された値をオーバーライドするフォント、色およびディメンションの設定。これらの設定は、コンポーネントの要素(スキンなど)がこれらの設定の変更をサポートするかどうかによって、公開される場合と公開されない場合があります。第18.6.6項「スタイル・プロパティおよびコンテンツ・スタイル・プロパティの使用」を参照してください。
イベント: 現在選択されているコンポーネントで使用可能な、現在のページのすべてのコンポーネントを対象にしたコンテキスト・イベントおよびイベント・ハンドラ。イベントは現在のコンテキスト内で定義された発生事項で、イベント・ハンドラはその発生の結果を表示するエンジンです。第18.6.7項「コンポーネントのコンテキスト・イベントの使用」を参照してください。
この項では、任意のページ・コンポーネントでプロパティを設定する場合の一般的な手順の概要を示します。
|
関連項目: 特定のコンポーネントに関連付けられたプロパティの詳細は、該当するコンポーネントについて説明する項を参照してください。たとえば、ボックス・コンポーネントに関連付けられたプロパティの詳細は、第19.4.2項「ボックス・コンポーネントのプロパティの設定」を参照してください。 |
|
注意:
|
コンポーネントの「コンポーネント・プロパティ」ダイアログには、ページ編集モードのデザイン・ビューまたはソース・ビューのいずれかでアクセスできます。
デザイン・ビューでページのコンポーネントのプロパティを設定するには、次の手順を実行します。
対象のページに移動して、コンポーザでそのページを開きます。
|
ヒント: [Ctrl]+[Shift]+[E]を押して、ページを編集モード(コンポーザ)を開始することもできます。 |
対象のコンポーネントで「編集」アイコン(図18-37)をクリックして、「コンポーネント・プロパティ」ダイアログを開きます。
コンポーネント・プロパティを編集して、「OK」をクリックします。
コンポーネント・パラメータは、「コンポーネント・プロパティ」ダイアログの「パラメータ」タブに表示されます(図18-40)。
コンポーネント・パラメータは、コンポーネントごとに異なります。たとえば、一部のコンポーネントでは、タスク・フロー・コンテンツのソースおよび範囲を指定できるようになり、他のコンポーネントでは、タスク・フロー・インスタンスとそのカスタマイズとの関連付けの維持に使用される、アプリケーションで生成された読取り専用の識別子が提供されます。
パラメータ値を入力するか、パラメータ・フィールドの横にあるアイコンをクリックし、式エディタを選択して開きます(図18-41)。
このエディタでは、あるパラメータ値を現在のユーザー名または現在のアプリケーション・スキン名にする場合など、ある値が検出はできるものの不明な場合に式を入力する手段を提供します。
「コンポーネント・プロパティ」ダイアログの「表示オプション」タブでは、指定のコンポーネント・インスタンスの表示関連の動作範囲を制御するプロパティにアクセスできます(図18-42)。
たとえば、イメージ・ソースのURLおよびそのオプションのリンク・ターゲットを指定するには、イメージ・コンポーネントの表示オプションを使用します。ヘッダーを非表示または表示してそのヘッダーでメニューその他のオプションを有効または無効にするには、お知らせマネージャ・タスク・フローの表示オプションを使用します。
showDetailFrame(移動可能ボックス)コンポーネントには、「表示オプション」タブがあり、「基本」および「詳細設定」の2つのサブタブに分割されています。
これにより、表示オプションの長いリストを、より管理しやすく関連性のあるグループに分割できます。ページ編集モードのデザイン・ビューではわかりにくいですが、通常showDetailFrameコンポーネントは、様々なサービスによって指定されたタスク・フローをラップします。その結果、タスク・フローの表示オプション・プロパティおよびshowDetailFrameにラップされたその他のコンポーネントでは、「表示オプション」タブに「基本」および「詳細設定」のサブタブが存在します(図18-42を参照)。
showDetailFrameでラップされるもう1つの結果が、「表示オプション」タブのプロパティの共有です。showDetailFrameにラップされているタスク・フローおよびその他のコンポーネントでは、同じ表示オプション・プロパティを共有します。
「表示オプション」タブの多くのプロパティでは、テキスト文字列、式言語(EL)式などのカスタム値の入力に式エディタを使用できます。指定のプロパティの右側に表示されているメニュー・アイコンにより、式を取るプロパティを識別できます(図18-43)。
|
注意: 「コンポーネント・プロパティ」ダイアログの「表示オプション」タブで汎用の表示オプションについてELを入力すると、入力内容が自動的に検証されます。EL構文が無効な場合、エラーが表示され、値は適用も保存もされません。汎用の表示オプションとは、表18-1に掲載されているオプションです。SpacesアプリケーションのELの詳細は、付録B「式言語(EL)式」を参照してください。 汎用以外の表示オプションには、ELの検証は行われません。 |
通常、「表示オプション」タブには、コンポーネント・コンテンツを囲む表示要素(つまり、クロム)に影響を与える設定が表示されています。クロムには、ヘッダー、「アクション」メニュー、「展開」アイコン、「縮小」アイコンなどが含まれます。
表18-1は、通常、ほとんどのコンポーネントに適用される「表示オプション」プロパティをリストして説明しています。バリエーションがある場合は、特定のコンポーネントについて説明する章で説明しています。
表18-1 表示オプション・プロパティ
「コンポーネント・プロパティ」ダイアログの「子コンポーネント」タブ(図18-44)には、現在の(親)コンポーネント内に含まれるコンポーネントの非表示、表示および再配置を行うためのコントロールが提供されています。
「子コンポーネント」タブを使用して行う変更は、コンポーネント・インスタンスのすべてのユーザーのビューに影響を与えるカスタマイズとなります。
この項では、「子コンポーネント」タブでのコントロールの使用方法について説明します。この項の内容は次のとおりです。
非表示は、コンポーネント・インスタンスを一般のビューからは外すもののページ上にその存在を維持する場合に役に立ちます。「コンポーネント・プロパティ」ダイアログを使用して子コンポーネントを非表示にすると、ページのすべてのユーザーのビューで非表示になります。コンポーネント・インスタンスを表示する用意ができている場合、表示するには、「子コンポーネント」タブを使用して表示するコンポーネントを再選択するのみです。
子コンポーネントを非表示または表示するには、次の手順を実行します。
「子コンポーネント」タブで、次のいずれかを実行します。
非表示にする任意のコンポーネントの左側にあるチェック・ボックスを選択解除します。
表示する任意のコンポーネントの左側にあるチェック・ボックスを選択します。
「OK」をクリックしてダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
「子コンポーネント」タブでは、ボックス・コンポーネントなど、特定のコンテナ内でコンテンツを再配置する、便利で効率的な方法が提供されています。「コンポーネント・プロパティ」ダイアログを使用して子コンポーネントを再配置すると、ページのすべてのユーザーのビューでも再配置されます。
|
ヒント: すべてのユーザーのビューに影響を与える方法でページ・コンポーネントを再配置するには、コンポーザでコンポーネントをドラッグ・アンド・ドロップする方法もあります。 |
|
注意: ボックス・コントロールを使用してボックスを分割すると、「子コンポーネント」タブの「コンポーネント・プロパティ」ダイアログで再配置機能が無効化されます。そのようなボックスでも、ページ自体でドラッグ・アンド・ドロップすることでコンテンツを再配置できます。 |
子コンポーネントを再配置するには、次の手順を実行します。
「子コンポーネント」タブで、移動するコンポーネントの横にある上矢印または下矢印をその移動場所に応じてクリックします。
|
ヒント: 子コンポーネントを移動する方向は、その親コンテナの向きによって異なります。たとえば、コンテナの向きが垂直の場合は、子コンポーネントは上に移動(上矢印)するか、下に移動(下矢印)します。コンテナの向きが水平の場合は、子コンポーネントは右に移動(上矢印)するか、左に移動(下矢印)します。 |
「OK」をクリックしてダイアログを終了します。
「保存」、「閉じる」の順にクリックして、Composerを終了します。
「コンポーネント・プロパティ」ダイアログで使用可能な「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティでは、アプリケーションのルック・アンド・フィールをコンポーネント・レベルで最適に調整できます。「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティの値を入力するか、両方のタブに表示されているOther CSSプロパティを使用して独自の値を指定します。指定した設定は、コンポーネントのコンテンツおよびそのコンテンツを取りまく要素に影響を与えます。ただし、コンポーネントの要素(スキンなど)がこれらの設定の変更をサポートするかどうかにより、公開される場合と公開されない場合があります。
この項では、「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティの概要を示し、表でそれらをリストして説明します。また、ここでは、「その他のCSS」プロパティの使用方法についても説明します。この項の内容は次のとおりです。
コンポーネントの「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティを使用して、選択したコンポーネント・インスタンスの色、スタイルおよび余白の設定を指定します。
コンポーネントの「スタイル」の設定は、コンポーネントの親コンテナ、ページ、アプリケーションなどの上位階層コンポーネントのスタイル設定をオーバーライドします。「コンテンツ・スタイル」設定は、「スタイル」設定をオーバーライドします。たとえば、移動可能ボックス・コンポーネントで、「スタイル」設定によって移動可能ボックスのルック・アンド・フィールを制御するとします。ここで、「コンテンツ・スタイル」設定が設定されると、この設定によって移動可能ボックス内に含まれるコンポーネントのルック・アンド・フィールが制御されます。このルック・アンド・フィールは、個々のコンポーネントに設定されているスタイル設定によってオーバーライドされる場合もあります。
ただし、コンテナ内のコンポーネントがそのコンポーネント独自のコンテンツ・スタイル・プロパティ以外の手段でコンテナのコンテンツ・スタイル・プロパティをオーバーライドした場合は、移動可能ボックスなどのコンテナに設定されているコンテンツ・スタイル・プロパティが有効にならない場合があることに注意してください。たとえば、タスク・フローの背景色が設計時にコンテナから継承するように設定されずに、ハードコードされた値で設定された場合には、タスク・フローを含む移動可能ボックスに設定されている背景色が有効にならない可能性があります。
表18-2は、共通コンポーネントの「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティをリストして説明しています。
表18-2 「スタイル」プロパティおよび「コンテンツ・スタイル」プロパティ
| プロパティ | 説明 |
|---|---|
|
コンポーネントの背景色を選択します。 「コンテンツ・スタイル」の背景色を指定した場合は、「スタイル」プロパティに指定した背景色は適用されません。 |
|
|
コンポーネントの背景にレンダリングするイメージのURLを入力します。標準のCSS構文を使用します。例:
|
|
|
コンポーネント・インスタンスに含まれる任意のテキストのデフォルトの色を選択します。たとえば、テキスト・コンポーネントをボックス・コンポーネントに追加したとします。ボックスの「スタイル」プロパティを設定すると、テキスト・コンポーネントの「色」の値を定義しないかぎり、ボックスに適用するデフォルトのテキストの色もテキスト・コンポーネントに自動的に適用されます。 次のいずれかの手法を使用して色を選択します。
|
|
|
コンポーネント・ヘッダーに表示されるテキストに使用するフォントを指定します。 1つまたは複数のフォントを入力します。 |
|
|
ブラウザのデフォルトのフォント・サイズまたは親要素のフォント・サイズのいずれかに相対するコンポーネント・テキストのサイズを入力します。次のいずれかのタイプの値を入力します。
|
|
|
コンポーネント・フォントのスタイルを選択します。次のいずれかを選択します。
ここで選択するフォント・スタイルは、コンポーネント内の任意のテキストに適用されます。 |
|
|
コンポーネント・コンテンツの高さを指定します。 コンポーネント・コンテンツの固定の高さを設定します。任意の標準的なCSS測定単位( Heightの値を割合で表示しないでください。ブラウザ間およびレイアウト・コンテナ間で違いがあるため、割合が予測したとおりに機能しません。コンポーネントでページの100%を占有する必要がある場合は、ストレッチ・ページ・スタイルを使用してページを作成し、コンポーネントをそのページに追加することを検討してください(詳細は、第15.1項「ページ・スタイルの基本」を参照してください)。 Heightプロパティでは、「表示オプション」タブで使用可能な |
|
|
コンポーネントの周囲に引く空白の境界を指定します。次のいずれかのタイプの値を入力します。
|
|
|
コンポーネントの追加のCSSを指定します。 他の「スタイル」プロパティまたは「コンテンツ・スタイル」スタイル・プロパティで扱われない必要なその他のCSSエンコーディングを追加します。この値を有効にするには、標準のCSS構文を使用する必要があります(Other CSSの詳細は、第18.6.6.3項「その他のCSSの入力」を参照してください)。 たとえば、 ここの説明と |
|
|
CSSスタイル・クラスをこのコンポーネントに使用するように指定します。たとえば、このプロパティを使用して、個々のボックス・コンポーネントの特定のスキン設定をターゲット指定できます。 スタイル・クラスは、jspxまたはスキニングCSSファイルで定義されます。 注意: スタイル・クラスは、スタイルをまとめたセットで、名前が指定されています。これに対し、 このプロパティは、「スタイル」タブにのみ表示されます。 |
|
|
コンポーネント・コンテンツの幅を指定します。 コンポーネント・コンテンツの固定の幅を設定します。任意の標準的な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つのブラウザに固有であり、別のブラウザでは適切に動作しない可能性があります。
表18-3には、Other CSSフィールドで使用可能なCSSの例がいくつか示されています。
表18-3 Other CSSの値の例
| 値 | 説明および例 |
|---|---|
|
背景イメージを繰り返すかどうかおよびその繰返し方法を指定します。値は、 例: background-repeat: repeat
|
|
|
背景イメージの開始位置を設定します。値は、 例: background-position: top left 前述の場合を除いて、1つの値のみを指定する場合、2番目の値はデフォルトの 値ペアの最初のセットは、水平および垂直の位置を表します。
値ペアの2番目のセットは、水平位置および垂直位置を割合または測定単位のいずれかで表します。
割合(%)と位置は混在させることもできます。 |
|
|
ブラウザのデフォルトのフォント・サイズまたは親要素のフォント・サイズのいずれかに相対するコンポーネント・テキストのサイズを入力します。値は、 例: font-size: xx-small
|
|
|
1つの式でコンポーネントの周囲にある空白(または空きスペース)を設定するための集合的なプロパティです。最大で4つの値を入力できます。 例: padding: 5px 10px 5px 10px 詳細は次のとおりです。
任意の標準的なCSS測定単位(pt、px、pc、li、%など)を使用します。 |
|
|
要素の下側に空白(または空きスペース)を設定します。特定の長さまたは最も近い要素の割合で値を表します。例: padding-bottom: 10px |
|
|
要素の左側に空白(または空きスペース)を設定します。特定の長さまたは最も近い要素の割合で値を表します。例: padding-left: 2% |
|
|
要素の右側に空白(または空きスペース)を設定します。特定の長さまたは最も近い要素の割合で値を表します。例: padding-right: 1pc |
|
|
要素の上側に空白(または空きスペース)を設定します。特定の長さまたは最も近い要素の割合で値を表します。例: padding-top: 16pt |
「その他のCSS」プロパティの応用の1つとして、タスク・フロー、ポートレットおよび一部のコンポーネントへの様々な枠線の提供があります。
たとえば、図18-45には、枠線のない「最近のアクティビティ」タスク・フローが示されています。
タスク・フローの周囲に枠線を作成するには、そのプロパティ(詳細は、第18.6.2項「コンポーネントのプロパティの設定」を参照)にアクセスし、CSSエンコーディングを追加します。たとえば、「コンポーネント・プロパティ」ダイアログの「スタイル」タブにある「その他のCSS」フィールドに次のコードを入力します。
例18-1 枠線を作成するためのその他のCSS
border-bottom-width:4px; border-bottom-color:red; border-bottom-style:dashed; border-top-width:4px; border-top-color:red; border-top-style:dashed; border-left-width:4px; border-left-color:red; border-left-style:dashed; border-right-width:4px; border-right-color:red; border-right-style:dashed;
図18-46はその結果を示します。
イベントは、現在のコンテキスト内で定義された発生事項です。イベント・ハンドラは、その発生の結果を表示するエンジンです。
たとえば、2つのコンポーネントがあり、1つがなんらかのコンテンツのプロデューサ(ペイロード)で、もう1つがそのコンテンツを使用するコンポーネントであるとします。これらのコンポーネントを相互に結び付けた場合は、イベントの使用により、プロデューサでイベントがトリガーされたら、プロデューサがpayLoadパラメータを持つコンテキスト・イベントをブロードキャストし、これをコンシューマ・コンポーネントがイベント・ハンドラを介して使用するするように指定できます。
「コンポーネント・プロパティ」ダイアログの「イベント」タブでは、コンテキスト・イベントをアクション・ハンドラに結び付けて、プロデューサでのイベントのトリガー時に、プロデューサ・コンポーネントからコンシューマ・コンポーネントに値を受け渡すことができます(図18-47)。
|
注意: コンテキスト・イベントは、ADFビジネス・コンポーネントで生成可能なビジネス・イベントとは異なります。また、コンテキスト・イベントは、UIコンポーネントで生成されるイベントとも異なります。コンテキスト・イベントは、UIイベントとの関連付けに使用できます。この場合、UIイベントにより起動されるアクション・リスナーが、メソッド・アクション・バインディングを起動し、これによりイベントを生成できます。 |
|
関連項目: ビジネス・イベントの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』を参照してください。 |
すべてのコンポーネントでコンテキスト・イベントをサポートするわけではありません。これは、すべてのコンポーネントがこれらを組み込むように作成されたわけではないためです。したがって、「イベント」タブは、コンポーネントによって表示されない場合があります。実行時に使用可能なイベントでは、コンポーネントの開発時にイベント機能をコンポーネントに組み込む必要があります。
表18-4は、「イベント」タブに表示されるプロパティをリストし、それらについて説明しています。
表18-4 「イベント」タブのプロパティ
| プロパティ | 説明 |
|---|---|
|
現在のページのコンポーネントに関連付けられたすべてのコンテキスト・イベントのリスト イベントには、値の受渡しなど、別のアクションをトリガーするアクションのタイプが記述されています。「イベント」ペインにリストされているイベントは、コンポーネントの作成時にコンポーネントに組み込まれたものです。すべてのコンポーネントがイベントを組み込むわけではないため、コンポーネントによっては、初めから他のコンポーネントに結び付けられないものも存在します。 |
|
|
選択したコンシューマ・コンポーネントに関連付けられたアクション・ハンドラのリスト 「アクション」ペインにリストされるアクションは、選択されたコンシューマ・コンポーネントによって異なります。アクションにより、イベントをイベント・ハンドラに関連付けることで、イベント発生のトリガー時のアクションを指定できます。「アクション」ペインにリストされているアクションは、コンポーネントの作成時にコンポーネントに組み込まれたものです。 |
|
|
選択したイベントおよびアクションを有効または無効にするチェック・ボックス このチェック・ボックスを選択すると、選択したアクション・ハンドラのパラメータのリストが表示されます。 |
|
|
イベントが発生するたびにプロデューサ・コンポーネントからコンシューマ・コンポーネントにペイロードを配信するために使用する値を入力するフィールド パラメータ値を入力するか、パラメータ・フィールドの横にある「編集」アイコンをクリックして式エディタを開きます。詳細は、第B.1項「式ビルダーの紹介」を参照してください。 パラメータ・フィールドは、 |
コンポーネントの結付けの詳細は、第22章「ページ、タスク・フロー、ポートレットおよびUIコンポーネントの結付け」を参照してください。
コンポーネントを削除するコントロールは、コンポーザのデザイン・ビューのコンポーネントそのもの、およびソース・ビューの階層リスト・ペインのヘッダーに配置されています。この項では、デザイン・ビューおよびソース・ビューでのコンポーネントの削除方法について説明します。
デザイン・ビューでコンポーネントを削除するには、次の手順を実行します。
コンポーネントを削除するページに移動して、コンポーザで開きます。
|
ヒント: [Ctrl]+[Shift]+[E]を押して、ページを編集モードを開始することもできます。 |
必要に応じて、「表示」メニューをクリックし、「デザイン」を選択します。
コンポーネント・ヘッダーか、またはヘッダーが非表示の場合はコンポーネントのフローティング・パレットで「削除」アイコンをクリックします(図18-48)。
表示される確認ダイアログで、「削除」ボタンをクリックします。
ページからコンポーネントが完全に削除されます。コンポーネントに子コンポーネントが含まれていた場合は、その子コンポーネントも削除されます。
