Adobe Experience Manager触屏优化UI的概念 concepts-of-the-aem-touch-enabled-ui

Adobe Experience Manager (AEM)的触屏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框架。 其主要目标是：

这些规则符合要求：

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

与经典用户界面之间的差异 differences-with-the-classic-ui

Granite UI和ExtJS（用于经典UI）之间的差异也令人感兴趣：

Granite UI基础组件 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 xtype和节点类型及其等效的Granite UI资源类型的方便概述。

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

此 Granite UI管理组件 构建于基础组件之上，以提供任何管理应用程序都可以实施的通用构建块。 其中包括：

用途：

实现：

Coral UI coral-ui

CoralUI.pdf

获取文件
Coral UI (CUI)是触屏UI中Adobe视觉样式的实现，旨在为多个产品提供一致的用户体验。 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用于提供实际外观。 为了能够轻松自定义外观（例如，对于品牌策略），实际样式值声明为变量，变量由 更少 运行期间的预处理程序。

用途：

实现：

例如，标记：

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

显示为：

look-and-feel在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-* 属性)：

<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元素。 这些元素可以实施比单个元素所能提供的更复杂的行为，以及更复杂的外观。 标记选取器或边栏构件就是一个很好的示例。

小组件可以触发和侦听自定义事件，以与页面上的其他小组件协作。 某些构件是使用CoralHTML元素的本机jQuery构件。

用途：

实现：

示例标记为：

<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元素插件和小组件可能依赖于实用程序库提供的功能，但实用程序库无法硬依赖这些元素或小组件本身。

用途：

实现：