| Oracle® Fusion Middleware WebCenter Sites開発者ガイド 11gリリース1 (11.1.1.8.0) E49681-03 |
|
 前 |
 次 |
この章では、WebCenter Sites Contributorインタフェースのリストおよびサムネイルの検索ビューをカスタマイズする方法について説明します。
この章は、次の項が含まれています。
ユーザーがWebCenter SitesのContributorインタフェースにログインして、サイトにアクセスする場合、簡易検索または詳細検索を実行して、必要なアセットを検索できます。検索結果は、「リスト表示」または「サムネイル表示」のいずれかに表示されます。この項では、様々な検索ビュー、そのカスタマイズ可能な機能、および検索ビューの構成を制御するエレメントについて説明します。検索機能とビューに関する情報が必要な場合は、『Oracle WebCenter Sitesユーザーズ・ガイド』を参照してください。この項の内容は、次のとおりです。
検索結果パネルはドッキングされている状態またはドッキングされていない状態で、リスト表示またはサムネイル表示として表示できます。したがって、Contributorインタフェースには、次のビューが表示されます。
ドッキングされていないリスト
ドッキングされたリスト
ドッキングされていないサムネイル
ドッキングされたサムネイル
編集用にオープンになっているアセットが存在しない場合にのみ、ドッキングされていないビューが開きます。ドッキングされたビューは、編集モードのアセットにアタッチされるため、アセットが編集モードでオープンになっている場合にのみ開きます。
図65-1は、リスト表示でカスタマイズ可能な機能を示しています。図65-2は、サムネイル表示でカスタマイズ可能な機能を示しています。詳細は、第65.3項「ドッキングされていないビューのカスタマイズ」を参照してください。これはドッキングされたビューにも適用されます。
ソート・メニューとツールチップは個別にカスタマイズされます。詳細は、第65.5項「ソート・メニューおよびツールチップのカスタマイズ」を参照してください。
どのビューが指定のモードでデフォルトで開くかは、構成設定とユーザーの検索習慣にかかっています。たとえば、ドッキング解除済モードでのデフォルト・ビューとしてサムネイル表示を設定した場合、ユーザーがドッキング解除済モードで最初に検索を実行するときにサムネイル表示が開き、リスト表示に切り替えるまでサムネイル表示が開かれたままになります(ブラウザのCookieが消去されるまで、検索によりユーザーの選択内容が記憶されます)。
リスト表示のカスタマイズ可能な機能は次のとおりです。
返されるアイテムの最大数
ページ当たりの行数
表示するフィールド(列)
列の表示名
列幅
日付とその他のフィールドのフォーマット
デフォルトのソート・フィールドとソート順
ソート・メニュー(ドッキング・モード)
コンテキスト(右クリック)メニュー
ツールチップ(ドッキング・モード)
サムネイル表示のカスタマイズ可能な機能は次のとおりです。
返されるアイテムの最大数
ページ当たりの行数
特殊なサムネイルを表示するアセット・タイプ
表示するフィールド
日付とその他のフィールドのフォーマット
デフォルトのソート・フィールドとソート順
ソート・メニュー
コンテキスト(右クリック)メニュー
ツールチップ(ドッキング・モード)
システム定義およびカスタム定義のビューは、同様のプロセスでレンダリングされます。このことを例示するために、まず、システム定義ビューをレンダリングします。
システム定義ビューは、次のエレメント(JSP)によってレンダリングされます。ドッキングされていないビューとドッキングされたビューの名前はDocked接頭辞のみが異なります。
ドッキングされていない場合:
リスト表示は、エレメントUI/Layout/CenterPane/Search/View/ListViewHtmlによってレンダリングされます。
サムネイル表示は、エレメントUI/Layout/CenterPane/Search/View/ThumbnailViewHtmlによってレンダリングされます。
ドッキングされた場合:
リスト表示は、エレメントUI/Layout/CenterPane/Search/View/DockedListViewHtmlによってレンダリングされます。
サムネイル表示は、エレメントUI/Layout/CenterPane/Search/View/DockedThumbnailViewHtmlによってレンダリングされます。
ドッキングされていないビューとドッキングされたビューのレンダリングは似ています(ドッキングされたビューのエレメントの名前がDockedで始まることを除く)。次の手順は、ドッキングされていないビューのレンダリングを示しています。
ユーザーが検索ルーチンを実行する場合、検索機能によってユーザーの現在のビューが決まります。これはデフォルト・ビューか、それ以降に選択されたビューのいずれかです。
|
注意: デフォルト・ビューは、初めて検索が実行されるときにシステムがレンダリングするビューです。(リスト表示は、ドッキング解除済モードとドッキング・モードの両方のシステム定義のデフォルト・ビューです。)ユーザーが別のビューに切り替える場合、ブラウザのCookieが消去されるまで、ユーザーの選択内容が記憶され、表示され続けます。 |
検索機能により、UI/Layout/CenterPane/Search/SearchResultsConfigが読み取られ、ビューのレンダリングを開始するエレメントへのパスが取得されます。
ユーザーが初めて検索を実行しているか、またはデフォルト・ビューを使用し続けている場合、検索により、<defaultview>プロパティの値が読み取られます。
ユーザーのビューがデフォルト・ビュー以外の場合、検索により、(手順1で決定されたビューに応じて)<listview>または<thumbnailview>プロパティのいずれかの値が読み取られます。
検索により、リスト表示がレンダリングされる必要があることが決定される場合、エレメントUI/Layout/CenterPane/Search/View/ListViewConfigが読み取られ、UI/Layout/CenterPane/Search/View/ListViewHtmlが呼び出されて、リスト表示がレンダリングされます。検索により、サムネイル表示がレンダリングされる必要があることが決定される場合は、エレメントUI/Layout/CenterPane/Search/View/ThumbnailViewConfigが読み取られ、UI/Layout/CenterPane/Search/View/ThumbnailViewHtmlが呼び出されて、サムネイル表示がレンダリングされます。
前述のシステム定義のエレメントは、すべてオーバーライドできます。同じ名前を付けた独自のエレメントをカスタマイズして、それらをCustomElementsの下に配置して、図65-1および図65-2の変更を実現してください。エレメントUI/Layout/CenterPane/Search/View/SearchTopBarConfigおよびUI/Layout/CenterPane/Search/View/SearchToolTipHtmlをそれぞれ使用して、ソート・メニューやツールチップなどの、個々の機能をカスタマイズすることもできます。
エレメントの包括的なリストについては、第65.1.4項「検索ビューの構成エレメント」を参照してください。
この項では、検索ビューのカスタマイズに使用するJSPエレメントについて概説します。
システム定義の構成エレメント: 検索ビューおよびグローバルな検索、またはサイト、アセット・タイプ、サイトとアセット・タイプの両方に固有の検索をカスタマイズするには、同じ名前を付けたエレメントを構成します。カスタマイズしたエレメントのすべてをCustomElementsの下に格納する必要があります(例については、図65-3を参照してください)。エレメントの概要については、次の表を参照してください。
カスタム・エレメント: 表65-4に、WebCenter Sitesに同梱されている、カスタマイズ・コードを例示するためのサンプル・カスタム・エレメントを示します。
表65-1 ドッキングされていない検索ビューの構成エレメント
| 構成エレメント(JSP)へのパス | 説明 | …を参照 |
|---|---|---|
|
|
ドッキング解除済モードにあるデフォルトの検索ビュー(リスト表示またはサムネイル表示)を設定するエレメント。 |
第65.3.2項「デフォルトのドッキングされていないビューのリストまたはサムネイルへの設定」 |
|
|
ドッキングされていないリスト表示を構成するエレメント。 |
第65.3.3項「ドッキングされていないリスト表示のカスタマイズ」 |
|
|
ドッキングされていないサムネイル表示を構成するエレメント。 |
第65.3.4項「ドッキングされていないサムネイル表示のカスタマイズ」 |
表65-2 ドッキングされた検索ビューの構成エレメント
| 構成エレメント(JSP)へのパス | 説明 | …を参照 |
|---|---|---|
|
|
ドッキング・モードにあるデフォルトの検索ビュー(リスト表示またはサムネイル表示)を設定するエレメント。 |
|
|
|
ドッキングされたリスト表示を構成するエレメント。 |
|
|
|
ドッキングされたサムネイル表示を構成するエレメント。 |
|
表65-3 検索ビューの他の機能の構成およびプレゼンテーション・エレメント
| 構成エレメント(JSP)へのパス | 説明 | …を参照 |
|---|---|---|
|
|
ドッキングされたリスト、ドッキングされていないサムネイルおよびドッキングされたサムネイル表示のソート・ドロップダウン・メニューのソート・オプションとしてフィールドを構成するエレメント。 |
|
|
|
ドッキングされたビュー(リストおよびサムネイル)のツールチップを構成するエレメント。このエレメントにより、ツールチップの外観とカスタム・メッセージを構成できます。 |
|
|
|
コンテキスト(右クリック)メニューを構成するエレメント。このエレメントは、すべての検索ビューに対して有効です。 |
|
表65-4 検索ビューのカスタム・サンプル・エレメント
| サンプル・エレメントへのパス | 説明 |
|---|---|
|
|
avisportsサンプル・サイトにあるAVIArticleアセット・タイプのドッキングされていないサムネイル表示の構成エレメント。 |
|
|
avisportsサイトにあるAVIArticleアセット・タイプのドッキングされたサムネイル表示の構成エレメント。 |
|
|
avisportsサンプル・サイトにあるAVIImageアセット・タイプのドッキングされていないサムネイル表示の構成エレメント。 |
|
|
avisportsサンプル・サイトにあるAVIImageアセット・タイプのドッキングされたサムネイル表示の構成エレメント。 |
|
|
avisportsサンプル・サイトのドッキングされていないサムネイル表示の構成エレメント。 |
|
|
avisportsサンプル・サイトのドッキングされたサムネイル表示の構成エレメント。 |
ドッキング解除済モードおよびドッキング・モードでビューをカスタマイズする場合、類似した手順を実行します。主な違いは次のとおりです。
ドッキングされてないビューおよびドッキングされたビューのカスタマイズ:
ドッキングされていないビューをカスタマイズする場合は、第65.3項「ドッキングされていないビューのカスタマイズ」の手順に従い、その項で示すように構成エレメント(JSP)に名前を付けます(表65-1にも記載されています)。ドッキングされたビューをカスタマイズする場合も、第65.3項「ドッキングされていないビューのカスタマイズ」の手順に従いますが、表65-2に示すように構成エレメントに名前を付けます(つまり、Docked接頭辞を付けます)。
検索ビューのソート・メニューおよびツールチップのカスタマイズ:
ソート・メニューおよびツールチップを作成するエレメントは、ドッキング解除済モードおよびドッキング・モードの両方に適用されます。モードに関係なく、表65-3(および第65.5項「ソート・メニューおよびツールチップのカスタマイズ」)に示すように、エレメントに名前を付けます。
ドッキングされたリスト表示またはドッキングされたサムネイル表示でフィールドを表示する場合:
デフォルトで、UI/Layout/CenterPane/Search/View/DockedListViewConfigエレメントは、UI/Layout/CenterPane/Search/View/ListViewConfigエレメントを指し、最初のリストされたフィールドのみを取得して、ドッキングされたリスト表示でその名前を表示します。フィールドは、最初の<field>プロパティで、次のように定義されます。
<field>
<fieldname>fieldname</fieldname>
<displayname>DisplayName</displayname>
ドッキングされたリスト表示で他のフィールド名を表示する場合は、カスタムDockedListViewConfig.jspエレメントでその名前を指定する必要があります。同じロジックは、ドッキングされたサムネイル表示のフィールド名の表示に適用されます(構成エレメントがThumbnailViewConfigおよびDockedThumbnailViewConfigと名付けられることを除く)。
ドッキングされていないリスト表示およびサムネイル表示のカスタマイズには、同じ名前を付けた独自のエレメントを構成し、それらをCustomElementsの下に配置して、表65-1に示されているシステム定義のエレメントをオーバーライドすることが関係しています。
この項の内容は、次のとおりです。
ドッキングされていないビューをカスタマイズするには、次の手順の任意の組合せを実行します。
すべてのアセット・タイプまたは選択したアセット・タイプに対して、デフォルトのドッキングされていないビューをリストまたはサムネイルとなるように設定します。ビューを設定するには、第65.3.2項「デフォルトのドッキングされていないビューのリストまたはサムネイルへの設定」に示すように、エレメントUI/Layout/CenterPane/Search/SearchResultsConfigをオーバーライドします。
ドッキングされていないリスト表示またはサムネイル表示(あるいはその両方)を構成します。ビューに表示される列数の指定、列名と列幅の構成、返されるアイテムのソート順の指定などを行うことができます(図65-1および図65-2を参照)。
リスト表示を構成するには、第65.3.3項「ドッキングされていないリスト表示のカスタマイズ」で説明しているように、エレメントUI/Layout/CenterPane/Search/View/ListViewConfigをオーバーライドします。
サムネイル表示を構成するには、第65.3.4項「ドッキングされていないサムネイル表示のカスタマイズ」で説明しているように、エレメントUI/Layout/CenterPane/Search/View/ThumbnailViewConfigをオーバーライドします。
ビューのソート・メニューなど、追加機能を構成します。この手順では、ビュー自体ではなく、ビューの機能(ソート・メニューなど)に固有のJSPエレメントを構成します。詳細は、第65.5項「ソート・メニューおよびツールチップのカスタマイズ」を参照してください。
デフォルトの検索ビュー(リストまたはサムネイル)を設定する場合、すべてのアセット・タイプに対してグローバルに設定できます。選択したアセット・タイプに対してデフォルトの検索ビューを指定することもできます。
デフォルトの検索ビューを設定するには:
CustomElementsの下に独自のSearchResultsConfig.jspを作成し、そのプロパティをカスタマイズすることによって、エレメントUI/Layout/CenterPane/Search/SearchResultsConfigをオーバーライドします。
次に、UI/Layout/CenterPane/Search/SearchResultsConfigエレメントを示します。表65-5のプロパティの説明が続きます。
エレメントUI/Layout/CenterPane/Search/SearchResultsConfig:
<searchconfig>
<listview>UI/Layout/CenterPane/Search/View/ListView</listview>
<thumbnailview>UI/Layout/CenterPane/Search/View/ThumbnailView</thumbnailview>
<defaultview>listview</defaultview>
<assettypeviews>
<assettype id="Page" name="Page">listview</assettype>
…
…
…
</assettypeviews>
</searchconfig>
表65-5 UI/Layout/CenterPane/Search/SearchResultsConfigのプロパティ
| プロパティ | 説明 | 値 |
|---|---|---|
|
|
ListViewコントローラ・エレメントへのパス |
注意: このプロパティの値を変更しないでください。 |
|
|
ThumbnailViewコントローラ・エレメントへのパス |
注意: このプロパティの値を変更しないでください。 |
|
|
リストまたはサムネイルがデフォルト・ビューであるかどうかを指定します。 注意: デフォルト・ビューは、初めて検索を実行するときに開くビューです。ユーザーがビューを切り替える場合は、ブラウザのCookiesが消去されるまで、ユーザーの選択内容が記憶されます。 |
注意: このプロパティの値は、大文字と小文字を区別します。 |
|
|
1つ以上のアセット・タイプに対してデフォルト・ビューを選択的に構成するために使用します。 |
なし |
|
|
アセット・タイプおよびそのデフォルト・ビューの指定に使用します(ユーザーが別のビューに切り替えるか、またはブラウザのCookiesを消去するまで、そのままの状態になります)。 必要な数のアセット・タイプを指定できます( |
|
リスト表示をカスタマイズする場合は、返されるコンテンツのタイプとそのプレゼンテーションを設定できます。
ドッキングされていないリスト表示をカスタマイズするには:
CustomElementsの下に独自のListViewConfig.jspを作成し、そのプロパティをカスタマイズすることによって、UI/Layout/CenterPane/Search/View/ListViewConfigエレメントをオーバーライドします。
次に、UI/Layout/CenterPane/Search/View/ListViewConfigエレメントを示します。表65-6のプロパティの説明が続きます。
エレメントUI/Layout/CenterPane/Search/View/ListViewConfig:
<listviewconfig>
<numberofitems>1000</numberofitems>
<numberofitemsperpage>100</numberofitemsperpage>
<defaultsortfield> </defaultsortfield>
<defaultsortorder> </defaultsortorder>
<fields>
<field id="name">
<fieldname>name</fieldname>
<displayname>Name</displayname>
<width>350px</width>
<formatter>fw.ui.GridFormatter.nameFormatter</formatter>
<displayintooltip>true</displayintooltip>
</field>
<field id="updateDate">
<fieldname>updateddate</fieldname>
<displayname>Modified</displayname>
<!-- <dateformat>MM/dd/yyyy hh:mm a z </dateformat> -->
<javadateformat>SHORT</javadateformat>
<width>auto</width>
<formatter></formatter>
<displayintooltip>true</displayintooltip>
</field>
…
…
…
</fields>
</listviewconfig>
表65-6 UI/Layout/CenterPane/Search/View/ListViewConfigのプロパティ
| プロパティ | 説明 | 値 |
|---|---|---|
|
|
検索によって返されるアイテムの最大数。 |
注意: |
|
|
検索結果に必要なページ当たりの行数。 |
|
|
|
検索結果をフェッチする場合に検索によってソートされる必要があるデフォルト・フィールド。 |
デフォルトは空です。したがって、検索結果は関連性を基準に表示されます。他のフィールドをソート用にデフォルトとして設定する必要がある場合は、このエレメントを構成します。 |
|
|
検索で使用されるソート順。 |
|
|
|
リスト表示で表示される列。これらの列は、 注意: アセット・タイプ固有の構成を作成し、検索結果にアセット・タイプ固有の属性を表示する場合は、アセット・タイプ索引と属性検索を有効にする必要があります。詳細は、『Oracle Fusion Middleware WebCenter Sites管理者ガイド』を参照してください。
この手順をスキップする場合は、検索によりグローバル索引が使用されます。 |
なし |
|
|
リスト表示に表示される列を定義します。 |
|
|
|
列にレンダリングするアセットのフィールド名。 |
この名前は、Lucene索引の列名と一致している必要があります。 注意: |
|
|
列ヘッダーに表示される表示名。 |
英数字文字列 |
|
|
ピクセル単位の列幅。 |
注意: 最後のフィールドの幅を |
|
|
希望のフォーマットで列の値を表示するDojoフォーマッタ機能。 |
フォーマッタは、dojoモジュールで使用できる必要があります。 |
|
|
関連するフィールドがドッキングされたリスト表示のツールチップでリストされる必要があるかどうかを示します。 注意: エレメント |
|
|
|
日付フィールドにのみ適用されます。これは、日付が |
有効な日付フォーマット文字列。 注意: |
|
|
日付フィールドにのみ適用されます。 |
有効な値は、 注意: |
サムネイル表示をカスタマイズする場合は、返されるコンテンツのタイプとそのプレゼンテーションを設定できます。
ドッキングされていないサムネイル表示をカスタマイズするには:
CustomElementsの下に独自のThumbnailViewConfig.jspを作成し、そのプロパティをカスタマイズすることによって、エレメントUI/Layout/CenterPane/Search/View/ThumbnailViewConfigをオーバーライドします。
次に、UI/Layout/CenterPane/Search/View/ThumbnailViewConfigエレメントを示します。表65-7のプロパティの説明が続きます。
|
注意:
|
エレメントUI/Layout/CenterPane/Search/View/ThumbnailViewConfig:
<thumbnailviewconfig>
<numberofitems>1000</numberofitems>
<defaultsortfield></defaultsortfield>
<defaultsortorder></defaultsortorder>
<numberofitemsperpage>12</numberofitemsperpage>
<formatter>fw.ui.GridFormatter.thumbnailFormatter</formatter>
<fields>
<field id="name">
<fieldname>name</fieldname>
<displayname>Name</displayname>
<displayintooltip>true</displayintooltip>
</field>
<field id="updateDate">
<fieldname>updateddate</fieldname>
<displayname>Modified</displayname>
<!-- <dateformat>MM/dd/yyyy hh:mm a z </dateformat> -->
<javadateformat>SHORT</javadateformat>
<displayintooltip>true</displayintooltip>
</field>
…
…
…
</fields>
<assettypes>
<assettype id="unique_identifier">
<type>AVIImage</type>
<subtype>Image</subtype>
<element>UI/Layout/CenterPane/Search/View/ImageThumbnail</element>
<attribute>imageFile</attribute>
</assettype>
…
…
…
</assettypes>
</thumbnailviewconfig>
表65-7 UI/Layout/CenterPane/Search/View/ThumbnailViewConfigのプロパティ
| プロパティ | 説明 | 値 |
|---|---|---|
|
|
検索によって返されるアイテムの最大数。 |
注意: |
|
|
検索結果に必要なページ当たりの行数。 |
|
|
|
希望のフォーマットで値を表示するDojoフォーマッタ機能。 |
フォーマッタは、dojoモジュールで使用できる必要があります。 |
|
|
検索結果をフェッチする場合に検索によりソートされる必要があるデフォルトのソート・フィールド。 |
デフォルトは空です。したがって、検索結果は関連性を基準に表示されます。他のフィールドをソート用にデフォルトとして設定する必要がある場合は、このエレメントを構成します。 |
|
|
検索で使用されるソート順。 |
これは、 |
|
|
サムネイル表示のサムネイルの下に表示されるフィールド。これらのフィールドは、 注意: アセット・タイプ固有の構成を作成し、検索結果にアセット・タイプ固有の属性を表示する場合は、アセット・タイプ索引と属性検索を有効にする必要があります。詳細は、『Oracle Fusion Middleware WebCenter Sites管理者ガイド』の次の項を参照してください。
この手順をスキップする場合は、検索によりグローバル索引が使用されます。 |
なし |
|
|
サムネイルの下のフィールドを記述します。 |
|
|
|
サムネイルの下にレンダリングされるアセットのフィールド名。 |
この名前は、Lucene索引の列名と一致している必要があります。 注意: |
|
|
サムネイルの下にレンダリングされる表示名。 |
英数字文字列 |
|
|
日付フィールドにのみ適用されます。これは、日付が |
有効な日付フォーマット文字列。 注意: |
|
|
日付フィールドにのみ適用されます。 |
有効な値は、 注意: |
|
|
関連するフィールドがドッキングされているサムネイル表示のツールチップでリストされる必要があるかどうかを示します。 注意: エレメント |
|
|
|
このセクションでは、特殊なサムネイルが表示されるアセット・タイプを指定します。各アセット・タイプには、コンテンツがサムネイルとしてレンダリングされる属性がある必要があります。 このセクションをいつカスタマイズする必要があるかの詳細は、第65.3.4.1項「ThumbnailViewConfigエレメントの |
なし |
|
|
特殊なサムネイルが表示されるアセット・タイプを記述します。 |
|
|
|
サムネイルがレンダリングされるアセット・タイプの名前。 |
詳細は、第65.3.4.1.2項および第65.3.4.1.3項を参照してください。 |
|
|
アセット・タイプのサブタイプ。 |
詳細は、第65.3.4.1.2項および第65.3.4.1.3項を参照してください。 |
|
|
|
詳細は、第65.3.4.1.2項および第65.3.4.1.3項を参照してください。 注意: エレメントを指定しない場合は、 |
|
|
コンテンツがサムネイルとして表示される属性。 |
詳細は、第65.3.4.1.2項および第65.3.4.1.3項を参照してください。 |
<assettypes>セクションに関する詳細表65-7に記載されている<assettypes>セクションは、カスタマイズを選択した機能によっては、構成する必要がある場合があります。次の様々な<assettypes>構成シナリオでは、最も一般的に実行されるカスタマイズを対象に説明します。
この項の内容は、次のとおりです。
(ファイル・システムに格納される)独自の静的サムネイルを使用する場合は、次の規則に従っているかぎり、UI/Layout/CenterPane/Search/View/ThumbnailViewConfigエレメントの<assettypes>セクションをカスタマイズする必要はありません。
サムネイル・アイコンの名前には空白を入れないでください(アンダースコアで置き換えられます)。名前は、サムネイルのサイズによって、次のいずれかのフォーマットである必要があります。
<assettypename>.pngまたは<assettypename>-<subtype>.png
(小さなサムネイル、96x96、ドッキングされたビュー)
<assettypename>_large.pngまたは<assettypename>-<subtype>_large.png(大きなサムネイル、170x170、ドッキングされていないビュー)
アイコンの保存場所は、ファイル・システムの/images/searchディレクトリです。
前述の規則に従う場合、UI/Layout/CenterPane/Search/View/ThumbnailViewConfigエレメントによってアイコンがサムネイルとして自動的にレンダリングされます。このエレメントは、/images/searchディレクトリでアイコンを検索するようにコード化されています。アセット・タイプおよびサブタイプに基づいたアイコンの名前を付けると、そのタイプおよびサブタイプのアセットにアイコンが自動的に関連付けられます。
ThumbnailViewConfig.jspエレメントの<assettypes>セクションのカスタマイズは、システム定義のエレメントImageThumbnailHtml.jspを再使用して、カスタム・イメージをサムネイルとして動的にレンダリングする場合に必要です。このエレメントは、特定のアセット・タイプまたはサブタイプ(あるいはその両方)に属するイメージ属性に関連付けられているイメージを処理します。
システム定義のImageThumbnailHtml.jspを再使用するには:
カスタムThumbnailViewConfig.jspで、次の操作を実行します。
カスタム・イメージ・サムネイルが必要なアセット・タイプを指定します。各アセット・タイプにはイメージ属性が必要です。
<assettypes>
<assettype>
<type>Name_of_AssetType_containing_the_image_attribute</type>
<subtype>Name_of_subtype_containing_the_image_attribute</subtype>
<element>UI/Layout/CenterPane/Search/View/ImageThumbnail</element>
<attribute>Name_of_imageAttribute_containing_the_image</attribute>
</assettype>
…
…
</assettypes>
<element>の場合、前述のサンプル・コードで示されているように、システム定義のエレメントImageThumbnailHtml.jspへのパスを指定します。
ThumbnailViewConfig.jspの<assettypes>セクションのカスタマイズは、アセット・タイプ(またはサブタイプ)のblob属性のコンテンツをサムネイルとして動的にレンダリングするカスタム・エレメントを使用する場合に必要です。
後述の例では、ビデオ・サムネイルのレンダリングで一緒に使用するエレメントを作成します。図65-3に、この項の手順に従って再現できる、サンプル・ビデオ・サムネイル表示を示します。
次の手順では、(1)ビデオ・サムネイルを動的にレンダリングするために一緒に使用するエレメントの作成用ガイドライン、(2) ThumbnailViewConfigエレメントの<assettypes>セクションのカスタマイズ用ガイドラインを示します。
|
注意: このサンプルを正しく動作させるため、 ビデオ・ファイルを再生するには、ブラウザ・プラグインを使用可能にしておく必要があります。 |
ビデオ・サムネイルをレンダリングするエレメントを作成するには:
AssetAPIを使用するビデオ・サムネイルActionエレメントを記述して、そのエレメントで指定されるビデオ属性のBlobUtilを使用して、blobのURLを取得します。(エレメントには任意の名前を付けることができますが、Actionで終わる必要があります。エレメントは、CustomElementsの下のディレクトリに格納される必要があります。)
VideoThumbnailAction.jspという名前のサンプル・エレメントは、search_view_elementsフォルダのmisc\Samples\UICustomization\sample_elements.zipファイルにあるWebCenter Sitesディストリビューションから入手可能です。
ビデオ・サムネイルHtmlエレメントを記述します。このエレメントは前の手順で作成したURLをとり、サムネイルの下にビデオおよび他のアセット詳細をレンダリングします。(エレメントには任意の名前を付けることができますが、Htmlで終わる必要があります。エレメントは、CustomElementsの下のディレクトリに格納される必要があります。)このHtmlエレメントは、手順1のActionエレメントをコールします。
VideoThumbnailHtml.jspという名前のサンプル・エレメントは、search_view_elementsフォルダのmisc\Samples\UICustomization\sample_elements.zipファイルにあるWebCenter Sitesディストリビューションから入手可能です。
ビデオ・サムネイルHtmlエレメントを使用するには、次のように、カスタムThumbnailViewConfig.jspエレメントの<assettype>プロパティを構成します。
<assettype>
<type>Name_of_AssetType_containing_blob_attribute</type>
<subtype>Name_of_asset_subtype</subtype>
<element>CustomElements/path_to_your_element/Element</element>
<attribute>Name_of_attribute_containing_video</attribute>
</assettype>
ThumbnailViewConfig.jspという名前のサンプル・エレメントは、search_view_elementsフォルダのmisc\Samples\UICustomization\sample_elements.zipファイルにあるWebCenter Sitesディストリビューションから入手可能です。
ドッキングされたビューをカスタマイズする方法は、ドッキングされていないビューをカスタマイズする方法と類似しています。主な違いは、第65.2項「プロセスのカスタマイズ」で概述されています。
この項で説明される機能は、表65-8に示すように、ドッキングされていないビュー、ドッキングされたビュー、またはその両方に対してカスタマイズできます。
この項の内容は、次のとおりです。
表65-8 検索ビューの他の機能のカスタマイズ
| カスタマイズ・オプション | ドッキングされていないリスト | ドッキングされていないサムネイル | ドッキングされたリスト表示 | ドッキングされたサムネイル | …を参照 |
|---|---|---|---|---|---|
|
ソート・メニュー |
いいえ |
はい |
はい |
はい |
|
|
検索結果のツールチップ |
いいえ |
いいえ |
はい |
はい |
|
|
コンテキスト・メニュー |
はい |
はい |
はい |
はい |
|
ソート・メニューは、表65-8にリストされているビューに対してのみカスタマイズできます。ソート・メニューにどのソート・フィールドを表示するかを指定できます。各フィールドのソート順序を指定することもできます。
ソート・メニューをカスタマイズするには:
CustomElementsの下に独自のSearchTopBarConfig.jspを作成し、そのプロパティをカスタマイズすることによって、エレメントUI/Layout/CenterPane/Search/View/SearchTopBarConfigをオーバーライドします。
次に、UI/Layout/CenterPane/Search/View/SearchTopBarConfigエレメントを示します。表65-9のプロパティの説明が続きます。
エレメントUI/Layout/CenterPane/Search/View/SearchTopBarConfig:
<sortconfig>>
<sortfields>
<sortfield id="unique_identifier">
<fieldname>name</fieldname>
<displayname>Name(A-Z)</displayname>
<sortorder>ascending</sortorder>
</sortfield>
<sortfield id="unique_identifier">
<fieldname>name</fieldname>
<displayname>Name(Z-A)</displayname>
<sortorder>descending</sortorder>
</sortfield>
<sortfield id="unique_identifier">
<fieldname>AssetType_Description</fieldname>
<displayname>Asset Type</displayname>
<sortorder>ascending</sortorder>
</sortfield>
…
…
</sortfields>
</sortconfig>
表65-9 UI/Layout/CenterPane/Search/View/SearchTopBarConfigのプロパティ
| プロパティ | 説明 | 値 |
|---|---|---|
|
|
検索結果をソートする検索索引フィールドを記述します。 |
|
|
|
検索索引フィールドの名前。 注意: 複数のソート順序を提供するために、同じフィールドを複数回繰り返すことができます。 |
前述のコードの |
|
|
ユーザーが読取り可能なフィールドの表示名。 |
前述のコードの |
|
|
ソート順。 |
|
ツールチップは、ドッキングされたビューに対してのみカスタマイズできます。ドッキングされたビューは、制限されたスペース内に表示されるため、検索結果として返されるアセットに関する情報量が限定されます。ツールチップは、返されたアセットに関する詳細情報を表示する方法です。たとえば、図65-4に示すように、すでにドッキング・モードで表示されている内容に加え、フィールド名と値を表示するためにツールチップをカスタマイズできます。カスタム・メッセージを表示するためにツールチップをカスタマイズしたり、ツールチップの外観を変更することもできます。
ドッキングされた検索結果のデフォルトのツールチップは、エレメントUI/Layout/CenterPane/Search/View/SearchToolTipHtmlでレンダリングされます。このエレメントは、(図65-4に示すように)ツールチップをボックスとしてレンダリングします。ボックス内で、UI/Layout/CenterPane/Search/View/ListViewConfig(またはUI/Layout/CenterPane/Search/View/ThumbnailViewConfig)の<fields>セクションの各フィールドの名前をレンダリングしますが、これはフィールドの<displayintooltip>プロパティがtrueに設定されている場合にのみ実行されます。たとえば、<displayintooltip>がtrueに設定されている場合は、次のListViewConfig.jspのName、TypeおよびModifiedフィールドが、図65-4のツールチップの一部として表示されます。
<fields>
<field>
<fieldname>name</fieldname>
<displayname>Name</displayname>
<width>350px</width>
<formatter>fw.ui.GridFormatter.nameFormatter</formatter>
<displayintooltip>true</displayintooltip>
</field>
<field>
<fieldname>type</fieldname>
<displayname>Type</displayname>
<width>auto</width>
<formatter></formatter>
<displayintooltip>true</displayintooltip>
</field>
<field>
<fieldname>updateddate</fieldname>
<displayname>Modified</displayname>
<javadateformat>SHORT</javadateformat>
<width>auto</width>
<formatter></formatter>
<displayintooltip>true</displayintooltip>
</field>
|
注意:
|
ツールチップを作成したり、ツールチップにフィールドを追加するには:
ツールチップを作成するには、CustomElementsの下に独自のSearchToolTipHtml.jspを作成して、エレメントUI/Layout/CenterPane/Search/View/SearchToolTipHtmlをオーバーライドします。
ツールチップにフィールドを追加するには、カスタムListViewConfig.jspまたはThumbnailViewConfig.jspにフィールドを追加して、各フィールドの<displayintooltip>プロパティをtrueに設定します。
ツールチップ(カスタムまたはシステム定義)にカスタム・メッセージを表示したり、ツールチップ表示を変更するには、カスタムSearchToolTipHtml.jspエレメントをコーディングします。例:
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"
%><%@ taglib prefix="ics" uri="futuretense_cs/ics.tld"
%><cs:ftcs>
<style>
.customSearchTooltip {
font-weight: bold;
color: #333;
font-style: italic;
}
</style>
<div class='customSearchTooltip'>
You are Viewing a Custom Tooltip
</div>
</cs:ftcs>
コンテキスト・メニューは、すべての検索ビューでカスタマイズ可能です。
コンテキスト・メニューをカスタマイズするには:
次のコードで独自のMyConfig.jspを作成して、エレメントUI/Config/GlobalHtmlをオーバーライドします。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<cs:ftcs>
webcenter.sites['${param.namespace}'] = function (config) {
config.contextMenus = {
"default":["bookmark"],
"asset":["edit","preview", "share", "bookmark", "tagasset"],
"asset/Page":["edit", "preview", "delete", "bookmark"],
"proxy":["preview", "bookmark", "tagasset"],
;
}
</cs:ftcs>
