建立轉換Forms的Web應用程式

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

建立轉換Forms的Web應用程式

您可以建立使用Java servlet來叫用Forms服務和轉換表單的Web應用程式。 使用Java™ servlet的好處是,您可以將進程的返回值寫入客戶端Web瀏覽器。 也就是說,Java servlet可用作傳回表單的Forms服務與用戶端網頁瀏覽器之間的連結。

注意

本節介紹如何建立基於Web的應用程式,該應用程式使用調用Forms服務並基於片段呈現表單的Java servlet。 (請參閱根據片段呈現Forms。)

使用Java servlet,您可以將表單寫入客戶端Web瀏覽器,以便客戶可以查看表單並在表單中輸入資料。 在將資料填入表單後,Web使用者會按一下表單上的提交按鈕,將資訊傳回Java servlet,在Java servlet中可擷取和處理資料。 例如,資料可以傳送至另一個程式。

本節討論如何建立以Web為基礎的應用程式,讓使用者選擇以美國為基礎的表單資料或以加拿大為基礎的表單資料,如下圖所示。

cw_cw_fragmentwebclient

呈現的表單是以片段為基礎的表單。 也就是說,如果使用者選擇美國資料,則傳回的表格會根據美國資料使用片段。 例如,表單的頁尾包含美國地址,如下圖所示。

cw_cw_fragementfooter

同樣地,如果使用者選擇加拿大資料,則傳回的表格會包含加拿大地址,如下圖所示。

cw_cw_fragementformfootercnd

注意

如需建立以片段為基礎的表單設計的詳細資訊,請參閱Forms設計人員

範例檔案

本節使用可位於以下位置的示例檔案:

<>Forms設計人員安裝目錄​>/範例/Forms/採購單/表單片段

其中, <install directory>是安裝路徑。 就客戶端應用程式而言,Purchase Order Dynamic.xdp檔案從此安裝位置複製並部署到名為​Applications/FormsApplication​的Forms應用程式。 Purchase Order Dynamic.xdp檔案會放在名為FormsFolder的檔案夾中。 同樣地,這些片段會放在名為「片段」的檔案夾中,如下圖所示。

cw_cw_fraguments儲存庫

要訪問Purchase Order Dynamic.xdp表單設計,請指定Applications/FormsApplication/1.0/FormsFolder/Purchase Order Dynamic.xdp作為表單名稱(傳遞至renderPDFForm方法的第一個參數),並指定repository:///作為內容根URI值。

Web應用程式使用的XML資料檔案已從「資料」檔案夾移至C:\Adobe(屬於代管AEM Forms的J2EE應用程式伺服器的檔案系統)。 檔案名稱為採購單​Canada.xml​和採購單​US.xml

注意

有關使用Workbench建立Forms應用程式的資訊,請參閱workbench幫助

步驟摘要

若要建立以Web為基礎的應用程式,並根據片段轉譯表單,請執行下列步驟:

  1. 建立新的網頁專案。
  2. 建立代表Java servlet的Java應用程式邏輯。
  3. 為Web應用程式建立網頁。
  4. 將Web應用程式打包到WAR檔案。
  5. 將WAR檔案部署至J2EE應用程式伺服器。
  6. 測試您的Web應用程式。
注意

其中有些步驟取決於部署AEM Forms的J2EE應用程式。 例如,您用來部署WAR檔案的方法取決於您使用的J2EE應用程式伺服器。 本節假設AEM Forms部署在JBoss®上。

建立Web項目

建立包含Java servlet且可以叫用Forms服務的Web應用程式的第一步,就是建立新的Web專案。 本檔案所基於的Java IDE是Eclipse 3.3。使用Eclipse IDE,建立Web項目並將所需的JAR檔案添加到項目中。 最後,將名為​index.html​的HTML頁面和Java servlet新增至您的專案。

以下清單指定必須添加到Web項目的JAR檔案:

  • adobe-forms-client.jar
  • adobe-livecycle-client.jar
  • adobe-usermanager-client.jar
  • adobe-utilities.jar

有關這些JAR檔案的位置,請參見包括AEM FormsJava庫檔案

若要建立Web專案:

  1. 啟動Eclipse,然後按一下「檔案​ > 新專案」。
  2. 在​新建項目​對話框中,選擇​Web > 動態Web項目
  3. 鍵入FragmentsWebApplication作為項目名稱,然後按一下​完成

要將所需的JAR檔案添加到項目中,請執行以下操作:

  1. 在「項目瀏覽器」窗口中,按一下右鍵FragmentsWebApplication項目,然後選擇​屬性
  2. 按一下​Java組建路徑 ,然後按一下​​頁籤。
  3. 按一下​添加外部JAR​按鈕並瀏覽至要包含的JAR檔案。

要將Java Servlet添加到項目中,請執行以下操作:

  1. 在「項目瀏覽器」窗口中,按一下右鍵FragmentsWebApplication項目,然後選擇「新建」>「其他」
  2. 展開​Web​資料夾,選擇​Servlet ,然後按一下​Next
  3. 在「建立Servlet」對話框中,鍵入RenderFormFragment作為servlet的名稱,然後按一下​完成

若要新增HTML頁面至您的專案:

  1. 在「項目瀏覽器」窗口中,按一下右鍵FragmentsWebApplication項目,然後選擇「新建」>「其他」
  2. 展開​Web​資料夾,選擇​HTML ,然後按一下​Next
  3. 在「新建HTML」對話框中,鍵入index.html作為檔案名,然後按一下​完成
注意

有關建立調用RenderFormFragment Java servlet的HTML頁的資訊,請參閱建立網頁

為servlet建立Java應用程式邏輯

您可以在Java servlet內建立調用Forms服務的Java應用程式邏輯。 以下代碼顯示RenderFormFragment Java Servlet的語法:

     public class RenderFormFragment extends HttpServlet implements Servlet {
         public void doGet(HttpServletRequest req, HttpServletResponse resp
         throws ServletException, IOException {
         doPost(req,resp);
 
         }
         public void doPost(HttpServletRequest req, HttpServletResponse resp
         throws ServletException, IOException {
             //Add code here to invoke the Forms service
             }

通常,您不會將用戶端程式碼置於Java servlet的doGetdoPost方法中。 更好的程式設計實務是將此程式碼放在個別的類別中、從doPost方法(或doGet方法)實例化類別,並呼叫適當的方法。 但是,對於代碼簡寫,本節中的代碼示例將保持在最小值,代碼示例將放在doPost方法中。

若要使用Forms服務API根據片段來呈現表單,請執行下列工作:

  1. 在Java專案的類別路徑中包含用戶端JAR檔案,例如adobe-forms-client.jar。 有關這些檔案位置的資訊,請參見包括AEM FormsJava庫檔案

  2. 擷取從HTML表單提交的選項按鈕值,並指定使用美國或加拿大資料。 如果提交美國文,請建立com.adobe.idp.Document,以儲存位於​採購單US.xml​中的資料。 同樣地,如果是加拿大人,請建立一個com.adobe.idp.Document,儲存位於​Purchase Order Canada.xml​檔案中的資料。

  3. 建立包含連接屬性的ServiceClientFactory對象。 (請參閱設定連接屬性。)

  4. 使用其建構子並傳遞ServiceClientFactory對象,建立FormsServiceClient對象。

  5. 使用URLSpec的建構函式建立儲存URI值的物件。

  6. 叫用URLSpec物件的setApplicationWebRoot方法,並傳遞代表應用程式Web根目錄的字串值。

  7. 叫用URLSpec物件的setContentRootURI方法,並傳遞指定內容根URI值的字串值。 請確定表單設計和片段位於內容根URI中。 如果沒有,Forms服務會提出例外。 要引用AEM Forms儲存庫,請指定repository://

  8. 叫用URLSpec物件的setTargetURL方法,並傳遞字串值,指定表單資料張貼到的目標URL值。 如果您在表單設計中定義目標URL,則可以傳遞空字串。 您也可以指定表單傳送至的URL,以便執行計算。

  9. 叫用FormsServiceClient物件的renderPDFForm方法並傳遞下列值:

    • 指定表單設計名稱的字串值,包括檔案副檔名。
    • com.adobe.idp.Document物件,包含要與表單合併的資料(在步驟2中建立)。
    • 儲存運行時選項的PDFFormRenderSpec對象。 如需詳細資訊,請參閱AEM FormsAPI參考
    • URLSpec物件,包含Forms服務根據片段來呈現表單所需的URI值。
    • 儲存檔案附件的java.util.HashMap對象。 此為可選參數,如果您不想將檔案附加到表單,可以指定null

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

  10. 通過調用FormsResult對象「s getOutputContent」方法建立com.adobe.idp.Document對象。

  11. 通過調用getContentType方法獲取com.adobe.idp.Document對象的內容類型。

  12. 調用setContentType方法並傳遞com.adobe.idp.Document物件的內容類型,以設定javax.servlet.http.HttpServletResponse物件的內容類型。

  13. 呼叫javax.servlet.http.HttpServletResponse物件的getOutputStream方法,建立javax.servlet.ServletOutputStream物件,用來將表單資料串流寫入用戶端Web瀏覽器。

  14. 調用com.adobe.idp.Document物件的getInputStream方法,以建立java.io.InputStream物件。

  15. 通過調用InputStream對象的read方法並將位元組陣列作為引數傳遞,建立以表單資料流填充的位元組陣列。

  16. 叫用javax.servlet.ServletOutputStream物件的write方法,將表單資料串流傳送至用戶端網頁瀏覽器。 將位元組陣列傳遞到write方法。

以下代碼示例表示調用Forms服務並基於片段呈現表單的Java servlet。

 /*
     * This Java Quick Start uses the following JAR files
     * 1. adobe-forms-client.jar
     * 2. adobe-livecycle-client.jar
     * 3. adobe-usermanager-client.jar
     *
     * (Because Forms quick starts are implemented as Java servlets, it is
     * not necessary to include J2EE specific JAR files - the Java project
     * that contains this quick start is exported as a WAR file which
     * is deployed to the J2EE application server)
     *
     * These JAR files are located in the following path:
     * <install directory>/sdk/client-libs
     *
     * For complete details about the location of these JAR files,
     * see "Including AEM Forms library files" in Programming with AEM forms
     */
 import java.io.File;
 import java.io.FileInputStream;
 import java.io.IOException;
 import java.io.PrintWriter;
 
 import javax.servlet.Servlet;
 import javax.servlet.ServletException;
 import javax.servlet.ServletOutputStream;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import com.adobe.livecycle.formsservice.client.*;
 import java.util.*;
 import java.io.InputStream;
 import java.net.URL;
 
 import com.adobe.idp.Document;
 import com.adobe.idp.dsc.clientsdk.ServiceClientFactory;
 import com.adobe.idp.dsc.clientsdk.ServiceClientFactoryProperties;
 
 public class RenderFormFragment extends HttpServlet implements Servlet {
 
     public void doGet(HttpServletRequest req, HttpServletResponse resp)
         throws ServletException, IOException {
             doPost(req,resp);
 
     }
     public void doPost(HttpServletRequest req, HttpServletResponse resp)
     throws ServletException, IOException {
 
 
 
         try{
             //Set connection properties required to invoke AEM Forms
             Properties connectionProps = new Properties();
             connectionProps.setProperty(ServiceClientFactoryProperties.DSC_DEFAULT_SOAP_ENDPOINT, "https://'[server]:[port]'");
             connectionProps.setProperty(ServiceClientFactoryProperties.DSC_TRANSPORT_PROTOCOL,ServiceClientFactoryProperties.DSC_SOAP_PROTOCOL);
             connectionProps.setProperty(ServiceClientFactoryProperties.DSC_SERVER_TYPE, "JBoss");
             connectionProps.setProperty(ServiceClientFactoryProperties.DSC_CREDENTIAL_USERNAME, "administrator");
             connectionProps.setProperty(ServiceClientFactoryProperties.DSC_CREDENTIAL_PASSWORD, "password");
 
             //Get the value of selected radio button
             String radioValue = req.getParameter("radio");
 
             //Create an Document object to store form data
             Document oInputData = null;
 
             //The value of the radio button determines the form data to use
             //which determines which fragments used in the form
             if (radioValue.compareTo("AMERICAN") == 0)            {
                 FileInputStream myData = new FileInputStream("C:\\Adobe\Purchase Order US.xml");
                 oInputData = new Document(myData);
             }
             else if (radioValue.compareTo("CANADIAN") == 0)            {
                 FileInputStream myData = new FileInputStream("C:\\Adobe\Purchase Order Canada.xml");
                 oInputData = new Document(myData);
             }
 
             //Create a ServiceClientFactory object
             ServiceClientFactory myFactory = ServiceClientFactory.createInstance(connectionProps);
 
             //Create a FormsServiceClient object
             FormsServiceClient formsClient = new FormsServiceClient(myFactory);
 
             //Set the parameter values for the renderPDFForm method
             String formName = "Applications/FormsApplication/1.0/FormsFolder/Purchase Order Dynamic.xdp";
 
             //Cache the PDF form
             PDFFormRenderSpec pdfFormRenderSpec = new PDFFormRenderSpec();
             pdfFormRenderSpec.setCacheEnabled(new Boolean(true));
 
             //Specify URI values that are required to render a form
             //design based on fragments
             URLSpec uriValues = new URLSpec();
             uriValues.setApplicationWebRoot("https://'[server]:[port]'/RenderFormFragment");
             uriValues.setContentRootURI("repository:///");
             uriValues.setTargetURL("https://'[server]:[port]'/FormsServiceClientApp/HandleData");
 
             //Invoke the renderPDFForm method and write the
             //results to a client web browser
             FormsResult formOut = formsClient.renderPDFForm(
                         formName,               //formQuery
                         oInputData,             //inDataDoc
                         pdfFormRenderSpec,      //PDFFormRenderSpec
                         uriValues,                //urlSpec
                         null                    //attachments
                         );
 
             //Create a Document object that stores form data
             Document myData = formOut.getOutputContent();
 
             //Get the content type of the response and
             //set the HttpServletResponse object’s content type
             String contentType = myData.getContentType();
             resp.setContentType(contentType);
 
             //Create a ServletOutputStream object
             ServletOutputStream oOutput = resp.getOutputStream();
 
             //Create an InputStream object
             InputStream inputStream = myData.getInputStream();
 
             //Write the data stream to the web browser
             byte[] data = new byte[4096];
             int bytesRead = 0;
             while ((bytesRead = inputStream.read(data)) > 0)
             {
                 oOutput.write(data, 0, bytesRead);
             }
 
         }catch (Exception e) {
              System.out.println("The following exception occurred: "+e.getMessage());
       }
     }
 }

建立網頁

index.html網頁提供Java servlet的入口點,並調用Forms服務。 此網頁是基本的HTML表單,包含兩個選項按鈕和一個提交按鈕。 選項按鈕的名稱是單選按鈕。 當使用者按一下提交按鈕時,表單資料會張貼至RenderFormFragment Java servlet。

Java servlet會使用下列Java程式碼,從HTML頁面擷取張貼的資料:

             Document oInputData = null;
 
             //Get the value of selected radio button
             String radioValue = req.getParameter("radio");
 
             //The value of the radio button determines the form data to use
             //which determines which fragments used in the form
             if (radioValue.compareTo("AMERICAN") == 0)            {
                 FileInputStream myData = new FileInputStream("C:\\Adobe\Purchase Order US.xml");
                 oInputData = new Document(myData);
             }
             else if (radioValue.compareTo("CANADIAN") == 0)            {
                 FileInputStream myData = new FileInputStream("C:\\Adobe\Purchase Order Canada.xml");
                 oInputData = new Document(myData);
             }

以下HTML程式碼位於在設定開發環境時建立的index.html檔案中。 (請參閱建立Web項目。)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body>
 <form name="myform" action="https://'[server]:[port]'/FragmentsWebApplication/RenderFormFragment" method="post">
      <table>
      <tr>
        <th>Forms Fragment Web Client</th>
      </tr>
      <tr>
        <td>
          <label>
          <input type="radio" name="radio" id="radio_Data" value="CANADIAN" />
          Canadian data<br />
          </label>
          <p>
            <label>
            <input type="radio" name="radio" id="radio_Data" value="AMERICAN" checked/>
            American data</label>
          </p>
        </td>
      </tr>
      <tr>
      <td>
        <label>
          <input type="submit" name="button_Submit" id="button_Submit" value="Submit" />
            </label>
            </td>
         </tr>
        </table>
      </form>
 </body>
 </html>

打包Web應用程式

要部署調用Forms服務的Java Servlet,請將Web應用程式打包到WAR檔案。 請確定WAR檔案中也包含元件商業邏輯所依賴的外部JAR檔案,例如adobe-livecycle-client.jar和adobe-forms-client.jar。

要將Web應用程式打包到WAR檔案:

  1. 在​項目瀏覽器​窗口中,按一下右鍵FragmentsWebApplication項目並選擇​導出 > WAR檔案
  2. 在​Web模組​文本框中,鍵入FragmentsWebApplication作為Java項目的名稱。
  3. 在​Destination​文本框中,鍵入​FragmentsWebApplication.war作為​檔案名,指定WAR檔案的位置,然後按一下「Finish(完成)」。

將WAR檔案部署到J2EE應用程式伺服器

您可將WAR檔案部署至部署了AEM Forms的J2EE應用程式伺服器。 部署WAR檔案後,您可以使用Web瀏覽器訪問HTML網頁。

要將WAR檔案部署到J2EE應用程式伺服器,請執行以下操作:

  • 將WAR檔案從導出路徑複製到[Forms Install]\Adobe\Adobe Experience Manager Forms\jboss\server\all\deploy

測試您的Web應用程式

部署Web應用程式後,您可以使用Web瀏覽器來測試它。 假設您使用的是裝載AEM Forms的同一部電腦,您可以指定下列URL:

  • http://localhost:8080/FragmentsWebApplication/index.html

    選擇單選按鈕,然後按一下「提交」按鈕。 網頁瀏覽器中會顯示以片段為基礎的表單。 如果發生問題,請查看J2EE應用程式伺服器的記錄檔。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now