移轉至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支援或保證。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now