Adobe Experience Manager觸控式UI的概念

Adobe Experience Manager (AEM)提供觸控式UI，搭配 回應式設計 適用於專為觸控和桌上型電腦裝置設計的製作環境。

觸控式UI包含：

• 套裝標題：
  • 顯示標誌
  • 提供全域導覽的連結
  • 提供其他一般動作的連結；例如「搜尋」、「說明」、「Experience Cloud解決方案」、「通知」和「使用者設定」。
• 左側邊欄（需要時顯示，可隱藏），其中可顯示：
  • 時間軸
  • 引用
  • 篩選條件
• 導覽標頭(同樣是內容感應式，可顯示：
  • 指出您目前正在使用哪個主控台，或該主控台中的您的位置，或兩者皆使用
  • 左側邊欄的選取專案
  • 階層連結
  • 存取適當的 建立 動作
  • 檢視選取專案
• 內容區域：
  • 列出內容專案（無論是頁面、資產、論壇帖子等）
  • 可依要求格式化，例如，欄、卡片或清單
  • 使用回應式設計（顯示器會根據您的裝置和/或視窗大小自動調整大小）
  • 使用無限捲動（不再分頁，所有專案都會列在一個視窗中）

Adobe將觸控式UI設計為可跨多個產品提供一致的使用者體驗。 其依據為：

• Coral UI (CUI)針對觸控式UI實作Adobe的視覺樣式。 Coral UI提供產品/專案/Web應用程式採用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架構
• 目前CRX產品的其他部分

Granite UI

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

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

這些均符合下列要求：

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

GraniteUI.pdf

取得檔案
Granite UI：

• 使用Sling的RESTful架構
• 實作元件程式庫，用於建置以內容為中心的網頁應用程式
• 提供精細的UI Widget
• 提供預設的標準化UI
• 可擴充
• 專為行動裝置和桌上型裝置所設計（首先考慮行動裝置）
• 可用於任何以Granite為基礎的平台/產品/專案；例如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元件的集合所組成，可讓作者執行以下動作： 撰寫 Webapp快速。 開發人員會開發元件，而作者會將元件組合成網頁應用程式。 伺服器端的角色是為使用者端提供Hypermedia可供性（標籤）。

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

/libs/granite/ui/components/foundation

這會作為內容套件的一部分提供：

granite.ui.content

與傳統UI的差異

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

Granite UI Foundation元件

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

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

基礎元件可在下列位置找到：

/libs/granite/ui/components/foundation

此程式庫包含每個Coral元素的Granite UI元件。 元件為內容導向，其設定位於存放庫中。 如此一來，您便無需手動撰寫HTML標籤，即可撰寫Granite UI應用程式。

用途:

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

實施:

• 存放庫型構成和設定
• 使用Granite平台提供的測試設施
• JSP範本

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

ExtJS和對應的Granite UI元件

升級ExtJS程式碼以使用Granite UI時，下列清單提供ExtJS xtypes和節點型別及其等效Granite UI資源型別的便利概覽。

Granite UI管理元件

此 Granite UI管理元件 建置在foundation元件上，以提供任何管理應用程式皆可實作的一般建置區塊。 其中包括：

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

用途:

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

實施:

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

Coral UI

CoralUI.pdf

取得檔案
Coral UI (CUI)是Adobe視覺樣式的實作，適用於觸控式UI，旨在為多個產品的使用者體驗提供一致性。 Coral UI提供您採用製作環境所使用的視覺樣式所需的一切。

Coral UI是開發Web應用程式的建置區塊集合。

每個模組從一開始就是模組化的，根據其主要角色而形成不同的層。 雖然這些圖層的設計目的是要相互支援，但可視需要獨立使用。 如此一來，您就可以在任何具備HTML功能的環境中實作Coral的使用者體驗。

使用Coral UI時，不強制使用特定的開發模型和/或平台。 Coral的主要目標是提供統一且乾淨的HTML5標籤，與用來發出此標籤的實際方法無關。 這可用於使用者端或伺服器端轉譯、範本、JSP、PHP或甚至AdobeFlashRIA應用程式 — 僅舉幾例。

HTML元素 — 標籤層

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

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

CSS用於提供實際的外觀。 為了能夠輕鬆自訂外觀（例如品牌化），實際樣式值會宣告為變數，並由 更少 執行期間的前置處理器。

用途:

• 提供具有共同外觀的基本使用者介面元素
• 提供預設格點系統

實施:

• HTML標籤及其靈感來自於 Bootstrap
• 類別是在LESS檔案中定義
• 圖示定義為字型拼字

例如，標籤：

<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呼叫傳遞引數
• 使用專用的 data-* 與HTML標籤繫結的屬性

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

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

實施表單驗證時也會使用相同的概念。 對於要驗證的元素，您必須將所需的輸入表單指定為自訂 data-* 屬性。 然後，此屬性會作為驗證外掛程式的選項。

用途:

• 為HTML元素提供動態行為
• 提供純CSS所不能的自訂版面配置
• 執行表單驗證
• 執行進階DOM操作

實施:

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

範例標籤的擷取(請注意指定為資料的選項 — * attributes)：

<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元素Widget

Widget會將一或多個基本元素與JavaScript外掛程式結合，以形成「較高層級」的UI元素。 這些元素可以實作比單一元素所能提供的更複雜的行為，以及更複雜的外觀和感覺。 標籤選擇器或邊欄Widget是很好的範例。

Widget可以觸發並監聽自訂事件，以便與頁面上的其他Widget合作。 某些Widget是使用CoralHTML元素的原生jQuery Widget。

用途:

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

實施:

• jQuery外掛程式+HTML標籤
• 可以使用使用者端/伺服器端範本

範例標籤為：

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

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

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

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

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

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

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

這顯示為：

公用程式庫

此程式庫是下列JavaScript輔助外掛程式和/或函式的集合：

• 獨立於UI
• 然而，這對於建立完整功能的網頁應用程式至關重要

其中包括XSS處理和事件匯流排。

雖然HTML元素外掛程式和Widget可能依賴公用程式庫提供的功能，但公用程式庫無法硬性依賴元素或Widget本身。

用途:

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

實施:

• jQuery外掛程式或符合AMD規範的JavaScript模組