移轉至Touch UI

從6.0版開始，Adobe Experience Manager(AEM)推出新的使用者介面，稱為 觸控式UI (也簡稱為 觸控式UI)。 它符合Adobe Marketing Cloud和整體Adobe使用者介面准則。 這已成為AEM中的標準UI，其舊版案頭導向介面稱為 傳統UI.

如果您一直將AEM與傳統UI搭配使用，則需採取動作來移轉執行個體。 本頁面旨在提供個別資源的連結，以作為跳板。

注意

這類移轉專案可能會對您的執行個體造成重大影響。 請參閱 管理專案 — 最佳實務 供建議的指引使用。

基本概念

移轉時，請注意傳統和觸控式UI之間的下列（主要）差異：

傳統 UI 觸控式UI
在JCR存放庫中以節點結構形式說明。 代表UI元素的每個節點都稱為 ExtJS Widget 並在用戶端上呈現 ExtJS. 在JCR存放庫中也以節點結構的形式說明。 不過，在此案例中，每個節點都會參照Sling資源類型（Sling元件），負責其轉譯。 因此UI（基本上）是在伺服器端轉譯。

sling:resourceType

  • 未使用
 sling:resourceType
  • 已使用
  • 例如
    cq/gui/components/authoring/dialog

對話框節點：

  • 名稱: dialog
  • jcr:primaryType: cq:Dialog

對話框節點：

  • 名稱: cq:dialog
  • jcr:primaryType: nt:unstructured

Javascript位置：

  • 必要部件是使用偵聽器直接嵌入的，或在clientlibs中進行管理。

Javascript位置：

  • 必要部件不能嵌入對話定義中；責任分離。

事件處理：

  • 對話方塊小工具會直接參考Javascript程式碼。

事件處理：

  • Javascript會觀察對話事件。
由用戶端完成的呈現：
  • 用戶端會動態建立UI元件。
  • 從伺服器取得用戶端要求（提取）元件定義（如JSON）。
 伺服器完成的呈現：
  • 用戶端會連同相關UI一起要求頁面。
  • 伺服器傳送（推送）UI作為HTML檔案；使用Coral UI元件。

換句話說，將UI的區段從傳統UI移轉至觸控式UI，表示會移植 ExtJS Widget 到 Sling元件. 為方便使用，觸控式UI以Granite UI架構為基礎，此架構已為UI提供一些Sling元件（稱為Granite UI元件）。

開始之前，請檢查狀態和相關建議：

開發觸控式UI的基本基礎將提供堅實的基礎：

移轉頁面編寫

對話方塊是移轉元件時的主要因素：

移轉主控台

您也可以自訂主控台：

雖然與移轉至觸控式UI並非直接相關，但有相關問題需同時考慮，因為也是建議的作法：

注意

另請參閱 開發 — 最佳實務.

更多資源

如需開發AEM的完整資訊，請參閱下列資源收集：

注意

AEM現代化工具是社群的努力成果，不受Adobe支援或保固。

本頁內容