シンプルなカスタマイズの例
次に、AEM Guides アプリでこれらのカスタマイズを統合する方法を見てみましょう。
例えば、このボタンをアプリの既存のビューに追加したいとします。
そのためには、次の 3 つの基本的な要素が必要です。
- The
id
を参照してください。 - The
target
(新しいコンポーネントを追加する JSON 内の場所)。 Thetarget
が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
カスタマイズ前の注釈ツールボックスは次のようになりました。
カスタマイズ後、注釈ツールボックスは次のように表示されます。
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