開發Adobe Experience Manager (AEM)元件（傳統UI） developing-aem-components-classic-ui

使用CRXDE Lite，在下方建立元件資料夾：

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

像在程式庫中一樣重新建立節點結構，然後複製現有元件（例如文字元件）的定義。 例如，若要自訂文字元件複製：

• 從 /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/dialog
• 元件指令碼： textimage/textimage.jsp
• 編輯設定節點（允許拖放資產）： textimage/cq:editConfig

編輯元件中繼資料：

• 元件名稱

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

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

  • 離開 componentGroup 設為 General

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

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

在此步驟後，元件節點看起來像這樣：

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

如此一來，當影像放到頁面上的元件時， sling:resourceType 擴充文字功能元件的屬性設為： geometrixx/components/textimage.

修改元件的對話方塊以包含新選項。 新元件會繼承對話方塊中與原始元件相同的零件。 您所做的唯一增加是擴充 進階 標籤，新增 影像位置 下拉式清單，含選項 左側 和 右：

• 離開 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，依序輸入。
  • 移除所有其他屬性或子節點。

• 針對索引標籤3：

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

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

  • 為新的設定以下屬性（型別為String） tab3/items/position節點：

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

  • 新增子節點 position/options 型別 cq:WidgetCollection 代表影像位置的兩個選擇，並在其下方建立兩個節點，型別為o1和o2 nt:unstructured.

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

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

• 刪除Tab4。

影像位置會持續保留在內容中，作為 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 至 Image (Extended)

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

新增屬性：

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

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

以Geometrixx（例如英文/公司）開啟頁面。

切換到設計模式並啟動影像（延伸）。

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

原始影像元件：

您的新影像元件：

元件現在已可供使用。