使用CustomToolbars呈現HTMLForms

上次更新: 2023-12-07
  • 建立對象:
  • Developer

本檔案中的範例和範例僅適用於JEE環境上的AEM Forms 。

使用自訂工具列呈現HTMLForms

Forms服務可讓您自訂以HTML表單呈現的工具列。 您可以自訂工具列,以透過覆寫預設CSS樣式來變更其外觀,並透過覆寫Java指令碼來新增動態行為。 工具列是使用名為fscmenu.xml的XML檔案自訂的。 依預設,Forms服務會從內部指定的URI位置擷取此檔案。

注意

此URI位置位於adobe-forms-core.jar檔案中,該檔案位於adobe-forms-dsc.jar檔案中。 adobe-forms-dsc.jar檔案位於C:\Adobe\Adobe_Experience_Manager_forms\資料夾中(C:\是安裝目錄)。 您可以使用檔案擷取工具(例如Win RAR)來開啟Adobe。

您可以從此位置複製fscmenu.xml,修改它以符合您的要求,然後將其置於自訂URI位置。 接下來,使用Forms Service API,從指定位置使用fscmenu.xml檔案設定導致Forms服務的執行階段選項。 這些動作會導致Forms服務轉譯具有自訂工具列的HTML表單。

除了fscmenu.xml檔案外,您還需要取得下列檔案:

  • fscmenu.js
  • fscattachments.js
  • fscmenu.css
  • fscmenu-v.css
  • fscmenu-ie.css
  • fscdialog.css

fscJS是與每個節點相關聯的Java指令碼。 必須為以下專案提供一個 div#fscmenu 節點和(選擇性)的 ul#fscmenuItem 節點。 JS檔案實作核心工具列功能,而預設檔案則可運作。

fscCSS是與特定節點關聯的樣式表。 CSS檔案中的樣式會指定工具列外觀。 fscVCSS 是垂直工具列的樣式表,顯示在已轉譯HTML表單的左側。 fscIECSS 是樣式表,用於HTML在Internet Explorer中轉譯的表單。

確定上述所有檔案都在fscmenu.xml檔案中參照。 也就是說,在fscmenu.xml檔案中,指定指向這些檔案的URI位置,讓Forms服務可以找到它們。 依預設,這些檔案可在以內部關鍵字開頭的URI位置取得 FSWebRootApplicationWebRoot.

若要自訂工具列,請使用外部關鍵字取代關鍵字 FSToolBarURI. 此關鍵字代表在執行階段傳遞至Forms服務的URI (本節稍後將說明此方法)。

您也可以指定這些JS和CSS檔案的絕對位置,例如https://www.mycompany.com/scripts/misc/fscmenu.js。 在此情況下,您不需要使用 FSToolBarURI 關鍵字。

注意

不建議您混合參照這些檔案的方式。 也就是說,所有URI都應該透過以下任一方式參照: FSToolBarURI 關鍵字或絕對位置。

您可以開啟adobe-forms以取得JS和CSS檔案。<appserver>.ear檔案。 在此檔案中,開啟adobe-forms-res.war。 所有這些檔案都在WAR檔案中。 Adobe-forms-<appserver>.ear檔案位於AEM forms安裝資料夾中(C:\是安裝目錄)。 您可以開啟Adobe Forms-<appserver>.ear使用檔案擷取工具,例如WinRAR。

下列XML語法顯示範例fscmenu.xml檔案。

 <div id="fscmenu" fscJS="FSToolBarURI/scripts/fscmenu.js" fscCSS="FSToolBarURI/fscmenu.css" fscVCSS="FSToolBarURI/fscmenu-v.css" fscIECSS="FSToolBarURI/fscmenu-ie.css">
         <ul class="fscmenuItem" id="Home">
             <li>
                 <a href="#" fscTarget="_top" tabindex="1">Home</a>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Upload" fscJS="FSToolBarURI/scripts/fscattachments.js" fscCSS="FSToolBarURI/fscdialog.css">
             <li>
                 <a tabindex="2">Upload Attachments</a>
                 <ul class="fscmenuPopup" id="fscUploadAttachments">
                     <li>
                         <a href="javascript:doUploadDialog();" tabindex="3">Add ...</a>
                     </li>
                     <li>
                         <a href="javascript:doDeleteDialog();" tabindex="4">Delete ...</a>
                     </li>
                 </ul>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Download">
             <li>
                 <a tabindex="100">Download Attachments</a>
                 <ul class="fscmenuPopup">
                     <li>
                         <a tabindex="101">None available</a>
                     </li>
                 </ul>
             </li>
         </ul>
     </div>
注意

粗體文字代表必須參考之CSS和JS檔案的URI。

下列專案說明如何自訂工具列:

  • 變更值 fscJSfscCSSfscVCSSfscIECSS 屬性(在fscmenu.xml檔案中),使用本節中說明的其中一種方法(例如, fscJS="FSToolBarURI/scripts/fscmenu.js")。
  • 必須指定所有CSS和JS檔案。 如果未修改任何檔案,請在自訂位置提供預設檔案。 您可以依照本節所述開啟各種檔案來取得預設檔案。
  • 允許為任何檔案提供絕對參照(例如,https://www.example.com/scripts/custom-vertical-fscmenu.css)。
  • JS和CSS檔案可以 div#fscmenu 節點需要工具列功能的必要專案。 個人 ul#fscmenuItem 節點可能有或沒有支援的JS或CSS檔案。

變更本機值

在自訂工具列時,您可以變更工具列的地區設定值。 也就是說,您可以用其他語言顯示它。 下圖顯示以法文顯示的自訂工具列。

注意

無法以多種語言建立自訂工具列。 工具列無法根據地區設定使用不同的XML檔案。

若要變更工具列的語言環境值,請確定fscmenu.xml檔案包含您要顯示的語言。 下列XML語法顯示用來顯示法文工具列的fscmenu.xml檔案。

 <div id="fscmenu" fscJS="FSToolBarURI/scripts/fscmenu.js" fscCSS="FSToolBarURI/fscmenu.css" fscVCSS="FSToolBarURI/fscmenu-v.css" fscIECSS="FSToolBarURI/fscmenu-ie.css">
         <ul class="fscmenuItem" id="Home">
             <li>
                 <a href="#" fscTarget="_top" tabindex="1">Accueil</a>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Upload" fscJS="FSToolBarURI/scripts/fscattachments.js" fscCSS="FSToolBarURI/fscdialog.css">
             <li>
                 <a tabindex="2">Télécharger les pièces jointes</a>
                 <ul class="fscmenuPopup" id="fscUploadAttachments">
                     <li>
                         <a href="javascript:doUploadDialog();" tabindex="3">Ajouter...</a>
                     </li>
                     <li>
                         <a href="javascript:doDeleteDialog();" tabindex="4">Supprimer...</a>
                     </li>
                 </ul>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Download">
             <li>
                 <a tabindex="100">Télécharger les pièces jointes</a>
                 <ul class="fscmenuPopup">
                     <li>
                         <a tabindex="101">Aucune disponible</a>
                     </li>
                 </ul>
             </li>
         </ul>
     </div>
注意

與此區段相關聯的「快速入門」會使用此XML檔案來顯示法文自訂工具列,如上圖所示。

此外,請叫用 HTMLRenderSpec 物件的 setLocale 方法並傳遞字串值,該值會指定地區設定值。 例如,通過 fr_FR 以指定法文。 Forms服務隨附本地化工具列。

注意

您必須先瞭解HTML表單的呈現方式,才能呈現使用自訂工具列的HTML表單。 (請參閱 將Forms轉譯為HTML.)

如需Forms服務的詳細資訊,請參閱 AEM Forms服務參考.

步驟摘要

若要呈現包含自訂工具列的HTML表單,請執行以下工作:

  1. 包含專案檔案。
  2. 建立Forms Java API物件。
  3. 參考自訂fscmenu XML檔案。
  4. 呈現HTML表單。
  5. 將表單資料流寫入使用者端網頁瀏覽器。

包含專案檔案

在您的開發專案中包含必要的檔案。 如果您使用Java建立使用者端應用程式,請包含必要的JAR檔案。 如果您使用Web服務,請包含Proxy檔案。

建立Forms Java API物件

您必須先建立Forms使用者端物件,才能以程式設計方式執行Forms服務支援的操作。

參考自訂fscmenu XML檔案

若要呈現包含自訂工具列的HTML表單,請參照描述工具列的fscmenu XML檔案。 (本節提供fscmenu XML檔案的兩個範例。) 此外,請確定fscmenu.xml檔案正確指定所有參照檔案的位置。 如本節先前所述,請確定所有檔案已被 FSToolBarURI 關鍵字或其絕對位置。

呈現HTML表單

若要呈現HTML表單,請指定在Designer中建立並儲存為XDP檔案的表單設計。 同時選取HTML轉換型別。 例如,您可以指定轉譯Internet Explorer 5.0或更新版本動態HTML的HTML轉換型別。

呈現HTML表單也需要值,例如呈現其他表單型別的URI值。

將表單資料流寫入使用者端網頁瀏覽器

Forms服務轉譯HTML表單時,會傳回您必須寫入使用者端網頁瀏覽器的表單資料流,才能讓使用者看到HTML表單。

另請參閱

使用Java API呈現具有自訂工具列的HTML表單

使用網站服務API呈現具有自訂工具列的HTML表單

包含AEM Forms Java程式庫檔案

設定連線屬性

Forms服務API快速入門

呈現互動式PDF forms

將Forms轉譯為HTML

建立轉譯Forms的網頁應用程式

使用Java API呈現具有自訂工具列的HTML表單

使用Forms Service API (Java)呈現包含自訂工具列的HTML表單:

  1. 包含專案檔案

    在您的Java專案的類別路徑中包含使用者端JAR檔案,例如adobe-forms-client.jar。

  2. 建立Forms Java API物件

    • 建立 ServiceClientFactory 包含連線屬性的物件。
    • 建立 FormsServiceClient 物件,使用它的建構函式並傳遞 ServiceClientFactory 物件。
  3. 參考自訂fscmenu XML檔案

    • 建立 HTMLRenderSpec 物件(使用其建構函式)。
    • 若要使用工具列呈現HTML表單,請叫用 HTMLRenderSpec 物件的 setHTMLToolbar 方法並傳遞 HTMLToolbar 列舉值。 例如,若要顯示垂直HTML工具列,請傳遞 HTMLToolbar.Vertical.
    • 透過叫用 HTMLRenderSpec 物件的 setToolbarURI 方法並傳遞字串值,該值會指定XML檔案的URI位置。
    • 如果適用,請叫用 HTMLRenderSpec 物件的 setLocale 方法並傳遞字串值,該值會指定地區設定值。 預設值為英文。
    注意

    與此區段關聯的「快速入門」會將此值設為 fr_FR.

  4. 呈現HTML表單

    叫用 FormsServiceClient 物件的 renderHTMLForm 方法並傳遞下列值:

    • 字串值,指定表單設計名稱,包括副檔名。 如果您參照的表單設計屬於Forms應用程式的一部分,請務必指定完整路徑,例如 Applications/FormsApplication/1.0/FormsFolder/Loan.xdp.
    • A TransformTo 指定HTML偏好設定型別的列舉值。 例如,若要呈現與Internet Explorer 5.0或更新版本的動態HTML相容的HTML表單,請指定 TransformTo.MSDHTML.
    • A com.adobe.idp.Document 包含要與表單合併之資料的物件。 如果您不想合併資料,請傳遞空白字元 com.adobe.idp.Document 物件。
    • HTMLRenderSpec 儲存HTML執行階段選項的物件。
    • 字串值,指定 HTTP_USER_AGENT 標頭值,例如 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322).
    • A URLSpec 此物件儲存轉譯HTML表單所需的URI值。
    • A java.util.HashMap 儲存檔案附件的物件。 這是選用引數,您可以指定 null 如果您不想將檔案附加至表單。

    renderHTMLForm 方法傳回 FormsResult 包含必須寫入使用者端Web瀏覽器的表單資料流的物件。

  5. 將表單資料流寫入使用者端網頁瀏覽器

    • 建立 com.adobe.idp.Document 物件(透過叫用 FormsResult 物件 getOutputContent 方法。
    • 取得 com.adobe.idp.Document 物件(透過叫用其 getContentType 方法。
    • 設定 javax.servlet.http.HttpServletResponse 物件的內容型別,透過叫用其 setContentType 方法並傳遞的內容型別 com.adobe.idp.Document 物件。
    • 建立 javax.servlet.ServletOutputStream 用來將表單資料流寫入使用者端網頁瀏覽器的物件,方法是叫用 javax.servlet.http.HttpServletResponse 物件的 getOutputStream 方法。
    • 建立 java.io.InputStream 物件(透過叫用 com.adobe.idp.Document 物件的 getInputStream 方法。
    • 建立位元組陣列,並叫用 InputStream 物件的 read 方法,並將位元組陣列作為引數傳遞。
    • 叫用 javax.servlet.ServletOutputStream 物件的 write 將表單資料流傳送至使用者端web瀏覽器的方法。 將位元組陣列傳遞至 write 方法。

另請參閱

快速入門(SOAP模式):使用Java API使用自訂工具列轉譯HTML表單

包含AEM Forms Java程式庫檔案

設定連線屬性

使用網站服務API呈現具有自訂工具列的HTML表單

使用Forms Service API (Web服務)呈現包含自訂工具列的HTML表單:

  1. 包含專案檔案

    • 建立使用Forms服務WSDL的Java Proxy類別。
    • 在類別路徑中包含Java Proxy類別。
  2. 建立Forms Java API物件

    建立 FormsService 物件並設定驗證值。

  3. 參考自訂fscmenu XML檔案

    • 建立 HTMLRenderSpec 物件(使用其建構函式)。
    • 若要使用工具列呈現HTML表單,請叫用 HTMLRenderSpec 物件的 setHTMLToolbar 方法並傳遞 HTMLToolbar 列舉值。 例如,若要顯示垂直HTML工具列,請傳遞 HTMLToolbar.Vertical.
    • 透過叫用 HTMLRenderSpec 物件的 setToolbarURI 方法並傳遞字串值,該值會指定XML檔案的URI位置。
    • 如果適用,請叫用 HTMLRenderSpec 物件的 setLocale 方法並傳遞字串值,該值會指定地區設定值。 預設值為英文。
    注意

    與此區段關聯的「快速入門」會將此值設為 fr_FR.

  4. 呈現HTML表單

    叫用 FormsService 物件的 renderHTMLForm 方法並傳遞下列值:

    • 字串值,指定表單設計名稱,包括副檔名。 如果您參照的表單設計屬於Forms應用程式的一部分,請務必指定完整路徑,例如 Applications/FormsApplication/1.0/FormsFolder/Loan.xdp.
    • A TransformTo 指定HTML偏好設定型別的列舉值。 例如,若要呈現與Internet Explorer 5.0或更新版本的動態HTML相容的HTML表單,請指定 TransformTo.MSDHTML.
    • A BLOB 包含要與表單合併之資料的物件。 如果您不想合併資料,請傳遞 null.
    • HTMLRenderSpec 儲存HTML執行階段選項的物件。
    • 字串值,指定 HTTP_USER_AGENT 標頭值,例如 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)。 如果您不想設定此值,可以傳遞空字串。
    • A URLSpec 此物件儲存轉譯HTML表單所需的URI值。
    • A java.util.HashMap 儲存檔案附件的物件。 此引數為選用引數,您可以指定 null 如果您不打算將檔案附加至表單。
    • 空白 com.adobe.idp.services.holders.BLOBHolder 由填入的物件 renderHTMLForm 方法。 此引數值會儲存演算後的表單。
    • 空白 com.adobe.idp.services.holders.BLOBHolder 由填入的物件 renderHTMLForm 方法。 此引數會儲存輸出XML資料。
    • 空白 javax.xml.rpc.holders.LongHolder 由填入的物件 renderHTMLForm 方法。 此引數會儲存表單中的頁數。
    • 空白 javax.xml.rpc.holders.StringHolder 由填入的物件 renderHTMLForm 方法。 此引數會儲存地區設定值。
    • 空白 javax.xml.rpc.holders.StringHolder 由填入的物件 renderHTMLForm 方法。 此引數會儲存所使用的HTML演算值。
    • 空白 com.adobe.idp.services.holders.FormsResultHolder 將包含此作業結果的物件。

    renderHTMLForm 方法填入 com.adobe.idp.services.holders.FormsResultHolder 以表單資料流傳遞作為最後一個引數值的物件,必須寫入使用者端Web瀏覽器。

  5. 將表單資料流寫入使用者端網頁瀏覽器

    • 建立 FormResult 物件,方法是取得 com.adobe.idp.services.holders.FormsResultHolder 物件的 value 資料成員。
    • 建立 BLOB 包含表單資料的物件(透過叫用 FormsResult 物件的 getOutputContent 方法。
    • 取得 BLOB 物件(透過叫用其 getContentType 方法。
    • 設定 javax.servlet.http.HttpServletResponse 物件的內容型別,透過叫用其 setContentType 方法並傳遞的內容型別 BLOB 物件。
    • 建立 javax.servlet.ServletOutputStream 用來將表單資料流寫入使用者端網頁瀏覽器的物件,方法是叫用 javax.servlet.http.HttpServletResponse 物件的 getOutputStream 方法。
    • 建立位元組陣列,並透過叫用 BLOB 物件的 getBinaryData 方法。 此任務會指派 FormsResult 物件至位元組陣列。
    • 叫用 javax.servlet.http.HttpServletResponse 物件的 write 將表單資料流傳送至使用者端web瀏覽器的方法。 將位元組陣列傳遞至 write 方法。

另請參閱

使用Base64編碼叫用AEM Forms

本頁內容