AEM触屏UI的概念 concepts-of-the-aem-touch-enabled-ui

在AEM 5.6Adobe中，引入了新的触屏UI，该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的开放Web堆栈，提供各种组件，包括：

Granite用户界面 granite-ui

Granite工程平台还提供了基础UI框架。 其主要目标是：

这些功能符合以下要求：

Granite用户界面：

客户端与服务器端 client-side-vs-server-side

Granite UI中的客户端与服务器通信由超文本（而非对象）组成，因此客户端无需了解业务逻辑

客户端 client-side

它使用HTML词汇的扩展，以便作者能够表达他们构建交互式Web应用程序的意图。 这是类似的 韦阿里亚 和 微格式.

它主要由一组由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基础组件 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管理组件 在基础组件上构建，以提供任何管理应用程序都可以实施的通用构建块。 其中包括：

用途:

实施:

Coral用户界面 coral-ui

Coral UI(CUI)是触屏UIAdobe可视化样式的实施，旨在提供多个产品中用户体验的一致性。 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-* 属性。 然后，此属性将用作验证插件的选项。

用途:

实施:

示例标记的提取（请注意指定为数据 — &A）的选项；属性):

<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</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元素插件和小组件可能依赖于实用工具库提供的功能，但实用工具库不能对元素和小组件本身有任何硬依赖关系。

用途:

实施: