AEM觸控式UI的概念

透過AEM 5.6Adobe，針對製作環境導入了新的觸控式UI，其中包含回應式設計。 這與原有的傳統UI有很大不同，因為它設計為可在觸控式和桌上型電腦裝置上運作。

此觸控式UI現在是AEM的標準UI，取代傳統UI。

觸控式UI包括：

• 套裝標題：

  • 顯示徽標
  • 提供指向全局導航的連結
  • 提供其他一般動作的連結；例如搜尋、說明、Marketing Cloud解決方案、通知和使用者設定。

• 左側邊欄（視需要顯示且可隱藏），可顯示：

  • 時間軸
  • 引用
  • 濾鏡

• 導覽標題，同樣會上下文相關，可顯示：

  • 指出您目前使用的主控台和/或該主控台內的位置
  • 左側邊欄的選取項目
  • 階層連結
  • 訪問適當的​Create​操作
  • 檢視選取項目

• 內容區域：

  • 列出內容項目（無論是頁面、資產、論壇貼文等）
  • 可依要求格式化，例如欄、卡片或清單
  • 使用回應式設計（顯示會根據您的裝置和/或視窗大小自動調整大小）
  • 使用無限捲動（不再分頁，所有項目在一個窗口中列出）

觸控式UI是由Adobe設計，以提供多項產品的使用者體驗一致性。 其基礎為：

• Coral UI (CUI)為觸控式UI的Adobe視覺樣式實作。Coral UI提供您的產品/專案/網頁應用程式採用UI視覺風格所需的一切。
• Granite UI元件是使用Coral UI建置。

觸控式UI的基本原則為：

• 首先是行動（考慮案頭）
• 回應式設計
• 內容相關顯示
• 可重複使用
• 包含內嵌參考檔案
• 包含內嵌測試
• 由下而上的設計，以確保這些原則適用於每個元素和元件

如需觸控式UI結構的進一步概覽，請參閱AEM觸控式UI結構一文。

AEM技術堆疊

AEM以Granite平台為基礎，而Granite平台除其他外包含Java內容存放庫。

Granite

Granite是Adobe的Open Web堆疊，提供多種元件，包括：

• 應用程式啟動器
• 部署了所有內容的OSGi架構
• 支助建築應用程式的若干OSGi簡編服務
• 提供各種記錄API的完整記錄架構
• JCR API規範的CRX存放庫實作
• Apache Sling Web Framework
• 當前CRX產品的其他部分

Granite UI

Granite工程平台也提供基礎的UI架構。 其主要目標是：

• 提供精細的UI Widget
• 實作UI概念並說明最佳實務（長清單呈現、清單篩選、物件CRUD、CUD精靈……）
• 提供可擴充且以外掛程式為基礎的管理UI

這些符合要求：

• 尊重「行動優先」
• 可擴充
• 易於覆蓋

Granite UI:

• 使用Sling的RESTful架構
• 實作用於建立以內容為中心的Web應用程式的元件庫
• 提供精細的UI小工具
• 提供預設的標準化UI
• 可擴充
• 專為行動裝置和桌上型電腦裝置而設計（以行動為先）
• 可用於任何以Granite為基礎的平台/產品/專案；eg AEM

• Granite UI Foundation元件

  此基礎元件庫可供其他程式庫使用或擴充。

• Granite UI管理元件

客戶端與伺服器端

Granite UI中的客戶端與伺服器通訊由超文字、而非物件組成，因此不需要客戶端了解業務邏輯

• 伺服器利用語義資料豐富HTML
• 客戶端利用超媒體豐富超文本（交互）

用戶端

此功能會使用HTML辭匯的擴充功能，讓作者可表達建立互動式網頁應用程式的意圖。 這是WAI-ARIA和微格式的類似方法。

它主要包含由JS和CSS程式碼解譯的互動模式（例如非同步提交表單）集合，會在用戶端上執行。 用戶端的作用是增強標籤（以伺服器可負擔的超媒體形式提供）以提供互動性。

用戶端獨立於任何伺服器技術。 只要伺服器提供適當的標籤，用戶端就能發揮其作用。

目前，JS和CSS程式碼會以Granite clientlibs的形式傳送，位於類別下：

granite.ui.foundation and granite.ui.foundation.admin

這些內容會隨內容套件提供：

granite.ui.content

伺服器端

這是由Sling元件的集合所組成，這些元件可讓作者快速​撰寫​網頁應用程式。 開發人員開發元件，作者將元件組合成網頁應用程式。 伺服器端的角色是為用戶端提供超媒體可承受性（標籤）。

目前，元件位於Granite存放庫的：

/libs/granite/ui/components/foundation

這是內容套件內容的一部分：

granite.ui.content

與傳統UI的差異

Granite UI與ExtJS（用於傳統UI）之間的差異也值得關注：

Granite UI基礎元件

Granite UI基礎元件提供建置任何UI所需的基本建置區塊。 其中包括：

• 按鈕
• 超連結
• 使用者頭像

基礎元件位於以下位置：

/libs/granite/ui/components/foundation

此程式庫包含每個Coral元素的Granite UI元件。 元件由內容驅動，其配置駐留在儲存庫中。 這樣就可以撰寫Granite UI應用程式，而不需手寫HTML標籤。

目的：

• HTML元素的元件模型
• 組分組合物
• 自動單元和功能測試

實施:

• 基於儲存庫的構成和配置
• 善用Granite平台提供的測試設施
• JSP模板

此基礎元件庫可供其他程式庫使用或擴充。

ExtJS和對應的Granite UI元件

升級ExtJS程式碼以使用Granite UI時，下列清單可方便地概述ExtJS xtypes和節點類型，以及其相等的Granite UI資源類型。

Granite UI管理元件

Granite UI管理元件以基礎元件為基礎而構建，以提供任何管理應用程式皆可實施的通用建置區塊。 其中包括：

• 全域導覽列
• 邊欄（骨架）
• 搜尋面板

目的：

• 管理應用程式的統一外觀
• 管理應用程式Rad

實施:

• 使用基礎元件預先定義元件
• 元件可以自訂

Coral UI

Coral UI(CUI)是Adobe觸控式UI視覺風格的實作，專為提供跨多個產品的一致使用者體驗而設計。 Coral UI提供您在製作環境中採用視覺風格所需的一切。

Coral UI是開發網頁應用程式的基礎要素集合。

設計為從頭開始模組化，每個模組根據其主要角色形成一個不同的層。 儘管這些層設計為相互支援，但如果需要，也可以獨立使用。 這可讓您在任何支援HTML的環境中實作Coral的使用者體驗。

透過Coral UI，不強制使用特定開發模式和/或平台。 Coral的主要目標是提供統一、簡潔的HTML5標籤，不受發出此標籤的實際方法影響。 這可用於用戶端或伺服器端轉譯、範本、JSP、PHP，甚至AdobeFlashRIA應用程式 — 僅舉幾個例子。

HTML元素 — 標籤層

HTML元素提供所有基本UI元素（包括導覽列、按鈕、功能表、邊欄等）的共同外觀和風格。

在最基本的層級，HTML元素是具有專用類別名稱的HTML標籤。 更複雜的元素可由多個標籤組成，並彼此巢狀（以特定方式）。

CSS可用來提供實際的外觀。 為了能夠輕鬆自訂外觀和風格（例如品牌化），實際樣式值被聲明為變數，在運行時由LESS前置處理器擴展。

目的：

• 提供具有通用外觀和風格的基本UI元素
• 提供預設網格系統

實施:

• 具有受bootstrap啟發的樣式的HTML標籤
• 類在LESS檔案中定義
• 表徵圖定義為字型Sprite

例如，標籤：

<button class="btn btn-large btn-primary" type="button">Large button</button> 
<button class="btn btn-large" type="button">Large button</button>

顯示為：

外觀和風格以LESS定義，並以專用的類別名稱系結至元素（為了簡潔起見，已縮短下列擷取）:

.btn {
    font-size: @baseFontSize; 
    line-height: @baseLineHeight; 
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

實際值在LESS變數檔案中定義（為了簡潔起見，已縮短下列擷取）:

@btnBackgroundHighlight: darken(@white, 10%); 
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); 
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

元素外掛程式

許多HTML元素需要顯示某種動態行為，例如開啟和關閉快顯功能表。 這是元素外掛程式的角色，可透過使用JavaScript操控DOM來完成此類工作。

外掛程式可以是：

• 設計用於運作於特定DOM元素。 例如，對話方塊外掛程式預期會找到DIV class=dialog
• 一般性。 例如，佈局管理器提供DIV或LI元素清單的佈局

外掛程式行為可透過下列其中一種方式，以參數自訂：

• 透過Javascript呼叫傳遞參數
• 使用與HTML標籤系結的專用data-*屬性

雖然開發人員可為任何外掛程式選取最佳方法，但經驗法則是使用：

• data-* 與HTML配置相關的選項的屬性。例如，若要指定欄數
• 與資料相關的功能的API選項/類別。 例如，建構要顯示的項目清單

相同的概念用於實作表單驗證。 對於要驗證的元素，必須將所需的輸入表單指定為自訂data-*屬性。 然後，此屬性將用作驗證插件的選項。

目的：

• 為HTML元素提供動態行為
• 提供純CSS無法使用的自訂配置
• 執行表單驗證
• 執行進階DOM操作

實施:

• jQuery外掛程式，系結至特定DOM元素
• 使用data-*屬性來自訂行為

範例標籤的擷取（請注意指定為data-&ast；的選項）;屬性):

<ul data-column-width="220" data-layout="card" class="cards">
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png"> 
      <div class="caption">
        <h4>Toolbar</h4>
          <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png"> 
      <div class="caption">
        <h4>Toolbar</h4>
        <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>

對jQuery外掛程式的呼叫：

$(‘.cards’).cardlayout ();

這會顯示為：

cardLayout外掛程式會根據各自的高度並同時考慮父項的寬度，來排列包含的UL元素。

HTML元素小工具

介面工具集會將一或多個基本元素與Javascript外掛程式結合，以形成「較高層級」的UI元素。 這些元素可實作比單一元素更複雜的行為，以及更複雜的外觀和感覺。 標籤選取器或邊欄Widget是不錯的範例。

介面工具集可觸發並監聽自訂事件，以與頁面上的其他介面工具集合作。 有些小工具實際上是使用Coral HTML元素的原生jQuery小工具。

目的：

• 實作表現複雜行為的較高層級UI元素
• 觸發和處理事件

實施:

• jQuery plugin + HTML標籤
• 可利用客戶端/伺服器端模板

示例標注為：

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

對jQuery外掛程式的呼叫（含選項）:

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

外掛程式會發出HTML標籤（此標籤會使用基本元素，而這些元素可能在內部使用其他外掛程式）:

<span>Pisa</span>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></span>

<span id="myTag_1" class="myTag"><span>Rome</span>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></span>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

這會顯示為：

實用程式庫

此程式庫是javascript協助程式外掛程式和/或函式的集合，其為：

• 獨立於UI
• 但對於構建功能完整的Web應用程式至關重要

這些包括XSS處理和事件匯流排。

雖然HTML元素插件和小部件可能依賴實用程式庫提供的功能，但實用程式庫不能對元素或小部件本身有任何硬依賴性。

目的：

• 提供通用功能
• 事件匯流排實作
• 用戶端範本
• XSS

實施:

• jQuery外掛程式或AMD相容JavaScript模組