Rendu de HTML Forms avec des barres d’outils personnalisées

Les exemples et les exemples de ce document sont réservés à l’environnement AEM Forms on JEE.

Rendu de HTML Forms avec des barres d’outils personnalisées

Le service Forms permet de personnaliser une barre d’outils générée avec un formulaire HTML. Une barre d’outils peut être personnalisée pour modifier son aspect en remplaçant les styles CSS par défaut et pour ajouter un comportement dynamique en remplaçant les scripts Java. Une barre d’outils est personnalisée à l’aide d’un fichier XML nommé fscmenu.xml. Par défaut, le service Forms récupère ce fichier à partir d’un emplacement URI spécifié en interne.

Vous pouvez copier le fichier fscmenu.xml à partir de cet emplacement, le modifier pour répondre à vos besoins, puis le placer dans un emplacement URI personnalisé. Ensuite, à l’aide de l’API Forms Service, définissez les options d’exécution qui entraînent l’utilisation du service Forms à l’aide de votre fichier fscmenu.xml à partir de l’emplacement spécifié. Ces actions entraînent le rendu d’un formulaire HTML avec une barre d’outils personnalisée par le service Forms.

Outre le fichier fscmenu.xml , vous devez également obtenir les fichiers suivants :

• fscmenu.js
• fscattachments.js
• fscmenu.css
• fscmenu-v.css
• fscmenu-ie.css
• fscdialog.css

fscJS est le script Java associé à chaque noeud. Il est nécessaire d’en fournir un pour le noeud div#fscmenu et éventuellement pour les noeuds ul#fscmenuItem. Les fichiers JS mettent en oeuvre la fonctionnalité de base de la barre d’outils et les fichiers par défaut fonctionnent.

fscCSS est une feuille de style associée à un noeud particulier. Les styles des fichiers CSS définissent l’aspect de la barre d’outils. ​ fscVCSS est une feuille de style pour une barre d’outils verticale, qui s’affiche à gauche du formulaire HTML rendu. ​ fscIECSSest une feuille de style utilisée pour les formulaires HTML rendus dans Internet Explorer.

Assurez-vous que tous les fichiers ci-dessus sont référencés dans le fichier fscmenu.xml . En d’autres termes, dans le fichier fscmenu.xml, spécifiez les emplacements URI vers ces fichiers afin que le service Forms puisse les localiser. Par défaut, ces fichiers sont disponibles à des emplacements URI commençant par des mots-clés internes FSWebRoot ou ApplicationWebRoot.

Pour personnaliser la barre d’outils, remplacez les mots-clés par le mot-clé externe FSToolBarURI. Ce mot-clé représente l’URI qui est transmis au service Forms au moment de l’exécution (cette approche est présentée plus loin dans cette section).

Vous pouvez également spécifier les emplacements absolus de ces fichiers JS et CSS, tels que https://www.mycompany.com/scripts/misc/fscmenu.js. Dans ce cas, vous n’avez pas besoin d’utiliser le mot-clé FSToolBarURI.

Vous pouvez obtenir les fichiers JS et CSS en ouvrant le fichier adobe-forms-<serveur d’applications>.ear. Dans ce fichier, ouvrez le fichier adobe-forms-res.war. Tous ces fichiers se trouvent dans le fichier WAR. Le fichier adobe-forms-<serveur d’applications>.ear se trouve dans le dossier d’installation d’AEM forms (C:\ is the installation directory). Vous pouvez ouvrir adobe-forms-<appserver>.ear à l’aide d’un outil d’extraction de fichiers tel que WinRAR.

La syntaxe XML suivante illustre un exemple de fichier 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>

Les éléments suivants décrivent comment personnaliser une barre d’outils :

• Modifiez les valeurs des attributs fscJS, fscCSS, fscVCSS et fscIECSS (dans le fichier fscmenu.xml) afin de refléter les emplacements personnalisés des fichiers référencés à l’aide de l’une des méthodes décrites dans cette section (par exemple, fscJS="FSToolBarURI/scripts/fscmenu.js").
• Tous les fichiers CSS et JS doivent être spécifiés. Si aucun des fichiers n’est modifié, indiquez celui par défaut à l’emplacement personnalisé. Vous pouvez obtenir les fichiers par défaut en ouvrant différents fichiers comme décrit dans cette section.
• Le fait de fournir une référence absolue (par exemple, https://www.example.com/scripts/custom-vertical-fscmenu.css) pour n’importe quel fichier est autorisé.
• Les fichiers JS et CSS requis par le noeud div#fscmenu sont essentiels à la fonctionnalité de la barre d’outils. Certains noeuds ul#fscmenuItem peuvent ou non comporter des fichiers JS ou CSS pris en charge.

Modification de la valeur locale

Dans le cadre de la personnalisation d’une barre d’outils, vous pouvez modifier la valeur des paramètres régionaux de la barre d’outils. En d’autres termes, vous pouvez l’afficher dans une autre langue. L’illustration suivante présente une barre d’outils personnalisée qui s’affiche en français.

Pour modifier la valeur des paramètres régionaux d’une barre d’outils, assurez-vous que le fichier fscmenu.xml contient la langue que vous souhaitez afficher. La syntaxe XML suivante présente le fichier fscmenu.xml utilisé pour afficher une barre d’outils française.

 <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>

Spécifiez également une valeur locale valide en appelant la méthode setLocale de l’objet HTMLRenderSpec et en transmettant une valeur string qui spécifie la valeur locale. Par exemple, transmettez fr_FR pour spécifier le français. Le service Forms est fourni avec des barres d’outils localisées.

Pour plus d’informations sur le service Forms, voir Référence des services pour AEM Forms.

Résumé des étapes

Pour générer un formulaire HTML contenant une barre d’outils personnalisée, procédez comme suit :

1. Inclure les fichiers de projet.
2. Créez un objet API Java Forms.
3. Référencez un fichier XML fscmenu personnalisé.
4. Générer un formulaire HTML.
5. Ecrivez le flux de données de formulaire dans le navigateur Web client.

Inclure les fichiers de projet

Incluez les fichiers nécessaires dans votre projet de développement. Si vous créez une application cliente à l’aide de Java, incluez les fichiers JAR nécessaires. Si vous utilisez des services Web, incluez les fichiers proxy.

Création d’un objet API Java Forms

Avant d’effectuer par programmation une opération prise en charge par le service Forms, vous devez créer un objet client Forms.

Référence à un fichier XML fscmenu personnalisé

Pour effectuer le rendu d’un formulaire HTML contenant une barre d’outils personnalisée, référencez un fichier XML fscmenu qui décrit la barre d’outils. (Cette section fournit deux exemples d’un fichier XML fscmenu.) Assurez-vous également que le fichier fscmenu.xml spécifie correctement l’emplacement de tous les fichiers référencés. Comme mentionné plus haut dans cette section, assurez-vous que tous les fichiers sont référencés par le mot-clé FSToolBarURI ou leur emplacement absolu.

Rendu d’un formulaire HTML

Pour générer un formulaire HTML, spécifiez une conception de formulaire qui a été créée dans Designer et enregistrée en tant que fichier XDP. Sélectionnez également un type de transformation HTML. Par exemple, vous pouvez spécifier le type de transformation HTML qui effectue le rendu d’un code HTML dynamique pour Internet Explorer 5.0 ou version ultérieure.

Le rendu d’un formulaire HTML nécessite également des valeurs, telles que des valeurs URI pour le rendu d’autres types de formulaire.

Écrire le flux de données de formulaire dans le navigateur Web client

Lorsque le service Forms effectue le rendu d’un formulaire HTML, il renvoie un flux de données de formulaire que vous devez écrire dans le navigateur Web client pour que le formulaire HTML soit visible par les utilisateurs.

Voir également

Rendu d’un formulaire HTML avec une barre d’outils personnalisée à l’aide de l’API Java

Rendu d’un formulaire HTML avec une barre d’outils personnalisée à l’aide de l’API de service Web

Inclusion des fichiers de bibliothèque Java d’AEM Forms

Réglage des propriétés de la connexion

Démarrages rapides de l’API Forms Service

Rendu des PDF forms interactifs

Rendu de Forms au format HTML

Création d’applications web qui renvoient Forms

Rendu d’un formulaire HTML avec une barre d’outils personnalisée à l’aide de l’API Java

Rendre un formulaire HTML contenant une barre d’outils personnalisée à l’aide de l’API Forms Service (Java) :

1. Inclure les fichiers de projet

   Incluez les fichiers JAR client, tels que adobe-forms-client.jar, dans le chemin de classe de votre projet Java.

2. Création d’un objet API Java Forms

   • Créez un objet ServiceClientFactory qui contient des propriétés de connexion.
   • Créez un objet FormsServiceClient en utilisant son constructeur et en transmettant l’objet ServiceClientFactory.

3. Référence à un fichier XML fscmenu personnalisé

   • Créez un objet HTMLRenderSpec à l’aide de son constructeur.
   • Pour effectuer le rendu d’un formulaire HTML avec une barre d’outils, appelez la méthode setHTMLToolbar de l’objet HTMLRenderSpec et transmettez une valeur d’énumération HTMLToolbar. Par exemple, pour afficher une barre d’outils HTML verticale, transmettez HTMLToolbar.Vertical.
   • Indiquez l’emplacement du fichier XML fscmenu en appelant la méthode setToolbarURI de l’objet HTMLRenderSpec et en transmettant une valeur string qui spécifie l’emplacement URI du fichier XML.
   • Le cas échéant, définissez la valeur du paramètre régional en appelant la méthode setLocale de l’objet HTMLRenderSpec et en transmettant une valeur string qui spécifie la valeur du paramètre régional. La valeur par défaut est Anglais.
   REMARQUE

   Les didacticiels de mise en route associés à cette section définissent cette valeur sur fr_FR.

4. Rendu d’un formulaire HTML

   Appelez la méthode renderHTMLForm de l’objet FormsServiceClient et transmettez les valeurs suivantes :

   • Une valeur string qui spécifie le nom de la conception de formulaire, y compris l’extension du nom de fichier. Si vous référencez une conception de formulaire qui fait partie d’une application Forms, veillez à spécifier le chemin d’accès complet, tel que Applications/FormsApplication/1.0/FormsFolder/Loan.xdp.
   • Valeur TransformTo enum qui spécifie le type de préférence HTML. Par exemple, pour effectuer le rendu d’un formulaire HTML compatible avec le code HTML dynamique pour Internet Explorer 5.0 ou version ultérieure, spécifiez TransformTo.MSDHTML.
   • Objet com.adobe.idp.Document contenant les données à fusionner avec le formulaire. Si vous ne souhaitez pas fusionner de données, transmettez un objet com.adobe.idp.Document vide.
   • Objet HTMLRenderSpec qui stocke les options d’exécution HTML.
   • Une valeur string qui spécifie la valeur d’en-tête HTTP_USER_AGENT, telle que Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322).
   • Objet URLSpec qui stocke les valeurs URI requises pour générer un formulaire HTML.
   • Objet java.util.HashMap qui stocke les pièces jointes. Il s’agit d’un paramètre facultatif. Vous pouvez spécifier null si vous ne souhaitez pas joindre de fichiers au formulaire.

   La méthode renderHTMLForm renvoie un objet FormsResult contenant un flux de données de formulaire qui doit être écrit dans le navigateur Web client.

5. Écrire le flux de données de formulaire dans le navigateur Web client

   • Créez un objet com.adobe.idp.Document en appelant la méthode FormsResult de l’objet getOutputContent.
   • Obtenez le type de contenu de l’objet com.adobe.idp.Document en appelant sa méthode getContentType.
   • Définissez le type de contenu de l’objet javax.servlet.http.HttpServletResponse en appelant sa méthode setContentType et en transmettant le type de contenu de l’objet com.adobe.idp.Document.
   • Créez un objet javax.servlet.ServletOutputStream utilisé pour écrire le flux de données de formulaire dans le navigateur Web client en appelant la méthode getOutputStream de l’objet javax.servlet.http.HttpServletResponse.
   • Créez un objet java.io.InputStream en appelant la méthode getInputStream de l’objet com.adobe.idp.Document.
   • Créez un tableau d’octets et renseignez-le avec le flux de données de formulaire en appelant la méthode InputStream de l’objet read et en transmettant le tableau d’octets en tant qu’argument.
   • Appelez la méthode write de l’objet javax.servlet.ServletOutputStream pour envoyer le flux de données de formulaire au navigateur Web client. Transmettez le tableau d’octets à la méthode write .

Voir également

Démarrage rapide (mode SOAP) : Rendu d’un formulaire HTML avec une barre d’outils personnalisée à l’aide de l’API Java

Inclusion des fichiers de bibliothèque Java d’AEM Forms

Réglage des propriétés de la connexion

Rendu d’un formulaire HTML avec une barre d’outils personnalisée à l’aide de l’API de service Web

Rendre un formulaire HTML contenant une barre d’outils personnalisée à l’aide de l’API Forms Service (service Web) :

1. Inclure les fichiers de projet

   • Créez des classes proxy Java qui utilisent le WSDL du service Forms.
   • Incluez les classes proxy Java dans le chemin de classe.

2. Création d’un objet API Java Forms

   Créez un objet FormsService et définissez des valeurs d’authentification.

3. Référence à un fichier XML fscmenu personnalisé

   • Créez un objet HTMLRenderSpec à l’aide de son constructeur.
   • Pour effectuer le rendu d’un formulaire HTML avec une barre d’outils, appelez la méthode setHTMLToolbar de l’objet HTMLRenderSpec et transmettez une valeur d’énumération HTMLToolbar. Par exemple, pour afficher une barre d’outils HTML verticale, transmettez HTMLToolbar.Vertical.
   • Indiquez l’emplacement du fichier XML fscmenu en appelant la méthode setToolbarURI de l’objet HTMLRenderSpec et en transmettant une valeur string qui spécifie l’emplacement URI du fichier XML.
   • Le cas échéant, définissez la valeur du paramètre régional en appelant la méthode setLocale de l’objet HTMLRenderSpec et en transmettant une valeur string qui spécifie la valeur du paramètre régional. La valeur par défaut est Anglais.
   REMARQUE

   Les didacticiels de mise en route associés à cette section définissent cette valeur sur fr_FR.

4. Rendu d’un formulaire HTML

   Appelez la méthode renderHTMLForm de l’objet FormsService et transmettez les valeurs suivantes :

   • Une valeur string qui spécifie le nom de la conception de formulaire, y compris l’extension du nom de fichier. Si vous référencez une conception de formulaire qui fait partie d’une application Forms, veillez à spécifier le chemin d’accès complet, tel que Applications/FormsApplication/1.0/FormsFolder/Loan.xdp.
   • Valeur TransformTo enum qui spécifie le type de préférence HTML. Par exemple, pour effectuer le rendu d’un formulaire HTML compatible avec le code HTML dynamique pour Internet Explorer 5.0 ou version ultérieure, spécifiez TransformTo.MSDHTML.
   • Objet BLOB contenant les données à fusionner avec le formulaire. Si vous ne souhaitez pas fusionner les données, transmettez null.
   • Objet HTMLRenderSpec qui stocke les options d’exécution HTML.
   • Une valeur string qui spécifie la valeur d’en-tête HTTP_USER_AGENT, telle que Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322). Vous pouvez transmettre une chaîne vide si vous ne souhaitez pas définir cette valeur.
   • Objet URLSpec qui stocke les valeurs URI requises pour générer un formulaire HTML.
   • Objet java.util.HashMap qui stocke les pièces jointes. Ce paramètre est facultatif et vous pouvez spécifier null si vous ne souhaitez pas joindre de fichiers au formulaire.
   • Objet com.adobe.idp.services.holders.BLOBHolder vide renseigné par la méthode renderHTMLForm. Cette valeur de paramètre stocke le formulaire rendu.
   • Objet com.adobe.idp.services.holders.BLOBHolder vide renseigné par la méthode renderHTMLForm. Ce paramètre stocke les données XML de sortie.
   • Objet javax.xml.rpc.holders.LongHolder vide renseigné par la méthode renderHTMLForm. Cet argument stocke le nombre de pages dans le formulaire.
   • Objet javax.xml.rpc.holders.StringHolder vide renseigné par la méthode renderHTMLForm. Cet argument stocke la valeur du paramètre régional.
   • Objet javax.xml.rpc.holders.StringHolder vide renseigné par la méthode renderHTMLForm. Cet argument stocke la valeur de rendu HTML utilisée.
   • Objet com.adobe.idp.services.holders.FormsResultHolder vide qui contiendra les résultats de cette opération.

   La méthode renderHTMLForm renseigne l’objet com.adobe.idp.services.holders.FormsResultHolder transmis en tant que valeur du dernier argument avec un flux de données de formulaire qui doit être écrit dans le navigateur Web client.

5. Écrire le flux de données de formulaire dans le navigateur Web client

   • Créez un objet FormResult en obtenant la valeur du membre de données value de l’objet com.adobe.idp.services.holders.FormsResultHolder.
   • Créez un objet BLOB contenant des données de formulaire en appelant la méthode getOutputContent de l’objet FormsResult.
   • Obtenez le type de contenu de l’objet BLOB en appelant sa méthode getContentType.
   • Définissez le type de contenu de l’objet javax.servlet.http.HttpServletResponse en appelant sa méthode setContentType et en transmettant le type de contenu de l’objet BLOB.
   • Créez un objet javax.servlet.ServletOutputStream utilisé pour écrire le flux de données de formulaire dans le navigateur Web client en appelant la méthode getOutputStream de l’objet javax.servlet.http.HttpServletResponse.
   • Créez un tableau d’octets et renseignez-le en appelant la méthode getBinaryData de l’objet BLOB. Cette tâche affecte le contenu de l’objet FormsResult au tableau d’octets.
   • Appelez la méthode write de l’objet javax.servlet.http.HttpServletResponse pour envoyer le flux de données de formulaire au navigateur Web client. Transmettez le tableau d’octets à la méthode write .

Voir également

Appel d’AEM Forms à l’aide du codage Base64