アプリケーションの表示テンプレート

LiferayのWeb Experience Managementシステムで構築するサイトの最終ステップは、より魅力的なフロントページのグラフィックを追加です。複数の画像とADT（アプリケーションディスプレイテンプレート）を利用して、画像のカルーセル表示を設定します。

ADTは基本的にWebコンテンツテンプレートと同じですが、ストラクチャーによって定義された変数とフィールドを持つのではなく、テンプレートを適用するアプリケーションによって定義されています。

ADTとスコープ

Liferayにはグローバルスコープに付属する、デフォルトADTがいくつか付属されています。 Liferay DXPにおいて、スコープとはコンテンツを使用、閲覧できる場所を意味します。これまでに作成したコンテンツは、Liferayリゾートサイトのスコープにあります。

同じLiferayサーバーに2つ目のサイトを作成する場合、そのサイトからはLiferayリゾートサイトに作成したコンテンツにアクセスできません。ですがグローバルサイトに作成したコンテンツであれば、どのサイトからでも使用することができます。

独自のADTを作成する場合は、グローバルにスコープを変更し、他のシステムデフォルトのADTと共に作成します。

ADT作成

メインメニューを開きます。
Liferayリゾートのコンパスアイコンをクリックして［サイトの選択］ダイアログを開きます。
そこから[マイサイト ]をクリックし、[グローバルサイト]を選択します。

ここで作成するコンテンツは全てグローバル用になります。次はADTの作成です。

スライドを管理するスタイルと、見出しのテキストを管理するスタイルがあります。

これは、表示（イメージ）のMIMEタイプを設定し、表示されるentriesのリストを取得し、所得したリストを統合するスクリプト（瞬間的に追加する）を呼び出します。 #ifステートメントで作成されるので、表示される項目がある場合にのみこのブロックを表示します。

「編集」 →「アプリケーション・ディスプレイ・テンプレート」をクリックします。
[ + ]ボタンをクリックし、[ドキュメント＆メディアテンプレート ]を選択してリストに追加します。
テンプレートの名前を「フロントページカルーセル」にします。

コード入力画面にでは、下記のスタイルを貼り付けます。

<style>
     .slides {
       margin: auto;
       width: 100%;
       height: auto;
       border-radius: 5%;
     }

     h1 {
       position: absolute;
       color: white;
       top: 100px;
       width: 100%;
       text-align: center;
       font-size: 50px;
      }
</style>

メインのHTMLセクションを追加します。

<#if entries?has_content>
    <div id="<@portlet.namespace />carousel">
        <#assign imageMimeTypes = propsUtil.getArray("dl.file.entry.preview.image.mime.types") />

        <#list entries as entry>
            <#if imageMimeTypes?seq_contains(entry.getMimeType())>
             <img class="slides" src="${dlUtil.getPreviewURL(entry, entry.getFileVersion(), themeDisplay, "")}">
            </#if>
        </#list>
           <div class="flex-container" style="height: 100%">
                <h1>Make Memories at the Lunar Resort<h1>
              <div class="flex-item-center text-center" style="width: 100%" />
            </div>
    </div>

スクリプトを追加します。これは比較的簡易なJavascriptカルーセルです。このスクリプトはスライドを取得し、スライドの切り替え表示します。

<script>
    var slideIndex = 0;
        carousel();
    function carousel() {
    var i;
    var x = document.getElementsByClassName("slides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 3000); // Change image every 3 seconds
    }
</script>
</#if>

テンプレートを保存するとADTの作成が完了します。次はサイトの立ち上げです。

ADTの使用

ADTを使用するには、ページにメディアギャラリーを追加し、適切なフォルダーをリンクさせて作成したディスプレイテンプレートで表示させるように設定します。

コンパスのアイコンをクリックし、Liferayリゾートのホームページに戻ります。
まずは、Liferayリゾートのトップページにある以前作成したWebコンテンツ表示を削除します。ポートレット・メニューをクリックして「削除」を選択し、プロンプトが表示されたら「OK」を選択します。
画面右上の[＋]追加メニューを開き、アプリケーション→コンテンツ管理 → 「メディアギャラリー」アプリケーションをページに追加します。
メディアギャラリーのメニューを開き、「設定」を選択します。
フォルダー一覧にスクロールし、[ 選択 ]をクリックします。
選択→任意のトップページ用の画像が入っているフォルダを選択します。
ディスプレイ・テンプレートで「フロントページカルーセル」を選択します。
[ 保存]をクリックします。
ルックアンドフィールの設定に移動し、アプリケーションデコレータを[Barebone]に設定します

これでフロントページの作成が完了しました。

＜＜高度なコンテンツ表示ページオプション作成したサイトの確認＞＞

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション

ADTとスコープ

ADT作成

ADTの使用