Création d’un composant d’image DOM
Dernière mise à jour le
24 mai 2023
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éez une catégorie appelée « Mes composants ».
a. Créez un dossier appelé mycomponents sous le dossier <HTML 5Components> lors de la première exécution
b. Téléchargez le fichier myimage.zip joint et extrayez son contenu sous le
Dossier mycomponents.
Cliquez ici pour télécharger le fichier myImage.Zip.
c. Redémarrez Animate.
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.
(function($) {
// Enregistrer un composant avec le className : my.Image,
// et créez un prototype avec les remplacements suivants :
// getCreateOptions
// getCreateString
// getProperties
// getAttributes
$.anwidget(« my.Image », {
options : {
'visible' : true,
'position' : 'absolu'
},
_props : [« left », « top », « width », « height », « position », « transform-origin », « transform »],
_attrs : [« id », « src », « alt », « class », « border »],
// Renvoyer un ID unique avec l’image du préfixe
// _widgetID est un identifiant 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
// Sinon, le nom configuré par l’utilisateur est utilisé
getCreateOptions : function() {
return $.extend(this.options, { 'id' : « image » + _widgetID++ });
},
// Retourner la chaîne pour la création de l'élément DOM
// Pour l’image, il nous suffit de créer la balise <img>
getCreateString : function() {
return « <img> »;
},
// Ensemble de propriétés configurables
getProperties : function() {
return this._props ;
},
// Ensemble d’attributs configurables
getAttributes : function() {
return this._attrs ;
}
});
})(jQuery);
La valeur du champ « source » dans le fichier components.json est définie sur « src/myimage.js ».
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.
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.
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 nous souvenons de l'état attaché de l'élément sous-jacent, puis nous appelons l'API attach de la classe de base (à l'aide de 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.
Créez des animations interactives avec Animate
Animez des illustrations pour des dessins animés, des bannières, des jeux et des contenus web.
