5 リッチ・テキスト・ポートレットの追加

リッチ・テキスト・ポートレットは、企業の告知やニュースのアイテムを実行時に掲載するための便利なツールです。このポートレットをページに追加すると、認可されたユーザーは、アクション・アイコンを使用して、表示テキストの挿入、更新および書式設定に必要なすべてのリッチテキスト編集ツールが備わったツールバーを起動できます。リッチ・テキスト・ポートレットを使用すると、ページに設定されているセキュリティ権限に応じて、幅広い読者または範囲の狭い定義済グループに対して情報を配信できます。

リッチ・テキスト・ポートレットは、WebCenter Preconfigured OC4Jを介して使用可能です。

図5-1に、このレッスンを終えた時点でのページの外観を示します。

図5-1 レッスン5を終えた時点でのMyPage.jspx

画像の説明

概要

このレッスンでは、次の手順を実行することにより、リッチ・テキスト・ポートレットでの作業方法を示します。

前提条件

リッチ・テキスト・ポートレットは、（第3章の「手順2: 接続の設定」でインストールおよび初期化した）WebCenter Preconfigured OC4を介して使用可能です。このOC4Jインスタンスがもう実行されていない場合は、このレッスンを開始する前に、JDeveloperツールバーの一番右にある「WebCenter Preconfigured OC4Jの起動」をクリックします。

手順1: リッチ・テキスト・プロデューサの登録

この手順では、リッチ・テキスト・プロデューサをアプリケーションに登録します。しかしまずは、リッチ・テキスト・プロデューサがWebCenter Preconfigured OC4Jを介して使用可能であることを確認します。

ブラウザで、リッチ・テキスト・プロデューサのテスト・ページURLを入力します。

http://localhost:6688/richtextportlet/info

プロデューサが稼働中の場合は、図5-2に示すようなWSRPプロデューサ・テスト・ページが表示されます。

図5-2 リッチ・テキスト・プロデューサのテスト・ページ

画像の説明

テスト・ページには、2つのリッチ・テキスト・プロデューサ登録URL（WSDLドキュメント）が表示されます。このWebCenterアプリケーションでは、WSRP v2 WSDLのURLを使用します。

http://localhost:6688/richtextportlet/portlets/wsrp2?WSDL

ヒント
WebCenter Preconfigured OC4Jを介して使用可能なあらゆるポートレット・プロデューサのテスト・ページは、http://localhost:6688/からアクセスできます。

次に、リッチ・テキスト・プロデューサを登録します。

アプリケーション・ナビゲータで、「Portlet Producers」を右クリックし、「新規WSRPプロデューサ」をクリックします（図5-3を参照）。

図5-3 アプリケーションへのリッチ・テキスト・ポートレットの登録

 画像の説明

すでに1つポートレット・プロデューサを登録してあるので、「新規ギャラリ」にナビゲートしなくても、この右クリック・ショートカットを使用できます。
「次へ」をクリックして、ウィザードの「ようこそ」画面を終了します。
「名前」フィールドにRichTextProducerを入力します。
「次へ」をクリックします。
「URLエンドポイント」フィールドに、次のように入力します。

http://localhost:6688/richtextportlet/portlets/wsrp2?WSDL

このチュートリアルでは、URL内にlocalhostを使用すると、Preconfigured OC4Jがインストールされているローカル・コンピュータを参照できることを前提としています。（そうでない場合は、localhostをご使用のコンピュータのIPアドレスに置き換えてください。）
「次へ」をクリックします。
「終了」をクリックして、ウィザードを終了します。
「OK」をクリックして、メッセージ・ボックスを閉じます。

これで、リッチ・テキスト・ポートレットをページにドロップできるようになります。

手順2: ページへのリッチ・テキスト・ポートレットの追加

ビジュアル・エディタでMyPage.jspxを表示します。
コンポーネント・パレットから、「RichTextProducer」を選択します（図5-4）。

図5-4 リッチ・テキスト・ポートレット・プロデューサ

 画像の説明
「リッチ・テキスト・ポートレット」を選択し、構造ウィンドウ内の「h:form」の上にドロップします（図5-5を参照）。

図5-5 ページへのリッチ・テキスト・ポートレットの追加

 画像の説明
ビジュアル・エディタで「Rich Text Portlet1」を選択します。すると、プロパティ・インスペクタにそのプロパティが表示されます。
プロパティ・インスペクタの「表示オプション」で、AllModesSharedScreenをtrueに設定します。

これによって、ページ全体をリフレッシュするのではなく、パーソナライズまたはカスタマイズを介して行ったすべての変更をインラインで表示するようにページを設定します。
「ファイル」、「すべて保存」の順に選択して、作業を保存します。
「実行」、「MyPage.jspxの実行」の順に選択するか、JDeveloperツールバーで緑色の矢印をクリックします。

新しいブラウザが開き、ページが表示されます（図5-6）。

図5-6 デフォルトのリッチ・テキスト・ポートレット

 画像の説明

ページは、ユーザーにこのように表示されます。次の手順では、リッチ・テキスト・ポートレットのカスタマイズが簡単であることを示します。WebCenterアプリケーションを計画するうえで役立つ点がいくつか示されています。

手順3: 実行時のリッチ・テキスト・ポートレットのカスタマイズ

リッチ・テキスト・ポートレットをページに配置した後、ユーザーはアクション・アイコンを使用して、すべての人に表示されるテキストを入力できます。

リッチ・テキスト・ポートレットのヘッダーで、アクション・アイコンをクリックします。

リッチ・テキスト・ポートレットは、図5-7のように表示されます。

図5-7 リッチ・テキスト・ポートレットのアクション・メニュー

 画像の説明
「カスタマイズ」をクリックして、リッチ・テキスト・コントロールを表示します（図5-8）。

図5-8 リッチ・テキスト・ポートレットのテキスト・コントロール

 画像の説明
独自のテキストを入力し、フォントのサイズ、タイプおよび色を変更し、背景色を選択します。例は、図5-9を参照してください。

図5-9 Arialフォント、サイズ6、赤色のテキスト

 画像の説明
他のコントロールも試してみます。たとえば、ポートレット内にイメージを表示します。
1. 「イメージの挿入」アイコンをクリックします。
2. イメージのURLを入力し、「OK」をクリックします（図5-10）。
  
  図5-10 リッチ・テキスト・エディタを使用したイメージの挿入
  
   画像の説明
完了したら、「発行」をクリックします。

ページがリフレッシュされて、新しいテキストおよびイメージが表示されます。