AEM觸控式UI的概念 concepts-of-the-aem-touch-enabled-ui

透過AEM 5.6Adobe，推出全新觸控式UI，具有 回應式設計 供作者使用。 這與原有的傳統UI有很大不同，因為它設計為可在觸控式和桌上型電腦裝置上運作。

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

觸控式UI包括：

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

觸控式UI的基本原則為：

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

AEM技術堆疊 aem-technology-stack

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

Granite granite

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

Granite UI granite-ui

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

這些符合要求：

Granite UI:

用戶端與伺服器端 client-side-vs-server-side

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

用戶端 client-side

這會使用HTML辭匯的擴充功能，讓作者可表達建立互動式網頁應用程式的意圖。 這是類似的方法 瓦伊阿里亞 和 微格式.

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

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

目前JS和CSS程式碼是以Granite傳送 clientlibs 在類別下：

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

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

granite.ui.content

伺服器端 server-side

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

目前，元件位於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元件。 元件由內容驅動，其配置駐留在儲存庫中。 這可以不用手寫HTML標籤，即可組成Granite UI應用程式。

用途:

實施:

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

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

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

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

此 Granite UI管理元件 在foundation元件上建置，以提供任何管理應用程式皆可實施的通用建置模組。 其中包括：

用途:

實施:

Coral UI coral-ui

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

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

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

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

HTML元素 — 標籤層 html-elements-the-markup-layer

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

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

CSS可用來提供實際的外觀。 為了能輕鬆自訂外觀和風格（例如品牌），實際樣式值會宣告為由 較少 運行時的前置處理器。

用途:

實施:

例如，標籤：

<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-* 屬性。 然後，此屬性將用作驗證插件的選項。

用途:

實施:

示例標籤的提取(注意指定為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元素小工具 html-elements-widgets

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

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

用途:

實施:

示例標注為：

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

這會顯示為：

實用程式庫 utility-library

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

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

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

用途:

實施: