開發Adobe Experience Manager (AEM)元件（傳統UI）

傳統UI會使用ExtJS建立提供元件外觀的Widget。 由於這些Widget的性質，元件與傳統UI的互動方式與 觸控式UI.

結構

頁面上會說明元件的基本結構 AEM元件 — 基本需知，會同時套用觸控式開啟和傳統UI。 即使您不需要在新元件中使用觸控式UI的設定，從現有元件繼承時瞭解這些設定也會有所幫助。

JSP指令碼

JSP指令碼或Servlet可用於呈現元件。 根據Sling的請求處理規則，預設指令碼的名稱為：

<*componentname*>.jsp

global.jsp

JSP指令碼檔案 global.jsp 可用來讓使用者快速存取用來呈現元件的任何JSP指令碼檔案，以存取特定物件（亦即存取內容）。

因此 global.jsp 應包含在每個元件轉譯JSP指令碼中，其中一個或多個物件提供於 global.jsp 都會使用。

預設的位置 global.jsp 為：

/libs/foundation/global.jsp

global.jsp、used API和Taglibs的功能

以下列出預設提供的最重要物件 global.jsp：

摘要:

• <cq:defineObjects />

  • slingRequest — 包裝的要求物件( SlingHttpServletRequest)。
  • slingResponse — 包裝的回應物件( SlingHttpServletResponse)。
  • resource - Sling資源物件( slingRequest.getResource();)。
  • resourceResolver - Sling資源解析器物件( slingRequest.getResoucreResolver();)。
  • currentNode — 請求的已解析JCR節點。
  • log — 預設記錄器()。
  • sling - Sling指令碼協助程式。
  • properties — 已定址資源的屬性( resource.adaptTo(ValueMap.class);)。
  • pageProperties — 已定址資源的頁面屬性。
  • pageManager — 存取AEM內容頁面的頁面管理員( resourceResolver.adaptTo(PageManager.class);)。
  • component — 目前AEM元件的元件物件。
  • designer — 擷取設計資訊的設計工具物件( resourceResolver.adaptTo(Designer.class);)。
  • currentDesign — 已定址資源的設計。
  • currentStyle — 已定址資源的樣式。

存取內容

存取AEM WCM中的內容有三種方法：

• 透過中引入的屬性物件 global.jsp：

  properties物件是ValueMap的例項(請參閱 Sling API)並包含目前資源的所有屬性。

  範例： String pageTitle = properties.get("jcr:title", "no title"); 用於頁面元件的轉譯指令碼。

  範例： String paragraphTitle = properties.get("jcr:title", "no title"); 用於標準段落元件的轉譯指令碼。

• 透過 currentPage 在中引入的物件 global.jsp：

  此 currentPage 物件是頁面的例項(請參閱 AEM API)。 Page類別提供一些存取內容的方法。

  例如: String pageTitle = currentPage.getTitle();

• Via currentNode 在中引入的物件 global.jsp：

  此 currentNode 物件是節點的例項(請參閱 JCR API)。 節點屬性可由以下專案存取： getProperty() 方法。

  例如: String pageTitle = currentNode.getProperty("jcr:title");

JSP標籤庫

CQ和Sling標籤庫可讓您存取特定函式，以便在範本和元件的JSP指令碼中使用。

如需詳細資訊，請參閱檔案 標籤庫.

使用使用者端HTML程式庫

現代網站非常依賴由複雜的JavaScript和CSS程式碼驅動的使用者端處理。 組織和最佳化此程式碼的伺服可能是一個複雜的問題。

為協助處理此問題，AEM提供 使用者端資料庫資料夾，可讓您將使用者端程式碼儲存在存放庫中，將其組織成類別，並定義每個類別程式碼何時及如何提供給使用者端。 然後，使用者端程式庫系統會負責在最終網頁中產生正確的連結，以載入正確的程式碼。

檢視檔案 使用使用者端HTML程式庫 以取得詳細資訊。

對話方塊

您的元件需要一個對話方塊供作者新增和設定內容。

另請參閱 AEM元件 — 基本需知 以取得更多詳細資料。

設定編輯行為

您可以設定元件的編輯行為。 這包括元件可用的動作、就地編輯器的特性，以及與元件事件相關的接聽程式等屬性。 此設定對觸控式與傳統UI而言都是通用的，不過會有某些特定差異。

此 元件的編輯行為已設定 藉由新增 cq:editConfig 型別節點 cq:EditConfig 在元件節點（型別）下方 cq:Component)，並新增特定屬性和子節點。

使用和擴充ExtJS Widget

另請參閱 使用和擴充ExtJS Widget 以取得更多詳細資料。

對ExtJS Widget使用xtype

另請參閱 使用xtype 以取得更多詳細資料。

開發新元件

本節說明如何建立您自己的元件，並將其新增至段落系統。

快速入門方法是複製現有元件，然後進行您想要的變更。

有關如何開發元件的範例詳細說明，請參閱 擴充文字和影像元件 — 範例。

開發新元件（調整現有元件）

若要根據現有元件為AEM開發新元件，您可以複製元件、為新元件建立JavaScript檔案，並將其儲存在AEM可存取的位置(另請參閱 自訂元件和其他元素)：

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

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

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

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

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

3. 開啟新的元件資料夾，並進行您需要的變更。 此外，請刪除資料夾中任何無關的資訊。

   您可以進行下列變更：

   • 在對話方塊中新增欄位

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

   • 取代 .jsp 檔案（以新元件的名稱命名）

   • 或完全重工整個元件（若您需要）

   例如，如果您複製了標準「文字」元件，則可以在對話方塊中新增一個額外的欄位，然後更新 .jsp 以處理在該處進行的輸入。

   注意

   的元件：

   • 觸控式UI使用 Granite 元件
   • 傳統UI使用 ExtJS Widget
   注意

   為傳統UI定義的對話方塊會在觸控式UI中運作。

   針對觸控式UI定義的對話方塊無法在傳統UI中運作。

   根據您的執行個體和作者環境，您可能會想要為元件定義這兩種型別的對話方塊。

4. 下列節點之一應存在且已正確初始化，新元件才能顯示：

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

5. 透過下列任一方式在您的段落系統中啟動新元件：

   • 使用CRXDE Lite來新增值 <path-to-component> (例如， /apps/geometrixx/components/myComponent)至節點的屬性元件 /etc/designs/geometrixx/jcr:content/contentpage/par
   • 請依照中的指示 將新元件加入段落系統

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

將新元件加入段落系統（設計模式）

開發元件後，您將其新增至段落系統，讓作者在編輯頁面時可選取並使用元件。

1. 存取創作環境中使用段落系統的頁面，例如， <contentPath>/Test.html.

2. 透過以下任一方式切換到設計模式：

   • 新增 ?wcmmode=design 移至URL結尾，然後再次存取，例如：

     <contextPath>/ Test.html?wcmmode=design

   • 按一下Sidekick中的「設計」

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

3. 按一下「編輯」。

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

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

4. 啟動元件，然後返回正常編輯模式以確認其可供使用。

擴充文字和影像元件 — 範例

本節提供如何使用可設定的影像放置功能來擴充廣泛使用的文字和影像標準元件的範例。

文字和影像元件的擴充功能可讓編輯器使用元件的所有現有功能，另外還有一個額外選項可指定影像的位置：

• 在文字的左側（目前行為與新的預設值）
• 而在右側

延伸此元件後，可透過元件的對話方塊配置影像位置。

本練習將說明下列技巧：

• 複製現有元件節點並修改其中繼資料
• 修改元件的對話方塊，包括從父對話方塊繼承Widget
• 修改元件的指令碼以實作新功能

擴充現有的文字元件

若要建立元件，可使用標準文字元件作為基礎並加以修改。 您可以將新元件儲存在GeometrixxAEM WCM範例應用程式中。

1. 從以下位置複製標準文字元件 /libs/foundation/components/textimage 放入Geometrixx元件資料夾中， /apps/geometrixx/components，使用文字做為目標節點名稱。 （瀏覽至元件、以滑鼠右鍵按一下並選取「複製」，然後瀏覽至目標目錄，以複製元件。）

   

2. 若要讓此範例維持簡單，請導覽至您複製的元件，並刪除新文位元組點的所有子節點，以下子節點除外：

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

   對話方塊定義取決於UI：

   • 觸控式UI： textimage/cq:dialog
   • 傳統 UI: textimage/dialog

3. 編輯元件中繼資料：

   • 元件名稱

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

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

     • 離開 componentGroup 設為 General

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

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

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

   

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

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

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

   • 離開 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 段落。 執行這些步驟後，元件對話方塊看起來會像這樣：

   

6. 擴充元件指令碼， 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"><%
   

7. 將元件儲存至存放庫。 元件已準備好進行測試。

檢查新元件

開發元件後，您可以將其新增至段落系統，讓作者在編輯頁面時可選取並使用元件。 這些步驟可讓您測試元件。

1. 以Geometrixx（例如英文/公司）開啟頁面。
2. 按一下Sidekick中的「設計」以切換至設計模式。
3. 按一下頁面中間段落系統上的「編輯」，編輯段落系統設計。 隨即顯示元件清單，這些元件可放置在段落系統中，清單中應包含您新開發的元件「文字影像（延伸）」 。 選取它並按一下確定，為段落系統啟動它。
4. 切換回編輯模式。
5. 將文字影像（延伸）段落新增至段落系統，以範例內容初始化文字和影像。 儲存變更。
6. 開啟文字和影像段落的對話方塊，並將「進階」標籤上的「影像位置」變更為「右側」，然後按一下「確定」以儲存變更。
7. 段落會以影像在右側呈現。
8. 元件現在已可供使用。

元件會將其內容儲存在公司頁面上的段落中。

停用影像元件的上傳功能

若要停用此功能，請使用標準影像元件作為基礎並加以修改。 您可以將新元件儲存在Geometrixx範例應用程式中。

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

   

2. 編輯元件中繼資料：

   • 設定 jcr：title 至 Image (Extended)

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

4. 新增屬性：

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

   

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

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

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

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

   原始影像元件：

   

   您的新影像元件：

   

9. 元件現在已可供使用。