Introduction à la personnalisation de l’espace de travail AEM Forms introduction-to-customizing-aem-form-workspace

CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

L’espace de travail AEM Forms offre des fonctionnalités permettant de modifier la sémantique de la présentation et la fonctionnalité de son interface. Les types de personnalisations pour modifier le style, la mise en page, le formatage, la marque et les principales fonctionnalités sont décrits ci-dessous.

cu_customized_workspace_example

Types de personnalisations types-of-customizations

L’espace de travail AEM Forms prend en charge un large éventail de personnalisations pour mettre à jour la mise en page de l’interface utilisateur, son aspect, sa fonctionnalité et bien plus encore. Les personnalisations impliquent la mise à jour d’un ou de plusieurs des éléments suivants :

  • Apparences de l’interface utilisateur
  • Fonctionnalité utilisant des personnalisations sémantiques
  • Réutilisation de composants de HTML dans d’autres applications

Modifications de l’interface utilisateur user-interface-changes

Vous pouvez modifier l’aspect, la mise en page et la sémantique d’une autre présentation de l’espace de travail AEM Forms. Modifiez l’espace de travail en personnalisant le CSS, les modèles HTML et les fichiers JavaScript™. Tous les fichiers par défaut sont fournis dans l’installation par défaut.

Les étapes applicables les plus courantes sont décrites dans Procédure générique de personnalisation de l’espace de travail AEM Forms. Pour obtenir des exemples spécifiques de ces personnalisations, y compris les étapes détaillées, consultez les articles connexes à la fin de cet article.

Présentation de la feuille de style understanding-the-style-sheet

Avant de personnaliser Workspace, familiarisez-vous avec la feuille de style par défaut fournie avec AEM Forms à l’adresse /libs/ws/css/style.css.

Pour personnaliser l’espace de travail, nous vous recommandons de vous familiariser avec la feuille de style existante, style.css, disponible dans le dossier /libs/ws/css. Vous trouverez ci-dessous quelques composants importants.

Elément CSS
Composant de l’interface utilisateur modifié
#en-tête
En-tête de l’espace de travail AEM Forms
.categoryList
Liste des catégories
.categoryList .header
En-tête de liste de catégories
.categories, .filters
Espace sous la liste des catégories
.category, .filter
Catégorie
.category:hover, .category.selected, .filter:hover, .filter.selected
Catégorie sélectionnée et style de survol de la souris de la catégorie
categoryListBar .tool, categoryListBar .content
Page de démarrage du processus (liste de catégories fermée)
filterListBar .tool, filterListBar .content
Page Tâches (liste des filtres fermée)
processNameListBar .tool, processNameListBar .content
Page de suivi (liste de noms de processus fermée)
.startPointList, .tasklist
La liste des points de départ ou la liste des tâches
.startPointList .header, .tasklist .header
En-tête d’une liste de points de départ ou d’une liste de tâches
.startpoint.selected, .task.selected
Point de départ ou tâche sélectionné
.startpoint.selected.description, .task.selected.description
Description du point de départ ou de la tâche sélectionné
#taskarea
Zone de tâche
#header .dropdown
Liste déroulante utilisateur dans l’en-tête
.sortDrop dd ul
Menu déroulant de la tâche de tri

CSS css

L’espace de travail AEM Forms emprunte son apparence à un fichier CSS. En personnalisant le CSS, vous pouvez modifier la sémantique de présentation de l’espace de travail, comme les polices, les couleurs, la marque et la mise en page.

Les étapes de niveau supérieur pour la personnalisation CSS sont les suivantes :

  • Créez un fichier CSS.
  • Ajoutez des éléments de style dans ce fichier CSS. Pour plus d’informations, voir Présentation des styles CSS .
  • Mettez ses références à jour dans html.jsp.

Pour connaître les étapes exactes permettant d’effectuer ces personnalisations, voir la Procédure générique de personnalisation de l’espace de travail AEM Forms. Le fichier CSS fourni avec l’espace de travail AEM Forms se trouve sous /libs/ws/css/. Pour les personnalisations CSS, utilisez le Ship Package. Pour obtenir des exemples spécifiques de personnalisations CSS, reportez-vous aux rubriques d’aide connexes à la fin de cet article.

Image image

Vous pouvez personnaliser l’espace de travail AEM Forms pour ajouter des avatars d’utilisateurs ou pour ajouter le logo de votre entreprise. Pour ces personnalisations, utilisez Ship Package.

Les étapes de niveau supérieur pour la personnalisation des images sont les suivantes :

  • Installez et configurez WebDAV.
  • Ajoutez de nouvelles images.
  • Ajoutez de nouveaux styles correspondant aux images ajoutées.
  • Etablissez le lien vers le nouveau fichier CSS dans le fichier html.jsp.

Pour vous familiariser avec la personnalisation des images dans l’espace de travail AEM Forms, suivez la Procédure générique de personnalisation de l’espace de travail AEM Forms. Pour obtenir des exemples spécifiques de personnalisations liées aux images, reportez-vous aux rubriques d’aide connexes à la fin de cet article.

Modèle de HTML html-template

Les modèles HTML permettent de définir l’aspect et la mise en page de l’interface utilisateur de l’espace de travail. En mettant à jour les modèles de HTML par défaut, vous pouvez personnaliser l’interface utilisateur par défaut de la mise en page.

Les étapes de niveau supérieur pour les personnalisations du modèle de HTML sont les suivantes :

  • Dans un dossier créé par l’utilisateur, effectuez des copies des fichiers par défaut requis.
  • Ajoutez de nouveaux modèles dans un dossier défini par l’utilisateur.
  • Effectuez les mises à jour appropriées vers les fichiers copiés, par exemple, le chemin d’accès du nouveau modèle.

Vous trouverez des exemples spécifiques de ces personnalisations dans les rubriques d’aide fournies à la fin de cet article. Choisissez parmi les Ship Package ou le Package de développement, selon le modèle à personnaliser.

Modifications sémantiques semantic-changes

Pour modifier la fonctionnalité de l’espace de travail AEM Forms, changez le code source JavaScript. Les modifications dans les principales fonctionnalités ne sont pas libellées comme modifications sémantiques. Vous pouvez modifier des modèles, des vues et des modèles fournis dans le cadre du code source de l’espace de travail AEM Forms.

Les étapes de niveau supérieur permettant d’effectuer des modifications sémantiques afin de modifier la fonctionnalité de l’espace de travail AEM Forms sont les suivantes :

  • Dans un dossier créé par l’utilisateur, effectuez des copies des fichiers par défaut appropriés.
  • Ajoutez de nouveaux modèles et vues dans le dossier défini par l’utilisateur.
  • Effectuez les mises à jour appropriées, telles que la mise à jour des chemins d’accès des modèles et des vues nouvellement ajoutés dans les fichiers JavaScript par défaut.
  • Minifiez le module pour optimiser les performances.

Pour plus d’informations conceptuelles sur les composants qui font partie du code source, voir Description des composants réutilisables. Pour ces personnalisations, utilisez le module de développement.

Composants réutilisables reusable-components

Comme l’espace de travail AEM Forms est un logiciel basé sur des composants, il peut être facilement personnalisé et réutilisé. Vous pouvez intégrer facilement les composants de l’espace de travail avec vos applications Web.

Pour plus d’informations conceptuelles, voir la Description des composants réutilisables et pour obtenir des instructions sur l’utilisation des composants, voir Intégrer des composants de l’espace de travail AEM Forms à des applications web.

Création du code de l’espace de travail AEM Forms building-html-workspace-code

Package SDK sdk-package

Le package contient le code source de l’espace de travail AEM Forms. Le package est disponible à l’adresse [*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip.

Il est principalement destiné aux personnalisations, car il permet de générer les éléments suivants :

  • Packages CRX pour les profils Ship, Debug et Dev (mentionnés ci-dessous dans Packages CRX).
  • Version minimisée du code personnalisé (pour les modifications sémantiques).

Contenu WS ws-content

  • client-pkg :

    • src : contient les artefacts nécessaires pour créer des noeuds CRX.
    • pom.xml - Script pour créer des packages de déploiement pour divers profils WS-Deploy Package
  • client-html :

    • assembly - contient le fichier zip.xml utilisé par le script pour créer le SDK de l’espace de travail AEM Forms.

    • src/main/webapp -

      • css : contient des feuilles de style pour l’espace de travail AEM Forms.

      • images : contient les images utilisées dans l’espace de travail AEM Forms.

      • js:

        • libs : contient toutes les bibliothèques tierces utilisées dans l’espace de travail AEM Forms.

        • licences : contient des licences pour les fichiers HTML et JS, ainsi que du code pour préfixer ces licences en fonction des fichiers sources respectifs.

        • minifier : utilisé pour la combinaison, la minification et l’uglification du code JavaScript personnalisé.

        • resourcejs_optimizer : utilisé pour la combinaison, la minification et l’utilisation de la source JavaScript.

        • resource_generator - utilisé pour générer register.js et modelcontrollerpath.js.

        • runtime:

          • initializer : contient initializer.js utilisé pour initialiser les vues Backbone et les modèles utilisés dans l’espace de travail AEM Forms.
          • models : contient les modèles Backbone de tous les composants présents dans l’espace de travail AEM Forms.
          • routes : contient des fichiers JavaScript et des fichiers de HTML qui chargent les processus de démarrage, les tâches, le suivi et les préférences dans l’espace de travail AEM Forms.
          • services : contient le fichier service.js utilisé dans l’espace de travail AEM Forms. Tous les appels au serveur sont effectués via service.js.
          • templates - contient tous les modèles, c’est-à-dire les fichiers de HTML de toutes les vues dans l’espace de travail AEM Forms.
          • util - contient tous les fichiers d’utilitaire (javascript) utilisés dans l’espace de travail AEM Forms.
          • views : contient les vues Backbone de tous les composants dans l’espace de travail AEM Forms.
        • main.js

        • router.js

      • libs/ws: pdf.html et pluginPing.pdf sont utilisés pour le chargement des formulaires PDF dans l’espace de travail AEM Forms et WSNextAdapter.swf est utilisé pour charger des formulaires SWF et des guides dans l’espace de travail AEM Forms.

      • locales :

        • de-DE : contient translation.json pour l’allemand.
        • en-US : contient translation.json pour l’anglais.
        • fr-FR : contient translation.json pour le français.
        • ja-JP : contient translation.json pour le japonais.
        • html.jsp : contient le code permettant de connaître les paramètres régionaux actuels du navigateur.
      • html.jsp

      • GET.jsp

Package CRX crx-package

Le package CRX peut être déployé sur le référentiel CRX™. Il se trouve sous [*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip.

Ce package peut être créé à l’aide des trois profils décrits ci-dessous.

Profil
Description
Utilisation
Profil Ship
Ce profil crée un package CRX de la plus petite taille possible à l’aide de la minification. Ce package est le plus efficace. Tous les fichiers JavaScript™ sont combinés et minimisés en un seul fichier JS.
Utilisez ce profil lorsqu’aucune autre modification sémantique n’est requise dans les fichiers JS.
Profil de débogage
Ce profil crée un package CRX modérément efficace. La taille du package est légèrement supérieure à celle du paquet créé à l’aide du profil Ship. Ce package contient la plupart des fichiers JavaScript combinés en un seul fichier JS.
Utilisez ce profil pour le débogage.
Profil de développement
Ce profil crée un package CRX de la plus grande taille possible. Tous les fichiers JavaScript sont disponibles séparément, car ils se trouvent dans le package SDK.
Utilisez ce profil lors de l’incorporation de modifications sémantiques.

Profil Ship ship-profile

Commande command

  • mvn clean -P Ship install sur le dossier client-pkg du package source fourni au client.
  • L’exécution de la commande du profil Ship fonctionne uniquement sur un JVM de 64 bits.

Contenu WS ws-content-1

  • css : contient style.css, ie.css et jquery-ui.css.

  • images : contient toutes les images.

  • js:

    • libs:

      • require : contient require.js.
      • jqueryui - Contient jquery.ui.datepicker.ja.js.
    • runtime:

      • templates - contient tous les modèles, c’est-à-dire les fichiers de HTML de tous les composants dans l’espace de travail AEM Forms.
    • main.js (combiné, minimisé et unifié).

    • registry.js

  • libs:

    • ws - contient pluginPing.pdf, pdf.html et WSNextAdapter.swf.
  • Paramètres régionaux : contient .content.xml.

  • locales :

    • de-DE : contient translation.json pour l’allemand.
    • en-US : contient translation.json pour l’anglais.
    • fr-FR : contient translation.json pour le français.
    • ja-JP : contient translation.json pour le japonais.
    • html.jsp : contient le code permettant de connaître les paramètres régionaux actuels du navigateur.
  • Index : contient .content.xml

  • profile : contient offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Debug Profile debug-profile

Commande command-1

  • mvn clean -P Debug install sur client-pkg
  • L’exécution de la commande de profil de débogage fonctionne uniquement sur JVM 64 bits.

Contenu WS ws-content-2

  • css : contient style.css, ie.css et jqueri-ui.css.

  • images : contient toutes les images.

  • js:

    • libs:

      • require : contient require.js.
      • jqueryui - Contient jquery.ui.datepicker.ja.js.
    • runtime:

      • templates - contient tous les modèles, c’est-à-dire les fichiers de HTML de tous les composants dans l’espace de travail AEM Forms.
    • main.js (combiné).

    • registry.js

  • libs:

    • ws - contient pluginPing.pdf, pdf.html et WSNextAdapter.swf.
  • Paramètres régionaux : contient .content.xml.

  • locales :

    • de-DE : contient translation.json pour l’allemand.
    • en-US : contient translation.json pour l’anglais.
    • fr-FR : contient translation.json pour le français.
    • ja-JP : contient translation.json pour le japonais.
    • html.jsp : contient le code permettant de connaître les paramètres régionaux actuels du navigateur.
  • Index : contient .content.xml

  • profile : contient offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Profil Dev dev-profile

Commande command-2

mvn clean -P Dev install sur client-pkg

Contenu WS ws-content-3

  • css : contient style.css, ie.css et jqueri-ui.css.

  • images : contient toutes les images.

  • js:

    • libs : contient toutes les bibliothèques utilisées dans l’espace de travail AEM Forms.

    • require : contient require.js.

    • jqueryui - Contient jquery.ui.datepicker.ja.js

    • runtime:

      • initializer : contient initializer.js et modelcontroller erpath.js.
      • models : contient les modèles de tous les composants dans l’espace de travail AEM Forms.
      • routes : contient des fichiers JavaScript et des fichiers de HTML qui chargent les processus de démarrage, les tâches, le suivi et les préférences dans l’espace de travail AEM Forms.
      • services : contient le fichier service.js utilisé dans l’espace de travail AEM Forms.
      • templates - contient tous les modèles, c’est-à-dire les fichiers de HTML de tous les composants dans l’espace de travail AEM Forms.
      • util - contient tous les fichiers d’utilitaire (JavaScript) utilisés dans l’espace de travail AEM Forms.
      • views - contient des vues de tous les composants dans l’espace de travail AEM Forms.
    • main.js

    • registry.js

    • router.js

  • libs:

    • ws - contient pluginPing.pdf, pdf.html et WSNextAdapter.swf.
  • Paramètres régionaux : contient .content.xml.

  • locales :

    • de-DE : contient translation.json pour l’allemand.
    • en-US : contient translation.json pour l’anglais.
    • fr-FR : contient translation.json pour le français.
    • ja-JP : contient translation.json pour le japonais.
    • html.jsp : contient le code permettant de connaître les paramètres régionaux actuels du navigateur.
  • Index : contient .content.xml

  • profile : contient offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da