模擬器

注意

Adobe建議針對需要單頁應用程式架構用戶端轉換的專案使用SPA編輯器（例如React）。了解更多.

Adobe Experience Manager(AEM)可讓作者在模擬一般使用者將檢視頁面的環境的模擬器中檢視頁面，例如在行動裝置或電子郵件用戶端中。

AEM模擬器架構：

在模擬使用者介面(UI)中提供內容製作，例如行動裝置或電子郵件用戶端（用來製作電子報）。
根據模擬的UI調整頁面內容。
允許建立自定義模擬器。

注意

此功能僅在Classic 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，代表裝置的檢視區／畫面／內容區域，頁面內容位於此區域。

新的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包含裝置群組的相關模擬器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客戶端庫：名稱= css，節點類型= 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:加入觸控捲動功能。
您可定義自己的外掛程式，以新增更多功能。