使用CustomToolbars轉換HTML表格

使用自訂工具列呈現HTML表格

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\ folder (C:\ is the installation directory)。 您可以使用檔案擷取工具(例如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是用於在Internet Explorer中轉譯的HTML表單的樣式表。

請確定fscmenu.xml檔案中已參考上述所有檔案。 也就是說,在fscmenu.xml檔案中,指定指向這些檔案的URI位置,讓Forms服務找到這些檔案。 預設情況下,這些檔案可在以內部關鍵字FSWebRootApplicationWebRoot開始的URI位置使用。

若要自訂工具列,請使用外部關鍵字FSToolBarURI來取代關鍵字。 此關鍵字代表在執行時期傳遞至Forms服務的URI(本節稍後會顯示此方法)。

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

注意

不建議您混用這些檔案的參考方式。 也就是說,應使用FSToolBarURI關鍵字或絕對位置來參考所有URI。

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

以下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)。
  • div#fscmenu節點需要的JS和CSS檔案是工具列功能的必備工具。 個別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表格的轉換方式。 (請參閱將表單轉換為HTML)。

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

步驟摘要

若要轉換包含自訂工具列的HTML表格,請執行下列工作:

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

包含專案檔案

在您的開發專案中加入必要的檔案。 如果要使用Java建立客戶端應用程式,請包括必要的JAR檔案。 如果您使用web services,請加入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表格

使用web service API,使用自訂工具列轉譯HTML表格

包含AEM Forms Java程式庫檔案

設定連接屬性

Forms Service API快速入門

轉換互動式PDF表單

將表單轉換為HTML

建立轉譯表單的Web應用程式

使用Java API轉換具有自訂工具列的HTML表格

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

  1. 包含專案檔案

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

  2. 建立Forms Java API物件

    • 建立包含連接屬性的ServiceClientFactory對象。
    • 使用其建構子並傳遞ServiceClientFactory對象,建立FormsServiceClient對象。
  3. 參考自訂fscmenu XML檔案

    • 使用其建構子建立HTMLRenderSpec對象。
    • 若要使用工具列來轉換HTML表格,請叫用HTMLRenderSpec物件的setHTMLToolbar方法並傳遞HTMLToolbar列舉值。 例如,若要顯示垂直HTML工具列,請傳遞HTMLToolbar.Vertical
    • 調用HTMLRenderSpec物件的setToolbarURI方法並傳遞指定XML檔案URI位置的字串值,以指定fscmenu XML檔案的位置。
    • 如果適用,請調用HTMLRenderSpec物件的setLocale方法並傳遞指定地區值的字串值,以設定地區值。 預設值為英文。
    注意

    與此部分關聯的快速啟動將此值設定為​fr_FR

  4. 轉換HTML表格

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

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

    renderHTMLForm方法返回一個FormsResult對象,該對象包含必須寫入客戶端Web瀏覽器的表單資料流。

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

    • 通過調用FormsResult對象「s getOutputContent」方法建立com.adobe.idp.Document對象。
    • 通過調用getContentType方法獲取com.adobe.idp.Document對象的內容類型。
    • 調用setContentType方法並傳遞com.adobe.idp.Document物件的內容類型,以設定javax.servlet.http.HttpServletResponse物件的內容類型。
    • 建立javax.servlet.ServletOutputStream物件,以叫用javax.servlet.http.HttpServletResponse物件的getOutputStream方法,將表單資料串流寫入用戶端Web瀏覽器。
    • 調用com.adobe.idp.Document物件的getInputStream方法,以建立java.io.InputStream物件。
    • 建立位元組陣列,並以InputStream物件的read方法來填入表單資料流,並將位元組陣列傳入為引數。
    • 叫用javax.servlet.ServletOutputStream物件的write方法,將表單資料串流傳送至用戶端網頁瀏覽器。 將位元組陣列傳遞到write方法。

另請參閱

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

包含AEM Forms Java程式庫檔案

設定連接屬性

使用web service API轉換具有自訂工具列的HTML表單

使用Forms Service API(web service)演算包含自訂工具列的HTML表格:

  1. 包含專案檔案

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

    建立FormsService對象並設定驗證值。

  3. 參考自訂fscmenu XML檔案

    • 使用其建構子建立HTMLRenderSpec對象。
    • 若要使用工具列來轉換HTML表格,請叫用HTMLRenderSpec物件的setHTMLToolbar方法並傳遞HTMLToolbar列舉值。 例如,若要顯示垂直HTML工具列,請傳遞HTMLToolbar.Vertical
    • 調用HTMLRenderSpec物件的setToolbarURI方法並傳遞指定XML檔案URI位置的字串值,以指定fscmenu XML檔案的位置。
    • 如果適用,請調用HTMLRenderSpec物件的setLocale方法並傳遞指定地區值的字串值,以設定地區值。 預設值為英文。
    注意

    與此部分關聯的快速啟動將此值設定為​fr_FR

  4. 轉換HTML表格

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

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

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

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

    • 獲取com.adobe.idp.services.holders.FormsResultHolder對象value資料成員的值,建立FormResult對象。
    • 呼叫FormsResult物件的getOutputContent方法,建立包含表單資料的BLOB物件。
    • 通過調用getContentType方法獲取BLOB對象的內容類型。
    • 調用setContentType方法並傳遞BLOB物件的內容類型,以設定javax.servlet.http.HttpServletResponse物件的內容類型。
    • 建立javax.servlet.ServletOutputStream物件,以叫用javax.servlet.http.HttpServletResponse物件的getOutputStream方法,將表單資料串流寫入用戶端Web瀏覽器。
    • 建立位元組陣列,並呼叫BLOB物件的getBinaryData方法以填入它。 此任務將FormsResult對象的內容分配給位元組陣列。
    • 叫用javax.servlet.http.HttpServletResponse物件的write方法,將表單資料串流傳送至用戶端網頁瀏覽器。 將位元組陣列傳遞到write方法。

另請參閱

使用Base64編碼叫用AEM Forms

本頁內容