現在表示中:

アセット共有ページは、メタデータに基づいてアセットを検索するために使用されます。検索、検索結果およびユーザーが実行できるアクションをカスタマイズできます。

アセット共有テンプレートの作成

  • Geometrixx サンプルページ:/content/geometrixx/en/press.html
  • サンプルテンプレート:/apps/geometrixx/templates/assetshare
  • サンプルページコンポーネント:/apps/geometrixx/components/assetshare

clientlib の設定

Adobe Experience Manager(AEM)Assets コンポーネントは、WCM 編集 clientlib の拡張を使用します。clientlib は通常、init.jsp に読み込まれます。

デフォルトの(コアの init.jsp での)clientlib の読み込みとは異なり、AEM Assets テンプレートには以下が必要な条件となります。

  • テンプレートには、(cq.wcm.edit ではなく)cq.dam.edit の clientlib を含める必要があります。
  • clientlib は無効な WCM モード(例えば、「公開」での読み込み)でも、述語、アクション、レンズをレンダリングするために含める必要があります。

ほとんどの場合、既存のサンプル init.jsp/apps/geometrixx/components/assetshare/init.jsp)のコピーで、これらのニーズが満たされます。

追加のスタイルシート

一部の AEM Assets コンポーネントでは、AEM ウィジェットライブラリを使用します。コンテンツコンテキストで正常にレンダリングするには、追加のスタイルシートを読み込む必要があります。タグアクションコンポーネントでは、さらにもう 1 つのスタイルシートが必要です。

<link href="/etc/designs/geometrixx/ui.widgets.css" rel="stylesheet" type="text/css">

Geometrixx スタイルシート

サンプルページコンポーネントでは、すべてのセレクターを、static.css/etc/designs/geometrixx/static.css)の .assetshare で始める必要があります。ベストプラクティス:すべての .assetshare セレクターを独自のスタイルシートにコピーし、必要に応じてルールを変更します。

Query Builder

Geometrixx サンプルページには、2 列のデフォルトの AEM Assets クエリビルダーコンポーネント(/libs/dam/components/assetshare/querybuilder)が含まれています(サンプルページの場所は /apps/geometrixx/components/assetshare/body.jsp)。

  • 左側の列は、述語およびアクションに使用します。
  • 右側の列は、現在のレンズを表示するレンズデックに使用します。
  • 上部のバーには検索フィールド、ページング、レンズスイッチャーがあります。

次のいずれかを実現するには、独自のコンポーネントを作成して含める必要があります。

  • 異なるレイアウト
  • クエリビルダーの制限などに対する異なるデフォルト値の設定(クエリビルダーのプロパティダイアログボックスに表示される値を設定できます。デフォルト値は、値が何も設定されていない場合に限り適用されます)

ベストプラクティスとしては、既存のコンポーネントを /apps 内のプロジェクトフォルダーにコピーして、それを変更します。

アクションのカスタマイズ

AEM Assets には、アセット共有ページのカスタマイズに使用できる、事前定義済みのアクションのセットが付属しています。この方法でアセット共有をカスタマイズする方法については、アセット共有ページの作成と設定で説明しています。

AEM 開発者は、既存のアクションを使用するだけでなく、独自のアクションを作成することもできます。

カスタムアクションの追加

カスタムアクションを作成するには、ウィジェットフレームワークに関する基本的な知識が必要です。

ベストプラクティスとしては、既存のアクションをコピーしてそれを変更します。サンプルのアクションは、/libs/cq/dam/assetshare/components/actions にあります。コンポーネントの開発も参照してください。

例:シンプルなアクションの作成

カスタムアクションの作成手順

  1. プロジェクトディレクトリにコンポーネントフォルダーを作成します(/apps/geometrixx/components/sampleaction など)。

  2. 次の content.xml を追加します。

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:Component"
        jcr:title="Image Formats"
        sling:resourceSuperType="foundation/components/parbase"
        allowedParents="[*/parsys]"
        componentGroup="Asset Share"/>
    
  3. 次の sampleaction.jsp を追加します。

    <%--
    
      Sample action component
    
    --%><%@include file="/libs/foundation/global.jsp"%>
    <script type="text/javascript">
        // Note: Functions should be defined in a global script block. The script inside
        // the component will be loaded in every paragraph that uses this component.
    
        // alert the title and path of the selected assets.
        function alertSelectedAssets() {
            var selection = CQ.search.Util.getSelection();
    
            if (selection.length == 0) {
                CQ.dam.Util.alertNoSelection();
                return;
            }
    
            var msg = "";
            for (var i = 0; i < selection.length; i++) {
                msg += "Title: " + selection[i]["jcr:content"]["metadata"]["dc:title"] + "\n";
                msg += "Path: " + selection[i]["jcr:path"] + "\n\n";
            }
            alert(msg);
        }
    
    </script>
    <a href="javascript:alertSelectedAssets();">Sample Action</a>
    
  4. コンポーネントを使用できるようにするには、それを編集可能にする必要があります。コンポーネントを編集可能にするには、CRXDE で、cq:EditConfig プライマリ型の cq:editConfig ノードを追加します。段落を削除できるように、DELETEという 1 つの値を持つ複数値プロパティ cq:actions を追加します。

  5. ブラウザーを開き、サンプルページ(press.html など)でデザインモードに切り替えて、述語段落システムの新しいコンポーネント(「アクション」など)を有効にします。

  6. 編集モードで、新しいコンポーネントがサイドキック(アセット共有グループ)で使用できるようになります。アクション領域にコンポーネントを挿入します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー