AEM触屏优化UI的概念

在AEM 5.6Adobe中,为创作环境引入了具有响应式设计的新触屏优化UI。 这与原始经典UI有很大不同,因为它设计为可在触控和桌面设备上运行。

此触屏优化UI现在是AEM的标准UI,取代经典UI。

注意

触屏优化UI是AEM的标准UI,但仍支持经典UI。

触屏优化UI包括:

  • 包标题:

    • 显示徽标
    • 提供指向全局导航的链接
    • 提供指向其他通用操作的链接;例如搜索、帮助、Marketing Cloud解决方案、通知和用户设置。
  • 左边栏(根据需要显示并可隐藏),可显示:

    • 时间轴
    • 引用
    • 筛选器
  • 导航标题,它同样与上下文相关,可显示:

    • 指示您当前使用的控制台和/或该控制台中的位置
    • 选择左边栏
    • 痕迹导航
    • 访问相应的​创建​操作
    • 视图选择
  • 内容区域:

    • 列表内容项(包括页面、资产、论坛帖子等)
    • 可以按照请求设置格式,如列、卡或列表
    • 使用响应式设计(显示屏根据您的设备和/或窗口大小自动调整大小)
    • 使用无限滚动(不再分页,所有项目都在一个窗口中列出)

chlimage_1-183

注意

几乎所有AEM功能都移植到触屏优化UI。 但是,在某些有限情况下,功能将恢复到经典UI。 有关详细信息,请参阅触屏UI功能状态

触屏优化UI由Adobe设计,可跨多个产品提供一致的用户体验。 它基于:

  • Coral UI (CUI)是Adobe在触屏优化UI中的可视样式的实现。Coral UI提供您的产品/项目/Web应用程序采用UI可视样式所需的一切。
  • Granite UI组件是使用Coral UI构建的。

触屏优化UI的基本原则是:

  • 移动优先(以桌面为中心)
  • 响应式设计
  • 上下文相关显示
  • 可重用
  • 包含嵌入的参考文档
  • 包含嵌入测试
  • 自下而上的设计,确保将这些原则应用于每个元素和组件

有关触屏优化UI结构的进一步概述,请参阅文章AEM触屏优化UI结构

AEM技术堆栈

AEM以Granite平台为基础,Granite平台包括Java内容存储库等。

chlimage_1-184

Granite

Granite是Adobe的Open Web堆栈,提供各种组件,包括:

  • 应用程序启动器
  • 一个OSGi框架,其中部署了所有内容
  • 支助建筑申请的若干OSGi简编服务
  • 提供各种日志记录API的全面日志记录框架
  • JCR API规范的CRX存储库实现
  • Apache Sling Web Framework
  • 当前CRX产品的其他部件
注意

Granite在Adobe内作为开放开发项目运行:在整个公司对准则、讨论和问题作出贡献。

但是,Granite是​​一个开放源项目。 它主要基于几个开放源码项目(特别是Apache Sling、Felix、Jackrabbit和Lucene),但Adobe在公开内容和内部内容之间划出了清晰的界限。

Granite UI

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

  • 提供精细的UI构件
  • 实施UI概念并说明最佳实践(长列表渲染、列表过滤、对象CRUD、CUD向导……)
  • 提供基于扩展和插件的管理UI

这些要求符合:

  • 尊重“移动优先”
  • 可扩展
  • 易于覆盖

Granite UI:

  • 使用Sling的REST风格架构
  • 实现用于构建以内容为中心的Web应用程序的组件库
  • 提供精细的UI构件
  • 提供默认的标准化UI
  • 可扩展
  • 专为移动和桌面设备设计(首先考虑移动)
  • 可用于任何基于Granite的平台/产品/项目;eg AEM

chlimage_1-186

客户端与服务器端

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

  • 服务器丰富了HTML语义数据
  • 客户端通过超媒体(交互)丰富超文本

chlimage_1-187

客户端

它使用HTML词汇的扩展,以便作者能够表达他们构建交互式Web应用程序的意图。 这是对WAI-ARIAmicroformats的类似方法。

它主要由在客户端运行的由JS和CSS代码解释的交互模式集合(例如,异步提交表单)组成。 客户端的作用是增强交互性标记(作为服务器提供的超媒体)。

客户端独立于任何服务器技术。 只要服务器提供适当的标记,客户端就可以完成其角色。

目前,JS和CSS代码以Granite clientlibs形式在类别下传送:

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

这些内容作为内容包的一部分提供:

granite.ui.content

服务器端

它由sling组件集合组成,这些组件使作者能够快速​组合 Web应用程序。 开发人员开发组件,作者将组件组装成Web应用程序。 服务器端的作用是为客户端提供超媒体支持(标记)。

当前,这些组件位于Granite存储库中:

/libs/granite/ui/components/foundation

它作为内容包的一部分提供:

granite.ui.content

与经典UI的区别

Granite UI与ExtJS(用于经典UI)之间的区别也值得关注:

ExtJS Granite UI
远程过程调用
状态转换
数据传输对象 Hypermedia
客户端了解服务器内部信息 客户端不知道内部信息
“胖客户” "瘦客户端"
专用客户端库 通用客户端库

Granite UI基础组件

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资源类型的便捷概述。

ExtJS xtype Granite UI资源类型
button granite/ui/components/foundation/form/button
checkbox granite/ui/components/foundation/form/checkbox
componentstyles cq/gui/components/authoring/dialog/componentstyles
cqinclude granite/ui/components/foundation/include
datetime granite/ui/components/foundation/form/datepicker
dialogfieldset granite/ui/components/foundation/form/fieldset
hidden granite/ui/components/foundation/form/hidden
html5smartfile, html5smartimage granite/ui/components/foundation/form/fileupload
multifield granite/ui/components/foundation/form/multifield
numberfield granite/ui/components/foundation/form/numberfield
pathfield, paragraphreference granite/ui/components/foundation/form/pathbrowser
selection granite/ui/components/foundation/form/select
sizefield cq/gui/components/authoring/dialog/sizefield
tags granite/ui/components/foundation/form/autocomplete cq/gui/components/common/datasources/tags
textarea granite/ui/components/foundation/form/textarea
textfield granite/ui/components/foundation/form/textfield
节点类型 Granite UI资源类型
cq:WidgetCollection granite/ui/components/foundation/container
cq:TabPanel granite/ui/components/foundation/container granite/ui/components/foundation/layouts/tabs
cq:panel granite/ui/components/foundation/container

Granite UI管理组件

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

  • 全局导航栏
  • 边栏(骨架)
  • 搜索面板

用途:

  • 管理应用程序的统一外观
  • RAD管理应用程序

实施:

  • 使用基础组件的预定义组件
  • 可以自定义组件

Coral UI

Coral UI(CUI)是触屏优化UI的Adobe可视样式的实现,旨在提供跨多个产品的用户体验的一致性。 Coral UI提供采用创作环境中使用的可视样式所需的一切。

注意

Coral UI是一个UI库,可供AEM客户在许可产品使用范围内构建应用程序和Web界面。

仅允许使用Coral UI:

  • 当它已装运并与AEM捆绑在一起时。
  • 用于扩展创作环境的现有UI。
  • Adobe公司宣传资料、广告和演示。
  • Adobe品牌应用程序的UI(字体不能随时供其他使用)。
  • 具有少量自定义。

应避免在以下位置使用Coral UI:

  • 文档和其他与Adobe无关的项目。
  • 内容创建环境符(前面的项目可能由其他人生成)。
  • 未明确连接到Adobe的应用程序/组件/网页。

Coral UI是用于开发Web应用程序的构件块的集合。

chlimage_1-188

设计为从开始模块化,每个模块根据其主要角色形成一个不同的层。 尽管这些图层设计为相互支持,但也可以根据需要单独使用它们。 这使得在任何支持HTML的环境中实施Coral的用户体验成为可能。

对于Coral UI,不必使用特定开发模型和/或平台。 Coral的主要目标是提供统一、清晰的HTML5标记,与发出此标记的实际方法无关。 这可能用于客户端或服务器端渲染、模板、JSP、PHP,甚至AdobeFlashRIA应用程序——只有几个。

HTML元素——标记层

HTML元素为所有基本UI元素(包括导航栏、按钮、菜单、边栏等)提供了通用的外观。

在最基本的级别上,HTML元素是具有专用类名的HTML标签。 更复杂的元素可以由多个标签组成,它们彼此嵌套在一起(以特定方式)。

CSS用于提供实际的外观。 为了便于自定义外观(例如,对于品牌),实际样式值声明为变量,在运行时期间由LESS预处理器展开。

用途:

  • 为基本UI元素提供通用的外观
  • 提供默认网格系统

实施:

  • 具有由bootstrap启发的样式的HTML标签
  • 类在LESS文件中定义
  • 图标定义为字体精灵

例如,标记:

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

显示为:

chlimage_1-109

外观在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
  • 自然通用。 例如,布局管理器为DIVLI元素的任何列表提供布局

可以通过以下任一方式使用参数自定义插件行为:

  • 通过javascript调用传递参数
  • 使用与HTML标记关联的专用data-*属性

尽管开发人员可以为任何插件选择最佳方法,但经验法则是:

  • data-* 与HTML布局相关的选项的属性。例如,要指定列数
  • 与数据相关的功能的API选项/类。 例如,构建要显示的项的列表

同样的概念用于实现表单验证。 对于要验证的元素,必须将所需的输入表单指定为自定义data-*属性。 然后,此属性将用作验证插件的选项。

注意

应尽可能使用HTML5本机表单验证和/或展开验证。

用途:

  • 为HTML元素提供动态行为
  • 提供纯CSS无法实现的自定义布局
  • 执行表单验证
  • 执行高级DOM处理

实施:

  • jQuery插件,绑定到特定DOM元素
  • 使用data-*属性自定义行为

示例标记的提取(请注意指定为data-&ast;属性):

<ul data-column-width="220" data-layout="card" class="cards">
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html?lang=zh-Hans" src="/a.thumb.319.319..png?lang=zh-Hans"> 
      <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?lang=zh-Hans" src="/a.thumb.319.319..png?lang=zh-Hans"> 
      <div class="caption">
        <h4>Toolbar</h4>
        <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>

调用jQuery插件:

$(‘.cards’).cardlayout ();

此操作将显示为:

chlimage_1-190

cardLayout插件根据各元素的高度布局包含的UL元素,并考虑父元素的宽度。

HTML元素构件

构件将一个或多个基本元素与javascript插件组合,以形成“更高级别”的UI元素。 这些元素可以实现比单个元素更复杂的行为,也可以实现更复杂的外观。 例如,标签选取器或边栏构件。

构件可以触发和侦听自定义事件以与页面上的其他构件配合。 某些构件实际上是使用Coral HTML元素的原生jQuery构件。

用途:

  • 实现表现复杂行为的更高级别UI元素
  • 触发和处理事件

实施:

  • jQuery插件+ HTML标记
  • 可以利用客户端/服务器端模板

标记示例为:

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

此操作将显示为:

chlimage_1-111

实用程序库

此库是javascript帮助程序插件和/或函数的集合,这些插件和/或函数包括:

  • UI独立
  • 但对于构建功能齐备的Web应用程序至关重要

这包括XSS处理和事件总线。

尽管HTML元素插件和构件可能依赖于实用程序库提供的功能,但实用程序库不能对元素和构件本身有任何硬依赖性。

用途:

  • 提供通用功能
  • 事件总线实现
  • 客户端模板
  • XSS

实施:

  • jQuery插件或符合AMD规范的JavaScript模块

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now