Creación de componentes personalizados: Ejemplos

Buscar

Última actualización el 28 dic. 2022

Animate

Abrir aplicación

Guía del usuario de Adobe Animate

Introducción a Animate

Animación

Interactividad

Espacio de trabajo y flujo de trabajo

Multimedia y vídeo

Plataformas

Exportación y publicación

Solución de problemas

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

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

Obtener archivo
Haga clic aquí para descargar el archivo myimage.zip.

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

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.

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

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.

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

// Registra un componente con className: my.Image,

// y el prototipo con los cambios siguientes

// 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"],

// Devuelve un ID exclusivo con la imagen de prefijo

// _widgetID es un elemento global declarado en anwidget

// Este ID solo se utiliza si el usuario no configuró ningún ID de instancia para el componente en Animate

// De lo contrario, se utiliza el nombre que configuró el usuario

getCreateOptions: function() {

return $.extend(this.options, { 'id': "image" + _widgetID++ });

// Devuelve la cadena necesaria para crear el elemento DOM

// Para la imagen, solo hay que crear la etiqueta <img>

getCreateString: function() {

return "<img>";

// Conjunto de propiedades configurables

getProperties: function() {

return this._props;

// Conjunto de atributos configurables

getAttributes: function() {

return this._attrs;

}

});

})(jQuery);

(function($) {    

// Registra un componente con className: my.Image,
 // y el prototipo con los cambios siguientes 
 // 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;],
  
// Devuelve un ID exclusivo con la imagen de prefijo
  // _widgetID es un elemento global declarado en anwidget
  // Este ID solo se utiliza si el usuario no configuró ningún ID de instancia para el componente en Animate
  // De lo contrario, se utiliza el nombre que configuró el usuario
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Devuelve la cadena necesaria para crear el elemento DOM
  // Para la imagen, solo hay que crear la etiqueta <img>
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Conjunto de propiedades configurables
  getProperties: function() {
   return this._props;
  },
  
// Conjunto de atributos configurables
  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. 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 , que es un widget de jQuery-UI. Descargue y extraiga el contenido del siguiente archivo y utilícelo como referencia.

Descargar

Obtener archivo

Haga clic aquí para descargar el archivo datepicker.zip.

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

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

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.
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 de la misma manera.
Actualización: Se anula la actualización y se aplican las propiedades css al contenedor div y los atributos al elemento DOM real.

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.

Más productos similares

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?