模拟器

注意

Adobe建议对需要基于单页应用程序框架的客户端渲染（例如，React）的项目使用SPA编辑器。 了解更多.

Adobe Experience Manager(AEM)允许作者在模拟器中视图页面，该模拟器模拟最终用户视图页面的环境，例如在移动设备或电子邮件客户端。

AEM模拟器框架：

  • 在模拟用户界面(UI)（例如移动设备或电子邮件客户端）中提供内容创作（用于创作新闻稿）。
  • 根据模拟的UI调整页面内容。
  • 允许创建自定义模拟器。
注意

此功能仅在经典UI中受支持。

模拟器特性

模拟器：

  • 基于ExtJS。
  • 在页面DOM上操作。
  • 其外观通过CSS进行调节。
  • 支持插件（例如移动设备旋转插件）。
  • 仅对作者有效。
  • 其基本组件位于/libs/wcm/emulator/components/base。

模拟器如何转换内容

模拟器的工作方式是将HTML正文内容打包到模拟器DIV中。 例如，以下html代码：

<body>
<div id="wrapper" class="page mobilecontentpage ">
    <div class="topnav mobiletopnav">
    ...
    </div>
    ...
</div>
</body>

在开始模拟器后，将转换为以下html代码：

<body>
 <div id="cq-emulator-toolbar">
 ...
 </div>
 <div id="cq-emulator-wrapper">
  <div id="cq-emulator-device">
   <div class=" android vertical" id="cq-emulator">
    ...
    <div class=" android vertical" id="cq-emulator-content">
     ...
     <div id="wrapper" class="page mobilecontentpage">
     ...
     </div>
     ...
    </div>
   </div>
  </div>
 </div>
 ...
</body>

添加了两个div标签：

  • id为cq-emulator的div将模拟器作为一个整体并

  • id为cq-emulator-content的div，它表示页面内容所在设备的viewport/screen/content区域。

新的CSS类还分配给新的模拟器div:它们表示当前模拟器的名称。

模拟器的插件可以进一步扩展已分配CSS类的列表，如旋转插件的示例所示，根据当前设备旋转插入“垂直”或“水平”类。

这样，可以通过使CSS类与模拟器div的ID和CSS类相对应来控制模拟器的完整外观。

注意

建议项目HTML将正文内容包装在单个div中，如上例所示。 如果正文内容包含多个标记，则可能会产生不可预知的结果。

移动模拟器

现有的移动模拟器：

  • 位于/libs/wcm/mobile/components/emulators下。

  • 可通过JSON servlet访问：

    http://localhost:4502/bin/wcm/mobile/emulators.json

当页面组件依赖移动页面组件(/libs/wcm/mobile/components/page)时，模拟器功能将通过以下机制自动集成到页面中：

  • 移动页面组件head.jsp包括设备组的关联模拟器初始化组件（仅在创作模式下）和设备组的CSS呈现方式：

    deviceGroup.drawHead(pageContext);

  • 方法DeviceGroup.drawHead(pageContext)包括模拟器的init组件，即调用模拟器组件的init.html.jsp。 如果模拟器组件没有自己的init.html.jsp并且依赖于移动基础模拟器(wcm/mobile/components/emulators/base))，则将调用移动基础模拟器的init脚本(/libs/wcm/mobile/components/emulators/base/init.html.jsp)。

  • 移动基本模拟器的初始脚本通过Javascript定义：

    • 为页面定义的所有模拟器的配置（模拟器配置）

    • 模拟器管理器通过以下方式在页面中集成了模拟器的功能：

      emulatorMgr.launch(config);

      模拟器管理器由以下对象定义：

      /libs/wcm/emulator/widgets/source/EmulatorManager.js

创建自定义移动模拟器

要创建自定义移动模拟器，请执行以下操作：

  1. 在/apps/myapp/components/emulators下创建组件myemulator(节点类型：cq:Component)。

  2. 将sling:resourceSuperType属性设置为/libs/wcm/mobile/components/emulators/base

  3. 定义类别为cq.wcm.mobile.emulator的CSS客户端库，使模拟器外观：name = css, node type = cq:ClientLibrary

    例如，您可以引用节点/libs/wcm/mobile/components/emulators/iPhone/css

  4. 如果需要，请定义JS客户端库，例如定义特定插件：name = js,node type = cq:ClientLibrary

    例如，您可以引用节点/libs/wcm/mobile/components/emulators/base/js

  5. 如果模拟器支持插件定义的特定功能（如触屏滚动），请在模拟器下创建一个配置节点：name = cq:emulatorConfig,node type = nt:unstructured并添加定义插件的属性：

    • 名称= canRotate，类型= Boolean，值= true:以包含旋转功能。

    • 名称= touchScrolling，类型= Boolean，值= true:的双曲余切值。

    通过定义您自己的插件可以添加更多功能。

在此页面上

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