ビュータイプの実装

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

• ビュータイプの実装
  • ビュータイプの定義
  • カードビューの実装
  • リストビューの実装

管理ツールバーには、アプリの検索コンテナー結果用に3つの定義済みビュータイプがあります。 各スタイルは、わずかに異なるルックアンドフィールを提供します。 アプリでこれらのビュータイプを提供するには、検索結果の列を更新する必要があります。 提供するビュータイプを定義することから始めます。

ビュータイプの定義

管理ツールバーには3つのビュータイプがあります。

• カード： は、水平または垂直のカードに検索結果列を表示します

• リスト： は、検索結果列の要約された詳細とともに詳細な説明を表示します

• テーブル： デフォルトビュー。左から右に検索結果の列をリストします。

以下の手順に従って、管理ツールバーのビュータイプを定義します。

1. ViewTypeItemList ユーティリティクラスをインポートして、アクションアイテムモデルを作成します。

   <%@ page import="com.liferay.frontend.taglib.clay.servlet.taglib.util.JSPViewTypeItemList" %>
   

2. frontend.taglib.clay および frontend.taglib.soy モジュールの依存関係をアプリの build.gradle ファイルに追加します。

   compileOnly group: "com.liferay", name: "com.liferay.frontend.taglib.soy", 
   version: "1.0.10"
   
   compileOnly group: "com.liferay", name: "com.liferay.frontend.taglib.clay", 
   version: "1.0.0"
   

3. アプリのメインビューで、参照用に displayStyle を取得します。 各表示タイプは表示スタイルに対応しています。 これは、選択されたビュータイプに対して表示する適切なコンテンツ構成を決定するために使用されます。

   <%
   String displayStyle = ParamUtil.getString(request, "displayStyle");
   %>
   

4. 管理ツールバーをアプリのメインビューに追加し、以下に示すように表示ボタンを構成します。 この例では3つのビュータイプをすべて実装していますが、必要なビュータイプは1つだけです。 デフォルトまたはアクティブなビュータイプは、 viewTypeItem.setActive（true） をビュータイプに追加することによって設定されます。

   <clay:management-toolbar
       disabled=<%= assetTagsDisplayContext.isDisabledTagsManagementBar() %>
       namespace="<%= renderResponse.getNamespace() %>"
       searchContainerId="assetTags"
       selectable="<%= true %>"
       viewTypes="<%=
           new JSPViewTypeItemList(pageContext, baseURL, selectedType) {
               {
                   addCardViewTypeItem(
                       viewTypeItem -> {
                           viewTypeItem.setActive(true);
                           viewTypeItem.setLabel("Card");
                       });
   
                   addListViewTypeItem(
                       viewTypeItem -> {
                           viewTypeItem.setLabel("List");
                       });
   
                   addTableViewTypeItem(
                       viewTypeItem -> {
                           viewTypeItem.setLabel("Table");
                       });
               }
           }
       %>"
   />
   

   viewTypes：利用可能なビュータイプ

   portletURL：ビュータイプパラメーターが含まれる現在のURL。

5. ビュータイプを確認する条件ブロックを作成します。 ビュータイプが1つしかない場合は、この手順をスキップできます。

   <c:choose>
       <%-- view type configuration goes here --%>
   </c:choose>
   

ビュータイプが定義されたので、構成できます。

カードビューの実装

カードビューには、画像の名前、ワークフローステータス、要約説明などのコンテンツの詳細とともに、画像、ユーザープロファイル、またはコンテンツの種類を表すアイコンが付いた縦型または横型のカードにエントリの情報が表示されます。

各カードの例と使用例については、 Liferay Frontend Cards チュートリアルを参照してください。

以下の手順に従って、カードビューを作成します。

1. <c:choose> 条件ブロック内に、アイコンの表示スタイル（カードビュータイプ）の条件を追加します。

   <c:when test='<%= Objects.equals(displayStyle, "icon") %>'>
       <%-- card view type configuration goes here --%>
   </c:when>
   

2. 適切なJavaスクリプレットを追加して、カードビューがさまざまなデバイスに反応するようにします。

   縦型カードには次のパターンを使用します。

   <%
   row.setCssClass("col-md-2 col-sm-4 col-xs-6");
   %>
   

   水平カードの場合、次のパターンを使用します。

   <%
   row.setCssClass("col-md-3 col-sm-4 col-xs-12");
   %>
   

3. カードを含む検索コンテナ列のテキストを追加します。 カードには、エントリのアクション（該当する場合）、画像、アイコン、またはユーザープロファイル、エントリのタイトルを含める必要があります。 構成例を以下に示します。

   <liferay-frontend:icon-vertical-card
     actionJsp='<%= dlPortletInstanceSettingsHelper.isShowActions() ? 
     "/image_gallery_display/image_action.jsp" : StringPool.BLANK %>'
     actionJspServletContext="<%= application %>"
     cssClass="entry-display-style"
     icon="documents-and-media"
     resultRow="<%= row %>"
     title="<%= dlPortletInstanceSettingsHelper.isShowActions() ? 
     fileEntry.getTitle() : StringPool.BLANK %>"
   />
   

リストビューの実装

リストビューには、コンテンツタイプの小さなアイコンとその名前とともに、エントリの完全な説明が表示されます。

<c:choose> 条件ブロック内に、説明的な表示スタイル（リストビュータイプ）の条件を追加します。

<c:when test='<%= Objects.equals(displayStyle, "descriptive") %>'>
    <%-- list view type configuration goes here --%>
</c:when>

リストビューには、次の表に示す内容の3つの列が必要です。

<th>
  コンテンツオプション
</th>

<th>
  例
</th>

<td>
  アイコン
</td>

<td>
  \<liferay-ui:search-container-column-icon> </tr> 
  
  <tr>
    <td>
    </td>
    
    <td>
      画像
    </td>
    
    <td>
      \<liferay-ui:search-container-column-image> </tr> 
      
      <tr>
        <td>
        </td>
        
        <td>
          ユーザーの肖像
        </td>
        
        <td>
          \<liferay-ui:search-container-column-text\><br/>\<liferay-ui:user-portrait>\</liferay-ui:search-container-column-text\>
        </td>
      </tr>
      
      <tr>
        <td>
          2
        </td>
        
        <td>
          説明
        </td>
        
        <td>
          \<liferay-ui:search-container-column-text <br>colspan = "\ <％= 2％\>" <br/>\><br/>\<h5\\>\ <％= userGroup.getName（）％\> \</h5\> <br/>\

\\ <％= userGroup.getDescription（）％\> \
\
\

\
\\
\
\

<td>
  行動
</td>

<td>
  <liferay-ui:search-container-column-jsp<br /> path = "/ edit \ _team \ _assignments \ _user \ _groups \ _action.jsp"<br/>/ \>
</td>

カラム

1

3

テーブルビューの実装

テーブルビューには、検索コンテナの列が左から右に一覧表示されます。

<c:choose> 条件ブロック内に、リスト表示スタイル（テーブルビュータイプ）の条件を追加します。

<c:when test='<%= Objects.equals(displayStyle, "list") %>'>
    <%-- table view type configuration goes here --%>
</c:when>

列には、少なくとも次の表に示す情報が含まれている必要があります。

<th>
  コンテンツオプション
</th>

<th>
  例
</th>

<td>
  名
</td>

<td>
  \<liferay-ui:search-container-column-text <br>cssClass = "content-column name-column title-column" <br/>name = "name" <br/>truncate = "\ <％= true％\>" <br/>value = "\ <％= rule.getName（locale）％\>" <br/>/ \>
</td>

<td>
  説明
</td>

<td>
  \<liferay-ui:search-container-column-text <br>cssClass = "content-column description-column" <br/>name = "description" <br/>truncate = "\ <％= true％\>" <br/>value = "\ <％= rule.getDescription（locale）％\>" <br/>/ \ >
</td>

<td>
  日付を作成します
</td>

<td>
  \<liferay-ui:search-container-column-date <br>cssClass = "create-date-column text-column" <br/>name = "create-date" <br/>property = "createDate" <br/>/ \>
</td>

<td>
  行動
</td>

<td>
  \<liferay-ui:search-container-column-jsp <br>cssClass = "entry-action-column" <br/>path = "/ rule \ _actions.jsp" <br/>/ \>
</td>

カラム

1

2

3

4

検索イテレーターの更新

ビュータイプの表示スタイルを定義したら、検索イテレータを更新して、選択したビュータイプを表示する必要があります。 管理ツールバーに表示タイプが1つしかない場合は、 displayStyle 属性を定義したスタイルに設定できます。それ以外の場合は、以下のパターンに従います。

<liferay-ui:search-iterator
    displayStyle="<%= displayStyle %>"
    markupView="lexicon"
    searchContainer="<%= searchContainer %>"
/>

displayStyleの値は、 現在のビュータイプ設定されます。

関連トピック

Clay Management Toolbar Taglibの構成

管理ツールバーを使用したアイテムのフィルタリングと並べ替え

« 管理ツールバーの実装管理ツールバーを使用したアイテムのフィルタリングと並べ替え »