在AEM 5.6Adobe中,引入了新的触屏优化UI,该UI具有适用于创作环境的响应式设计。 这与原始的经典UI有很大不同,因为它设计为在触屏和桌面设备上运行。
此触屏优化UI现在是AEM的标准UI,取代了经典UI。
触屏优化UI是AEM的标准UI,但仍支持经典UI。
触屏UI包括:
包标题:
左边栏(在需要时显示且可隐藏),可显示:
导航标题,它同样是上下文相关的,可以显示:
内容区域:
几乎所有AEM功能都移植到了触屏UI。 但是,在某些有限的情况下,功能会还原到经典UI。 有关更多信息,请参阅触屏UI功能状态 。
触屏优化UI由Adobe设计,旨在提供多个产品中用户体验的一致性。 它基于:
触屏UI的基本原理包括:
有关触屏优化UI结构的进一步概述,请参阅文章AEM触屏优化UI的结构。
AEM使用Granite平台作为基础,而Granite平台包括Java内容存储库等。
Granite是Adobe的开放Web堆栈,提供各种组件,包括:
Granite在Adobe中作为开放开发项目运行:对代码、讨论和问题的贡献来自整个公司。
但是,Granite是不开源项目。 它在很大程度上基于多个开源项目(特别是Apache Sling、Felix、Jackrabbit和Lucene),但Adobe在公开项目与内部项目之间划出了明确的界限。
Granite工程平台还提供了基础UI框架。 其主要目标是:
这些功能符合以下要求:
Granite用户界面:
此基础组件库可供其他库使用或扩展。
Granite UI中的客户端与服务器通信由超文本(而非对象)组成,因此客户端无需了解业务逻辑
它使用HTML词汇的扩展,以便作者能够表达他们构建交互式Web应用程序的意图。 这与WAI-ARIA和microformats的方法类似。
它主要由一组由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
Granite UI与ExtJS(用于经典UI)之间的差异也是值得关注的:
ExtJS | Granite用户界面 |
远程过程调用 |
状态转换 |
数据传输对象 | 超媒体 |
客户端知道服务器内部信息 | 客户不知道内部信息 |
"胖客户" | "瘦客户机" |
专用客户端库 | 通用客户端库 |
Granite UI基础组件提供构建任何UI所需的基本构建块。 其中包括:
基础组件可在以下位置找到:
/libs/granite/ui/components/foundation
此库包含每个Coral元素的Granite UI组件。 组件是内容驱动的,其配置驻留在存储库中。 这样,就可以在无需手动编写HTML标记的情况下编写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管理组件构建在基础组件上,以提供任何管理应用程序都可以实施的通用构建基块。 其中包括:
用途:
实施:
Coral UI(CUI)是触屏UIAdobe可视化样式的实施,旨在提供多个产品中用户体验的一致性。 Coral UI提供了采用创作环境中使用的可视化样式所需的一切功能。
Coral UI是一个UI库,可供AEM客户在其产品许可使用范围内构建应用程序和Web界面。
仅允许使用Coral UI:
应避免在以下位置使用Coral UI:
Coral UI是用于开发Web应用程序的构建基块的集合。
每个模块从一开始就设计为模块化,根据其主要作用形成一个不同的层。 尽管这些层设计为相互支持,但如果需要,也可以单独使用。 这样,就可以在任何支持HTML的环境中实施Coral的用户体验。
使用Coral UI时,不必强制使用特定的开发模型和/或平台。 Coral的主要目标是提供统一且干净的HTML5标记,与发出此标记的实际方法无关。 这可能用于客户端或服务器端渲染、模板、JSP、PHP,甚至AdobeFlashRIA应用程序 — 只是几个。
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;
许多HTML元素需要显示某种动态行为,如打开和关闭弹出菜单。 这是元素插件的角色,元素插件可通过使用JavaScript操作DOM来完成此类任务。
插件为:
DIV class=dialog
DIV
或LI
元素的任何列表提供布局可以通过以下任一方式通过参数自定义插件行为:
data-*
属性尽管开发人员可以为任何插件选择最佳方法,但经验法则是:
data-*
属性。例如,指定列数同一概念用于实施表单验证。 对于要验证的元素,必须将所需的输入表单指定为自定义data-*
属性。 然后,此属性将用作验证插件的选项。
应尽可能使用HTML5本机表单验证和/或对其进行扩展。
用途:
实施:
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
元素。
小组件将一个或多个基本元素与Javascript插件组合在一起,形成“更高级别”的UI元素。 与单个元素交付的内容相比,这些元素可以实施更复杂的行为,并且外观更加复杂。 标记选取器或边栏小组件就是很好的示例。
小组件可以触发和监听自定义事件,以与页面上的其他小组件合作。 某些小组件实际上是使用Coral HTML元素的本机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">
此参数将显示为:
此库是javascript帮助程序插件和/或函数的集合,这些插件和/或函数包括:
这包括XSS处理和事件总线。
尽管HTML元素插件和小组件可能依赖于实用程序库提供的功能,但实用程序库不能对元素和小组件本身有任何硬依赖关系。
用途:
实施: