Adobe建议对需要基于单页应用程序框架的客户端渲染(例如React)的项目使用SPA编辑器。 了解详情.
Adobe Experience Manager (AEM)使作者能够在模拟最终用户查看页面的环境的模拟器中查看页面,例如在移动设备上或电子邮件客户端中。
AEM模拟器框架:
仅经典UI支持此功能。
模拟器:
/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的div cq-emulator
保持模拟器整体和
具有id的div cq-emulator-content
表示页面内容所在的设备的视区/屏幕/内容区域。
新的CSS类也被分配给新的模拟器div:它们表示当前模拟器的名称。
模拟器的插件可以进一步扩展分配的CSS类的列表,如旋转插件的示例,根据当前设备旋转插入“垂直”或“水平”类。
这样,可以通过具有与模拟器div的ID和CSS类相对应的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
包括设备组的关联模拟器init组件(仅在创作模式下)以及设备组的渲染CSS,具体方式为:
deviceGroup.drawHead(pageContext);
方法 DeviceGroup.drawHead(pageContext)
包含模拟器的init组件,即 init.html.jsp
模拟器组件的。 如果模拟器组件没有自己的 init.html.jsp
并依赖移动基础模拟器( wcm/mobile/components/emulators/base)
,则mobile基础模拟器的init脚本将调用( /libs/wcm/mobile/components/emulators/base/init.html.jsp
)。
Mobile基础仿真器的init脚本通过Javascript定义:
为页面定义的所有模拟器的配置(emulatorConfigs)
模拟器管理器通过以下方式将模拟器的功能集成到页面中:
emulatorMgr.launch(config)
;
模拟器管理器的定义如下:
/libs/wcm/emulator/widgets/source/EmulatorManager.js
要创建自定义移动模拟器,请执行以下操作:
以下 /apps/myapp/components/emulators
创建组件 myemulator
(节点类型: cq:Component
)。
设置 sling:resourceSuperType
属性至 /libs/wcm/mobile/components/emulators/base
使用类别定义CSS客户端库 cq.wcm.mobile.emulator
对于模拟器外观:名称= css
,节点类型= cq:ClientLibrary
例如,您可以引用节点 /libs/wcm/mobile/components/emulators/iPhone/css
如果需要,可定义JS客户端库,例如定义特定插件:名称= js,节点类型= cq:ClientLibrary
例如,您可以引用节点 /libs/wcm/mobile/components/emulators/base/js
如果模拟器支持由插件定义的特定功能(如触控滚动),请在模拟器下方创建一个配置节点:名称= cq:emulatorConfig
,节点类型= nt:unstructured
并添加用于定义插件的属性:
名称= canRotate
,类型= Boolean
,值= true
:用于包含旋转功能。
名称= touchScrolling
,类型= Boolean
,值= true
:用于包含触摸滚动功能。
通过定义您自己的插件,可以添加更多功能。