AEM元件 — 基本概念 aem-components-the-basics

您到底需要新元件做什麼？

• 在開發、測試和移交的所有階段，明確的規格都有幫助。

  詳細資訊可能會隨時間而改變，但可以更新規格（儘管更改也應記錄在案）。

您是否需要從頭建立元件，還是可以從現有元件繼承基本知識？

• 沒有必要重新發明輪子。
• AEM提供數種機制，可讓您繼承和延伸其他元件定義的詳細資訊，包括覆寫、覆蓋和 Sling Resource Merger.

元件是否需要邏輯才能選取/操控內容？

• 邏輯應與使用者介面層分開。 HTL的設計目的，是為了協助確保此情況發生。

元件是否需要CSS格式？

• CSS格式應與元件定義分開。 定義命名HTML元素的慣例，以便透過外部CSS檔案修改它們。

我應考慮哪些安全方面？

• 請參閱 安全性檢查清單 — 開發最佳實務 以取得詳細資訊。

觸控式UI
標準使用者介面 AEM 5.6.0導入此功能，作為預覽並在6.x中延伸。它以Adobe Marketing Cloud的統一使用者體驗為基礎，使用 Coral UI 和 Granite UI.

傳統UI
CQ 5.1推出以ExtJS技術為基礎的使用者介面。

Page:

• AEM具有 頁面 元件() cq:Page)。
• 這是對內容管理非常重要的特定資源類型。
  • 頁面對應於保存網站內容的網頁。

段落制度：

• 段落系統是網站的關鍵部分，因為它管理著段落清單。 它可用來保留和建構包含實際內容的個別元件。
• 您可以在段落系統中建立、移動、複製和刪除段落。
• 您也可以選取要在特定段落系統內使用的元件。
• 標準例項中有各種可用的段落系統(例如 parsys, [responsivegrid](/docs/experience-manager-64/sites-authoring/responsive-layout.md))。

AEM元件以 Sling.

AEM元件（通常位於下列位置）:

• HTL: /libs/wcm/foundation/components
• JSP: /libs/foundation/components

專案/網站特定元件（通常）位於：

• /apps/<myApp>/components

AEM標準元件定義為 cq:Component 並有關鍵要素：

• jcr屬性：

  jcr屬性清單；這些是變數，有些可能是選用的，但元件節點的基本結構、其屬性和子節點由 cq:Component 定義

• 資源:

  這些定義元件使用的靜態元素。

• 指令碼:

用於實作元件之產生例項的行為。

根節點:

• <mycomponent> (cq:Component) — 元件的階層節點。

重要屬性:

• jcr:title — 元件標題；例如，當元件列在元件瀏覽器或sidekick中時，會以標籤的形式使用。

• jcr:description — 元件的說明；可在元件瀏覽器或sidekick中作為滑鼠移過提示使用。

• 傳統 UI:

  • icon.png — 此元件的表徵圖。
  • thumbnail.png — 如果此元件列在段落系統中，則顯示的影像。

• 觸控式 UI

  • 請參閱 觸控式UI中的元件圖示 以取得詳細資訊。

重要子節點:

• cq:editConfig (cq:EditConfig) — 定義元件的編輯屬性，並使元件顯示在「元件」瀏覽器或Sidekick中。

  注意：如果元件有對話方塊，則會自動出現在「元件」瀏覽器或Sidekick中，即使cq:editConfig不存在亦然。

• cq:childEditConfig (cq:EditConfig) — 控制未定義子元件的製作UI方面 cq:editConfig.

• 觸控式UI:

  • cq:dialog ( nt:unstructured) — 此元件的對話方塊。 定義介面，讓使用者設定元件和/或編輯內容。
  • cq:design_dialog ( nt:unstructured) — 此元件的設計編輯

• 傳統 UI:

  • dialog ( cq:Dialog) — 此元件的對話方塊。 定義介面，讓使用者設定元件和/或編輯內容。
  • design_dialog ( cq:Dialog) — 此元件的設計編輯。

HTL ( /libs/wcm/foundation/components/text)

JSP( /libs/foundation/components/text)

jcr:title — 元件標題；這可用來識別元件，例如，元件會顯示在元件瀏覽器或sidekick內的元件清單中

jcr:description — 元件的說明；可在sidekick內的元件清單中作為滑鼠移過提示使用

sling:resourceSuperType:這表示延伸元件時的繼承路徑（透過覆寫定義）

cq:editConfig ( cq:EditConfig) — 此功能可控制視覺效果；例如，它可以定義條形或介面工具集的外觀，也可以添加自定義控制項

cq:childEditConfig ( cq:EditConfig) — 這會控制子元件的視覺化方面，這些元件沒有其自己的定義

觸控式UI:

• cq:dialog ( nt:unstructured) — 定義用於編輯此元件內容的對話框
• cq:design_dialog ( nt:unstructured) — 指定此元件的設計編輯選項

傳統 UI:

• dialog ( cq:Dialog) — 定義用於編輯此元件內容的對話方塊（專用於傳統UI）
• design_dialog ( cq:Dialog) — 指定此元件的設計編輯選項
• icon.png — 要用作Sidekick中元件表徵圖的圖形檔案
• thumbnail.png — 將元件從Sidekick拖動時用作元件縮圖的圖形檔案

觸控式UI

• cq:dialog ( nt:unstructured)節點：

  • 定義用於編輯此元件的內容的對話框

  • 特定於觸控式UI

  • 是使用Granite UI元件來定義

  • 有屬性 sling:resourceType，作為標準Sling內容結構

  • 可以有屬性 helpPath 定義幫助表徵圖(? 圖示)。

    • 若為現成可用的元件，這通常會參照檔案中的頁面。
    • 若否 helpPath 指定時，會顯示預設URL（檔案概述頁面）。

在對話方塊中，會定義個別欄位：

傳統 UI

• dialog ( cq:Dialog)節點

  • 定義用於編輯此元件的內容的對話框

  • 專屬於傳統UI

  • 是使用ExtJS Widget定義

  • 有屬性 xtype，指ExtJS

  • 可以有屬性 helpPath 定義上下文相關幫助資源（絕對或相對路徑），此資源在 說明 按鈕。

    • 若為現成可用的元件，這通常會參照檔案中的頁面。
    • 若否 helpPath 指定時，會顯示預設URL（檔案概述頁面）。

在對話方塊中，會定義個別欄位：

在傳統對話方塊中：

• 您可以建立對話方塊，如 cq:Dialog，可提供單一索引標籤（如文字元件中），或如果您需要多個索引標籤（如同文字時間元件），則對話方塊可定義為 cq:TabPanel.
• a cq:WidgetCollection ( items)可用來提供任一輸入欄位的基礎( cq:Widget)或其他頁簽( cq:Widget)。 此階層可延伸。

觸控式UI

傳統 UI

定義（適用於兩個UI）皆具有屬性 name= ./jcr:title

• /libs/foundation/components/title/cq:dialog/content/items/column/items/title
• /libs/foundation/components/title/dialog/items/title

內容內會產生屬性 jcr:title 保存作者的內容。

資源類型層次結構

這可用來使用屬性擴充元件 sling:resourceSuperType. 這可讓元件繼承。 例如，文本元件將繼承標準元件中的各種屬性。

• 指令碼（由Sling解析）
• 對話
• 說明（包括縮圖影像、圖示等）

容器階層

這可用來將組態設定填入子元件，且最常用於parsys案例。

例如，可以在父元件上定義編輯欄按鈕、控制集佈局（編輯欄、變換）、對話框佈局（內聯、浮動）的配置設定，並傳播到子元件。

配置設定（與編輯功能相關），位於 cq:editConfig 和 cq:childEditConfig 都會傳播。

包含階層

這是在執行階段以包含的順序強加。

此層次結構由設計人員使用，而設計人員又是渲染的各個設計方面的基礎；包括版面資訊、css資訊、parsys中的可用元件等。

cq:editConfig 節點屬性:

• cq:actions ( String array):定義可在元件上執行的動作。

• cq:layout ( String)::會定義在傳統UI中編輯元件的方式。

• cq:dialogMode ( String):定義傳統UI中開啟元件對話方塊的方式

  • 在觸控式UI中，對話方塊一律會在案頭模式中浮動，並在行動裝置中以全螢幕自動開啟。

• cq:emptyText ( String):會定義沒有視覺內容時顯示的文字。

• cq:inherit ( Boolean):定義是否從它繼承的元件繼承缺少的值。

• dialogLayout （字串）:定義對話方塊的開啟方式。

cq:editConfig 子節點:

• cq:dropTargets （節點類型） nt:unstructured):定義可接受內容尋找器資產中刪除的刪除目標的清單

  • 傳統UI中僅提供多個放置目標。
  • 在觸控式UI中，允許使用單一放置目標。

• cq:actionConfigs （節點類型） nt:unstructured):會定義附加至cq:actions清單的新動作清單。

• cq:formParameters （節點類型） nt:unstructured):會定義新增至對話方塊表單的其他參數。

• cq:inplaceEditing （節點類型） cq:InplaceEditingConfig):定義元件的就地編輯設定。

• cq:listeners （節點類型） cq:EditListenersConfig):定義元件上發生動作之前或之後所發生的動作。

若要尋找 cq:editConfig 節點，例如 cq:actions，您可以在 CRXDE Lite 和使用以下XPath查詢字串進行搜索：

//element(cq:editConfig, cq:EditConfig)[@cq:actions]

查找的子節點 cq:editConfig，例如，您可以搜尋 cq:dropTargets，其類型 cq:DropTargetConfig;您可以在​ CRXDE Lite ​中使用查詢工具，並使用下列XPath查詢字串進行搜索：

//element(cq:dropTargets, cq:DropTargetConfig)

分隔符，由xtype定義 tbseparator;

• 這僅供傳統UI使用。
• 觸控式UI會忽略此定義，因為會忽略xtype（而分隔符號則不必要，因為觸控式UI中的動作工具列結構不同）。

按鈕的名稱為 管理注釋 運行處理程式函式 CQ_collab_forum_openCollabAdmin().