Liferay DXP 7.0でのアプリケーション表示テンプレートの使用

目次

  1. アプリケーション表示テンプレート(ADT)の概要
  2. ADTの操作:メディアギャラリー
  3. APIの使用:Wiki用のADTの作成
  4. ADTのエクスポート/インポート
  5. よくある質問とトラブルシューティング

前書き

アプリケーション表示テンプレートは、サイトおよびページテンプレートと同様に機能しますが、ポートレットレベルで機能します。 アプリケーション表示テンプレート(ADT)フレームワークにより、ポータル管理者はデフォルトの表示テンプレートを上書きして、サイトコンテンツの表示方法の制限を取り除くことができます。 ユーザーはADTを使用して、アセット中心のアプリケーションのレンダリングに使用されるカスタム表示テンプレートを定義できます。 たとえば、ブログエントリを垂直ではなく水平に表示したり、アセット発行元ポートレットのアセットをさまざまなサイズで表示したりできます。

ユーザーは独自のカスタムフックまたはポートレットを開発して、パーソナライズされたルックアンドフィールを実現するという同じ目標を達成できますが、デフォルトのアプリケーション表示テンプレートには、すぐに使用できるという利点があります。 デフォルトのフレームワークは、既存のアセットで使用するように特別に設計されています。 開発者は既存のAPIとソースコードを独自のADTのベースとして使用できます。

グローバルコンテキストを選択すると、すべてのサイトでテンプレートを使用できるようになりますが、ADTをサイトレベルに含めることができます。 ADTを適用するサイトを選択するには:

  1. [ コンパス ]アイコンをクリックして、[サイト管理]ドロップダウンリストに移動します。
    adtintro01.PNG
  2. グローバルコンテキストが選択されている場合、サイト管理の設定メニューの[アプリケーション表示テンプレート]ページに、使用可能なサンプルテンプレートのリストが表示されます。
    adtintro02.PNG
    adtintro03.PNG
  3. これらのサンプルテンプレートは、アプリで既に構成されているデフォルトのテンプレートとは異なります。 テンプレートをホストするために特定のサイトが選択されている場合、ユーザーはそのサイトのアプリ用に新しいカスタムテンプレートを作成する必要があります。
    adtintro04.PNG
  4. Liferay DXPバージョンで新しいテンプレートを作成するには、灰色のプラスボタンをクリックします。
    adtintro05.PNG

以下のリストは、ADTを使用してカスタマイズできるアプリを示しています。

  • アセットパブリッシャー
  • ブログ
  • ブレッドクラム
  • カテゴリーナビゲーション
  • ドキュメントとメディア
  • 言語セレクター
  • ナビゲーションメニュー
  • RSSパブリッシャー
  • サイトマップ
  • タグナビゲーション
  • Wiki

メディアギャラリーのカスタマイズ

このセクションでは、Media Galleryポートレットでのアプリケーション表示テンプレートの使用について説明します。 メディアギャラリー自体は、メインのドキュメントポートレットとは別に、メディアファイルを保存および表示する方法をユーザーに提供します。 デフォルトのルックアンドフィールはアーカイブのようなものです。 ADTを使用すると、メディアギャラリーはより印象的なものになります。

  1. メディアギャラリーアプリケーションをページに追加するには、 に移動し > アプリケーションを追加します > コンテンツ管理 > メディアギャラリー追加します。
  2. アプリの 追加ボタン > マルチメディア をクリックし、表示する2つのカスタム写真を選択します。 次に Saveクリックし、メインアプリケーション画面に戻ります。
  3. 画像のデフォルト形式に注意してください。 このアプリの表示テンプレートを変更するには、 オプション > 構成移動し
  4. [表示テンプレート]ドロップダウンメニューから、[ カルーセル]を選択します。 次に Saveクリックします。
    adt06.PNG
    図4:カルーセルADTを適用すると、画像はカルーセルスライドショーとして表示されます。
    Media Galleryアプリケーションがカルーセルスライドショーに変わります。

Liferay DXPにバンドルされているアプリのユーザーインターフェイスをカスタマイズすると、Liferayユーザーに究極のカスタマイズ体験を提供できます。


APIの使用

開発者は、APIを使用してADTを作成することもできます。

  • アプリケーション表示テンプレート(ADT)ポートレットは、動的データマッピングおよびテンプレートAPIの上に構築されています。
  • 特定のAPI:ADT固有のAPIは非常に単純です。 これは主に、後で説明する2つのクラス(PortletDisplayTemplateUtilおよびBasePortletDisplayTemplateHandler)のみに基づいています。
  • サービスAPI:ADTにはサービスAPIはありません(したがって、DB内に特定のテーブルはありません)が、DDMサービスAPIを再利用します。 すべての情報はDDMTemplateテーブルに保管されます。 ADTの場合、DDMTemplateテーブルのclassNameIdフィールドは、ADTによってレンダリングされるエンティティ(ブログなど)のフィールドであり、classPKフィールドは0です。
  • DDMサービスAPIには、プラグインから、およびWebサービスを介してアクセスできます。
  • テンプレートAPI:ADTは、テーマ、レイアウト、Webコンテンツにも使用されている既存のFreemarkerおよびVelocityテンプレートレンダリングAPIを再利用します。

adt07.PNG

 

カスタムADTの作成

ADT APIを活用するには、ユーザーが実行する必要があるいくつかの手順があります。 これらの手順には、ADTを使用するためのポートレットの登録、権限の定義、およびADT機能のユーザーへの公開が含まれます。 次の手順を使用します。

  1. カスタム * PortletDisplayTemplateHandler コンポーネントを作成して登録します。 Liferayは、ユーザーが拡張するための基本実装として BasePortletDisplayTemplateHandler を提供します。 各テンプレートハンドラーメソッドについては、 TemplateHandler インターフェイスのJavadocを確認してください。
    コンポーネントアノテーションは、ハンドラーを特定のポートレットに結び付け、プロパティjavax.portlet.nameをポートレットのポートレット名として設定します。 同じプロパティがポートレットクラスにあります。 例えば:
    	@Component(
    		immediate = true,
    		property = {
    			"javax.portlet.name="AssetCategoriesNavigationPortletKeysASSET_CATEGORIES_NAVIGATIONserviceTemplateHandlerclasspreEachofthemethodsinthisclasshaveasignificantroleindefiningandimplementingADTsforthecustomportletViewthelistbelowforadetailedexplanationforeachmethoddefinedspecificallyforADTsbrbrbgetClassNamebDefinesthetypeofentrytheportletisrenderingbrbgetNamebDeclaresthenameoftheADTtypetypicallythenameoftheportletbrbgetResourceNamebSpecifieswhichresourceisusingtheADTegaportletforpermissioncheckingThismethodmustreturntheportletsFullyQualifiedPortletIDFQPIbrbgetTemplateVariableGroupsbDefinesthevariablesexposedinthetemplateeditorliolAsanexamplecodePortletDisplayTemplateHandlercodeimplementationlookatWikiPortletDisplayTemplateHandlerjavaolliSincetheabilitytoaddADTsisnewtotheportletconfigurethepermissionssothatadministrativeuserscangrantpermissionstotherolesthatwillbeallowedtocreateandmanagedisplaytemplatesOnlegacyPortal62addtheactionkeycodeADD_PORTLET_DISPLAY_TEMPLATEcodetotheuportletsusrcmainresourcesresourceactionsdefaultxmlfilepreltxmlversion"1.0"?>
    	<!DOCTYPE resource-action-mapping PUBLIC "-//Liferay//DTD Resource Action Mapping 7.0.0//EN" "http://www.liferay.com/dtd/liferay-resource-action-mapping_7_0_0.dtd">
    		vresource-action-mapping>
    
        ...
    
        		< portlet-resource >
            		<portlet-name> yourportlet </portlet-name>
            		<permissions>
                		<supports>
                    		<action-key> ADD_PORTLET_DISPLAY_TEMPLATE </action-key>
                    		<action-key>ADD_TO_PAGE </action-key>
                    		<action-key>CONFIGURATION </action-keyv
                   	 	<action-key>VIEW </action-key>
                	</supports>
                	</permissions>
        		</portlet-resource>
    
        ...
    		</resource-action-mapping>
    	
  2. ポートレットがADTを正式にサポートするようになったので、ADTオプションを他のユーザーに公開します。 ポートレットの構成を制御するために使用されるJSPファイルに タグを含めるだけです。

    たとえば、構成JSPファイルに を挿入すると役立つ場合があります。
    	<aui:fieldset>
    		<div class="display-template">
            	<liferay-ddm:template-selector
                		classNameId="<%= YourEntity.class.getName() %>"
                		displayStyle="<%= displayStyle %>"
                		displayStyleGroupId="<%= displayStyleGroupId %>"
                		refreshURL="<%= PortalUtil.getCurrentURL(request) %>"
                		showEmptyOption="<%= true %>"
            	/>
    		</div>
    	</aui:fieldset>
    	
    このJSPでは、 タグは、ポートレットの[設定]メニューで使用される[表示テンプレート]ドロップダウンメニューを指定します。 変数 displayStyle および displayStyleGroupId は、このtaglibを使用するときにポートレットが保存する設定であり、ポートレットは BaseJSPSettingsConfigurationAction または DefaultConfigurationActionます。 それ以外の場合は、これらのパラメーターの値を取得して、構成クラスに手動で格納します。
    JSPの例として、Wikiアプリケーションの configuration.jsp参照してください。
  3. ユーザーはビューコードを拡張して、選択したADTでポートレットをレンダリングする必要があります。 これにより、ユーザーは、ADTによってレンダリングされるビューの部分と、テンプレートコンテキストで利用できるものを決定できます。

    まず、ADTに必要なJava変数を初期化します。
    	<%
    	String displayStyle = GetterUtil.getString(portletPreferences.getValue("displayStyle", StringPool.BLANK));
    	long displayStyleGroupId = GetterUtil.getLong(portletPreferences.getValue("displayStyleGroupId", null), scopeGroupId);
    	%>
    	
    次に、ADTが構成されているかどうかをテストし、レンダリングするエンティティを取得し、ADTを使用してそれらをレンダリングします。 タグ <liferay-ddm:template-renderer> 、このプロセスを支援します。 選択されたテンプレートを自動的に使用するか、テンプレートが選択されていない場合は本体をレンダリングします。
    これは、これの実装を示すいくつかのサンプルコードです。
    <liferay-ddm:template-renderer
        className="<%= YourEntity.class.getName() %>"
        contextObjects="<%= contextObjects %>"
        displayStyle="<%= displayStyle %>"
        displayStyleGroupId="<%= displayStyleGroupId %>"
        entries="<%= yourEntities %>"
    >
    
        <%-- The code that will be rendered by default when there is no
        template available should be inserted here. --%>
    
    </liferay-ddm:template-renderer>
    
    このステップでは、ユーザーは表示設定(displayStyle および displayStyleGroupId)を処理する変数を初期化し、以下にリストされている他のパラメーターと共にタグに渡しました。
    className:エンティティのクラス名。
    contextObjects:ユーザーがテンプレートコンテキストに必要な任意のオブジェクトを含む Map<String, Object> を受け入れます。
    エントリ:エンティティのリストを受け入れます(例: リスト<YourEntity>)。

    これの実装を示す例については、 configuration.jsp参照してください。

     

  4. このカスタムポートレットの動作を確認するために、ユーザーは新しいカスタムテンプレートを作成し、Wikiポートレットを変更できます。
    1. Liferay DXPのユーザーは左側のメニューをクリックできます サイト管理 > 構成 > アプリケーション表示テンプレート
    2. クリック 追加 > ${your template}
    3. テンプレートエディタで、テンプレートに名前を付けます。
    4. エディターにFreeMarkerまたはVelocityコードを入力します。 サンプル:
      			<#if entries?has_content>
      				Quick List:
      				<ul>
      				<#list entries as curEntry>
      					<li>${curEntry.name} - ${curEntry.streetAddress}, ${curEntry.city}, ${curEntry.stateOrProvince}</li>
          				</#list>
          			</ul>
      			</#if>
      			
    5. カスタムポートレットに移動し、 オプション > 構成を選択します。 Display Template ドロップダウンをクリックします。 カスタムADTを選択し、[ 保存]をクリックします。

テンプレートのエクスポートとインポート

ユーザーは、アプリケーション表示テンプレートをLAR形式でサイト間でエクスポートおよびインポートするオプションがあります。 これはとても簡単です。 それでも、LARは同じメジャーバージョンのLiferayでのみインポートできることに注意してください(たとえば、6.1 LARは6.2にインポートできず、6.2 LARはDXPにインポートできません)。

  1. エクスポートするアプリケーション表示テンプレートを選択します。
  2. 3つの点(オプション)メニューをクリックします。
  3. [ エクスポートクリックし
  4. LARに名前を付けます: Wiki ADT1 またはデフォルトの名前を使用します。
    adt08.PNG
  5. デフォルト設定を使用して、[ エクスポート をクリックします。
  6. LARをダウンロードします。
    adt09.PNG
  7. テンプレートをインポートするサイトに移動します。
  8. 3つの点(オプション)メニューをクリックします。
  9. [ インポートクリックし
  10. LARをドラッグアンドドロップするか、ファイルエクスプローラーを使用します。
    adt10.PNG
  11. インポート画面が表示されるまで、デフォルト設定を使用し続けます。
  12. [ インポートクリックし 。 テンプレートが正常にインポートされたことを確認します。 ADTが2番目のサイトで利用可能になりました。

よくある質問とトラブルシューティング

ADTはどの程度安全ですか?

Javaセキュリティの観点から、ユーザーはテンプレートコンテキストから一部のクラスまたはパッケージを非表示にすることができます。ユーザーは、ADTがポータルで実行できる操作を制限できます。 Liferayはいくつかのポータルシステム設定を提供します。 DXPで、コントロールパネル > 構成 > システム設定 > Foundation > FreeMarker / Velocity Engineに移動して、制限されたクラス、パッケージ、および変数を定義します。 特に、ユーザーは、FreeMarkerおよびVelocity Engineの制限付き変数に割り当てられたデフォルト値のリストにserviceLocatorを追加したい場合があります。

どのようなパフォーマンスチューニングが必要ですか?

ポートレットがレンダリングされるときに、アプリケーション表示テンプレートを使用すると、追加の処理タスクが導入されます。 Liferayのベストプラクティスでは、カスタムテンプレートをできるだけ最小限にして、既存のAPIを使用してより複雑な操作を行うことをお勧めします。 ユーザーは、最終目標とサーバー負荷に対する期待を評価する必要があります。 ユーザーは独自のパフォーマンステストも実行する必要があります。 最後に、ユーザーはシステム設定 > Foundation > Freemarker / Velocity Engineに移動してテンプレートキャッシュを調整し、[リソース変更チェック]フィールドを構成できます。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています