開發AEM元件（傳統UI） developing-aem-components-classic-ui

使用CRXDE Lite，在中建立新元件資料夾：

/ apps/<myProject>/components/<myComponent>

重新建立lib中的節點結構，然後複製現有元件的定義，如Text元件。 例如，要自定義文本元件副本：

• 從 /libs/foundation/components/text
• 至 /apps/myProject/components/text

修改 jcr:title 以反映其新名稱。

開啟新元件資料夾，並進行您需要的變更。 同時，刪除資料夾中任何無關的資訊。

您可以進行下列變更：

• 在對話方塊中新增欄位

  • cq:dialog — 觸控式UI的對話方塊
  • dialog — 傳統UI的對話方塊

• 更換 .jsp 檔案（在新元件後命名）

• 或完全重新處理整個元件（如果您想要）

例如，如果您取用標準文字元件的復本，可以新增其他欄位至對話方塊，然後更新 .jsp 來處理那裡的輸入。

下列節點之一應存在並正確初始化，新元件才會出現：

• cq:dialog — 觸控式UI的對話方塊
• dialog — 傳統UI的對話方塊
• cq:editConfig — 元件在編輯環境中的行為（例如拖放）
• design_dialog — 設計模式的對話框（僅限傳統UI）

通過以下方法之一激活段落系統中的新元件：

• 使用CRXDE Lite來新增值 <path-to-component> (例如， /apps/geometrixx/components/myComponent)到節點的屬性元件 /etc/designs/geometrixx/jcr:content/contentpage/par
• 遵循 向段落系統添加新元件

在AEM WCM中，開啟您網站的頁面，並插入您剛建立的類型的新段落，以確保元件正常運作。

在使用段落系統的創作環境中訪問頁面 <contentPath>/Test.html.

通過以下任一方式切換到「設計」模式：

• 新增 ?wcmmode=design 到URL結尾再次存取，例如：

  <contextPath>/ Test.html?wcmmode=design

• 按一下Sidekick中的設計

您現在處於設計模式，可以編輯段落系統。

按一下「編輯」。

將顯示屬於段落系統的元件清單。 也會列出您的新元件。

元件可以啟動（或停用），以決定在編輯頁面時提供給作者的元件。

啟動元件，然後回到一般編輯模式，確認元件可供使用。

複製標準文字時間元件 /libs/foundation/components/textimage 放入Geometrixx元件資料夾， /apps/geometrixx/components，使用textimage作為目標節點名稱。 （導覽至元件，按一下滑鼠右鍵並選取「複製」 ，然後瀏覽至目標目錄，即可複製元件。）

若要讓此範例簡單明瞭，請導覽至您複製的元件，並刪除新文字時間節點的所有子節點，但下列子節點除外：

• 對話框定義： textimage/dialog
• 元件指令碼： textimage/textimage.jsp
• 編輯設定節點（允許拖放資產）: textimage/cq:editConfig

編輯元件中繼資料：

• 元件名稱

  • 設定 jcr:description to Text Image Component (Extended)
  • 設定 jcr:title to Text Image (Extended)

• 群組，其中元件列在sidekick中（維持原狀）

  • 離開 componentGroup 設為 General

• 新元件的父元件（標準文字時間元件）

  • 設定 sling:resourceSuperType to foundation/components/textimage

在此步驟後，元件節點如下所示：

變更 sling:resourceType 影像的編輯配置節點的屬性(屬性： textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) geometrixx/components/textimage.

如此一來，當影像拖放到頁面上的元件時， sling:resourceType extended textimage元件的屬性設為： geometrixx/components/textimage.

修改元件的對話方塊以包含新選項。 新元件繼承與原始元件相同的對話框部分。 我們所做的唯一補充是 進階 標籤，添加 影像位置 下拉清單，帶選項 Left 和 右:

• 保留 textimage/dialog屬性未變更。

注意方式 textimage/dialog/items 有四個子節點tab1到tab4，代表textimage對話框的四個頁簽。

• 前兩個標籤（tab1和tab2）:

  • 將xtype變更為cqinclude（從標準元件繼承）。
  • 使用值新增路徑屬性 /libs/foundation/components/textimage/dialog/items/tab1.infinity.json和 /libs/foundation/components/textimage/dialog/items/tab2.infinity.json，分別為。
  • 移除所有其他屬性或子節點。

• 對於tab3:

  • 保留屬性和子節點，不變更

  • 新增欄位定義至 tab3/items，類型的節點位置 cq:Widget

  • 為新 tab3/items/position節點：

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • 新增子節點 position/options 類型 cq:WidgetCollection 表示影像放置的兩個選擇，並在其下建立兩個節點，即o1和o2類型 nt:unstructured.

  • 針對節點 position/options/o1 設定屬性： text to Left 和 value to left.

  • 針對節點 position/options/o2 設定屬性： text to Right 和 value to right.

• 刪除頁簽4。

影像位置會以 imagePosition代表節點的屬性 textimage 段落。 執行這些步驟後，元件對話方塊如下所示：

擴充元件指令碼， textimage.jsp，並額外處理新參數：

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

我們將取代強調的程式碼片段 %><div class="image"><% 新程式碼產生此標籤的自訂樣式。

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

將元件儲存至存放庫。 元件已準備好測試。

從複製標準影像元件 /libs/foundation/components/image 放入Geometrixx元件資料夾， /apps/geometrixx/components，使用影像作為目標節點名稱。

編輯元件中繼資料：

• 設定 jcr:title to Image (Extended)

導覽至 /apps/geometrixx/components/image/dialog/items/image。

新增屬性:

• 名稱: allowUpload
• 類型: String
• 值: false

按一下 全部儲存. 元件已準備好測試。

以英文/公司等Geometrixx開啟頁面。

切換到設計模式並激活映像（擴展）。

切換回編輯模式，並將其添加到段落系統。 在下一張圖片中，您可以看到原始影像元件與您剛剛建立的影像元件之間的差異。

原始影像元件：

您的新影像元件：

元件現已可供使用。