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 CC) et 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 CC.

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

    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

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.

Remarque :

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.

Détails de la catégorie

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.

Valeur du champ d’icône

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($) {    

// Register a component with the className: my.Image,
	// and prototype with the following overrides 
	// getCreateOptions
	// getCreateString
	// getProperties
	// getAttributes
   	$.anwidget("my.Image", {
        	options: {
			'visible': true,
			'position': 'absolute'
        	},
		_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
		
_attrs: ["id", "src", "alt", "class", "border"],
		
// Return a unique ID with the prefix image
		// _widgetID is a global declared in anwidget
		// This id is used only if the user has not set any instance ID for the component in Animate CC
		// Otherwise the user configured name is used
		getCreateOptions: function() {
			return $.extend(this.options, { 'id': "image" + _widgetID++ });
		},
		
// Return the string for creating the DOM element
		// For image we just need to create the <img> tag
		getCreateString: function() {
			return "<img>";
		},
		
// Set of configurable properties
		getProperties: function() {
			return this._props;
		},
		
// Set of configurable attributes
		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 pour l’utiliser dans Animate CC. 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 CC 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

Structure du contenu extrait

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

components.js

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

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

  2. 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 CC de la même manière.

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

    Remarque :

    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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne