プライマリ・コンテンツに移動
Oracle® Fusion Middleware Oracle JDeveloperによるWebCenter Portalアセットとカスタム・コンポーネントの開発
12c (12.2.1)
E72546-01
目次へ移動
目次
前
前 		次
次

18 Webアプリケーションでのページレットの使用

この章では、WebまたはWebCenter Portalページにページレットを追加する方法について説明します。

注意:

ページレットを任意のWebアプリケーションに追加する前に、『Oracle WebCenter Portalの管理』の「ポータル、テンプレート、アセットおよび拡張機能のデプロイ」の説明に従って、ページレット・プロデューサでリソースおよびページレットをデプロイして構成する必要があります。

この章の内容は次のとおりです。

18.1 Webページへのページレットの追加

ページレットをデプロイすると、次の操作が可能です。

  • 簡単なJavaScript関数を使用して、ページレットをプロキシされていないページに挿入すること。

  • ページレット・プロデューサからリソースおよびページレットに関する情報を取得し、ページレット・プロデューサのREST APIを使用してページレットをプロキシされたページおよびプロキシされていないページに挿入すること。

  • ページレット挿入関数を使用してページレット・コンテンツをカプセル化するIFrameのサイズを自動的に変更すること。

この項には次のトピックが含まれます:

18.1.1 JavaScriptを使用したページレットの挿入方法

簡単なJavaScript機能を使用して、ページレットをプロキシされていないページに挿入できます。

この機能をアクティブにするには、次のHTMLスニペットをページの<HEAD>セクションに追加します。 

<script type="text/javascript" src="http://proxy:port/pagelets/inject/v2/csapi">
</script>

このスクリプトを実行すると、すべてのCSAPIおよびページレット注入関数がページレットを表示するページに注入されます。注入されたセクションの1つには、次の関数があります。 

function injectpagelet(library, name, iframe_options, params, context_id, element_id, is_in_community, chrome, forward_params)
{
 ...
}

この関数は、ページレットをウィジェットとして親ページに注入します。メソッド・インタフェースでは、次のパラメータが使用されます。

  • library: 必須。注入するページレットのライブラリ名を表す文字列です。Unicode文字と数字のみ使用でき、スペースを含めることはできません。

  • name: 必須。注入するページレットの名前を表す文字列です。Unicode文字と数字のみ使用でき、スペースを含めることはできません。

  • iframe_options: ページレット・コンテンツの周囲にIFRAMEを使用するかどうかを指定します。IFRAMEオプションのサンプルは、iframe width=100% height=auto frameborder=0のようになります。省略または空白のままにすると、ページレット・コンテンツがインラインにレンダリングされます。

  • params: 問合せ文字列形式のページレット・パラメータ。たとえば、 'param1=value1&param2=value2&param3=value3'のようになります。

  • context_id: ページレット・インスタンスの外部識別子で、プリファレンスのスコープをページレット・プロデューサ・サーバーに設定するために使用されます。整数を指定する必要があります。

  • element_id: ページレット・コンテンツの注入先のHTML要素IDです。省略されたまたは空白のままの場合は、injectpageletコールが評価された場合に、document.write()を使用してページレット・コンテンツが注入されます。

  • is_in_community: このページレットがコミュニティまたはグループ・ページのいずれにあるのかを指定します。値がtrueに設定されている場合は、コミュニティIDヘッダーのcontext_idがページレットに送信されます。デフォルトはfalseです。

  • chrome: WSRP/JPDKページレット用に使用するChromeテンプレートの名前を指定します。Chromeが表示されないようにするには、値にnoneを指定します。

  • forward_params: 問合せ文字列引数を消費ページからバックエンド・サーバーに転送するかどうかを指定します。この機能を抑制するには、値falseを使用します。

注意:

これらの引数は前後関係に依存しているため、所定の順番で指定する必要があります。特定の引数を指定せずに後続の引数を指定するには、指定しない引数を空の値('')で渡す必要があります。libraryおよびnameを除くすべての引数はオプションです。

このスクリプトによって、injectpagelet関数への参照を含む、一意の名前を持つ新しい<div>も作成されます。次に例をいくつか示します。

<div>
 <script type="text/javascript">
 injectpagelet('library', 'name');
 </script>
</div>
<div>
 <script type="text/javascript">
 injectpagelet('library', 'name', 'iframe', 'payload', 'param1=value1&param2=value2&param3=value3');
 </script>
</div>

<div>
 <script type="text/javascript">
 injectpagelet('library', 'name', 'iframe width=100% height=200', 'payload');
 </script>
</div>

18.1.1.1 JavaScriptを使用したプリファレンス・エディタの追加方法

injecteditor関数を使用すると、ユーザーがこの機能をサポートするページレットに個人プリファレンスと共有プリファレンスを設定できるようにするプリファレンス・エディタを追加できます。この機能は、WebCenter Portalのパーソナライズ機能とカスタマイズ機能に似ています。

injecteditor(library, name, type, iframe_options, context_id, element_id, is_in_community, chrome)

説明:

  • library: 必須。注入するページレットのライブラリ名です。Unicode文字と数字のみ使用でき、スペースを含めることはできません。

  • name: 必須。注入するページレットの名前です。Unicode文字と数字のみ使用でき、スペースを含めることはできません。

  • type: エディタのタイプ。この引数では、値admin、pagelet、communityをサポートします。community引数の場合は、context_idがコミュニティID CSPヘッダーのページレットに送信されます。

  • iframe_options: ページレット・エディタのコンテンツの周りにIFRAMEを使用するかどうかを指定します。IFRAMEオプションのサンプルは、iframe width=100% height=auto frameborder=0のようになります。省略または空白のままにすると、エディタ・コンテンツがインラインにレンダリングされます。

  • context_id: ページレット・インスタンスの外部識別子で、プリファレンスのスコープをページレット・プロデューサ・サーバーに設定するために使用されます。整数を指定する必要があります。

  • element_id: ページレット・コンテンツの注入先のHTML要素IDです。省略または空白のままにすると、 injecteditorコールが評価された場合に、document.write()を使用してページレット・コンテンツが注入されます。

  • is_in_community: このページレットがコミュニティまたはグループ・ページのいずれにあるのかを指定します。値がtrueに設定されている場合は、コミュニティIDヘッダーのcontext_idがページレットに送信されます。デフォルトはfalseです。

  • chrome: WSRP/JPDKページレット用に使用するChromeテンプレートの名前を指定します。Chromeが表示されないようにするには、値にnoneを指定します。

注意:

これらの引数は前後関係に依存しているため、所定の順番で指定する必要があります。特定の引数を指定せずに後続の引数を指定するには、指定しない引数を空の値('')で渡す必要があります。libraryおよびnameを除くすべての引数はオプションです。

18.1.2 RESTを使用したページレットへのアクセス方法

Representational State Transferを表すRESTは、HTTPを介してAPIを提供する簡単な手法です。RESTの基本原則は次のとおりです。

  • API URLは汎用的なメソッド・エンドポイントではなくリソースを指します。

  • リクエストでは、簡素化されたCRUDメソッドに標準のHTTP動詞を使用します。これは読取り専用APIで、GETリクエストのみを許可します。

  • すべてのリクエストは、取得したオブジェクト(ページレットまたはリソース)の完全表現を返します

ページレット・プロデューサREST APIには、次の機能があります。

  • ページレットをプロキシされていないページに挿入して、ページレット・プロデューサがOracle WebCenter Interaction、Oracle WebLogic Portalまたはその他のサード・パーティ・ポータルのポートレット・プロバイダとして動作できるようにします

  • リモートWebサービスで、リソースとページレットに関する情報をページレット・プロデューサから取得できます。

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

18.1.2.1 ページレット挿入APIに関する必知事項

ページレット注入URLは、リモート・ポートレットの場所を指定するためにポータルで使用できます(この方法でページレットをポートレットとして使用できます)。また、挿入URLを、HTMLページでIFrameタグのソース属性として使用することもできます。

URLは次の形式を使用する必要があります。

http://host:port/pagelets/inject/v2/pagelet/libraryname/pageletname?content-type=html

ここで、librarynameおよびpageletnameは、ページレット・プロデューサで構成されたライブラリとページレットを参照します。

注意:

ページレット挿入APIをOracle WebCenter InteractionでポートレットWebサービスのURLとして使用する場合は、URLの"pagelet"を"portlet"に変更する必要があります。たとえば、前述のURLは次のようになります。

http://host:port/pagelets/inject/v2/portlet/libraryname/pageletname?content-type=html

前述のコールに対する問合せ文字列引数は、ページレットが返される方法を定義します。次のパラメータが定義されます。

  • instanceid: オプション。ページレットのインスタンスIDで、ページ上のページレットを一意に識別し、ページレット間通信を容易にするために使用されます。ページに対して一意である必要があります。

  • context: オプション。ページレットのインスタンスの外部識別子で、ページレット・プロデューサ・サーバー上でのプリファレンスのスコーピングに使用されます。整数を指定する必要があります。

  • content-type: 戻り型。次の3つの型がサポートされています。

    • javascript: 注入可能なコードが返されます。

    • html: ページレット・マークアップがそれに関連付けられたPTPortletオブジェクトとともに返されます。

    • iframe: ページとの直接インラインを実行するかわりにIFrameにページレットのコンテンツを入力して、注入APIを再び指し示すIFrameを返します。IFrameは、一連の問合せ文字列パラメータを指定することによってスタイルを設定できます。

      パラメータ 説明 デフォルト

      ifwidth

      IFrameの幅を設定します。パーセント'%'またはピクセル'px'で指定できます。例: ifwidth=500px。'auto'に設定すると、コンテンツの幅に収まるようにIFrameを自動的にサイズ変更できます。詳細は、「IFrameでの自動サイズ変更の使用方法」を参照してください。

      100%

      ifheight

      IFrameの高さを設定します。パーセント'%'またはピクセル'px'で指定できます。例: ifheight=500px。'auto'に設定すると、コンテンツの幅に収まるようにIFrameを自動的にサイズ変更できます。詳細は、「IFrameでの自動サイズ変更の使用方法」を参照してください。

      デフォルトなし

      ifborder

      IFrameの境界を設定します。

      'none'

      ifalign

      IFrame内の位置あわせ規則を設定します(ifalign=centerなど)。

      デフォルトなし

      ifdesc

      IFrameの説明を設定します。

      デフォルトなし

      ifmarginheight

      マージンの高さを設定します。パーセント(%)またはピクセル(px)単位で指定できます(ifmarginheight=500pxなど)。

      デフォルトなし

      ifmarginwidth

      マージンの幅を設定します。 パーセント(%)またはピクセル(px)単位で指定できます(ifmarginwidth=500pxなど)。

      デフォルトなし

      ifscrolling

      IFrameのスクロールバーを設定します。許容される値は、yes、no、autoです。

      auto

      ifstyle

      IFrameのCSSスタイルを設定します

      デフォルトなし

      ifclass

      IFrameのCSSクラスを設定します。

      デフォルトなし

  • csapi: オプション。CSAPIをページレット・レスポンスに含めるかどうかを設定します(trueまたはfalse)。CSAPIの組込みはオプションですが、レスポンスに含まれるページレットは、ページレットがレンダリングされるページ上に存在するCSAPIライブラリに依存します。csapi=falseの場合は、CSAPIライブラリは親ページ(通常はHEADセクション)に含まれる必要があります。

  • onhtttperror: オプション。ページレット・リクエストの結果として403、404またはその他のエラー・コードが発生する場合は、ページレット・プロデューサは、ユーザーに表示するためにエラー・コードとエラー・ページ自体をブラウザに転送できます。onhttperrorパラメータは次の値を受け入れます。

    • comment (デフォルト): ページレット・プロデューサは失敗したページレットのかわりにHTMLコメントを生成します(失敗したページレットは単に表示されないだけです)。

    • inline: ページレット・エラーはサーバー・エラー・ページとともにインラインに表示されます。この場合、ページレットは通常、ページに表示されます。

    • fullpage: httpエラーはページ全体を消費します。このモードは、ページレット・プロデューサが親ページを制御する場合にのみ使用可能です。

  • inline-refresh: オプション。有効な値はtrueまたはfalse (デフォルト)です。inline-refreshオプションをtrueに設定した場合、ページレット・プロデューサは、ページレット・マークアップをページに埋め込むためにiFrameを使用しません。ユーザーがページレットと相互作用するときに、マークアップがインラインで更新されるため、inline-refreshという名前が付いています。これを行うために、ページレット・プロデューサは、かわりにJavaScriptメソッド・コールを使用するようページレット・マークアップ内のURLをリライトします。つまり、ユーザーがリンクをクリックするか、フォーム・リクエストをバックエンドに送信すると、この処理がブラウザ上でJavaScriptによって実行され、その後レスポンスが動的に挿入されます。

    inline-refreshオプションは、HTMLマークアップが比較的単純な場合、適切に機能します。ページレットで、ADFタスク・フローなどの機能豊富なUIが公開される場合、inline-refreshは適切に機能しないか、単純に中断が発生する可能性があります。このため、inline-refreshオプションはデフォルトでfalseに設定されています(つまり、ページレット・マークアップがiFrame内に挿入されます)。

次のURLの例は、samplesライブラリのlinkspageletを指します。

http://host:port/pagelets/inject/v2/pagelet/samples/linkspagelet?content-type=iframe&csapi=true&ifheight=123px&ifclass=myclass

このURLは、次のコードに似たマークアップになります。

注意:

IFrameソースは元の注入APIを指しますが、今回、content-typeパラメータはhtmlに設定されます。この機能により、ページレットの取得で手順が追加されます。csapiパラメータは、後続のコールでtrueに設定され、IFrameコンテンツを取得して必須のCSAPIコンテンツがIFrameに格納されるようにします(これが当てはまらない場合は、ページレット・コードはIFrameの外に格納されているCSAPIスクリプトにアクセスできないため、JavaScript解決エラーが返されます)。

<html>
 <head>
 </head>
 <body>
 <iframe frameborder="none" class="myclass" width="100%" height="123px" scrolling="auto" src="http://proxy:port/inject/v2/pagelet/samples/linkspagelet?asdg=asdfgas&param=true&content-type=html&jswrap=false&csapi=true">
 <html>
 <head>
 <script src="http://proxy:loginserverport/loginserver/ensemblestatic/imageserver/plumtree/common/private/js/jsutil/LATEST/PTUtil.js" type="text/javascript"> </script>
 <script src="http://proxy:loginserverport/loginserver/ensemblestatic/imageserver/plumtree/common/private/js/jsutil/LATEST/PTDateFormats.js" type="text/javascript"></script>
 <script src="http://proxy:loginserverport/loginserver/ensemblestatic/imageserver/plumtree/common/private/js/jsxml/LATEST/PTXML.js" type="text/javascript"></script>
 <script src="http://proxy:loginserverport/loginserver/ensemblestatic/imageserver/plumtree/common/private/js/jsportlet/LATEST/PTPortletServices.js" type="text/javascript"></script>
 </head>
 
<body>
 <div id="pt-pagelet-content-1" class="pagelet-container" style="display: inline;">
 <span xmlns:pt="http://www.xmlns.oracle.com/xmlschemas/ptui/">
 Pagelet links:
 <br/>
 <a href="http://proxy:port/inject/RP_PID393219_I1/headpagelet1.html">The first pagelet</a>
 <br/>
 <a href="http://proxy:port/inject/RP_PID393219_I1/headpagelet2.html">The second pagelet</a>
 <br/>
 <a href="http://proxy:port/inject/RP_PID393219_I1/csapipagelet.html">The csapi pagelet</a>
 <br/>
 <a href="http://proxy:port/inject/RP_PID393219_I1/linkspagelet.html">This pagelet</a>
 <br/>
 </span>
 </div>
 </body>
 </html>
 </iframe>
 </body>
</html>

18.1.2.2 データ取得APIに関する必知事項

ページレット・プロデューサからデータを取得するには、次の2つのREST APIが使用できます。

  • ページレットAPI: リモート・アプリケーションを使用してページレット・プロデューサからページレット・データを取得できます。(「すべてのページレット」および「ライブラリおよび名前別ページレット」の例を参照してください。)

  • リソースAPI: リモート・アプリケーションを使用してページレット・プロデューサからリソース・データを取得できます。(「すべてのリソース」および「名前別リソース」の例を参照してください。)

すべてのリクエストの基本のURLは、 http://host:port/pagelets/restservice/pageletproducer/です。

例: すべてのページレット

http://host:port/pagelets/restservice/pageletproducer/pagelets/
http://host:port/pagelets/restservice/pageletproducer/pagelets/?format=xml

例: ライブラリおよび名前別ページレット

http://host:port/pagelets/restservice/pageletproducer/pagelet/libraryname/pageletname/
http://host:port/pagelets/restservice/pageletproducer/pagelet/libraryname/pageletname/?format=xml

例: すべてのリソース 

http://host:port/pagelets/restservice/pageletproducer/resources/
http://host:port/pagelets/restservice/pageletproducer/resources/

例: 名前別リソース

http://host:port/pagelets/restservice/pageletproducer/resource/name
http://host:port/pagelets/restservice/pageletproducer/resource/name/?format=xml

18.1.3 IFrameでの自動サイズ変更の使用方法

ページレット・プロデューサ・ページレット注入APIは、ページレット・コンテンツをカプセル化するIFrameのサイズを自動的に変更できます。IFrameがストレッチして中のコンテンツに合うようにサイズ変更が行われます。この機能を使用するには、次の例に示すように、ifwidthおよびifheightパラメータをautoに設定する必要があります。

http://proxy:port/inject/v2/pagelet/samples/linkspagelet?content-type=iframe&csapi=true&ifheight=auto&ifwidth=auto&ifclass=myclass

さらに、この機能はコンシューマ・ページと同じドメイン上にある外部ページに依存します。このページは、内部非表示IFrameとしてページレットIFrameに格納されます。このページでは、サイズ設定情報を収集して親コンシューマ・ページに渡します。このページは、コンシューマ・ページと同じディレクトリにデプロイする必要があります。

次の例では、ロードの終了後に、ページレットIFrameのサイズが変更されます。初回ロード後に動的自動サイズ変更機能をユーザー対話型アクティビティに追加するには、マウスやキーボードのイベントについてイベント・リスナーをさらに追加するだけで済みます。

<html>
 <head>
 <title>Resizing Page</title>
 <script type="text/javascript">
 function onLoad() {
var params =window.location.search.substring( 1 ).split( '&' );
 var height;
 var width;
 var iframe;
 
for( var i =0, l =params.length; i < l; ++i ) {
var parts =params[i].split( '=' );
 switch( parts[0] ) {
case 'height':
 height =parseInt( parts[1] );
 break;
 case 'width':
 width =parseInt( parts[1] );
 break;
 case 'iframe':
 iframe =parts[1];
 break;
 }
}
window.top.updateIFrame( iframe, height, width );
 }

if (window.addEventListener) {
window.addEventListener("load", onLoad, false)
 }else if (window.attachEvent) {
window.detachEvent("onload", onLoad)
 window.attachEvent("onload", onLoad)
 }else {
window.onload=onLoad
 }
</script>
 </head>
<body>
</body>
</html>

18.2 ポータル・ページへのページレットの追加

ページ・エディタを使用して、ページレットをポータル・ページに追加します。デフォルトでは、ページレットは「デフォルト・ポータル・カタログ」の「マッシュアップ」フォルダに表示されます。ページレットをページに追加するには、リソース・カタログでそのページレットに移動して選択します。

リソースをポータル内のページに追加する方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』の「ページでのリソース・カタログ・コンポーネントの追加と編集」を参照してください

ページレットをページ内で構成するには、該当のページを編集モードで表示し、ページレットの「アクション・メニューの表示」をクリックして「パラメータ」を選択します。

前
前 		次
次
目次へ移動
目次