HTML5表單架構

架構

HTML5表單功能在內嵌AEM例項內部署為套件，並透過RESTful Apache Sling Architecture，以HTTP/S顯示為REST端點。

02-aem-forms-architecture_large

使用Sling Framework

Apache Sling以資源為中心。它會使用請求URL來先解析資源。 每個資源都有​sling:resourceType（或​sling:resourceSuperType）屬性。 接著會根據此屬性、要求方法和要求URL的屬性，選取Sling指令碼來處理要求。 此Sling指令碼可以是JSP或Servlet。 對於HTML5表單，Profile​節點會作為Sling資源，而​Profile Renderer​則作為Sling指令碼，處理使用特定設定檔轉譯行動表單的請求。 描述檔轉譯器​是JSP，可從請求讀取參數並呼叫Forms OSGi服務。

有關REST端點和支援的請求參數的詳細資訊，請參閱呈現表單模板。

當使用者從用戶端裝置（例如iOS或Android瀏覽器）提出請求時，Sling會先根據請求URL解析設定檔節點。 此設定檔節點會讀取​sling:resourceSuperType​和​sling:resourceType，以判斷可處理此表單呈現請求的所有可用指令碼。 接著會使用Sling要求選取器搭配要求方法來識別最適合處理此要求的指令碼。 一旦請求達到設定檔轉譯器JSP,JSP就會呼叫Forms OSGi服務。

如需Sling指令碼解析度的詳細資訊，請參閱AEM Sling速查表或Apache Sling Url decomposition。

典型表單處理呼叫流程

HTML5表單會快取第一個請求處理表單（轉譯或提交）所需的所有中繼物件。 它不會快取與資料相關的對象，因為這些對象可能會更改。

Mobile Form會維護兩個不同層級的快取，即PreRender快取和Render快取。 preRender快取包含解析的模板的所有片段和影像，而Render快取包含已呈現的內容，如HTML。

HTML5表單工
作流程圖： HTML5表單工作流程

HTML5表單不會快取缺少片段和影像參考的範本。 如果HTML5表單所花的時間超過正常時間，請檢查伺服器記錄檔中是否有遺漏的參考和警告。 另請確保未達到對象的最大大小。

Forms OSGi服務會以兩個步驟處理請求：

  • 配置和初始表單狀態生成:Forms OSGi轉譯服務會呼叫Forms快取元件，判斷表單是否已快取且未失效。如果表單已快取且有效，則會從快取中提供產生的HTML。 如果表單失效，Forms OSGi轉譯服務會以XML格式產生「初始表單配置」和「表單狀態」。 此XML會由Forms OSGi服務轉換為HTML版面和初始JSON表單狀態，然後快取以供後續請求使用。
  • 預先填入的Forms:轉譯時，如果使用者以預先填入的資料請求表單，Forms OSGi轉譯服務會呼叫Forms服務容器，並透過合併的資料產生新的表單狀態。不過，由於配置已在上述步驟中產生，因此此呼叫比首次呼叫更快。 此呼叫只會執行資料合併，並對資料執行指令碼。

如果表單內有任何更新或使用的任何資產，表單快取元件會偵測到該更新，而該特定表單的快取失效。 Forms OSGi服務完成處理後，設定檔轉譯器jsp會將JavaScript程式庫參考和樣式新增至此表單，並將回應傳回給用戶端。 此處可搭配HTML壓縮使用典型的Web伺服器，例如Apache。 Web伺服器將顯著減少伺服器和客戶端電腦之間的資料流所需的響應大小、網路流量和時間。

當使用者提交表單時，瀏覽器會將表單狀態以JSON格式傳送至提交服務代理;然後，提交服務代理使用JSON資料生成資料XML，並提交該資料XML以提交端點。

元件

您需要AEM Forms附加元件套件才能啟用HTML5表單。 如需安裝AEM Forms附加元件套件的相關資訊，請參閱安裝和設定AEM Forms。

OSGi元件(adobe-lc-forms-core.jar)

AdobeXFA Forms轉譯器(com.adobe.livecycle.adobe-lc-forms-core) 是從Felix Admin Console的「套件」檢視(https://[主機]:[連接埠]/系統/主控台/套件組合)檢視時，HTML5表單OSGi套件組合的顯示名稱。

此元件包含用於呈現、快取管理和配置設定的OSGi元件。

Forms OSGi服務

此OSGi服務包含將XDP轉譯為HTML的邏輯，並處理表單提交以產生資料XML。 此服務使用Forms服務容器。 Forms服務容器內部呼叫執行處理的原生元件XMLFormService.exe。

如果收到轉譯請求，此元件會呼叫Forms服務容器，以產生配置和狀態資訊，並進一步處理以產生HTML和JSON表單DOM狀態。

此元件也負責從提交的表單狀態JSON產生資料XML。

快取元件

HTML5表單使用快取來最佳化輸送量和回應時間。 您可以配置快取服務的級別，以微調效能和空間利用率之間的權衡。

快取策略 說明
無 不快取對象
保守 僅快取在表單呈現前產生的中間成品，如包含內嵌片段和影像的範本
攻擊性 快取呈現的HTML內容
快取保守級別中快取的所有對象。
注意:此策略會產生最佳效能，但會耗用更多記憶體來儲存快取的成品。

HTML5表單會使用LRU策略執行記憶體內快取。 如果快取策略設定為「無快取」，則不會建立快取，且現有快取資料（如果有）將被清除。 除快取策略外，您還可以配置記憶體內快取總大小，這有助於最大限制快取大小，如果超出限制範圍，則它將使用LRU模式釋放快取資源。

注意

記憶體內快取在群集節點之間不共用。

配置服務

Configuration Service可調整HTML5表單的配置參數和快取設定。

若要更新這些設定，請前往CQ FelixAdmin Console（可於https://[server]:[port]/system/console/configMgr取得），搜尋並選取「行動Forms設定」。

您可以使用配置服務配置快取大小或禁用快取。 您也可以使用「除錯選項」參數來啟用除錯功能。 有關對表單進行調試的更多資訊，請參閱調試HTML5表單。

執行階段元件(adobe-lc-forms-runtime-pkg.zip)

執行階段套件包含用於轉譯HTML表單的用戶端程式庫。

運行時程式包提供的重要元件：

指令碼引擎

AdobeXFA實作支援兩種指令碼語言，以在表單中啟用使用者定義的邏輯執行：JavaScript和FormCalc。

HTML Forms的指令碼引擎是以JavaScript撰寫，以支援這兩種語言的XFA指令碼API。

在呈現時，FormCalc指令碼會在伺服器上轉換為（和快取）JavaScript，對用戶或設計人員而言是透明的。

此指令碼引擎使用ECMAScript5的某些功能，如Object.defineProperty。 引擎/程式庫會以類別名稱​xfaforms.profile​的CQ用戶端程式庫傳送。 它還提供​FormBridge API​以使外部門戶或應用程式能夠與表單交互。 使用FormBridge，外部應用程式可以以寫程式方式隱藏某些元素、獲取或設定其值，或更改其屬性。

如需詳細資訊，請參閱表單橋接器文章。

佈局引擎

HTML5表單的版面配置和視覺方面是以SVG 1.1、jQuery、BackBone和CSS3功能為基礎。 在伺服器上生成並快取表單的初始外觀。 在客戶端上管理初始佈局的調整以及對表單佈局的任何進一步增量更改。 為此，Runtime套件包含以JavaScript撰寫且以jQuery/Backbone為基礎的版面引擎。 此引擎處理所有動態行為，如添加/刪除可重複實例、可增長對象佈局。 此版面引擎一次呈現一個表單。 最初，用戶僅查看一個頁面，水準捲動條僅佔第一頁。 不過，當使用者向下捲動時，下一頁會開始呈現。 此逐頁轉譯可縮短在瀏覽器中轉譯第一個頁面所需的時間，並增強可感知的表單效能。 此引擎/程式庫是CQ用戶端程式庫的一部分，類別名稱為​xfaforms.profile。

版面引擎也包含一組小工具集，用來從使用者擷取表單欄位的值。 這些小部件建模為jQuery UI小部件，它們實施了某些附加合同，以便與佈局引擎無縫協作。

有關介面工具集和相應合同的詳細資訊，請參閱HTML5表單的自定義介面工具集。

樣式

與HTML元素相關聯的樣式會內嵌或根據內嵌的CSS區塊新增。 某些不依賴表單的常見樣式屬於CQ用戶端程式庫的一部分，其類別名稱為xfaforms.profile。

除了預設樣式屬性外，每個表單元素也包含根據元素類型、名稱和其他屬性的特定CSS類別。 使用這些類，您可以通過指定自己的CSS來重新設定元素的樣式。

有關預設樣式和類的詳細資訊，請參閱樣式簡介。

伺服器端指令碼和Web服務

任何標籤為在伺服器上運行或標籤為調用Web服務的指令碼（無論其標籤為執行的位置）始終在伺服器上執行。

客戶端指令碼引擎：

  1. 以JSON形式同步呼叫傳遞目前表單狀態的伺服器
  2. 在伺服器上執行指令碼或Web服務
  3. 產生新的JSON狀態
  4. 傳回回應時，合併用戶端上的新JSON狀態。

本地化資源包

HTML5表單支援義大利文(it)、西班牙文(es)、巴西葡萄牙文(pt_BR)、簡體中文(zh_CN)、繁體中文（僅支援）(zh_TW)、韓文(ko_KR)、英語(en_US)、法文(fr_FR)、德文(de_DE)和日文(ja)語言。 根據在請求標題中收到的區域設定，將相應的資源包發送到客戶端。 此資源包將作為類別名稱​xfaforms.I18N​的CQ客戶端庫添加到配置檔案JSP中。 您可以覆蓋在配置檔案中提取地區包的邏輯。

Sling元件(adobe-lc-forms-content-pkg.zip)

Sling套件包含與設定檔和設定檔轉譯器相關的內容。

設定檔

設定檔是Sling中代表表單或Forms系列的資源節點。 在CQ層級，這些設定檔是JCR節點。 節點位於JCR儲存庫的​/content​資料夾下，可以位於​/content​資料夾下的任何子資料夾內。

設定檔轉譯器

設定檔節點的屬性​sling:resourceSuperType ，值​xfaforms/profile。 此屬性會內部傳送轉送要求至位於​/libs/xfaforms/profile​資料夾中之Profile節點的Sling指令碼。 這些指令碼是JSP頁，它們是將HTML表單和所需JS/CSS對象放在一起的容器。 這些頁面包含下列項目的參考：

  • xfaforms.I18N。<locale>:此程式庫包含本地化資料。
  • xfaforms.profile:此程式庫包含XFA指令碼和版面引擎的實作。

這些程式庫會模型化為CQ用戶端程式庫，其優點是可自動串連、縮制及壓縮CQ架構JavaScript程式庫。
如需CQ用戶端Lib的詳細資訊，請參閱CQ Clientlib檔案。

如上所述，設定檔轉譯器JSP會透過sling include呼叫Forms服務。 此JSP還根據管理員配置或請求參數設定各種調試選項。

HTML5表單可讓開發人員建立設定檔和設定檔轉譯器，以自訂表單的外觀。 例如，HTML表單可讓開發人員將表單整合至現有HTML入口網站的面板或<div>區段中。
如需建立自訂設定檔的詳細資訊，請參閱建立自訂設定檔。

本頁內容