Guide d'utilisation Annuler

Création de composants personnalisés : exemples

Rechercher

Dernière mise à jour le 11 févr. 2022

Vous trouverez dans cet article un exemple de composant HTML5 personnalisé.

Cet article vous explique comment créer des composants personnalisés. Le premier exemple décrit le composant d’image (qui est également fourni avec Animate), ainsi que le processus permettant de comprendre la structure et les étapes faisant partie du développement. Le deuxième exemple explique comment inclure un composant d’interface utilisateur existant dans une enveloppe (comme jQueryUI) et l’importer dans Animate.

Création d’un composant d’image DOM

Créez une catégorie appelée « Mes composants ».

a. Commencez par créer un dossier nommé mescomposants sous le dossier <HTML5Components>.

b. Téléchargez le fichier myimage.zip associé et extrayez-en le contenu dans le dossier

mescomposants.

Telechargement

Obtenir un fichier
Cliquez ici pour télécharger le fichier myimage.zip.

c. Redémarrez Animate.

Structure du répertoire dans le dossier mescomposants

Une nouvelle catégorie nommée « Mes composants » apparaît maintenant dans le dossier de composants, avec en dessous un nouveau composant appelé Mon image. Vous pouvez faire glisser et déplacer ce composant sur la scène, définir la propriété de l’image source et publier le film afin de visualiser le composant personnalisé en action.

Métadonnées du composant – components.js

Notez que la catégorie est définie sur CATEGORY_MY_COMPONENTS. Les noms de chaque propriété utilisent également des clés similaires. Il s’agit de la clé de la chaîne localisée pour le nom de la catégorie. Si vous ouvrez le fichier strings.json depuis le dossier de paramètres régionaux, les entrées suivantes sont visibles.

Lors de la modification de ce fichier, il n’est pas rare que les utilisateurs ajoutent par erreur une virgule superflue après le dernier élément du tableau.

La valeur du champ d’icône est définie sur Sp_Image_Sm. Le dossier Assets contient les deux fichiers png suivants, avec le préfixe Sp_Image_Sm.

Il s’agit des icônes des interfaces utilisateur sombre et claire.

La valeur du champ « source » dans le fichier components.json est définie sur « src/myimage.js ».

(function($) {    

// Enregistre un composant avec le nom de classe : my.Image
 // et le modélise avec les remplacements suivants 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Renvoie un ID unique avec l’image de préfixe
  // _widgetID est un global déclaré dans un widget
  // Cet ID est utilisé uniquement si l’utilisateur n’a défini aucun ID d’instance pour le composant dans Animate
  // Autrement, le nom configuré par l’utilisateur est utilisé
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Renvoie la chaîne permettant de créer l’élément DOM
  // Pour l’image, il faut simplement créer la balise <img> 
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Ensemble de propriétés configurables
  getProperties: function() {
   return this._props;
  },
  
// Ensemble d’attributs configurables
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Reportez-vous aux commentaires dans le code afin de mieux le comprendre.

N’hésitez pas à observer la source des autres composants fournis avec Animate. Dans la plupart des cas, vous pouvez utiliser l’un de ces composants comme point de départ, puis le configurer en fonction de vos besoins.

Inclusion dans un wrapper d’un composant jQuery-UI

Cette section explique comment inclure un widget jQuery-UI dans une enveloppe et l’utiliser dans Animate. Les mêmes concepts peuvent être appliqués pour encapsuler n’importe quel composant d’une autre infrastructure d’interface utilisateur.

Examinons le composant DatePicker compressé avec Animate qui est un widget jQuery-UI. Téléchargez et extrayez le contenu de l’archive suivante et utilisez-le pour référence.

Telechargement

Obtenir un fichier

Cliquez ici pour télécharger le fichier datepicker.zip.

Le dossier nommé jquery-ui-1.12.0 est la source de l’infrastructure d’interface utilisateur jQuery qui contient le widget DatePicker d’origine et ses ressources, comme des images et des feuilles de style CSS, à encapsuler et utiliser dans Animate comme n’importe quel autre composant HTML5. Il sert seulement pour l’aperçu local, quand vous utilisez les « bibliothèques hébergées » dans les paramètres de publication ; vous pouvez alors utiliser le réseau de diffusion de contenu afin de télécharger les sources dépendantes.

Il existe deux dépendances par défaut, jQuery et anwidget.js. Puisque anwidget.js ne figure pas sur le réseau de diffusion de contenu, nous n’avons aucune entrée CDN correspondante.

Le prochain jeu d’entrées correspond aux autres ressources requises pour le chargement du widget Sélecteur de dates de l’interface utilisateur jQuery. Si vous encapsulez un widget d’une autre bibliothèque, vous pouvez également spécifier le jeu de dépendances correspondant. Ces dépendances sont téléchargées avant l’initialisation du composant.

Dans la section des propriétés, nous avons exposé une seule propriété appelée « label » (libellé), qui est liée à la propriété « label » du composant Sélecteur de dates. De même, nous pouvons exposer les autres propriétés si nous souhaitons que l’utilisateur puisse les configurer dans l’environnement de création d’Animate. Au moment de l’exécution, chacune de ces propriétés sera disponible comme paire clé-valeur dans le tableau des options pour l’occurrence. Nous pouvons extraire la valeur configurée et l’appliquer au moment de l’exécution.

Fichier source principal : src/datepicker.js.

Sections qui diffèrent de l’exemple

getCreateString:

Le widget Sélecteur de dates de jQuery-UI récupère cet élément d’entrée de texte et le convertit en élément de sélecteur de dates au moment de l’exécution. Nous initialisons alors l’objet DOM en conséquence.
attach

Nous devons remplacer cette fonction pour ce widget. Cette API est invoquée chaque fois que l’élément est associé à l’objet DOM. Toutefois, en raison du mode de fonctionnement de l’exécution sous-jacente (dans ce cas, createjs), cette API peut être invoquée plusieurs fois durant une plage d’images.

Nous mémorisons l’état associé de l’élément sous-jacent puis invoquons l’API d’association (attach) de la classe de base (à l’aide de l’argument this._superApply(arguments)). Si nous associons l’élément au DOM parent pour la première fois, nous utilisons l’appel du widget jQuery-UI sous-jacent afin de convertir le DOM du composant en sélecteur de dates. Voir https://jqueryui.com/datepicker/

La plupart des widgets JavaScript fonctionnent de la même façon. Vous pouvez appliquer la même technique afin d’encapsuler n’importe quel composant et l’importer dans Animate de la même manière.
Mise à jour : nous remplaçons la fonction de mise à jour (update) et appliquons les propriétés CSS à la balise div conteneur, ainsi que les attributs à l’élément DOM réel.

Lorsque vous remplacez des API du type attach, detach ou update, évaluez la mise en œuvre par défaut de la classe de base et appelez la mise en œuvre de base au moment approprié ; sinon, l’initialisation du composant risque d’échouer.