使用CustomToolbars渲染HTMLForms rendering-html-forms-with-customtoolbars

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined

本文档中的示例和示例仅适用于JEE环境上的AEM Forms。

使用自定义工具栏呈现HTMLForms rendering-html-forms-with-custom-toolbars

Forms服务允许您自定义使用HTML表单呈现的工具栏。可以自定义工具栏以通过覆盖默认CSS样式来更改其外观，以及通过覆盖Java脚本来添加动态行为。使用名为fscmenu.xml的XML文件自定义工具栏。默认情况下，Forms服务从内部指定的URI位置检索此文件。

NOTE

此URI位置位于adobe-forms-core.jar文件中，该文件位于adobe-forms-dsc.jar文件中。 adobe-forms-dsc.jar文件位于C:\Adobe\Adobe_Experience_Manager_forms\文件夹中(C:\是安装目录)。您可以使用文件提取工具（如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位置使用，以内部关键字FSWebRoot或ApplicationWebRoot开头。

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

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

NOTE

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

您可以通过打开adobe-forms-<appserver>.ear文件来获取JS和CSS文件。在此文件中，打开adobe-forms-res.war。所有这些文件都在WAR文件中。 adobe-forms-<appserver>.ear文件位于AEM forms安装文件夹中(C:\是安装目录)。您可以使用文件提取工具（如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>

NOTE

粗体文本表示必须引用的CSS和JS文件的URI。

以下项目介绍了自定义工具栏的方法：

使用本节中介绍的方法之一（例如，fscJS="FSToolBarURI/scripts/fscmenu.js"）更改fscJS、fscCSS、fscVCSS、fscIECSS属性的值（在fscmenu.xml文件中）以反映引用文件的自定义位置。
必须指定所有CSS和JS文件。如果未修改任何文件，请在自定义位置提供默认文件。通过打开本节中描述的各种文件，可以获取默认文件。
允许为任何文件提供绝对引用(例如，https://www.example.com/scripts/custom-vertical-fscmenu.css)。
div#fscmenu节点所需的JS和CSS文件对于工具栏功能至关重要。单个ul#fscmenuItem节点可能具有或不具有支持的JS或CSS文件。

更改本地值

作为自定义工具栏的一部分，您可以更改工具栏的区域设置值。也就是说，可以用另一种语言显示它。下图显示了一个以法语显示的自定义工具栏。

NOTE

无法创建使用多种语言的自定义工具栏。工具栏不能根据区域设置使用不同的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>

NOTE

与此部分关联的“快速入门”使用此XML文件来显示法文自定义工具栏，如上图所示。

此外，通过调用HTMLRenderSpec对象的setLocale方法并传递指定区域设置值的字符串值，可指定有效的区域设置值。例如，传递fr_FR以指定法语。 Forms服务与本地化的工具栏捆绑在一起。

NOTE

在呈现使用自定义工具栏的HTML表单之前，您必须了解HTML表单的呈现方式。 (请参阅将Forms渲染为HTML。)

有关Forms服务的详细信息，请参阅AEM Forms的服务参考。

步骤摘要 summary-of-steps

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

包括项目文件。
创建Forms Java API对象。
引用自定义fscmenu XML文件。
呈现HTML表单。
将表单数据流写入客户端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表单

使用Forms服务API (Java)呈现包含自定义工具栏的HTML表单：

包含项目文件

在Java项目的类路径中包含客户端JAR文件，例如adobe-forms-client.jar。
创建Forms Java API对象
- 创建包含连接属性的ServiceClientFactory对象。
- 使用对象的构造函数创建FormsServiceClient对象并传递ServiceClientFactory对象。

引用自定义fscmenu XML文件

使用构造函数创建HTMLRenderSpec对象。
若要使用工具栏呈现HTML表单，请调用HTMLRenderSpec对象的setHTMLToolbar方法并传递HTMLToolbar枚举值。例如，要显示垂直HTML工具栏，请传递HTMLToolbar.Vertical。
通过调用HTMLRenderSpec对象的setToolbarURI方法并传递指定XML文件的URI位置的字符串值，指定fscmenu XML文件的位置。
如果适用，请通过调用HTMLRenderSpec对象的setLocale方法并传递指定区域设置值的字符串值来设置区域设置值。默认值为English。

note note
NOTE
与此部分关联的快速启动将此值设置为`fr_FR`。

呈现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浏览器的表单数据流。
将表单数据流写入客户端Web浏览器
- 通过调用FormsResult对象的getOutputContent方法创建com.adobe.idp.Document对象。
- 通过调用其getContentType方法获取com.adobe.idp.Document对象的内容类型。
- 通过调用其setContentType方法并传递com.adobe.idp.Document对象的内容类型来设置javax.servlet.http.HttpServletResponse对象的内容类型。
- 通过调用javax.servlet.http.HttpServletResponse对象的getOutputStream方法，创建用于将表单数据流写入客户端Web浏览器的javax.servlet.ServletOutputStream对象。
- 通过调用com.adobe.idp.Document对象的getInputStream方法创建java.io.InputStream对象。
- 通过调用InputStream对象的read方法并将字节数组作为参数传递，创建字节数组并使用表单数据流填充该数组。
- 调用javax.servlet.ServletOutputStream对象的write方法将表单数据流发送到客户端Web浏览器。将字节数组传递给write方法。

另请参阅

快速入门(SOAP模式)：使用Java API通过自定义工具栏呈现HTML表单

包括AEM Forms Java库文件

设置连接属性

使用Forms服务API（Web服务）呈现包含自定义工具栏的HTML表单：

包含项目文件
- 创建使用Forms服务WSDL的Java代理类。
- 在类路径中包含Java代理类。
创建Forms Java API对象

创建FormsService对象并设置身份验证值。

引用自定义fscmenu XML文件

使用构造函数创建HTMLRenderSpec对象。
若要使用工具栏呈现HTML表单，请调用HTMLRenderSpec对象的setHTMLToolbar方法并传递HTMLToolbar枚举值。例如，要显示垂直HTML工具栏，请传递HTMLToolbar.Vertical。
通过调用HTMLRenderSpec对象的setToolbarURI方法并传递指定XML文件的URI位置的字符串值，指定fscmenu XML文件的位置。
如果适用，请通过调用HTMLRenderSpec对象的setLocale方法并传递指定区域设置值的字符串值来设置区域设置值。默认值为English。

note note
NOTE
与此部分关联的快速启动将此值设置为`fr_FR`。

呈现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对象。
将表单数据流写入客户端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方法，创建用于将表单数据流写入客户端Web浏览器的javax.servlet.ServletOutputStream对象。
- 创建字节数组，并通过调用BLOB对象的getBinaryData方法填充该数组。此任务将FormsResult对象的内容分配给字节数组。
- 调用javax.servlet.http.HttpServletResponse对象的write方法将表单数据流发送到客户端Web浏览器。将字节数组传递给write方法。

另请参阅

使用Base64编码调用AEM Forms

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2

使用CustomToolbars渲染HTMLForms rendering-html-forms-with-customtoolbars

使用自定义工具栏呈现HTMLForms rendering-html-forms-with-custom-toolbars

步骤摘要 summary-of-steps

使用Java API呈现具有自定义工具栏的HTML表单 render-an-html-form-with-a-custom-toolbar-using-the-java-api

使用Web服务API通过自定义工具栏呈现HTML表单 rendering-an-html-form-with-a-custom-toolbar-using-the-web-service-api