移轉至Touch UI

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

如果您一直使用AEM搭配傳統UI,請採取行動移轉您的執行個體。 本頁旨在提供個別資源的連結,以發揮跳板的作用。

注意

這類移轉專案可能會對您的執行個體產生重大影響。 另請參閱 管理專案 — 最佳實務 以取得建議的指引。

基本知識

移轉時,請留意Classic和觸控式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位置:

  • 命令部分不能嵌入對話方塊定義中;責任分離。

事件處理:

  • 對話方塊Widget會直接參照JavaScript程式碼。

事件處理:

  • JavaScript會觀察對話方塊事件。
由使用者端完成的轉譯:
  • Client會動態建立UI元件。
  • 來自伺服器的使用者端要求(提取)元件定義(以JSON形式)。
由伺服器完成的轉譯:
  • 使用者端要求頁面以及相關UI。
  • 伺服器會傳送(推播) UI作為HTML檔案;使用Coral UI元件。

換言之,將UI區段從傳統UI移轉至觸控式UI即代表移轉 ExtJS WidgetSling元件. 為方便起見,觸控式UI以Granite UI框架為基礎,該框架已為UI提供了一些Sling元件(稱為Granite UI元件)。

開始之前,請檢查狀態和相關建議:

開發觸控式UI的基礎知識提供了堅實的基礎:

移轉頁面製作

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

移轉主控台

您也可以自訂主控台:

雖然移轉至觸控式UI並無直接關係,但建議您同時考量下列相關問題,因為這也是建議做法:

注意

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

其他資源

如需有關開發AEM的完整資訊,請參閱以下資源集合:

注意

AEM現代化工具是社群共同努力的成果,Adobe不提供支援或保證。

本頁內容