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,代表頁面內容所在裝置的檢視區/畫面/內容區域。
新的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)
),則將調用移動基本模擬器的init指令碼(/libs/wcm/mobile/components/emulators/base/init.html.jsp
)。
行動基本模擬器的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
為模擬器外觀定義類別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
:以包含觸控捲動功能。
您可以定義自己的外掛程式,以新增更多功能。