Utilice este artículo para entender un componente personalizado de HTML5 de muestra.

Este artículo describe cómo crear componentes personalizados. El primer ejemplo describe el componente de imagen (que también se suministra con Animate CC) y el proceso para entender el marco y los pasos involucrados en el desarrollo. El segundo ejemplo explica cómo insertar cualquier componente de la interfaz de usuario (UI, como jQueryUI) e importarlos en Animate CC.

  1. Creación de un componente de imagen de DOM

    Creación de una categoría denominada “Mis componentes”. 

    a. Cree una carpeta denominada miscomponentes en la carpeta <HTML5Components> al ejecutar la aplicación por primera vez.

    b. Descargue el archivo adjunto myimage.zip y extraiga el contenido en la

    carpeta miscomponentes.

    Descargar

    c. Reinicie Animate.

Estructura del directorio de la carpeta miscomponentes

Ahora debería poder ver una nueva categoría llamada “Mis componentes” en la carpeta de componentes y un nuevo componente denominado Mi imagen debajo. Puede arrastrarlo y soltarlo en el escenario, definir la propiedad de origen de la imagen y publicar la película para ver el componente personalizado en acción. 

Metadatos de componente: components.js

Components.js

Tenga en cuenta que la categoría está establecida en CATEGORY_MY_COMPONENTS. Los nombres de cada una de las propiedades también utilizan teclas similares. Esta es la tecla para la cadena localizada del nombre de la categoría. Si abre strings.json desde la carpeta local, verá las siguientes entradas.

Nota:

El error más común al editar este archivo es dejar una coma final innecesaria en el último elemento de la matriz.

Detalles de la categoría

El valor del campo de icono está establecido en Sp_Image_Sm. Si va a la carpeta de recursos, en ella verá los dos siguientes png con el prefijo Sp_Image_Sm.

Valor del campo icono

Estos son los iconos para interfaz de usuario clara y oscura.

El valor del campo 'origen' en components.json, está establecido en '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);

Puede seguir los comentarios del código para comprenderlo con facilidad. 

No dude en mirar el origen de los demás componentes que se proporcionan con Animate. En la mayoría de los casos, puede utilizar uno de ellos como punto de partida y luego configurarlo según sus propios requisitos.

Ajuste de un componente de jQuery-UI

Esta sección explica cómo ajustar un widget de jQuery-UI y utilizarlo en Animate CC. Los mismos conceptos se pueden utilizar para ajustar cualquier otro componente que se encuentre en otro marco de la interfaz de usuario.

Veamos el componente empaquetado del selector de fecha con Animate CC, que es un widget de jQuery-UI. Descargue y extraiga el contenido del siguiente archivo y utilícelo como referencia.

Descargar

Estructura del contenido extraído

La carpeta llamada jquery-ui-1.12.0 es el origen del marco de jQuery UI y contiene el widget DatePicker original y sus recursos, como imágenes y css, para ajustarlos y utilizarlos en Animate CC, al igual que cualquier otro componente de HTML5. Esto solo es necesario para la previsualización local; cuando se utiliza “Bibliotecas alojadas” en la configuración de publicación, existe la opción de utilizar una cdn para descargar los recursos dependientes. 

Components.js

Existen dos dependencias predeterminadas, jQuery y anwidget.js. Puesto que anwidget.js no se encuentra en CDN, no existe ninguna entrada de CDN para el mismo.

El siguiente conjunto de entradas es para los otros recursos necesarios para cargar el widget Datepicker de jQuery ui. Si se ajusta un widget de cualquier otra biblioteca, se puede especificar el conjunto de dependencias para el mismo de forma similar. Estas dependencias se descargan antes de que se inicialice el componente.

En la sección de propiedades, únicamente hemos expuesto una propiedad denominada etiqueta, que está vinculada a la propiedad de la etiqueta del componente selector de fecha. Del mismo modo, también se pueden mostrar las demás propiedades, lo que se desee que el usuario pueda configurar en el entorno de edición de Animate. En tiempo de ejecución, cada una de ellas estará disponible como un par clave-valor en el conjunto de options para la instancia. Se puede extraer el valor configurado y aplicarlo en tiempo de ejecución.

Archivo de origen principal: src/datepicker.js.

Secciones que difieren del ejemplo

  1. getCreateString:

    El widget Datepicker de jQuery-UI toma este elemento de introducción de texto y lo convierte en un elemento de selección de fecha en tiempo de ejecución. Por lo tanto, se inicializa el DOM en consecuencia.

  2. attach:

    Es necesario anular esta función para este widget. Siempre que se vincula un elemento al DOM, se llama a esta API. Sin embargo, debido a la forma en la que funciona el tiempo de ejecución subyacente (en este caso createjs), se puede llamar varias veces a esta API durante un mismo grupo de fotogramas.

    Se recuerda el estado asociado al elemento subyacente y, a continuación, se llama a la API adjunta de la clase base (mediante this._superApply(argumentos)). Si es la primera vez que se adjunta el elemento al DOM de elemento principal, se utiliza la llamada del widget jQuery-UI subyacente para convertir el DOM del componente a un selector de fecha. Consulte: https://jqueryui.com/datepicker/

    La mayor parte de los widgets de Javascript funcionan de manera similar. Se puede utilizar la misma técnica para ajustar cualquier componente elegido e importarlo en Animate CC de la misma manera.

  3. Actualización: Se anula la actualización y se aplican las propiedades css al contenedor div y los atributos al elemento DOM real.

    Nota:

    Cuando se anulan API como attach, detach o update, se debe evaluar la implementación predeterminada de la clase base y llamar a la implementación base en el momento adecuado. En caso contrario la inicialización del componente puede fallar.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea