移轉至Touch UI

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

如果您已將AEM與傳統UI搭配使用，您將需要採取行動來移轉您的例項。 本頁提供個別資源的連結，以做為跳板。

注意

此類移轉專案可能會對您的執行個體產生重大影響。 如需建議的准則，請參閱管理專案——最佳實務。

The Basics

移轉時，您應注意到傳統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的基本功能將提供穩固的基礎：

移轉頁面編寫

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

遷移控制台

您也可以自訂控制台：

雖然與移轉至觸控式使用者介面並非直接相關，但有一些相關問題值得同時考慮，因為這些問題也是建議的作法：

注意

另請參閱開發——最佳實踐。

其他資源

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

注意

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

本頁內容