開發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

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

將影像的編輯設定節點（屬性： textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType）的sling:resourceType屬性變更為geometrixx/components/textimage.

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

修改元件的對話方塊以包含新選項。 新元件會繼承對話方塊中與原始元件相同的零件。 您僅需新增下列選項，即可擴充​ 進階 ​索引標籤，新增​ 影像位置 ​下拉式清單： 左 ​和​ 右：

• 保留textimage/dialog屬性不變。

請注意textimage/dialog/items有四個子節點（tab1到tab4），代表文字文字對話方塊的四個索引標籤。

• 在前兩個標籤（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

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

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

  • 新增型別cq:WidgetCollection的子節點position/options以代表兩個影像放置選項，並在其下建立兩個節點，即nt:unstructured型別的o1和o2。

  • 針對節點position/options/o1，將屬性： text設定為Left，value設定為left.

  • 針對節點position/options/o2，將屬性： text設定為Right，value設定為right。

• 刪除Tab4。

影像位置會作為代表textimage段落之節點的imagePosition屬性保留在內容中。 執行這些步驟後，元件對話方塊看起來會像這樣：

使用新引數的額外處理來擴充元件指令碼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（例如英文/公司）開啟頁面。

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

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

原始影像元件：

您的新影像元件：

元件現在已可供使用。