为移动设备创建站点

创建移动站点与创建标准站点类似，因为它还涉及创建模板和组件。 有关创建模板和组件的详细信息，请参阅以下页面：模板、组件和开发AEM Sites入门。 主要区别在于在站点中启用AEM内置的移动功能。 它是通过创建依赖于移动页面组件的模板来实现的。

您还应考虑使用响应式设计创建一个可容纳多种屏幕大小的站点。

要开始使用，您可以查看AEM中提供的​We.Retail移动演示站点。

要创建移动站点，请按如下步骤继续：

1. 创建页面组件：

   • 将sling:resourceSuperType属性设置为wcm/mobile/components/page

     这样，组件就依赖于移动页面组件。

   • 使用项目特定逻辑创建body.jsp。

2. 创建页面模板：

   • 将sling:resourceType属性设置为新创建的页面组件。
   • 设置allowedPaths属性。

3. 创建站点的设计页面。

4. 在/content节点下创建站点根页面：

   • 设置cq:allowedTemplates属性。
   • 设置cq:designPath属性。

5. 在站点根页面的页面属性中，在​Mobile​选项卡中设置设备组。

6. 使用新模板创建站点页面。

移动页面组件(/libs/wcm/mobile/components/page):

• 将​Mobile​选项卡添加到页面属性对话框。
• 通过head.jsp，它从请求中检索当前移动设备组，如果找到设备组，则使用该组的drawHead()方法来包括设备组的关联模拟器init组件（仅在创作模式下）和设备组的呈现CSS。

使用多站点管理器创建移动站点

使用多站点管理器(MSM)从标准站点创建移动Live Copy。 标准站点会自动转换为移动站点：移动站点具有移动站点的所有功能（例如，在模拟器中进行编辑），并且可以与标准站点同步进行管理。 请参阅“多站点管理器”页面中的为不同渠道创建Live Copy部分。

服务器端移动API

包含移动类的Java包包括：

• com.day.cq.wcm.mobile.api -定义MobileConstants。

• com.day.cq.wcm.mobile.api.device -定义设备、设备组和设备组列表。

• com.day.cq.wcm.mobile.api.device.capability —— 定义DeviceCapability。

• com.day.cq.wcm.mobile.api.wurfl -定义WurflQueryEngine。

• com.day.cq.wcm.mobile.core -定义MobileUtil，它提供围绕WCM Mobile的各种实用程序方法。

移动组件

We.Retail移动演示站点​使用位于/libs/foundation/components下方的以下移动组件：

名称	组	特征
mobilefooter	隐藏	- footer
mobileimage	移动设备	-基于图像基础组件 —— 如果设备能够 ，则渲染图像
mobilelist	移动设备	-基于列表基础组件 - listitem_teaser.jsp，如果设备可以 呈现图像
mobilelogo	隐藏	-基于标志基础组件 —— 如果设备能够 ，则渲染图像
mobilereference	移动设备	-类似于引用基础组件 -将textimage组件映射到mobiletextimage 1，将图像组件映射到mobileimage 1
mobiletextimage	移动设备	-基于textimage foundation组件 —— 如果设备可以，则渲染图像
mobiletopnav	隐藏	-基于topnav foundation组件 -仅渲染文本

创建移动组件

AEM移动框架允许开发对发出请求的设备敏感的组件。 以下代码示例演示如何在组件jsp中使用AEM mobile API，特别是如何：

• 从请求中获取设备：

  Device device = slingRequest.adaptTo(Device.class);

• 获取设备组：

  DeviceGroup deviceGroup = device.getDeviceGroup();

• 获取设备组功能：

  Collection<DeviceCapability> capabilities = deviceGroup.getCapabilities();

• 获取设备属性（WURFL数据库中的原始功能键／值）:

  Map<String,String> deviceAttributes = device.getAttributes();

• 获取设备用户代理：

  String userAgent = device.getUserAgent();

• 从当前页面获取设备组列表（作者为站点分配的设备组）:

  DeviceGroupList deviceGroupList = currentPage.adaptTo(DeviceGroupList.class);

• 检查设备组是否支持图像

  if (deviceGroup.hasCapability(DeviceCapability.CAPABILITY_IMAGES)) {
  …
  或者
  if MobileUtil.hasCapability(request, DeviceCapability.CAPABILITY_IMAGES) {
  …

模拟器

基于模拟器的创作为作者提供了创建适用于移动客户端的内容页面的方法。 移动内容创作遵循与就地所见即所得(WYSIWYG)编辑相同的原则。 为了使作者能够感知移动设备上的页面外观，可使用设备模拟器编辑移动内容页面。

移动设备模拟器基于通用模拟器框架。 有关详细信息，请参阅模拟器页。

设备模拟器在页面上显示移动设备，而通常的编辑（parsys、组件）在设备的屏幕中进行。 设备模拟器取决于为站点配置的设备组。 可以将多个模拟器分配给设备组。 随后，内容页面上将提供所有模拟器。 默认情况下，将显示分配给该站点的第一个设备组的第一个模拟器。 模拟器可以通过页面顶部的模拟器轮盘或通过Sidekick的编辑按钮进行切换。

创建模拟器

要创建模拟器，请参阅通用模拟器页面中的创建自定义移动模拟器部分。

移动仿真器的主要特性

• 设备组由多个模拟器之一组成：设备组配置页，例如/etc/mobile/groups/touch，包含jcr:content节点下的emulators属性。

  注意：虽然同一模拟器可能属于多个设备组，但是它没有什么意义。

• 通过设备组的配置对话框，使用所需模拟器的路径设置emulators属性。 例如：/libs/wcm/mobile/components/emulators/iPhone4。

• 模拟器组件(例如，/libs/wcm/mobile/components/emulators/iPhone4)扩展基本移动模拟器组件(/libs/wcm/mobile/components/emulators/base)。

• 在配置设备组时，每个扩展基本移动模拟器的组件都可供选择。 因此，可以轻松创建或扩展自定义模拟器。

• 在编辑模式下的请求时，模拟器实现用于呈现页面。

• 当页面的模板依赖于移动页面组件时，模拟器功能会自动集成到页面中（通过移动页面组件的head.jsp）。

设备组

移动设备组根据设备功能提供移动设备的分段。 设备组提供在创作实例上进行基于模拟器的创作以及在发布实例上进行正确内容呈现所需的信息：一旦作者已将内容添加到移动页面并已发布它，就可以在发布实例上请求该页面。 在那里，内容页面会使用一个已配置的设备组呈现，而不是模拟器编辑视图。 设备组的选择基于移动设备检测。 然后，匹配设备组提供必要的样式信息。

设备组定义为/etc/mobile/devices下的内容页，并使用​移动设备组​模板。 设备组模板用作内容页面形式的设备组定义的配置模板。 其主要特点是：

• 位置: /libs/wcm/mobile/templates/devicegroup
• 允许的路径：/etc/mobile/groups/*
• 页面组件：wcm/mobile/components/devicegroup

将设备组分配给您的站点

在创建移动站点时，您需要将设备组分配到站点。 AEM根据设备的HTML和JavaScript渲染功能提供三个设备组：

• 功 能电话，适用于Sony Ericsson W800等功能设备，支持基本HTML，但不支持图像和JavaScript。

• 智 能手机，适用于Blackberry等设备，支持基本HTML和图像，但不支持JavaScript。

• 触 摸电话，适用于iPad等设备，完全支持HTML、图像、JavaScript和设备旋转。

由于模拟器可以与设备组关联（请参阅创建设备组一节），因此将设备组分配给站点使作者能够在与设备组关联的模拟器之间进行选择，以编辑页面。

要将设备组分配给您的站点，请执行以下操作：

1. 在您的浏览器中，转到 Siteadmin 控制台。

2. 在​网站​下打开移动站点的根页面。

3. 打开页面属性。

4. 选择​Mobile​选项卡：

   • 定义设备组。
   • 单击​确定。

设备组筛选器

设备组过滤器定义基于功能的标准，以确定设备是否属于该组。 创建设备组时，可以选择用于评估设备的过滤器。

在运行时，当AEM从设备接收HTTP请求时，与组关联的每个过滤器都会将设备功能与特定条件进行比较。 当设备具有过滤器需要的所有功能时，设备将被视为属于组。 功能从WURFL™数据库检索。

设备组可以使用零个或多个过滤器进行功能检测。 此外，过滤器可以与多个设备组一起使用。 AEM提供了默认筛选器，用于确定设备是否具有为组选择的功能：

• CSS
• JPG和PNG图像
• JavaScript
• 设备旋转

如果设备组未使用过滤器，则为该组配置的选定功能是设备唯一需要的功能。

有关详细信息，请参阅创建设备组过滤器。

创建设备组

当AEM安装的组不符合您的要求时，创建设备组。

1. 在您的浏览器中，转到​工具​控制台。

2. 在​工具 > 移动 > 设备组​下创建新页面。 在​创建页面​对话框中：

   • 作为​标题​输入Special Phones。
   • 作为​名称​输入special。
   • 选择​移动设备组模板。
   • 单击​创建。

3. 在CRXDE中，添加一个​static.css​文件，其中包含/etc/mobile/groups/special节点下设备组的样式。

4. 打开​特殊电话​页。

5. 要配置设备组，请单击“设置”“编辑”​按钮。​

   在​常规​选项卡上：

   • 标题:移动设备组的名称。
   • 描述:组的描述。
   • 用户代理:与设备匹配的用户代理字符串。它是可选的，可以是正则表达式。 示例: BlackBerryZ10
   • 功能:定义组是否可以处理图像、CSS、JavaScript或设备旋转。
   • 最小屏幕宽度​和高度
   • 禁用模拟器:在内容编辑过程中能够／禁用模拟器。

   在​模拟器​选项卡上：

   • 模拟器:选择分配给此设备组的模拟器。

   在​过滤器​选项卡上：

   • 要添加过滤器，请单击添加项目，然后从下拉列表中选择过滤器。
   • 过滤器按其显示顺序进行评估。 当设备不满足筛选器的条件时，不评估列表的后续过滤器。

6. 单击确定。

移动设备组配置对话框如下所示：

每个设备组的自定义CSS

如前所述，可以将自定义CSS与设备组页面关联，这与设计页面的CSS非常相似。此CSS用于影响页面内容在创作和发布时的设备组特定呈现。随后将自动包括此CSS:

• 在此设备组使用的每个模拟器的创作实例的页面上。
• 在发布实例的页面上，如果请求的用户代理与此特定设备组中的移动设备匹配。

服务器端设备检测

使用过滤器和设备规范库确定执行HTTP请求的设备的功能。

开发设备组过滤器

创建设备组过滤器以定义一组设备功能要求。 创建所需数量的过滤器以目标所需的设备功能组。

设计过滤器，以便使用它们的组合来定义功能组。 通常，不同设备组的功能存在重叠。 因此，您可能对多个设备组定义使用一些过滤器。

创建过滤器后，可在组配置中使用它。

有关信息，请转至创建设备组过滤器。

使用WURFL™数据库

AEM使用截断版本的WURFL™数据库根据设备的用户代理查询设备功能，如屏幕分辨率或javascript支持。

WURFL™数据库的XML代码通过解析wurfl.xml文件（位于/libs/wcm/mobile/devicespecs/wurfl.xml.）表示为/var/mobile/devicespecs下的节点。在首次启动cq-mobile-core捆绑时，会扩展到节点。

设备功能存储为节点属性，节点表示设备型号。 您可以使用查询检索设备或用户代理的功能。

随着WURFL™数据库的不断发展，您可能需要自定义或替换它。 要更新移动设备数据库，您有以下选项：

• 如果您拥有允许此用途的许可证，请将文件替换为最新版本。 请参阅安装其他WURFL数据库。
• 使用AEM中提供的版本并配置与用户代理字符串匹配并指向现有WURFL™设备的regexp。 请参阅添加基于regexp的用户代理匹配。

测试用户代理到WURFL™功能的映射

当设备访问您的移动站点时，AEM会检测设备，根据其功能将其映射到设备组，并发送与设备组对应的页面视图。 匹配设备组提供必要的样式信息。 映射可以在“移动用户代理测试”页上进行测试：

http://localhost:4502/etc/mobile/useragent-test.html

安装不同的WURFL™数据库

随AEM一起安装的截断的WURFL™数据库是一个预先更新的版本
2011年8月30日。 如果您的WURFL版本在2011年8月30日之后发布，请确保您的使用符合您的许可证。

安装WURFL™数据库：

1. 在CRXDE Lite中，创建以下文件夹：/apps/wcm/mobile/devicespecs
2. 将WURFL™文件复制到文件夹。
3. 将文件重命名为wurfl.xml。

AEM会自动解析wurfl.xml文件并更新/var/mobile/devicespecs下的节点。

添加基于regexp的用户代理匹配

在/apps/wcm/mobile/deviceceps/wurfl/regexp下添加一个用户代理作为常规表达式，以指向现有WURFL™设备类型。

1. 在​CRXDE Lite​中，在/apps/wcm/mobile/deviceceps/regexp下创建一个节点，如apple_ipad_ver1。

2. 向节点添加以下属性：

   • regexp:定义用户代理的常规表达式，例如：.*mozilla。*iPad。*AppleWebKit。amp;ast;Safari(&A)。*
   • deviceId:wurfl.xml中定义的设备ID，例如：apple_ipad_ver1

上述配置导致用户代理与提供的常规表达式匹配的设备映射到appleipadver1 WURFL™设备ID（如果存在）。

客户端设备检测

本节介绍如何使用AEM的设备客户端检测来优化页面渲染或为客户端提供替代网站版本。

AEM支持基于BrowserMap的设备客户端检测。 BrowserMap 在AEM中作为客户端库发运 /etc/clientlibs/browsermap。

BrowserMap 为您提供三种战略，可用于向客户提供替代网站，其顺序如下：

1. 替代链接

2. 设备组特定URL

3. 基于选择器的URL

提供备用链路

PageVariantsProvider OSGi服务能够为属于同一家族的站点生成备用链接。 为了配置要由服务考虑的站点，必须从站点的根向jcr:content节点添加cq:siteVariant节点。

cq:siteVariant节点需要具有以下属性：

• cq:childNodesMapTo -确定子节点将映射到的链接元素的属性；建议以这样的方式组织网站内容，以便根节点的子代代表全局网站的语言变体(例如， /content/mysite/en、 /content/mysite/de)，在此情况下， cq:childNodesMapTo 价值应为 hreflang;

• cq:variantDomain -指示将 Externalizer 用于生成页面变体绝对URL的域；如果未设置此值，则将使用相对链接生成页面变体；

• cq:variantFamily -指示此站点属于哪个网站系列；同一网站的多个特定设备表示应属于同一家族；

• media -存储链接元素的媒体属性值；建议使用已注册的名 BrowserMap 称 DeviceGroups，以便库 BrowserMap 可以自动将客户端转发到网站的正确变体。

PageVariantsProvider和Externalizer

当cq:siteVariant节点的cq:variantDomain属性的值不为空时，PageVariantsProvider服务将使用此值作为Externalizer服务的配置域生成绝对链路。 确保配置Externalizer服务以反映您的设置。

定义设备组特定URL

如果不想使用备用链接，可以为每个DeviceGroup配置全局URL。 我们建议创建您自己的客户端库，它嵌入browsermap.standard客户端库，但重新定义设备组。

BrowserMap的设计方式是，通过从自定义客户端库创建名称相同的新设备组并将其添加到BrowserMap对象，可以覆盖设备组定义。

定义基于选择器的URL

如果之前没有使用任何机制来指示BrowserMap的备用站点，则将使用DeviceGroups名称的选择器将添加到URL中，在这种情况下，您应提供自己的Servlet来处理请求。

例如，BrowserMap标识为smartphone的设备浏览www.example.com/index.html被转发到www.example.com/index.smartphone.html.

在页面上使用BrowserMap

要在页面中使用标准BrowserMap客户端库，必须在页面的head部分使用cq:include标记包含/libs/wcm/core/browsermap/browsermap.jsp文件。

<cq:include script="/libs/wcm/core/browsermap/browsermap.jsp" />

除了在JSP文件中添加BrowserMap客户端库外，还必须将设置为client-side的cq:deviceIdentificationMode字符串属性添加到网站根目录下的jcr:content节点。

覆盖BrowserMap的默认行为

如果要通过覆盖DeviceGroups或添加更多探测器来自定义BrowserMap，则应创建自己的客户端库，在其中嵌入browsermap.standard客户端库。

此外，您还必须手动调用JavaScript代码中的BrowserMap.forwardRequest()方法。

创建自定义的BrowserMap客户端库后，我们建议采用以下方法：

1. 在应用程序中创建browsermap.jsp文件

   <%@include file="/libs/foundation/global.jsp" %>
   <%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
   <%@ page import="
       com.day.cq.wcm.api.variants.PageVariant,
       com.day.cq.wcm.api.variants.PageVariantsProvider,
       com.day.cq.wcm.api.devicedetection.DeviceIdentificationMode,
       com.day.cq.wcm.api.WCMMode"
   %>
   <%
       final PageVariantsProvider p = sling.getService(PageVariantsProvider.class);
       if(p == null) {
           throw new IllegalStateException("Missing PageVariantsProvider service");
       }
       for(PageVariant v : p.getVariants(currentPage, slingRequest)) {
           final String curVar = v.getAttributes().get("data-current-variant");
           String media = v.getAttributes().get("media");
           if (media != null) {
               media = media.replaceAll(" ", "");
           }
   %>
       <link
           rel="alternate"
           data-cq-role="site.variant"
           title="<%= xssAPI.encodeForHTMLAttr(v.getTitle()) %>"
           hreflang="<%= xssAPI.encodeForHTMLAttr(v.getAttributes().get("hreflang")) %>"
           media="<%= xssAPI.encodeForHTMLAttr(media) %>"
           href="<%= xssAPI.getValidHref(v.getURL()) %>"
           <% if(curVar != null) { %> data-current-variant="<%= curVar %>"<% } %>
       />
   <%
       }
       Boolean browserMapEnabled = true;
       final DeviceIdentificationMode dim = sling.getService(DeviceIdentificationMode.class);
       String[] selectors  = slingRequest.getRequestPathInfo().getSelectors();
       boolean isPortletRequest = false;
       for (int i = 0; i < selectors.length; i++) {
           if ("portlet".equals(selectors[i])) {
               isPortletRequest = true;
               break;
           }
       }
       if (isPortletRequest) {
           log.debug("Request was made by a portlet container - BrowserMap will not be embedded");
       } else {
           final WCMMode wcmMode = WCMMode.fromRequest(slingRequest);
           boolean shouldIncludeClientLib = false;
           if (WCMMode.EDIT != wcmMode && WCMMode.PREVIEW != wcmMode && WCMMode.DESIGN != wcmMode) {
               if (dim != null) {
                   final String mode = dim.getDeviceIdentificationModeForPage(currentPage);
                   shouldIncludeClientLib = DeviceIdentificationMode.CLIENT_SIDE.equals(mode);
                   if (shouldIncludeClientLib) {
                       browserMapEnabled = (Boolean) request.getAttribute("browsermap.enabled");
                       if (browserMapEnabled == null) {
                           browserMapEnabled = true;
                       }
                   }
               }
           }
   %>
           <c:if test="<%= !browserMapEnabled %>">
               <meta name="browsermap.enabled" content="false">
           </c:if>
           <c:if test="<%= shouldIncludeClientLib %>">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <cq:includeClientLib categories="browsermap.custom"/>
           </c:if>
   <%
       }
   %>
   

2. 将broswermap.jsp文件包含在头部分。

   <cq:include script="browsermap.jsp" />
   

从某些页面中排除BrowserMap

如果要从不需要客户端检测的某些页面中排除BrowserMap库，可以添加请求属性：

<%
request.setAttribute("browsermap.enabled", false);
%>

这将使/libs/wcm/core/browsermap/browsermap.jsp脚本向页面添加元标记，使BrowserMap不执行任何检测：

<meta name="browsermap.enabled" content="false">

测试网站的特定版本

通常，BrowserMap脚本始终将访客重定向到最适合的网站版本，通常在需要时将访客重定向到桌面或移动站点。

通过向URL添加device参数，可以强制使用任何请求的设备来测试网站的特定版本。 以下URL将呈现Geometrixx Outdoors网站的移动版本。

http://localhost:4502/content/geometrixx-outdoors/en.html?wcmmode=disabled&device=smartphone

过期设备值存储在cookie中，因此您无需向每个URL添加device参数即可浏览您的网站。

因此，您需要调用将device设置为browser的相同URL，才能返回到网站的桌面版本。

移动请求处理

AEM按如下方式处理由属于触控设备组的移动设备发出的请求：

1. iPad向AEM发布实例发送请求，例如http://localhost:4503/content/geometrixx_mobile/en/products.html

2. AEM确定所请求页面的站点是否为移动站点（通过检查第一级页面/content/geometrixx_mobile是否扩展移动页面组件）。 如果是：

3. AEM根据请求标头中的用户代理查找设备功能。

4. AEM将设备功能映射到设备组，并将touch设置为设备组选择器。

5. AEM将请求重定向到http://localhost:4503/content/geometrixx_mobile/en/products.touch.html.

6. AEM向iPad发送响应：

   • products.touch.html 都是平易近人。
   • 渲染组件使用选择器来调整演示文稿。
   • AEM会自动将移动选择器添加到页面中的所有内部链接。

统计数据

您可以获得一些关于移动设备向AEM服务器发出的请求数的统计信息。 可以细分请求数：

• 每个设备组和设备
• 每年，月和日

要视图统计信息，请执行以下操作：

1. 转到​工具​控制台。

2. 打开​工具>移动​下的​设备统计​页。

3. 单击链接以视图特定年、月或日的统计信息。

“统计信息”页如下所示：

如果需要在统计信息中生成条目，可以按如下方式继续：

1. 使用移动设备或模拟器(例如，https://chrispederick.com/work/user-agent-switcher/在Firefox上安装)。

2. 通过禁用创作模式请求创作实例上的移动页面，例如：

   http://localhost:4502/content/geometrixx_mobile/en/products.html?wcmmode=disabled

统计​页现在可用。

支持“发送链接到朋友”链接的页面缓存

移动页面通常可在Dispatcher上访问，因为设备组选择器在页面URL中区分为设备组呈现的页面，例如/content/mobilepage.touch.html。 对没有选择器的移动页面的请求从不进行缓存，在这种情况下，设备检测会运行并最终重定向到匹配的设备组（或“不匹配”）。 使用设备组选择器呈现的移动页面由链接重写器处理，该链接重写器重写页面内的所有链接以同时包含设备组选择器，从而防止对已限定页面上的每次点击重新执行设备检测。

因此，您可能会遇到以下情况：

用户Alice被重定向到coolpage.feature.html，并将该URL发送给朋友Bob,Bob使用位于touch设备组中的其他客户端访问它。

如果coolpage.feature.html从前端缓存中提供，AEM将没有机会分析请求以发现移动选择器与新的用户代理不匹配，而Bob会得到错误的表示。

要解决此问题，您可以在页面中包含一个简单的选择UI，最终用户可以覆盖AEM选择的设备组。 在上例中，如果最终用户认为其设备已足够满足此要求，则页面上的链接（或图标）允许其切换到coolpage.touch.html。