建立可呈現Forms的Web應用程式

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

建立可呈現Forms的Web應用程式

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

注意

本節說明如何建立使用Java servlet的網頁型應用程式,此Java servlet會叫用Forms服務並轉譯以片段為基礎的表單。 (請參閱根據片段呈現Forms。)

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

本節探討如何建立基於Web的應用程式,以便用戶選擇基於美國的表單資料或基於加拿大的表單資料,如下圖所示。

cw_cw_fragmentwebclient

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

cw_cw_framementfooter

同樣,如果用戶選擇加拿大資料,則返回的表單包含加拿大地址,如下圖所示。

cw_cw_framementformfootercnd

注意

如需根據片段建立表單設計的相關資訊,請參閱Forms Designer

範例檔案

本節使用的範例檔案可位於下列位置:

<>Forms Designer安裝目錄​>/範例/Forms/採購訂單/表單片段

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

cw_cw_fragments儲存庫

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

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

注意

如需使用Workbench建立Forms應用程式的相關資訊,請參閱Workbench說明

步驟的摘要

要建立基於Web的應用程式,以根據片段來呈現表單,請執行以下步驟:

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

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

建立Web項目

要建立包含可叫用Forms服務的Java Servlet的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 Forms Java庫檔案

要建立Web項目,請執行以下操作:

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

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

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

若要將Java servlet新增至專案:

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

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

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

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

為servlet建立Java應用程式邏輯

您可以建立Java應用程式邏輯,從Java servlet內叫用Forms服務。 以下代碼顯示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 Forms Java庫檔案

  2. 擷取從HTML表單提交之選項按鈕的值,並指定使用美國或加拿大資料。 如果提交了American,請建立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 Forms API參考
    • 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方法,建立用於將表單資料流寫入客戶端Web瀏覽器的javax.servlet.ServletOutputStream對象。

  14. 調用com.adobe.idp.Document對象的getInputStream方法,建立java.io.InputStream對象。

  15. 叫用InputStream物件的read方法並將位元組陣列傳遞為引數,以填入表單資料流的位元組陣列。

  16. 調用javax.servlet.ServletOutputStream對象的write方法,將表單資料流發送到客戶端Web瀏覽器。 將位元組陣列傳遞至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檔案。 請確定元件商業邏輯所依賴的外部JAR檔案,例如adobe-livecycle-client.jar和adobe-forms-client.jar,也包含在WAR檔案中。

要將Web應用程式打包為WAR檔案,請執行以下操作:

  1. 在​Project Explorer​窗口中,按一下右鍵FragmentsWebApplication項目並選擇​Export > WAR檔案
  2. 在​Web模組​文本框中,鍵入FragmentsWebApplication作為Java項目的名稱。
  3. 在​目標​文本框中,鍵入​FragmentsWebApplication.war作為​檔案名,指定WAR檔案的位置,然後按一下完成。

將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應用程式伺服器的日誌檔案。

本頁內容