Oracle WebCenter Sites 11g： ダッシュボードのカスタマイズ

概要

    目的

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

    所要時間

    約60分

    概要

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

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

    このチュートリアルでは、Contributorインタフェースのダッシュボード領域をカスタマイズする方法について説明します。

    シナリオ

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

    • Contributorインタフェースのダッシュボードに「毎日のヒント」ウィジェットを追加する
    • 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またはInternet Explorer Webブラウザ

    前提条件

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

    • Oracle Universityで提供されているトレーニング・コースOracle WebCenter Sites 11g for Developerに参加している
    • Oracle WebCenter Sites 11g Contributorインタフェースの実用的な知識を持っている
    • Java、JavaScript、および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インタフェースに初めてログオンしたときに、ダッシュボードの2つの列に4つのデフォルトのウィジェット「ブックマーク」、「SmartLists」、「割当て」、および「チェックアウト」が表示されます。 ダッシュボードとダッシュボードのウィジェットの次の部分をカスタマイズできます。

    • 列数を変更する
    • 列の幅を調整する
    • ダッシュボード内のウィジェットの表示名、高さ、および位置を変更する
    • ウィジェットを追加する

    ダッシュボード

    ElementCatalogでダッシュボードをカスタマイズします。

    • すべてのコンテンツ管理サイトのダッシュボードをカスタマイズするには、「CustomElements」→「UI」→「Layout」→「CenterPane」の下にカスタム・エレメントを配置します。
    • 特定のサイトのダッシュボードをカスタマイズするには、「CustomElements」→「<サイト名>」→「UI」→「Layout」→「CenterPane」の下にエレメントを配置します。

次に、サンプル・エレメントDashBoardContentsConfigを示します。

    sampleConfigElement

    次の表に、ウィジェットのカスタマイズ可能なプロパティを示します。

    プロパティ名 説明 値
    name
         		ウィジェットの名前を表示
    		 任意の文字列値
    height
         		ウィジェットの高さを調整
    		 ピクセル（350pxなど）
    dragRestriction
         		ウィジェットのドラッグと再配置を制限
    		 true | false
    column
         		ウィジェットを表示する列を指定
    		 1～n。ここで、nは<numberofcolumns>に指定されている値
    closeable
         		ウィジェットを閉じることができるかどうかを指定
    		 true | false
    open デフォルトでウィジェットを開くことを指定
    		 true | false

ダッシュボードへの「毎日のヒント」ウィジェットの追加

    この項では、新しい「毎日のヒント」ウィジェットを作成してダッシュボードに追加します。 「毎日のヒント」ウィジェットは、表示のみの単純なカスタマイズです。 次のタスクについて説明します。

    • カスタム・エレメント「毎日のヒント」ウィジェットの作成
    • カスタム・エレメントDashboardContentsConfigの編集
    • 「毎日のヒント」ウィジェットの登録

    カスタム・エレメント「毎日のヒント」ウィジェットの作成

      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

      「ElementCatalog」→「CustomElements」→「avisports」→「UI」→「Layout」→「CenterPane」に移動し、「CenterPane」を右クリックします。

      centerpane-contents

      「New」→「Folder」を選択します。

      centerpane-newfolder

      フォルダの名前にDashBoardと入力します。

      newfolder-dashboard

      右側のパネルで、elementnameの下を右クリックし、「New」を選択します。

      newelement

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

      newelement-dailytips

      「DailyTipsHtml」を選択した状態で、url列の下をクリックし、表示されたボタンをクリックします。

      newelement-url

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

      verify-newelement

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

      <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="'class':'fwPortletContainer'">
          <span data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top','class':'portletTitleButtons'">
          </span>
          <div>Be sure to add assets you frequent to your Bookmarks list. This will help you work more efficiently in the system.</div>
      </div>

      elementcode

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

      explorer-save

      エレメントを閉じます。

      explorer-closeElement

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

      explorer-saveDBchanges

    カスタム・エレメントDashboardContentsConfigの編集

      左側のパネルで、「CenterPane」をクリックし、右側のパネルにコンテンツを表示します。

      explorer-centerpane

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

      explorer-dashboardconfig

      エレメント・ウィンドウで、<components>の下に次のコードを追加して「毎日のヒント」ウィジェットを登録します。

      <component id="dailytips">
          <name>Daily Tips</name>
          <url>UI/Layout/CenterPane/DashBoard/DailyTips</url>
          <height>300px</height>
          <closable>false</closable>
          <open>true</open>
          <dragRestriction>false</dragRestriction>
          <style>smartListPortlet</style>
          <column>1</column>
      </component>

      explorer-registerWidget

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

      explorer-save

      エレメントを閉じます。

      explorer-closeElement

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

      explorer-saveDBchanges

    「毎日のヒント」ウィジェットの登録

      「毎日のヒント」ウィジェットを変更するには、以下の手順を実行します。

      a. <applicationServer_install_directory>/webapps/<cs_context>/WEB-INF/classes/ReqAuthConfig.xmlファイルに移動します。

      b. テキスト・エディタでファイルを開きます。

      c. excludedControllerElementsの下に次のパスを追加します。<value>UI/Layout/CenterPane/DashBoard/DailyTips</value>

      d. 変更を保存します。

      ReqAuthConfig

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

      contributor-ui-login

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

      select-site-app

      「毎日のヒント」ウィジェットがContributorインタフェースのダッシュボード・ビューに表示されていることを確認します。

      dashboard-dailytips

ダッシュボードへの「最近変更されたアセット」ウィジェットの追加

    この項では、前週に変更されたアセットを示す、「最近変更されたアセット」ウィジェットを作成します。 カスタムの「最近変更されたアセット」ウィジェットには、アクション・エレメントとプレゼンテーション・エレメントの両方が含まれます。 次のタスクについて説明します。

    • カスタム・エレメントActionの作成
    • カスタム・エレメントJsonの作成
    • カスタム・エレメントHtmlの作成
    • カスタム・エレメントDashBoardContentsConfigの編集
    • カスタムのウィジェットの登録

    カスタム・エレメントActionの作成

      WebCenter Sites Explorerで、「ElementCatalog」→「CustomElements」→「avisports」→「UI」→「Layout」→「CenterPane」→「DashBoard」に移動し、「DashBoard」をクリックします。

      explorer-dashboard

      elementnameの下を右クリックして、「New」を選択します。

      newelement

      elementnameにRecentlyModifiedAssetsActionと入力します。

      newelement-named

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

      modified-assets-url

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

      verify-jsp

      既存のすべてのコードを次のコードに置き換えます。

      <%@page import="com.fatwire.ui.util.GenericUtil"
      %><%@page import="org.codehaus.jackson.map.ObjectMapper"
      %><%@page import="com.fatwire.cs.ui.framework.UIException"
      %><%@page import="java.util.*"
      %><%@taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"
      %><%@page import="com.fatwire.services.beans.search.SearchCriteria"
      %><%@page import="com.fatwire.services.SearchService"
      %><%@page import="com.fatwire.services.ServicesManager"
      %><%@page import="com.fatwire.system.SessionFactory"
      %><%@page import="com.fatwire.system.Session"
      %><%@page import="com.fatwire.cs.core.search.data.ResultRow"
      %><%@page import="com.fatwire.cs.core.search.data.IndexData"
      %><%@page import="com.fatwire.assetapi.data.AssetId"
      %><%@page import="com.openmarket.xcelerate.asset.AssetIdImpl"
      %><cs:ftcs>
      <%
      try {
         
          // This element uses the search service to look for the assets modified in past week for the logged in site.
          // build search criteria
          SearchCriteria searchCriteria = new SearchCriteria();   
          searchCriteria.setSiteId(GenericUtil.getLoggedInSite(ics));   
          searchCriteria.setModifiedDateOption(SearchCriteria.DateOption.PASTWEEK);
         
          //call search service to get assets modified by logged in user since last week
          Session ses = SessionFactory.getSession();
          ServicesManager servicesManager =(ServicesManager)ses.getManager(ServicesManager.class.getName());
          SearchService searchService =  servicesManager.getSearchService();
          List<ResultRow> searchResults = searchService.search(searchCriteria, -1, null);
         
          // build the asset list, its a list of map   
          List<Map>  assets = new ArrayList<Map>();   
          for (ResultRow r : searchResults)
          {   
              Map asset = new HashMap();
              //this map will have, id, name, type and asset fields.
              String id  = r.getIndexData("id").getData();
              String type = r.getIndexData("AssetType").getData();
              AssetId assetId = new AssetIdImpl(type, Long.parseLong(id));
              asset.put("id", assetId.toString());
              asset.put("asset", assetId);
              asset.put("name", r.getIndexData("name").getData());       
              asset.put("type", r.getIndexData("AssetType").getData());
              assets.add(asset);       
          }
          request.setAttribute("assets", assets);
      } catch(Exception e) {
          e.printStackTrace();
          UIException uie = new UIException(e);
          request.setAttribute(UIException._UI_EXCEPTION_, uie);
          throw uie;
      }%>
      </cs:ftcs>

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

      recentlymodifiedassetsaction-save

      エレメントを閉じます。

      recentlymodifiedassetsaction-close

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

      saveDBchanges

    カスタム・エレメントJsonの作成

      elementnameの下を右クリックして、「New」を選択します。

      explorer-dashboard-newelement-2

      elementnameにRecentlyModifiedAssetsJsonと入力します。

      newelement-named

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

      newelement-url

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

      verify-newelement

      既存のすべてのコードを次のコードに置き換えます。

      <%@page import="com.fatwire.ui.util.GenericUtil"
      %><%@page import="org.codehaus.jackson.map.ObjectMapper"
      %><%@page import="com.fatwire.cs.ui.framework.UIException"
      %><%@page import="com.fatwire.services.ui.beans.UIAssetBean"
      %><%@page import="java.util.*"
      %><%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"
      %>
      <cs:ftcs>
      <%
      try {
          // The list of assets gets converted into json string using Jackson API.
          List<Map> result = (List<Map>)request.getAttribute("assets");
          // the json string in this case is similar to
          //[{"id":"AVIArticle:1328196047443","asset":{"id":1328196047443,"type":"AVIArticle"},"name":"U.S. Olympic Skiers Prep for Games","type":"AVIArticle"},...]
          String json = new ObjectMapper().writeValueAsString(result);   
      %>
          {"identifier": "id","items":<%=json%>}
      <%
      } catch(Exception e) {
          UIException uie = new UIException(e);
          request.setAttribute(UIException._UI_EXCEPTION_, uie);
          throw uie;
      }%>
      </cs:ftcs>

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

      recentlymodifiedassetsjson-save

      エレメントを閉じます。

      recentlymodifiedassetsjson-close

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

      saveDBchanges

    カスタム・エレメントHtmlの作成

      elementnameの下を右クリックして、「New」を選択します。

      explorer-dashboard-newelement-3

      elementnameにRecentlyModifiedAssetsHtmlと入力します。

      newelement-3

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

      recentlymodifiedassetshtml-url

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

      verify-newelement-jsp

      既存のすべてのコードを次のコードに置き換えます。

      <%@page import="com.fatwire.cs.ui.framework.UIException"
      %><%@page import="com.fatwire.ui.util.GenericUtil"
      %><%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"
      %><%@ taglib prefix="controller" uri="futuretense_cs/controller.tld"
      %><%@ taglib prefix="xlat" uri="futuretense_cs/xlat.tld"
      %><%@ page import="org.apache.commons.lang.StringEscapeUtils"
      %><cs:ftcs><%
      try {
          // change the url passed to buildControllerURL() as per the location of RecentlyModifiedAssetsAction
          String storeUrl = GenericUtil.buildControllerURL("UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssets", GenericUtil.JSON);
      %>

      <script>


          dojo.unsubscribe(myContextMenuSubscription);

          // listening to bookmarkcontext menu right click event
          var myContextMenuSubscription = dojo.subscribe("fw/ui/dashboard/mycontextmenu",  "myContextMenu");

          function myContextMenu(args){
              //Summary
              //        this function publishes dojo topic '/fw/ui/app/oncontext' with specified function id and asset data.
              // args
              //        {label: 'label', functionid: 'functionId'}
              var assetData = getSelectedAsset();
              // publish the generic 'oncontext' event
              dojo.publish('/fw/ui/app/oncontext', [{functionid: args.functionid, asset:assetData}]);
          }
         
          function getSelectedAsset(){
              //Summary
              //        This method returns the selected asset from the grid
              //returns
              //        asset{type:assetType, id:assetId, name:assetName}
              var grid = dijit.byId("myGridId");
              var asset, store, item;
              if(grid){
                  // get the selected items, we are interested in first item
                  items = grid.selection.getSelected();
                  if(items && items.length == 1){
                      store = grid.store;
                      item = items[0];
                      if(item && store) {
                          // get the selected asset
                          asset = {
                              "type": store.getValue(item, 'type'),
                              "id": store.getValue(item, 'id'),
                              "name": store.getValue(item, 'name')
                          };
                      }
                  }
                  else{
                      fw.ui.app.displayMessage("No assets selected.", "warn");
                      return;
                  }
              }   
              return asset;
          }
         
          function refreshRecentAssets(){
              //summary
              //        This method fetches the assets and builds grid's store and refreshes the grid.
              var grid = dijit.byId("myGridId");
              if(grid){
                  store = new dojo.data.ItemFileReadStore({
                      url: '<%=storeUrl%>'
                  });
                  // reset the store for the grid and refresh
                  if (grid.store) {
                      grid.store.close();
                  }
                  grid.setStore(store);
                  //startup grid after the store set.
                  grid.startup();
                  grid._refresh();
                  grid.selection.deselectAll();
              }
          }
         
      </script>

      <%-- build the context menu --%>
      <controller:callelement elementname="UI/Layout/CenterPane/Search/View/ContextMenu">
          <controller:argument name="menuId" value="myMenuId" />
          <controller:argument name="configName" value="UI/Layout/CenterPane/DashBoard/ContextMenuConfig"/>
          <controller:argument name="topic" value="fw/ui/dashboard/mycontextmenu" />
      </controller:callelement>

      <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="'class':'fwPortletContainer'">
          <span data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top','class':'portletTitleButtons'">       
              <span
                  data-dojo-type="dijit.form.Button"
                  data-dojo-props="
                      onClick: function() {
                          refreshRecentAssets();
                      }
                  ">
                  <img src="wemresources/images/ui/ui/dashboard/refreshIcon.png" height="26" width="26" alt="" title=""/>
              </span>       
          </span>
         
          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center','class':'fwGridContainer'">   
              <!-- Build Grid -->   
              <controller:callelement elementname="UI/Layout/Utils/Grid">
                  <controller:argument name="configName" value="UI/Layout/Utils/GridConfig"/>
                  <controller:argument name="storeURL" value="<%=storeUrl%>" />
                  <controller:argument name="storeId" value="myStoreId"/>
                  <controller:argument name="storeType" value="dojo.data.ItemFileReadStore" />
                  <controller:argument name="gridId" value="myGridId" />
                  <controller:argument name="contextMenuId" value="myMenuId"/>
                  <!-- possible values of selection mode are 'none', 'single', 'multiple' and 'extended' -->
                  <controller:argument name="selectionMode" value="single"/>
              </controller:callelement>
              <div class="buttonContainer">
                  <div
                      data-dojo-type="fw.ui.dijit.Button"
                      data-dojo-props="
                          label:'Refresh',
                          onClick: function() {
                              refreshRecentAssets();
                          }
                      ">
                  </div>
              </div>   
          </div>
         
      </div>
      <%
      } catch(Exception e) {
          UIException uie = new UIException(e);
          request.setAttribute(UIException._UI_EXCEPTION_, uie);
          throw uie;
      }%>
      </cs:ftcs>

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

      recentlymodifiedassetshtml-save

      エレメントを閉じます。

      recentlymodifiedassetshtml-close

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

      saveDBchanges-3

    カスタム・エレメントDashBoardContentsConfigの編集

      左側のパネルで、「ElementCatalog」→「CustomElements」→「avisports」→「UI」→「Layout」→「CenterPane」に移動し、「CenterPane」をクリックします。

      explorer-centerpane

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

      dashboardcontentsconfig-url

      <components>の下に次のコード・スニペットを追加します。

      <component id="recentassets">
          <name>Recently Modified Assets</name>
          <url>UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssets</url>
          <height>300px</height>
          <closable>false</closable>
          <open>true</open>
          <dragRestriction>false</dragRestriction>
          <style>checkoutPortlet</style>
          <column>2</column>
      </component>

      dashboardcontentsconfig-snippet

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

      dashboardcontentsconfig-save

      エレメントを閉じます。

      dashboardcontentsconfig-close

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

      savedbchanges

    カスタムのウィジェットの登録

      カスタムのウィジェットを登録するには、以下の手順を実行します。

      a. <applicationserver_install_directory>/webapps/<cs_context>/WEB-INF/classes/ReqAuthConfig.xmlファイルに移動します。

      b. テキスト・エディタでファイルを開きます。

      c. excludedControllerElementsの下に、次のカスタム・エレメントのパスを追加します。 <value>UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssets</value>

      d. 変更を保存します。

      e. ReqAuthConfig.xmlファイルを閉じます。

      reqauthconfig

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

      login-contributorUI

      ダッシュボード領域で、「最近変更されたアセット」ウィジェットが表示されていることを確認します。 ウィジェットで最近変更されたアセットが何も生成されない場合は、コンテンツ・ツリーのアセットを編集および保存して、ダッシュボード・ビューをリフレッシュします。

      dashboard-recentlymodifiedassets


まとめ

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

    • Contributorインタフェースのダッシュボードをカスタマイズする
    • WebCenter Sites Explorerでカスタム・エレメントを作成する
    • ダッシュボードに新しい「毎日のヒント」ウィジェットを追加する
    • ダッシュボードに「最近変更されたアセット」ウィジェットを追加する

    参考資料

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

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

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