シンプルなカスタマイズの例

Last update: Fri Jan 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

User
Admin

次に、AEM Guides アプリでこれらのカスタマイズを統合する方法を見てみましょう。

例えば、このボタンをアプリの既存のビューに追加したいとします。
そのためには、次の 3 つの基本的な要素が必要です。

The id を参照してください。
The target（新しいコンポーネントを追加する JSON 内の場所）。 The target が key および value. キーと値のペアは、コンポーネントを一意に識別するのに役立つ、コンポーネントの定義に使用される任意の属性にすることができます。
また、インデックスを使用してターゲットを参照することもできます。
次の 3 つの viewStates があります。 APPEND, PREPEND, REPLACE.
新しく作成されたコンポーネントの JSON と対応するメソッド。

例えば、レビューで使用する注釈ツールボックスに、AEMでファイルを開くボタンを追加するとします。

export default {
  id: 'annotation_toolbox',
  view: {
    items: [
      {
        component: 'button',
        icon: 'linkOut',
        title: 'Open topic in Assets view',
        'on-click': 'openTopicInAEM',
        target: {
          key: 'value',
          value: 'addcomment',
          viewState: VIEW_STATE.APPEND

        },
      },
    ],
  },
  controller: {
    openTopicInAEM: function (args) {
        const topicIndex = tcx.model.getValue(tcx.model.KEYS.REVIEW_CURR_TOPIC)
        const {allTopics = {}} = tcx.model.getValue(tcx.model.KEYS.REVIEW_DATA) || {}
        tcx.appGet('util').openInAEM(allTopics[topicIndex])
    },
  },
}

上記の例では、次のようになります。

の id コンポーネントを挿入する JSON の例を次に示します。 annotation_toolbox
ターゲットは addcomment 」ボタンをクリックします。ボタンを addcomment viewState を使用したボタン append.
コントローラー内のボタンのオンクリックイベントを定義します。

"annotation_toolbox"の JSON .src/jsons/review_app/annotation_toolbox.json

カスタマイズ前の注釈ツールボックスは次のようになりました。

annotation-toolbox

カスタマイズ後、注釈ツールボックスは次のように表示されます。

customized-annotation-toolbox

CSS の追加

一貫性を保つために、既にスタイル設定されたコンポーネントを提供します。挿入された JSON には、固有のスタイルが適用されます。CSS を管理する主な方法は、拡張機能の extraClass キーを使用することです。

{
    "view":{
        items:[
            {
                compoenent:"button",
                extraClass:"underline bg-red",
            }
        ]
    }
}

CSS ファイルを clientlibs に追加することで、CSS クラスを使用してカスタムスタイルを配置できます。ビルド時に、 Tailwind tailwind のユーティリティクラスの出力。同じの設定は、拡張機能の tailwind.config.js 時刻 ./tailwind.config.js

recommendation-more-help

11125c99-e1a1-4369-b5d7-fb3098b9b178