ページでのWeb開発コンポーネントの使用

Web開発コンポーネントについて

Web開発コンポーネントでは、イメージ、HTML、リンクなどの動的コンテンツに加え、言語の選択や独自のコンテンツの追加領域など、エンド・ユーザーが実行時に変更可能なコンポーネントもページに追加します。これらのコンポーネントを使用すると、企業ブランドの強化(イメージ)、ミッション・ステートメントの提供(テキスト)、関連情報へのユーザーの誘導(リンクおよびハイパーリンク)、およびユーザーがコンテンツを追加または使用する領域の提供(ボックス)が可能です。

ノート:

テキストおよびイメージ・コンポーネントは、「コンテンツ管理」フォルダの下のデフォルトのリソース・カタログ内にあります。テキストまたはイメージ・コンポーネントのページ・スタイルまたはページへの追加方法の詳細は、「ページ・スタイルまたはページへのテキスト・コンポーネントの追加」および「ページ・スタイルまたはページへのイメージ・コンポーネントの追加」を参照してください。

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

Web開発コンポーネントをページに追加するプロセスは、「ページへのコンポーネントの追加」の説明のとおり、リソース・カタログ・コンポーネントでのプロセスと同じです。

Webデプロイメント・コンポーネントをページに追加するには:

ページ・エディタのリソース・カタログで、「Web開発」の横にある「開く」リンクをクリックして、Web開発コンポーネントの選択内容を表示します。

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

「図11-1 リソース・カタログのWeb開発コンポーネント」の説明
ページを追加するコンポーネントの横にある「追加」をクリックします。
新しいコンポーネントのプロパティを設定します。

ヒント:

一部のコンポーネントはページ・インフラストラクチャの一部として提供されており、リソース・カタログで明確に公開されているとはかぎりません。この例では、spacerコンポーネントが該当します。ページにこれ以上の追加はできないものの、プロパティの構成は可能です。詳細は、「レイアウト・コンポーネントの使用」を参照してください。

ボックス・コンポーネントの使用

ボックス・コンポーネントは、ページ上で他のコンポーネントの配置に使用可能なコンテンツ領域です。これと比較される移動可能ボックスとは異なり、ボックスは、アプリケーションの実行時にページ上での移動ができません。ボックス・コンポーネントは、ページに追加するタスク・フロー、ポートレットその他のコンポーネントを配置する場所となります。

ページ・エディタでは、ボックスは単に破線で構成された四角形としてレンダリングされ、ここでユーザーは「コンテンツの追加」をクリックしてリソース・カタログを開き、コンポーネントを追加できます。

図11-2 移動可能ボックス・コンポーネントの上のボックス・コンポーネント

「図11-2 移動可能ボックス・コンポーネントの上のボックス・コンポーネント」の説明

言語の変更コンポーネントの使用

言語の変更タスク・フローを任意のページ(ホーム・ポータルのページ、ポータルのページ、またはビジネス・ロール・ページ)に追加することで、UIを表示する際の言語をユーザーが選択できるようになります。

詳細は、「「言語の変更」タスク・フローのページへの追加」を参照してください。

HTMLマークアップ・コンポーネントの使用

この項では、HTMLマークアップ・コンポーネントの概要を示し、その関連プロパティをリストして説明します。また、ここでは、YouTubeのビデオをページに埋め込む場合の使用例を示します。

この項では、次の内容について説明します。

HTMLマークアップ・コンポーネントについて

HTMLマークアップ・コンポーネントは、HTMLの<script>タグに埋め込まれたJavaScriptなど、RAWテキストやHTMLタグを入力するためのシンプルなエディタです。

図11-3 HTMLマークアップ・コンポーネント

「図11-3 HTMLマークアップ・コンポーネント」の説明

エディタのコンポーネント・プロパティを使用してマークアップを次のように入力します。

適切なHTMLマークアップでJavaScriptを囲みます。HTMLは、有効なXHTMLである必要があります。

たとえば:
```
<script type="text/javascript">
   document.write("Welcome to the club");
</script>
```
XHTML以外を入力する場合は、適切にカッコで囲む(つまり、CDATAで囲む)必要があります。たとえば、<![CDATA[non-conforming HTML]]>のようにします。
JavaScriptは、完全なURLページのリクエストによってページがレンダリングされる場合にのみ実行されます。ポータルのタブからページに移動した場合は、JavaScriptは実行されません。この制限を回避するには、JavaScriptをそのロード時に実行するようにページ・スタイルを作成します。

警告:

このコンポーネントは、適切に使用しないとページを壊す可能性があるため、慎重に使用する必要があります。エラーの解決が必要な場合は、ログアウトしてもう一度ログインし、ページ・エディタをリセットできます。

エディタのヘッダーはページ・エディタでは表示されますが、ページ・ビュー・モードでは表示されません。これにより、Welcome #{securityContext.userName}!などの個別化されたメッセージは、コンポーネント・ヘッダーでメッセージが乱雑になることなく、ページ上に配置できます。

ヒント:

#{securityContext.userName}などのEL式を入力する場合、出力はその式の値となります。この場合では現在のユーザー名となります。

HTMLマークアップ・コンポーネントのプロパティの設定

HTMLマークアップ・コンポーネントで「表示オプション」および「スタイル」プロパティを設定できます。

HTMLマークアップ・コンポーネントのプロパティを設定するには:

ページ・エディタでページを開きます。
HTMLマークアップ・コンポーネント・ツールバーで「アクション・メニューの表示」をクリックして、設定するプロパティを選択します。
- 「表示オプション」プロパティ。
- 「スタイル」プロパティは、他の多くのコンポーネントに共通しています。表10-2を参照してください。ここで設定するスタイルは、コンポーネントの外観を制御する他のスタイルをオーバーライドします。これには、コンポーネントの親コンテナ、現在のページおよびポータル・スキンで設定されているスタイルが含まれます。
変更を保存します。

HTMLマークアップ・コンポーネントの表示オプション

次の表は、HTMLマークアップ・コンポーネントの表示オプションをリストして説明しています。

表11-1 HTMLマークアップ・コンポーネントの表示オプション

プロパティ	説明
`Escape`	特殊文字のリテラル評価を有効または無効にするチェック・ボックス。このプロパティを使用すると、出力が安全または非安全になります。安全は、`<script>`などの任意のタグが`<script>`にエスケープされるため、実行されないことを意味します。非安全は、`value`に入力した値は、それが必要のない値でもすべてページに入力されることを意味します。選択した場合(`true`)、山カッコ(<\|>)やHTML特殊文字などの文字のリテラル評価が有効化されます。たとえば、ユーザーが—と入力すると、—とレンダリングされます。選択解除した場合(`false`)、特殊文字のリテラル解釈が無効になります。たとえば、ユーザーが—と入力すると、—とレンダリングされます。falseがデフォルト値です。
`No Wrap`	テキストの折返しを有効または無効にするチェック・ボックス。選択した場合(`true`)、テキストの折返しが無効になります。ユーザーは、手動で改行を入力する必要があります。選択解除した場合(`false`)、テキストの折返しが有効になります。コンポーネントの幅に応じて行が折り返されます。falseがデフォルト値です。
`Short Desc`	HTMLマークアップ・コンポーネントのツールチップ・テキストを入力するフィールド。コンポーネント上にマウス・ポインタを置くと、そのテキストがツールチップとして表示されます。
`Value`	このコンポーネントでレンダリングするコンテンツを指定するフィールド。テキストに加えて、このプロパティでは、JavaScript、式言語(EL)式およびHTMLを使用して、ビデオ、音楽、Googleガジェット、およびその他の種類のコンテンツをアプリケーション・ページに公開することもできます。たとえば: <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/cAYw2zcSIPw?fs=1&hl=en_US" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/v/cAYw2zcSIPw?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" /> </object> 変更を保存して、ページ・エディタを閉じると、HTMLマークアップ・コンポーネントには評価されたマークアップの値が表示されます。

ハイパーリンク・コンポーネントの使用

この項では、ハイパーリンク・コンポーネントの概要を示し、その固有のプロパティをリストして説明します。次のサブセクションが含まれます:

ハイパーリンク・コンポーネントについて

ハイパーリンク・コンポーネントを使用してページにリンクを追加します。ハイパーリンクは、アプリケーションの内部または外部のいずれかの場所を指すことができます。

ハイパーリンク・コンポーネントは、リンク・テキストおよびリンクURLの2つの要素で構成され、両方ともコンポーネント・プロパティを使用して追加します。

図11-4 ハイパーリンク・コンポーネント

「図11-4 ハイパーリンク・コンポーネント」の説明

ハイパーリンクは、内部および外部のリンク・ターゲットを取ることができます。内部ターゲットの場合は、相対ディレクトリ・パスを使用できます。外部ターゲット(ポータル外部のターゲット)の場合は、常に完全なURLを使用します。

ノート:

ノート: WebCenter Portalが外部URLを有効と判断するには、システム管理者がそのURLをvalid-link-url.xmlファイルの有効なURLのリストに追加する必要があります。『Oracle WebCenter Portalの管理』の有効な外部URLのリストの追加に関する項を参照してください。このファイルに外部URLがリストされていない場合は、次のエラー・メッセージが表示されます。

入力したURLが、有効なURLのリストにありません。有効なURLのリストについては、システム管理者に連絡してください。

ヒント:

ポータル・ページの相対ディレクトリ・パスを簡単に取得するには、ターゲット・ページに移動し、そのページをお気に入りに追加する一連の動作を行います。デフォルトでは、「お気に入りの追加」ダイアログに現在のページの相対URLが指定されています。この情報をそのままコピーして、ハイパーリンク・ターゲットの定義に使用します。ポータルにお気に入りを追加する処理の詳細は、『Oracle WebCenter Portalでのポータルの使用』の「お気に入りの管理」を参照してください。

ポータル・ページへのダイレクトURLを簡単に取得するには、そのページ情報設定にアクセスします。詳細は、「ページ設定の表示および変更」を参照してください。

ハイパーリンク・コンポーネントのプロパティの設定

ハイパーリンク・コンポーネントで「表示オプション」および「スタイル」プロパティを設定できます。

ハイパーリンク・コンポーネントのプロパティを設定するには:

ページ・エディタでページを開きます(「ページ・エディタでのページのオープン」を参照)。
ハイパーリンク・コンポーネント・ツールバーで「アクション・メニューの表示」をクリックして、設定するプロパティを選択します。
- 「表示オプション」プロパティは、「ハイパーリンク・コンポーネントの表示オプション」で説明しています。
- 「スタイル」プロパティは、表10-2に示すように、その他の多くのコンポーネントと共通です。ここで設定するスタイルは、コンポーネントの外観を制御する他のスタイルをオーバーライドします。これには、コンポーネントの親コンテナ、現在のページおよびポータル・スキンで設定されているスタイルが含まれます。
変更を保存します。

ハイパーリンク・コンポーネントの表示オプション

次の表は、ハイパーリンク・コンポーネントの表示オプションをリストして説明しています。

表11-2 ハイパーリンク・コンポーネントの表示オプション

プロパティ	説明
`Title`	ハイパーリンク・テキストを指定するフィールド。リンク・テキストとして使用する単語またはフレーズを入力します。
`Destination`	ハイパーリンクのターゲットURLを入力するフィールド。リンクするページのWebアドレスを入力します。
`新規ウィンドウで開く`	リンク・ターゲットのオープン動作を決定するオプション。選択すると、リンク・ターゲットを新しいブラウザ・タブまたはウィンドウで開きます。選択解除すると、リンク・ターゲットを現在のブラウザ・タブまたはウィンドウで開きます。
`Show Component`	選択して(デフォルト)、ページにコンポーネントを表示します。選択を解除すると、コンポーネントはビューから非表示になります。

リンク・コンポーネントの使用

この項では、リンク・コンポーネントに関する情報、その設定方法およびそのプロパティの構成方法について説明します。次のサブセクションが含まれます:

リンク・コンポーネントについて

ページにリンク・コンポーネントを追加するには、リソース・カタログで「Web開発」の横にある「開く」リンクをクリックして、Web開発コンポーネントの選択内容を表示します。リンク・コンポーネントの横にある「追加」をクリックします。

リンク・コンポーネントを使用して、ナビゲーション・インスタンスをページに追加します。リンク・コンポーネントのナビゲーションには、ページ、外部Webサイトおよびポータル・コンテンツへのリンクを含めることができます。リンク・ターゲットを特定するプロセスを単純化するには、参照機能を使用できます。ファイルなどのアプリケーション・オブジェクトを特定する際の支援には、拡張検索機能も使用できます。

リンク・コンポーネントにより、規定された構造のポータル・ナビゲーション外で、ナビゲーション・リンクをページに追加できます。

図11-5 リンク・コンポーネント

「図11-5 リンク・コンポーネント」の説明

リンク・コンポーネントは、その配置されるページまたはテンプレートに関連付けられています。リンク・コンポーネントをページに置いていくつかのリンクを追加すると、それらのリンクはそのページに関連付けられます。つまり、リンク・コンポーネントのライフサイクルは、それが配置されるページまたはテンプレートに準じます。たとえば:

リンクを含むページをコピーすると、そのリンクもすべてコピーされ、そのページ・コピーは独自のリンク・セットを所有することになります。元のページのリンクを変更しても、ページ・コピーへの影響はありません。ページ・テンプレートのリンクについても同様です。
ページが削除されると、そのページに関連付けられたリンクもすべて削除されます。ページ・テンプレートのリンクについても同様です。
ポータル・テンプレートにリンク付きのページが含まれる場合、そのテンプレートに基づいて新しいポータルを作成すると、事実上テンプレートのクローンが作成されます。これによって、新しいポータルには独自のリンク・セットが含まれるようになり、ポータル内でこれらのリンクを変更できます。
ポータルをエクスポートまたはインポートすると、ポータル・ページに関連付けられているリンクもすべてエクスポートまたはインポートされます。

各リンクで指定のリンクのプロパティを構成したり、リンクを削除したりするコントロールもあります。

図11-6 個々のリンクのコントロール

「図11-6 個々のリンクのコントロール」の説明

リンク・コンポーネントの「リンクの追加」、「リンクの編集」および「リンクの削除」アクションは、ページ・ビュー・モードでのみ使用できます。Edit Page権限を持つユーザーは、リンクを追加、変更または削除できます。Edit Page権限を持たないユーザーは、追加されたナビゲーション・リンクを表示できますが、これらを追加、変更または削除できません。

リンク・コンポーネントのプロパティでは、リンク・コンポーネント・インスタンスの動作とルック・アンド・フィールを制御できます。

警告:

リンク・コンポーネントのNavigationおよびStart Pathの各パラメータは事前定義されており、変更はしないでください。これらのパラメータを変更すると、ページが壊れる可能性があります。

リンク・コンポーネントを使用したナビゲーション・リンクの追加

リンク・コンポーネントを使用してポータル・ナビゲーション・リンクを追加するには:

「リンクの追加」メニューをクリックして、次のリンク・タイプを選択します。
- ページ・リンク—アプリケーション・ページをターゲットにするリンクを追加します。
- 外部リンク—アプリケーションの外部にあるサイトをターゲットにするリンクを追加します。
- コンテンツ・リンク—コンテンツ・リポジトリのドキュメントをターゲットにするリンクを追加します。

ページ・リンクを追加するには:

「ページ・リンク」をクリックして、「新規ページ・リンク」ダイアログを開きます。

図11-7 「新規ページ・リンク」ダイアログ

「図11-7 「新規ページ・リンク」ダイアログ」の説明
「名前」フィールドに、リンクの表示名を入力します。
「パス」の場合は、「検索」アイコンをクリックして、「ページの選択」ダイアログを開きます。

図11-8 「ページの選択」ダイアログ

「図11-8 「ページの選択」ダイアログ」の説明
指定のオプションからページを選択するか、「検索」をクリックして、使用可能なページのリストでページを特定します。

ヒント:

ホーム・ポータルでは、ホーム・ポータルのビューで使用可能なページから選択できます。その他のポータルでは、現在のポータルの範囲内で使用可能なページから選択できます。
「選択」をクリックします。
「OK」をクリックします。

外部リンクを追加するには:

「外部リンク」を選択して、「新規外部リンク」ダイアログを開きます。

図11-9 「新規外部リンク」ダイアログ

「図11-9 「新規外部リンク」ダイアログ」の説明
「名前」フィールドに、リンクの表示名を入力します。
「URL」フィールドに、リンク・ターゲットのURLを入力します。たとえば:
```
http://www.mywebdestination.com
```
ノート: WebCenter Portalが外部URLを有効と判断するには、システム管理者がそのURLをvalid-link-url.xmlファイルの有効なURLのリストに追加する必要があります。『Oracle WebCenter Portalの管理』の有効な外部URLのリストの追加に関する項を参照してください。このファイルに外部URLがリストされていない場合は、次のエラー・メッセージが表示されます。

入力したURLが、有効なURLのリストにありません。有効なURLのリストについては、システム管理者に連絡してください。
現在のページ・テンプレートのコンテキスト内にあるリンク・ターゲット・コンテンツを表示するには、「ページ・テンプレートでのレンダリング」を選択します。

このチェック・ボックスを選択解除すると、現在のページがリンク・ターゲットにリダイレクトされます。
「OK」をクリックします。

コンテンツ・リンクを追加するには:

「コンテンツ・リンク」を選択して、「新規コンテンツ・リンク」ダイアログを開きます。

図11-10 「新規コンテンツ・リンク」ダイアログ

「図11-10 「新規コンテンツ・リンク」ダイアログ」の説明
「名前」フィールドに、リンクの表示名を入力します。
「パス」の場合は、「検索」アイコンをクリックして、「ドキュメントの選択」ダイアログを開きます。

必要に応じて、リンク・ターゲットを検索します。より詳細な検索を行う場合は、「詳細設定」をクリックします。詳細は、「コンテンツ・リンクの拡張検索の構成」を参照してください

図11-11 「ドキュメントの選択」ダイアログ

「図11-11 「ドキュメントの選択」ダイアログ」の説明
「選択」をクリックします。
「OK」をクリックし、「新規コンテンツ・リンク」ダイアログを閉じます。

コンテンツ・リンクの拡張検索の構成

リンク・コンポーネントの拡張検索機能には、コンテンツ・リンクの検索に追加の検索条件およびフィルタを指定するコントロールが用意されています。「ドキュメントの選択」ダイアログ(図11-11)で、「詳細設定」をクリックして、「拡張検索」ダイアログ(図11-12)を開きます。

図11-12 「拡張検索」ダイアログ

「図11-12 「拡張検索」ダイアログ」の説明

リンク・コンポーネントでのリンクの構成

ページの編集権限を持つユーザーは、リンクをページに構成して、そのリンクの名前およびターゲットを変更できます。リンクの右側に「構成」アイコンが表示されている場合は、リンクの構成権限が付与されています(図11-13)。

図11-13 リンクの「構成」アイコン

「図11-13 リンクの「構成」アイコン」の説明

リンクを構成するには:

リンク・コンポーネントで、「構成」アイコンをクリックして、「typeリンクの編集」ダイアログを開きます(図11-14)。

図11-14 「外部リンクの編集」ダイアログ

「図11-14 「外部リンクの編集」ダイアログ」の説明
必要に応じて値を変更します。

ノート:

各種のリンク・タイプには様々なフィールドが表示されており、異なる値が必要です。

typeリンクの編集のフィールドで必要な値の詳細は、「リンク・コンポーネントを使用したナビゲーション・リンクの追加」を参照してください。
「OK」をクリックします。

ナビゲーション・リンクの再順序付け

ページ・エディタで、またはページを表示している際に、リンク・コンポーネントでナビゲーション・リンクを再順序付けするには:

リンクをクリックしたままにします。
リンクをリスト内の新しい位置にドラッグします。
リンクを放します。

リンク・コンポーネントからのリンクの削除

権限を持つユーザーは、指定のリンクの削除コントロールにアクセスして、リンク・コンポーネントからリンクを削除できます。各リンクの右側に「削除」アイコンが表示されている場合は、リンクを削除する権限が付与されています。

図11-15 リンクの「削除」アイコン

「図11-15 リンクの「削除」アイコン」の説明

リンク・コンポーネントからリンクを削除するには:

リンク・コンポーネントで、対象のリンクの横にある「削除」アイコンをクリックします。
確認ダイアログで「削除」をクリックします。

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

リンク・コンポーネントで「表示オプション」および「スタイル」プロパティを設定できます。

リンク・コンポーネントのプロパティを設定するには:

ページ・エディタでページを開きます(「ページ・エディタでのページのオープン」を参照)。
リンク・コンポーネント・ツールバーで「アクション・メニューの表示」をクリックして、設定するプロパティを選択します。
- 「表示オプション」プロパティは、表10-1に示すように、その他の多くのコンポーネントと共通です。
- 「スタイル」プロパティは、表10-2に示すように、その他の多くのコンポーネントと共通です。ここで設定するスタイルは、コンポーネントの外観を制御する他のスタイルをオーバーライドします。これには、コンポーネントの親コンテナ、現在のページおよびポータル・スキンで設定されているスタイルが含まれます。
変更を保存します。

移動可能ボックス・コンポーネントの使用

この項では、移動可能ボックスの概要を示します。次のサブセクションが含まれます:

移動可能ボックス・コンポーネントについて

ページに移動可能ボックス・コンポーネントを追加するには、リソース・カタログで「Web開発」の横にある「開く」リンクをクリックして、Web開発コンポーネントの選択内容を表示します。移動可能ボックス・コンポーネントの横にある「追加」をクリックします。

移動可能ボックスは、ボックスの周りを囲むコンテナです。これにより、ページでのコンテンツの配置が可能になるだけでなく、そのコンテンツをページ・エディタ(「デザイン」ビュー)とビュー・モードの両方で一度にすべて移動できるようになります。

図11-16 ボックス・コンポーネントの下の移動可能ボックス・コンポーネント

「図11-16 ボックス・コンポーネントの下の移動可能ボックス・コンポーネント」の説明

ページ・エディタで、またはページを表示している際に、移動可能ボックスのヘッダーをクリックして、ヘッダーとそのすべてのコンテンツをページの新しい位置にドラッグできます。また、移動可能ボックスはサイズの変更もできます。

ヒント:

ポートレットを移動可能ボックス・コンポーネントに追加しないでください。これにより、エラーを誘発する可能性のある不要な冗長性が生じます。

移動可能ボックス・コンポーネントのプロパティの設定

移動可能ボックス・コンポーネントで「表示オプション」および「スタイル」プロパティを設定できます。

デフォルトでは、移動可能ボックスごとに1つのボックス・コンポーネントを囲みます。

移動可能ボックス・コンポーネントのプロパティを設定するには:

ページ・エディタでページを開きます。
移動可能ボックス・コンポーネント・ツールバーで「アクション・メニューの表示」をクリックして、設定するプロパティを選択します。
- 「表示オプション」プロパティは、表10-1に示すように、その他の多くのコンポーネントと共通です。
- 「スタイル」プロパティは、表10-2に示すように、その他の多くのコンポーネントと共通です。ここで設定するスタイルは、コンポーネントの外観を制御する他のスタイルをオーバーライドします。これには、コンポーネントの親コンテナ、現在のページおよびポータル・スキンで設定されているスタイルが含まれます。
変更を保存します。

セパレータ・コンポーネントの使用

この項では、セパレータ・コンポーネントの概要を示し、その関連プロパティをリストして説明します。次のサブセクションが含まれます:

セパレータ・コンポーネントについて

ページにセパレータ・コンポーネントを追加するには、リソース・カタログで「Web開発」の横にある「開く」リンクをクリックして、Web開発コンポーネントの選択内容を表示します。セパレータ・コンポーネントの横にある「追加」をクリックします。

セパレータ・コンポーネントは、水平線の形式でページ上に視覚的な分割を示します。

図11-17 2つのテキスト・コンポーネント間のセパレータ・コンポーネント

「図11-17 2つのテキスト・コンポーネント間のセパレータ・コンポーネント」の説明

セパレータ・コンポーネントのプロパティの設定

セパレータ・コンポーネントで「表示オプション」および「スタイル」プロパティを設定できます。

セパレータ・コンポーネントのプロパティを設定するには:

ページ・エディタでページを開きます。
セパレータ・コンポーネント・ツールバーで「アクション・メニューの表示」をクリックして、設定するプロパティを選択します。
- 「表示オプション」プロパティは、表10-1に示すように、その他の多くのコンポーネントと共通です。
- 「スタイル」プロパティは、表10-2に示すように、その他の多くのコンポーネントと共通です。ここで設定するスタイルは、コンポーネントの外観を制御する他のスタイルをオーバーライドします。これには、コンポーネントの親コンテナ、現在のページおよびポータル・スキンで設定されているスタイルが含まれます。
変更を保存します。

Webページ・コンポーネントの使用

この項では、Webページ・コンポーネントの概要を示し、その関連プロパティをリストして説明します。次のサブセクションが含まれます:

Webページ・コンポーネントについて

ページにWebページ・コンポーネントを追加するには、リソース・カタログで「Web開発」の横にある「開く」リンクをクリックして、Web開発コンポーネントの選択内容を表示します。Webページ・コンポーネントの横にある「追加」をクリックします。

Webページ・コンポーネントにより、ポータル・ページのコンテキスト内に別のWebページを表示することができます。

図11-18 Webページ・コンポーネント

「図11-18 Webページ・コンポーネント」の説明

Webページ・コンポーネントを使用して公開されるコンテンツには、公開されたWebページに関連付けられたすべてのコントロールが保持されています。たとえば、コンポーネントにより、ユーザーは公開したコンテンツの種類に応じて、ビデオのボリュームの制御、wikiの編集、ブログへのエントリの投稿などが可能になります。

Webページには、内部および外部のリンク・ターゲットを使用できます。内部ターゲットの場合は、相対ディレクトリ・パスを使用できます。

ヒント:

ポータルで、アプリケーション・ページの相対ディレクトリ・パスを簡単に取得するには、ターゲット・ページに移動し、そのページをお気に入りに追加する一連の動作を行います。デフォルトでは、「お気に入りの追加」ダイアログに現在のページの相対URLが指定されています。この情報をそのままコピーして、Webページのターゲットの定義に使用します。

詳細は、『Oracle WebCenter Portalでのポータルの使用』の「お気に入りの管理」を参照してください。

Webページ・コンポーネントにより、組込みの「Webページ」ページ・スタイル(詳細は表18-1を参照)にバリエーションを加えることができます。「Webページ」ページ・スタイルは、完全な外部Webページのエクスペリエンスを提供するのに役立ちます。一方、Webページ・コンポーネントは、Webページ・コンテンツを他のコンテンツ・タイプとともにページに含める場合に役立ちます。

Webページ・コンポーネントのプロパティの設定

Webページ・コンポーネントで「表示オプション」および「スタイル」プロパティを設定できます。

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

ページ・エディタでページを開きます。
Webページ・コンポーネント・ツールバーで「アクション・メニューの表示」をクリックして、設定するプロパティを選択します。
- 「表示オプション」プロパティは、「Webページ・コンポーネントの表示オプション」で説明しています。
- 「スタイル」プロパティは、表10-2に示すように、その他の多くのコンポーネントと共通です。ここで設定するスタイルは、コンポーネントの外観を制御する他のスタイルをオーバーライドします。これには、コンポーネントの親コンテナ、現在のページおよびポータル・スキンで設定されているスタイルが含まれます。
変更を保存します。

Webページ・コンポーネントの表示オプション

次の表は、Webページ・コンポーネントの表示オプションをリストして説明しています。

表11-3 Webページ・コンポーネントの表示オプション

プロパティ説明

プロパティ	説明
`Name`	Webページ・コンポーネントの表示名。
`Short Desc`	Webページ領域の`ALT`テキストを入力するフィールド。 Webページ・コンポーネントでは、マウス・ポインタをコンポーネントの境界線上に置いた場合にのみ`ALT`テキストが表示されることに注意してください。アクティブな領域を増やすには、「スタイル」ダイアログの`Other CSS`プロパティを使用してコンポーネントの周囲のパディングを大きくします。たとえば、`Other CSS`テキスト・ボックスに次のように入力できます。 padding-top:30px;
`Source`	Webページ領域にレンダリングするソースWebコンテンツの完全修飾URLを入力するフィールド。たとえば: http://www.oracle.com `www.oracle.com` (`http://`が付いていない)は修飾されていないことに注意してください。指定のURLが無効の場合は、Webページ・コンポーネント内にコンテンツがレンダリングされません。ノート: 表示領域の幅および高さを調整するには、コンポーネントの「スタイル」プロパティを使用します(詳細は、「スタイル・プロパティおよびコンテンツ・スタイル・プロパティの使用」を参照)。別のポータル・ページのコンテンツを表示する場合は、相対アドレスを使用できます。詳細は、「Webページ・コンポーネントについて」を参照してください

Name

Webページ・コンポーネントの表示名。

Short Desc

Webページ領域のALTテキストを入力するフィールド。

Webページ・コンポーネントでは、マウス・ポインタをコンポーネントの境界線上に置いた場合にのみALTテキストが表示されることに注意してください。アクティブな領域を増やすには、「スタイル」ダイアログのOther CSSプロパティを使用してコンポーネントの周囲のパディングを大きくします。たとえば、Other CSSテキスト・ボックスに次のように入力できます。

padding-top:30px;

Source

Webページ領域にレンダリングするソースWebコンテンツの完全修飾URLを入力するフィールド。

たとえば:

http://www.oracle.com

www.oracle.com (http://が付いていない)は修飾されていないことに注意してください。指定のURLが無効の場合は、Webページ・コンポーネント内にコンテンツがレンダリングされません。

ノート: 表示領域の幅および高さを調整するには、コンポーネントの「スタイル」プロパティを使用します(詳細は、「スタイル・プロパティおよびコンテンツ・スタイル・プロパティの使用」を参照)。

別のポータル・ページのコンテンツを表示する場合は、相対アドレスを使用できます。詳細は、「Webページ・コンポーネントについて」を参照してください