使用CustomToolbars渲染HTML Forms

使用自定义工具栏渲染HTML Forms

利用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服务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服务能够找到这些文件。 默认情况下，这些文件位于以内部关键字FSWebRoot或ApplicationWebRoot开头的URI位置。

要自定义工具栏，请使用外部关键词FSToolBarURI替换关键词。 此关键字表示在运行时传递到Forms服务的URI（此方法将在此部分稍后显示）。

您还可以指定这些JS和CSS文件的绝对位置，如https://www.mycompany.com/scripts/misc/fscmenu.js。 在这种情况下，您无需使用FSToolBarURI关键字。

注意

不建议将引用这些文件的方式混合使用。 也就是说，所有URI都应使用FSToolBarURI关键字或绝对位置来引用。

您可以通过打开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。

以下项目介绍了如何自定义工具栏：

  • 更改fscJS、fscCSS、fscVCSS、fscIECSS属性的值（在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表单的渲染方式。 (请参阅将Forms渲染为HTML。)

有关Forms服务的更多信息，请参阅AEM Forms的服务参考。

步骤的摘要

要渲染包含自定义工具栏的HTML表单，请执行以下任务：

  1. 包括项目文件。
  2. 创建Forms Java API对象。
  3. 引用自定义fscmenu XML文件。
  4. 渲染HTML表单。
  5. 将表单数据流写入客户端Web浏览器。

包含项目文件

在开发项目中包含必需的文件。 如果您使用Java创建客户端应用程序，请包含必需的JAR文件。 如果您使用的是Web服务，请包含代理文件。

创建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值。

将表单数据流写入客户端Web浏览器

当Forms服务呈现HTML表单时，它会返回一个表单数据流，您必须将该数据流写入客户端Web浏览器，以使用户能够看到HTML表单。

另请参阅

使用Java API呈现带有自定义工具栏的HTML表单

使用Web服务API呈现带有自定义工具栏的HTML表单

包括AEM Forms Java库文件

设置连接属性

Forms Service API快速入门

呈现交互式PDF forms

将Forms渲染为HTML

创建可渲染Forms的Web应用程序

使用Java API渲染带有自定义工具栏的HTML表单

使用Forms服务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位置的字符串值，指定fscmenu XML文件的位置。
    • 如果适用，请通过调用HTMLRenderSpec对象的setLocale方法并传递指定区域设置值的字符串值来设置区域设置值。 默认值为英语。
    注意

    与此部分关联的快速入门会将此值设置为​fr_FR。

  4. 渲染HTML表单

    调用FormsServiceClient对象的renderHTMLForm方法并传递以下值：

    • 指定表单设计名称（包括文件扩展名）的字符串值。 如果您引用的表单设计是Forms应用程序的一部分，请确保指定完整路径，如Applications/FormsApplication/1.0/FormsFolder/Loan.xdp。
    • 指定HTML首选项类型的TransformTo枚举值。 例如，要渲染与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. 将表单数据流写入客户端Web浏览器

    • 通过调用FormsResult对象“s getOutputContent”方法创建com.adobe.idp.Document对象。
    • 通过调用getContentType方法获取com.adobe.idp.Document对象的内容类型。
    • 通过调用setContentType方法并传递com.adobe.idp.Document对象的内容类型来设置javax.servlet.http.HttpServletResponse对象的内容类型。
    • 通过调用javax.servlet.http.HttpServletResponse对象的getOutputStream方法，创建一个javax.servlet.ServletOutputStream对象，该对象用于将表单数据流写入客户端Web浏览器。
    • 通过调用com.adobe.idp.Document对象的getInputStream方法创建java.io.InputStream对象。
    • 通过调用InputStream对象的read方法并将字节数组作为参数传递，创建一个字节数组并用表单数据流填充该数组。
    • 调用javax.servlet.ServletOutputStream对象的write方法，将表单数据流发送到客户端Web浏览器。 将字节数组传递到write方法。

另请参阅

快速入门（SOAP模式）：使用Java API呈现带有自定义工具栏的HTML表单

包括AEM Forms Java库文件

设置连接属性

使用Web服务API呈现带有自定义工具栏的HTML表单

使用Forms服务API（Web服务）渲染包含自定义工具栏的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。
    • 指定HTML首选项类型的TransformTo枚举值。 例如，要渲染与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方法使用必须写入客户端Web浏览器的表单数据流填充作为最后一个参数值传递的com.adobe.idp.services.holders.FormsResultHolder对象。

  5. 将表单数据流写入客户端Web浏览器

    • 通过获取com.adobe.idp.services.holders.FormsResultHolder对象value数据成员的值，创建FormResult对象。
    • 通过调用FormsResult对象的getOutputContent方法，创建包含表单数据的BLOB对象。
    • 通过调用getContentType方法获取BLOB对象的内容类型。
    • 通过调用setContentType方法并传递BLOB对象的内容类型来设置javax.servlet.http.HttpServletResponse对象的内容类型。
    • 通过调用javax.servlet.http.HttpServletResponse对象的getOutputStream方法，创建一个javax.servlet.ServletOutputStream对象，该对象用于将表单数据流写入客户端Web浏览器。
    • 创建一个字节数组，并通过调用BLOB对象的getBinaryData方法来填充该数组。 此任务将FormsResult对象的内容分配给字节数组。
    • 调用javax.servlet.http.HttpServletResponse对象的write方法，将表单数据流发送到客户端Web浏览器。 将字节数组传递到write方法。

另请参阅

使用Base64编码调用AEM Forms

在此页面上