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为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
要创建自定义移动模拟器,请执行以下操作:
在/apps/myapp/components/emulators
下创建组件myemulator
(节点类型:cq:Component
)。
将sling:resourceSuperType
属性设置为/libs/wcm/mobile/components/emulators/base
定义类别为cq.wcm.mobile.emulator
的CSS客户端库,使模拟器外观:name = css
, node type = cq:ClientLibrary
例如,您可以引用节点/libs/wcm/mobile/components/emulators/iPhone/css
如果需要,请定义JS客户端库,例如定义特定插件:name = js,node type = cq:ClientLibrary
例如,您可以引用节点/libs/wcm/mobile/components/emulators/base/js
如果模拟器支持插件定义的特定功能(如触屏滚动),请在模拟器下创建一个配置节点:name = cq:emulatorConfig
,node type = nt:unstructured
并添加定义插件的属性:
名称= canRotate
,类型= Boolean
,值= true
:以包含旋转功能。
名称= touchScrolling
,类型= Boolean
,值= true
:的双曲余切值。
通过定义您自己的插件可以添加更多功能。