使用自定义工具栏呈现HTMLForms

上次更新: 2023-05-04
  • 创建对象:
  • Developer
注意

AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

使用自定义工具栏呈现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\ 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服务能够找到这些文件。 默认情况下,这些文件可在以内部关键字开头的URI位置使用 FSWebRootApplicationWebRoot.

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

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

注意

不建议将引用这些文件的方式混合使用。 即,所有URI都应使用 FSToolBarURI 关键字或绝对位置。

您可以通过打开adobe-forms-<appserver>.ear文件。 在此文件中,打开adobe-forms-res.war。 所有这些文件都位于WAR文件中。 adobe-forms-<appserver>.ear文件位于AEM forms安装文件夹(C:\ is the installation directory)中。 您可以打开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。

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

  • 更改 fscJS, fscCSS, fscVCSS, fscIECSS 属性(在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 方法和传递指定区域设置值的字符串值。 例如,pass 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位置的字符串值。
    • 如果适用,请通过调用 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. 将表单数据流写入客户端Web浏览器

    • 创建 com.adobe.idp.Document 对象 FormsResult 对象s getOutputContent 方法。
    • 获取的内容类型 com.adobe.idp.Document 通过调用对象 getContentType 方法。
    • 设置 javax.servlet.http.HttpServletResponse 对象的内容类型(通过调用 setContentType 方法和传递 com.adobe.idp.Document 对象。
    • 创建 javax.servlet.ServletOutputStream 用于通过调用将表单数据流写入客户端web浏览器的对象 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库文件

设置连接属性

使用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位置的字符串值。
    • 如果适用,请通过调用 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. 将表单数据流写入客户端Web浏览器

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

另请参阅

使用Base64编码调用AEM Forms

在此页面上