傳統UI使用ExtJS來建立小工具集,以提供元件的外觀和風格。 由於這些Widget的性質,元件與傳統UI和 觸控式UI.
傳統UI和觸控式UI都有許多元件開發的常見方面,因此 你必須讀 AEM元件 — 基本概念 befor 使用此頁面,說明傳統UI的詳細資訊。
頁面會說明元件的基本結構 AEM元件 — 基本概念,可同時套用觸控式和傳統UI。 即使您不需要在新元件中使用觸控式UI的設定,在繼承現有元件時也應注意這些設定。
JSP指令碼或Servlet可用於呈現元件。 根據Sling的請求處理規則,預設指令碼的名稱為:
<*componentname*>.jsp
JSP指令碼檔案 global.jsp
用於提供對特定對象(即訪問內容)的快速訪問,以訪問用於呈現元件的任何JSP指令碼檔案。
因此 global.jsp
應包含在每個元件呈現JSP指令碼中,其中提供了一個或多個對象 global.jsp
中所有規則的URL區段。
預設值的位置 global.jsp
為:
/libs/foundation/global.jsp
路徑 /libs/wcm/global.jsp
,CQ 5.3版及舊版已使用,現已淘汰。
以下列出預設提供的最重要對象 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
:
屬性對象是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)。 頁面類別提供一些存取內容的方法。
範例: String pageTitle = currentPage.getTitle();
透過 currentNode
導入的對象 global.jsp
:
此 currentNode
物件是節點的例項(請參閱 JCR API)。 節點的屬性可由 getProperty()
方法。
範例: String pageTitle = currentNode.getProperty("jcr:title");
CQ和Sling標籤程式庫可讓您存取特定函式,以用於範本和元件的JSP指令碼。
如需詳細資訊,請參閱本檔案 標籤程式庫.
現代網站嚴重依賴由複雜JavaScript和CSS程式碼驅動的用戶端處理。 組織並最佳化此程式碼的服務可能是個複雜的問題。
為協助處理此問題,AEM提供 用戶端程式庫資料夾,可讓您將用戶端代碼儲存在存放庫中、將其組織為類別,並定義將每類代碼提供給用戶端的時間和方式。 然後,用戶端程式庫系統會負責在您的最終網頁中產生正確的連結,以載入正確的程式碼。
請參閱檔案 使用用戶端HTML程式庫 以取得更多資訊。
您的元件需要對話方塊,供作者新增及設定內容。
請參閱 AEM元件 — 基本概念 以取得詳細資訊。
您可以設定元件的編輯行為。 這包括可用於元件的動作、就地編輯器的特性以及與元件上的事件相關的監聽器等屬性。 觸控式和傳統UI都會使用此設定,雖然有某些特定差異。
此 配置元件的編輯行為 新增 cq:editConfig
類型節點 cq:EditConfig
元件節點下(類型 cq:Component
)和新增特定屬性和子節點。
請參閱 使用和擴充ExtJS Widget 以取得更多詳細資訊。
請參閱 使用xtype 以取得更多詳細資訊。
本節說明如何建立自己的元件並將其添加到段落系統中。
快速入門的方法是複製現有元件,然後進行您想要的變更。
如需如何開發元件的範例,請參閱 擴充文字和影像元件 — 範例。
若要根據現有元件為AEM開發新元件,您可以複製元件,為新元件建立javascript檔案,並將其儲存在AEM可存取的位置(另請參閱 自訂元件和其他元素):
使用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
來處理那裡的輸入。
以下元件:
針對傳統UI定義的對話方塊會在觸控式UI中運作。
為觸控式UI定義的對話方塊不會在傳統UI中運作。
視您的例項和製作環境而定,您可能會想要為元件定義這兩種對話方塊類型。
下列節點之一應存在並正確初始化,新元件才會出現:
cq:dialog
— 觸控式UI的對話方塊dialog
— 傳統UI的對話方塊cq:editConfig
— 元件在編輯環境中的行為(例如拖放)design_dialog
— 設計模式的對話框(僅限傳統UI)通過以下方法之一激活段落系統中的新元件:
<path-to-component>
(例如, /apps/geometrixx/components/myComponent
)到節點的屬性元件 /etc/designs/geometrixx/jcr:content/contentpage/par
在AEM WCM中,開啟您網站的頁面,並插入您剛建立的類型的新段落,以確保元件正常運作。
若要查看頁面載入的計時統計資料,您可以使用Ctrl-Shift-U — 搭配 ?debugClientLibs=true
在URL中設定。
開發元件後,可將其添加到段落系統中,以便作者在編輯頁面時選擇和使用元件。
在使用段落系統的創作環境中訪問頁面 <contentPath>/Test.html
.
通過以下任一方式切換到「設計」模式:
新增 ?wcmmode=design
到URL結尾再次存取,例如:
<contextPath>/ Test.html?wcmmode=design
按一下Sidekick中的設計
您現在處於設計模式,可以編輯段落系統。
按一下「編輯」。
將顯示屬於段落系統的元件清單。 也會列出您的新元件。
元件可以啟動(或停用),以決定在編輯頁面時提供給作者的元件。
啟動元件,然後回到一般編輯模式,確認元件可供使用。
本節提供有關如何使用可配置的影像放置特徵擴展廣泛使用的文本和影像標準元件的示例。
文字和影像元件的擴充功能可讓編輯器使用元件的所有現有功能,另加一個選項可指定影像的放置位置:
擴展此元件後,可通過元件的對話框配置影像放置。
本練習將說明下列技術:
此範例針對傳統UI。
此範例以Geometrixx範例內容為基礎,此範例內容已由We.Retail取代,不再隨AEM提供。 請參閱檔案 We.Retail參考實作 以了解如何下載和安裝Geometrixx。
若要建立新元件,我們會以標準文字時間元件為基礎,並加以修改。 我們將新元件儲存在GeometrixxAEM WCM範例應用程式中。
複製標準文字時間元件 /libs/foundation/components/textimage
放入Geometrixx元件資料夾, /apps/geometrixx/components
,使用textimage作為目標節點名稱。 (導覽至元件,按一下滑鼠右鍵並選取「複製」 ,然後瀏覽至目標目錄,即可複製元件。)
若要讓此範例簡單明瞭,請導覽至您複製的元件,並刪除新文字時間節點的所有子節點,但下列子節點除外:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
對話方塊定義取決於UI:
textimage/cq:dialog
textimage/dialog
編輯元件中繼資料:
元件名稱
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):
/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"><%
將元件儲存至存放庫。 元件已準備好測試。
開發元件後,可將其添加到段落系統中,使作者能夠在編輯頁面時選擇和使用元件。 這些步驟可讓您測試元件。
元件會將其內容儲存在「公司」頁面的段落中。
若要停用此功能,我們會以標準影像元件為基礎並加以修改。 我們將新元件儲存在Geometrixx示例應用程式中。
從複製標準影像元件 /libs/foundation/components/image
放入Geometrixx元件資料夾, /apps/geometrixx/components
,使用影像作為目標節點名稱。
編輯元件中繼資料:
Image (Extended)
導覽至 /apps/geometrixx/components/image/dialog/items/image
。
新增屬性:
allowUpload
String
false
按一下 全部儲存. 元件已準備好測試。
以英文/公司等Geometrixx開啟頁面。
切換到設計模式並激活映像(擴展)。
切換回編輯模式,並將其添加到段落系統。 在下一張圖片中,您可以看到原始影像元件與您剛剛建立的影像元件之間的差異。
原始影像元件:
您的新影像元件:
元件現已可供使用。