Oracle WebCenter Sites 11g： Contributorインタフェースの検索ビューのカスタマイズ

概要

    目的

    このチュートリアルでは、Oracle WebCenter Sites 11gのContributorインタフェースの検索ビューをカスタマイズする方法について説明します。

    所要時間

    約60分

    概要

    WebCenterスタックOracle WebCenterは、ソーシャル・ビジネスで対象を絞ったWebサイトを使って顧客ロイヤルティを向上させることが可能な統合プラットフォームです。 このWebサイトにより、ソーシャル・ビジネスの顧客はコンテキストに合った情報にシームレスにアクセスできます。

    Oracle WebCenterの重要な柱の1つが、Oracle WebCenter Sitesです。 Oracle WebCenter Sites 11g Webエクスペリエンス管理（WEM）プラットフォームを使用すると、マーケティング担当者とビジネス・ユーザーは、複数のチャネルを通じてグローバルに、コンテキストに即したソーシャル体験や双方向のオンライン体験を簡単に作成、管理し、売上げとロイヤルティの向上を図ることができます。

    このチュートリアルでは、Contributorインタフェースの検索ビューをカスタマイズする方法について説明します。

    シナリオ

    このチュートリアルでは、以下を実行します。

    • 索引付けのアセット・タイプを構成する
    • すべてのアセット・タイプについて、ドッキングされていないリスト表示に属性列を追加する
    • イメージ・アセット・タイプについて、ドッキングされていないサムネイル表示に属性詳細を追加する

    ハードウェアとソフトウェアの要件

    • Oracle WebCenter Sites 11gのJumpStart Kit、またはインストールされ実行されているサンプル・サイトの完全なインストール
    • インストールおよび構成されて実行されているWebCenter Sites Developer Toolsプラグイン、またはWebCenter Sites Explorer（Oracle WebCenter Sitesに含まれる）
    • Oracle Technology Network（OTN）からダウンロードしたDeveloper's Guide for Customizing the Contributor Interface
    • 開発者ガイドで提供されているサンプル・エレメント
    • Mozilla FirefoxまたはMicrosoft Internet Explorer Webブラウザ

    前提条件

    このチュートリアルを適切に完了するには、以下が必要です。

    • Oracle Universityで提供されているトレーニング・コースOracle WebCenter Sites 11g for Developerに参加している
    • Oracle WebCenter Sites 11g Contributorインタフェースの実用的な知識を持っている
    • Java、JavaScript、Dojo Toolkit、およびHTMLの経験がある
    • WebCenter Sites Developer Toolsプラグインに精通している
    • Developer's Guide for Customizing the Contributor Interface（特に第1章と第2章）の内容を十分に確認している

ユーザー・インタフェースのフレームワーク

    この項では、UI Controllerのユーザー・インタフェース（UI）のフレームワークとプロセス・フローについて学習します。

    Contributorインタフェースのフレームワークはサービス・レイヤーの上に配置され、クライアントのリクエストを処理します。 UIフレームワークは、プレゼンテーション・レイヤーとUI Controllerで構成されます。

    UIFramework

    プレゼンテーション・レイヤーは、ビューをレンダリングするエレメントとレスポンスを生成するエレメントで構成されます。 Contributorインタフェースからリクエストを受信すると、UI Controllerは次の3つのフェーズでリクエストを処理します。

    • 構成フェーズ
    • アクション・フェーズ
    • プレゼンテーション・フェーズ

    UI Controllerは、各フェーズでカスタム・エレメントをチェックします。 各フェーズは条件付きです。 UI Controllerは、そのフェーズのカスタム・エレメントが存在しないことを検出すると、次のフェーズに進みます。 ElementCatalog表のCustomElements下のすべてのパスを次の順序で調べて、カスタム・エレメントを検出します （次のリストに、構成フェーズのカスタム・エレメントのサンプル・パスを示します）。

    1. 単一サイトのアセット・タイプ固有のパス： CustomElements/<SiteName>/<AssetType>/<controllerElementName>Config
    2. すべてのサイトのアセット・タイプ固有のパス： CustomElements/<AssetType>/<controllerElementName>Config
    3. サイト固有のパス： CustomElements/<SiteName>/<controllerElementName>Config
    4. グローバルパス： CustomElements/<controllerElementName>Config

    ElementCatalogのCustomElementsの下にカスタム・エレメントを作成します。 次に、エレメントのネーミング規則を示します。

    • 構成フェーズのエレメント： <controllerElementName>Config
    • アクション・フェーズのエレメント： <controllerElementName>Action
    • プレゼンテーション・フェーズのエレメント： <controllerElementName>Html

    次の図に、UI Controllerのプロセス・フローを示します。

    UIControllerFlow

    カスタム・エレメントとシステム・デフォルト・エレメントを別々に保存することを推奨します。 システム・デフォルトを直接オーバーライドすると、システムを新しいバージョンのOracle WebCenter Sitesにアップグレードしたときに、カスタマイズの内容がオーバーライドされます。 次に、WebCenter Sites ExplorerでのCustomElementsのデータ構造ビューの例を示します。

    CustomElements

検索ビューのカスタマイズ

    このトピックでは、Contributorインタフェースの検索ビューで実行できるカスタマイズのタイプについて説明します。

    Contributorインタフェースで、検索結果をドッキングされたビューまたはドッキングされていないビューで表示できます。 デフォルトでは、検索結果はドッキングされていないビューに個々のタブで表示されます。 アセットが編集にオープンになっているときに検索を実行すると、検索結果はドッキングされたビューに表示されます。

    undocked-docked-comparison

    検索結果をリスト表示またはサムネイル表示で表示したり、ビデオのサムネイルなどのコンテンツにカスタムのプレゼンテーション表示を使用したりすることもできます。 ビデオのサムネイルの例については、Developer's Guide for Customizing the Contributor Interfaceを参照してください。

    リスト表示のカスタマイズ可能な機能には、次のようなものがあります。

    • 返される項目の最大数
    • ページあたりの行数
    • 表示するフィールド（列）
    • 列の表示名
    • 列の幅
    • 日付とその他のフィールドの形式
    • デフォルトのソート・フィールドとソート順
    • ソート・メニュー（ドッキングされたビュー）
    • コンテキスト（ショートカット）メニュー
    • ツールチップ（ドッキングされたビュー）

    list-view

    サムネイル表示のカスタマイズ可能な機能には、次のようなものがあります。

    • 返される項目の最大数
    • ページあたりの行数
    • 特殊なサムネイルを表示するアセット・タイプ
    • 表示するフィールド
    • 日付とその他のフィールドの形式
    • デフォルトのソート・フィールドとソート順
    • ソート・メニュー
    • コンテキスト（ショートカット）メニュー
    • ツールチップ（ドッキングされたビュー）

    thumbnail-view

    ElementCatalogでアセット・タイプの検索ビューをカスタマイズできます。

    • システム内のコンテキスト管理サイトでアセット・タイプをカスタマイズするには、「CustomElements」→「UI」→「Layout」→「CenterPane」→「Search」→「View」の下にカスタム・エレメントを配置します。
    • 特定のサイトでアセット・タイプをカスタマイズするには、「CustomElements」→「<サイト名>」→「<アセット・タイプ> UI」→「Layout」→「CenterPane」→「Search」→「View」の下にエレメントを配置します。

    次に、イメージ・アセットのnameフィールド、widthフィールド、heightフィールド、およびcategoryフィールドを表示するサンプル・エレメントThumbnailViewConfigを示します。

    thumbnailviewconfig

索引付けの属性の構成

    Oracle WebCenter Sitesを使用してプロジェクトを開始する場合、デフォルトでは、検索結果に表示する属性値が常に索引付けされるわけではありません。 この項では、属性に適切に索引付けを行う方法について説明します。

    ブラウザで、パスワードxceladminを使ってfwadminとしてContributorインタフェースにログインします。

    contrib_login

    Siteで、「avisports」を選択して、「Admin」ボタンをクリックします。

    contrib-select-admin

    左側のパネルで、「Admin」タブをクリックし、「Search」を展開し、「Configure Asset Type Search」をダブルクリックして、Configure Asset Type Searchページを表示します。

    config-assettype-search

    For indexで、「Add」を選択します。

    for-index-add

    Asset Typesリストから、「AVIArticle」と「AVIImage」を選択します。

    article-image

    「OK」をクリックします。

    config-assettype-ok

    ダイアログ・ボックスで、「OK」をクリックします。

    config-assettype-popup

    確認メッセージが表示されます。

    config-assettypes-confirm

    左側のパネルで、「Admin」タブをクリックし、「Search」を展開し、「ConfigureAttributes for Index」をダブルクリックして、Configure Attributes for Indexページを表示します。

    config-attributes

    Indexで、「AVIImage」を選択します。

    config-attrs-image

    Attributeリストで、属性categoryに以下の手順を実行します。

    a. 「Enabled」チェック・ボックスを選択します。

    b. Stored列で、「true」を選択します。

    config-attrs-category

    属性height、updatedby、およびwidthについて、手順10を繰り返します。

    「Save」をクリックします。

    config-attrs-save

    確認メッセージが表示されます。

    config-attr-image-confirm

    Indexで、「AVIArticle」を選択します。

    config-attrs-article

    Attributeリストの属性updatedbyで、「Enabled」チェック・ボックスを選択し、Storedの値をtrueに変更します。

    config-attrs-updatedby

    「Save」をクリックします。

    config-attrs-article-save

    確認メッセージが表示されます。

    config-attr-article-confirm

    Adminタブで、「Configure Asset Type Search」をダブルクリックします。

    config-assettype-search-reindex

    For indexで、「Re-index」を選択します。

    reindex

    Asset Typesリストで、「AVIArticle」と「AVIImage」を選択します。

    reindex-article-image

    「OK」をクリックします。

    reindex-ok

    ダイアログ・ボックスで、「OK」をクリックします。

    reindex-popup

    確認メッセージが表示されます。

    reindex-confirm

検索結果のリスト表示への"Modified By"列の追加

    この項では、サンプル・サイトAviSportsのすべてのアセット・タイプについて、検索結果のドッキングされていないリスト表示にModified By列を追加します。 次のタスクについて説明します。

    • エレメントListViewConfig.jspの作成
    • カスタマイズのテスト

    カスタマイズがまったくない場合、検索結果のドッキングされていないリストは次のように表示されます。

    search-results-default

    エレメントListViewConfig.jspの作成

      WebCenter Sites Explorerを起動し、以下の手順を完了してログインします。

      a. Fileメニューから「Open Oracle WebCenter Sites」を選択します。

      b. Oracle WebCenter Sites Loginウィンドウで、次の値を入力し、「OK」をクリックします。

      • Host name or address： localhost
      • Username： fwadmin
      • Password： xceladmin
      • Port： 8080
      • Select application server URL path： CS servlet (/cs/CatalogManager)

      sitesExplorer_login

      「Tables」、「ElementCatalog」、「CustomElements」、「avisports」、「UI」、「Layout」、「CenterPane」、および「Search」を展開し、「View」をクリックしてコンテンツを表示します。

      sitesexplorer_search_view

      右側のパネルのelementnameの下で右クリックし、ショートカット・メニューから「New」を選択します。

      search_views_newelement

      エレメントの名前にListViewConfigと入力します。

      search_views_listviewconfig

      ListViewConfigで、url列の下をクリックし、表示されたボタンをクリックします。

      listviewconfig_newelement

      New fileダイアログ・ボックスで、Type/Ext.が「.jsp」に設定されていることを確認して、「OK」をクリックします。

      listviewconfig_newelement_file

      エレメント・ウィンドウで<!-- user code here -->の下に次のコードを入力します。

          <listviewconfig>
              <numberofitems>1000</numberofitems>
              <numberofitemsperpage>100</numberofitemsperpage>
              <defaultsortfield>updateddate</defaultsortfield>
              <defaultsortorder>descending</defaultsortorder>
             
              <fields>
                  <field>
                      <fieldname>name</fieldname>
                      <displayname>Name</displayname>
                      <width>350px</width>
                      <formatter>fw.ui.GridFormatter.nameFormatter</formatter>
                      <displayintooltip>true</displayintooltip>
                  </field>
                  <field>
                      <fieldname>AssetType_Description</fieldname>
                      <displayname>Asset Type</displayname>
                      <width>Auto</width>
                      <formatter></formatter>
                      <displayintooltip>true</displayintooltip>
                  </field>
                  <field>
                      <fieldname>updateddate</fieldname>
                      <displayname>Modified</displayname>
                      <dateformat>MM/dd/yyyy hh:mm a z</dateformat>
                      <width>auto</width>
                      <formatter></formatter>
                      <displayintooltip>true</displayintooltip>
                  </field>
                  <field>
                      <fieldname>updatedby</fieldname>
                      <displayname>Modified By</displayname>
                      <width>auto</width>
                      <formatter></formatter>
                      <displayintooltip>false</displayintooltip>
                  </field>
              </fields>
          </listviewconfig>

      「Save」をクリックします。

      listviewconfig-jsp

      Close「x」ボタンをクリックして、エレメント・ウィンドウを閉じます。

      listviewconfig-newelement-close

      「Save」をクリックして、データベースの変更をコミットします。

      sitesexplorer-save

    カスタマイズのテスト

      Webブラウザで、パスワードxceladminを使ってfwadminとしてContributorインタフェースにログインします。

      contributor-ui-login

      「Contributor」ボタンをクリックします。

      select-site-app

      Searchリストで、イメージのみを返すように検索をフィルタリングするよう、「Image」を選択します。

      search-image

      「Search」をクリックします。

      search-icon

      検索結果のリストに、追加の列Modified Byが含まれています。

      searchresults

      注： Modified By列の値が空白の場合は、"索引付けの属性の構成"項の手順10と手順11を確認してください。 Storedの値が「true」に設定されていることを確認します。

検索結果のサムネイル表示への属性"Modified"の追加

    Oracle WebCenter Sitesを使用してプロジェクトを開始する場合、デフォルトのシステム・エレメントをオーバーライドするカスタム・エレメントを作成します。 この項では、サンプル・サイトAviSportsで作業する場合に、既存のカスタム・エレメントThumnailViewConfigを変更して、アセット詳細を検索結果のドッキングされていないサムネイル表示に追加します。

    AviSportsの検索結果のサムネイル表示は、次のように表示されます。

    searchresults-thumbnailview

    次のタスクについて説明します。

    • カスタム・エレメントThumbnailViewConfigの変更
    • カスタマイズのテスト

    カスタム・エレメントThumbnailViewConfigの変更

      WebCenter Sites Explorerで、「ElementCatalog」、「CustomElements」、「avisports」、「AVIImage」、「UI」、「Layout」、「CenterPane」、および「Search」を展開し、「View」をクリックしてコンテンツを表示します。

      sitesexplorer_search_view2

      ThumbnailViewConfigで、url列の下をクリックし、表示されたボタンをクリックします。

      thumbnailviewconfig

      エレメント・ウィンドウで、次のコード・スニペットを削除します。

      <field id="category">
          <fieldname>category</fieldname>
          <displayname>Category</displayname>
          <displayintooltip>true</displayintooltip>
      </field>

      次のコード・スニペットを追加します。

      <field id="updateddate">
          <fieldname>updateddate</fieldname>
          <displayname>Modified</displayname>
          <dateformat>MM/dd/yyyy hh:mm a z</dateformat>
          <displayintooltip>true</displayintooltip>
      </field>

      「Save」をクリックします。

      thumbnailConfig-save

      Close「x」ボタンをクリックして、エレメント・ウィンドウを閉じます。

      thumbnailConfig-close

      「Save」をクリックして、データベースの変更をコミットします。

      sitesexplorer-thumb-save

    カスタマイズのテスト

      パスワードxceladminを使ってfwadminとしてContributorインタフェースにログインします。

      contrib-login

      検索バーで、イメージのみを返すように検索をフィルタリングします。

      search-image

      「Search」をクリックします。

      search-icon

      サムネイル表示に切り替えます。

      switch-thumbnailview

      サムネイル表示は、次のように表示されます。

      searchresults-moddate

まとめ

    このチュートリアルで学習した内容は、次のとおりです。

    • 索引付けの属性を構成する
    • すべてのアセット・タイプについて、検索結果のドッキングされていないリスト表示に属性列を追加する
    • イメージ・アセット・タイプについて、検索結果のドッキングされていないサムネイル表示に属性詳細を追加する

    参考資料

    著者

    • カリキュラムの開発責任者： Jenny Wongtangswad
    • 編集者： Susan Moxley
    • QA： Krishna Chitta

このOracle by Exampleチュートリアルをナビゲートする際、次の機能を使用できます。

ヘッダー・ボタンの非表示：
ヘッダー内のボタンを非表示にするには、タイトルをクリックします。 ボタンを再表示するには、もう一度タイトルをクリックします。
トピック一覧：
トピックをクリックすると、その項に移動します。
すべてのトピックを開く：
該当する項の詳細を表示または非表示にするには、ボタンをクリックします。 デフォルトでは、すべてのトピックが閉じられています。
すべてのイメージを非表示：
スクリーンショットを表示または非表示にするには、ボタンをクリックします。 デフォルトでは、すべてのイメージが表示されています。
印刷：
コンテンツを印刷するには、ボタンをクリックします。 現在表示または非表示にされているコンテンツが印刷されます。

このチュートリアルの特定の項に移動するには、一覧からトピックを選択してください。