傳統UI會使用ExtJS建立提供元件外觀的Widget。 由於這些Widget的性質,元件與傳統UI的互動方式與 觸控式UI.
元件開發的許多方面對於傳統UI和觸控式UI都是通用的,因此 您必須閱讀 AEM元件 — 基本需知 早於 此頁面會處理傳統UI的具體資訊。
頁面上會說明元件的基本結構 AEM元件 — 基本需知,會同時套用觸控式開啟和傳統UI。 即使您不需要在新元件中使用觸控式UI的設定,從現有元件繼承時瞭解這些設定也會有所幫助。
JSP指令碼或Servlet可用於呈現元件。 根據Sling的請求處理規則,預設指令碼的名稱為:
<*componentname*>.jsp
JSP指令碼檔案 global.jsp
可用來讓使用者快速存取用來呈現元件的任何JSP指令碼檔案,以存取特定物件(亦即存取內容)。
因此 global.jsp
應包含在每個元件轉譯JSP指令碼中,其中一個或多個物件提供於 global.jsp
都會使用。
預設的位置 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
:
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");
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>
像在程式庫中一樣重新建立節點結構,然後複製現有元件(例如文字元件)的定義。 例如,若要自訂文字元件複製:
/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。
此範例是根據AEM不再隨附的Geometrixx範例內容,已由We.Retail取代。 檢視檔案 We.Retail參考實作 瞭解如何下載和安裝Geometrixx。
若要建立元件,可使用標準文字元件作為基礎並加以修改。 您可以將新元件儲存在GeometrixxAEM WCM範例應用程式中。
從以下位置複製標準文字元件 /libs/foundation/components/textimage
放入Geometrixx元件資料夾中, /apps/geometrixx/components
,使用文字做為目標節點名稱。 (瀏覽至元件、以滑鼠右鍵按一下並選取「複製」,然後瀏覽至目標目錄,以複製元件。)
若要讓此範例維持簡單,請導覽至您複製的元件,並刪除新文位元組點的所有子節點,以下子節點除外:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
對話方塊定義取決於UI:
textimage/cq:dialog
textimage/dialog
編輯元件中繼資料:
元件名稱
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)中:
/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"><%
將元件儲存至存放庫。 元件已準備好進行測試。
開發元件後,您可以將其新增至段落系統,讓作者在編輯頁面時可選取並使用元件。 這些步驟可讓您測試元件。
元件會將其內容儲存在公司頁面上的段落中。
若要停用此功能,請使用標準影像元件作為基礎並加以修改。 您可以將新元件儲存在Geometrixx範例應用程式中。
複製標準影像元件來源 /libs/foundation/components/image
放入Geometrixx元件資料夾中, /apps/geometrixx/components
,使用影像作為目標節點名稱。
編輯元件中繼資料:
Image (Extended)
導覽至 /apps/geometrixx/components/image/dialog/items/image
。
新增屬性:
allowUpload
String
false
按一下「儲存全部」。元件已準備好進行測試。
以Geometrixx(例如英文/公司)開啟頁面。
切換到設計模式並啟動影像(延伸)。
切換回編輯模式,並將其新增至段落系統。 在下一張圖片中,您可以看到原始影像元件與您建立的影像元件之間的差異。
原始影像元件:
您的新影像元件:
元件現在已可供使用。