模擬器 emulators

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
開發

建立對象：

開發人員

NOTE

Adobe建議針對需要以單頁應用程式框架為基礎的使用者端轉譯（例如React）的專案，使用SPA編輯器。了解更多。

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

AEM模擬器架構：

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

CAUTION

此功能僅支援傳統UI。

模擬器特性 emulators-characteristics

模擬器：

是以ExtJS為基礎。
在頁面DOM上運作。
其外觀會透過CSS受到規範。
支援外掛程式（例如行動裝置旋轉外掛程式）。
僅對作者有效。
其基底元件位於/libs/wcm/emulator/components/base。

模擬器如何轉換內容 how-the-emulator-transforms-the-content

模擬器的運作方式是將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將模擬器作為整體保留，並且
識別碼為cq-emulator-content的div，代表頁面內容所在的裝置檢視區/畫面/內容區域。

新的CSS類別也會指派給新的模擬器div：它們代表目前模擬器的名稱。

模擬器的外掛程式可能會進一步擴充指派的CSS類別清單，如旋轉外掛程式的範例，根據目前的裝置旋轉插入「垂直」或「水準」類別。

如此一來，可藉由具有與模擬器div的ID和CSS類別相對應的CSS類別，來控制模擬器的完整外觀。

NOTE

建議專案HTML將內文內容包裝在單一div中，就像上面的範例一樣。如果內文內容包含多個標籤，可能會出現無法預測的結果。

行動模擬器 mobile-emulators

現有的行動模擬器：

在/libs/wcm/mobile/components/emulator之下。
可透過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定義：
- 為頁面定義的所有模擬器的設定(emulatorConfigs)
- 模擬器管理員透過以下方式整合頁面中的模擬器功能：
  
  emulatorMgr.launch(config)；
  
  模擬器管理員的定義如下：
  
  /libs/wcm/emulator/widgets/source/EmulatorManager.js

建立自訂行動模擬器 creating-a-custom-mobile-emulator

若要建立自訂行動模擬器：

在/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使用者端程式庫，以定義特定外掛程式：名稱= js，節點型別= cq：ClientLibrary

例如，您可以參照節點/libs/wcm/mobile/components/emulators/base/js
如果模擬器支援外掛程式定義的特定功能（例如觸控捲動），請在模擬器下方建立設定節點：名稱= cq:emulatorConfig、節點型別= nt:unstructured，然後新增定義外掛程式的屬性：
- 名稱= canRotate，型別= Boolean，值= true：包含旋轉功能。
- 名稱= touchScrolling，型別= Boolean，值= true：包含觸控捲動功能。
您可以定義自己的外掛程式，以新增更多功能。

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2