Adobe Experience Manager觸控式UI的概念 concepts-of-the-aem-touch-enabled-ui

Adobe Experience Manager (AEM)提供觸控式UI，其中回應式設計適用於製作環境，可在觸控式和桌上型裝置上運作。

觸控式UI包含：

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

觸控式UI的基本原則為：

如需觸控式UI結構的詳細概觀，請參閱AEM觸控式UI的結構。

AEM技術棧疊 aem-technology-stack

AEM以Granite平台為基礎，Granite平台包含Java™內容存放庫等。

Granite granite

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

Granite UI granite-ui

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

這些符合需求：

GraniteUI.pdf

取得檔案
Granite UI：

使用者端與伺服器端 client-side-vs-server-side

Granite UI中的使用者端 — 伺服器通訊是由超文字組成，而非物件，因此使用者端不需要瞭解商業邏輯

使用者端 client-side

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

它主要由使用者端執行的JS和CSS程式碼所解譯的互動模式（例如，非同步提交表單）集合組成。 使用者端的角色是增強互動的標籤（由伺服器提供作為超媒體提供）。

使用者端不受任何伺服器技術的限制。 只要伺服器提供適當的標籤，使用者端就可以履行其角色。

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

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

這些內容會在內容套件中提供：

granite.ui.content

伺服器端 server-side

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

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

/libs/granite/ui/components/foundation

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

granite.ui.content

與傳統UI的差異 differences-with-the-classic-ui

Granite UI和ExtJS （用於傳統UI）之間的差異也令人感興趣：

Granite UI Foundation元件 granite-ui-foundation-components

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

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

/libs/granite/ui/components/foundation

此程式庫包含每個Coral元素的Granite UI元件。 元件是內容驅動的，其組態位於存放庫中。 如此一來，您就可以撰寫一個Granite UI應用程式，而無需手動撰寫HTML標籤。

用途：

實作：

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

ExtJS和對應的Granite UI元件 extjs-and-corresponding-granite-ui-components

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

Granite UI管理元件 granite-ui-administration-components

Granite UI管理元件建置在基礎元件上，以提供任何管理應用程式都可以實作的通用建置區塊。 其中包括：

用途：

實作：

Coral UI 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-elements-the-markup-layer

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

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

CSS是用來提供實際的外觀和風格。 為了能夠輕鬆自訂外觀（例如，品牌化的情況），實際樣式值會宣告為變數，在執行階段由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;

元素外掛程式 element-plugins

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

外掛程式為：

若要使用引數自訂外掛程式的行為，您可以：

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

相同的概念可用於實施表單驗證。 對於要驗證的元素，您必須指定必要的輸入表單作為自訂data-*屬性。 此屬性接著會作為驗證外掛程式的選項。

用途：

實作：

範例標籤的擷取（請注意指定為資料 — *屬性的選項）：

<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 html-elements-widgets

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

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

用途：

實作：

範例標籤為：

<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">

這顯示為：

公用程式庫 utility-library

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

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

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

用途：

實作：